KEF11_Εφαρμογές Πληροφορικής 2014.pdf
10
93 Εισαγωγή στην HTML ΚΕΦΑΛΑΙΟ 11 Α΄ Γενικού Λυκείου Εισαγωγή στην HTML Διδακτικές ενότητες 11.1 Γενική εισαγωγή στην HTML 11.2 Η HTML5 11.3 Ενσωμάτωση (Embedding) 11.4 Καθορίζοντας την εμφάνιση – CSS Διδακτικοί στόχοι Σκοπός του κεφαλαίου είναι οι μαθητές να κατανοήσουν την έννοια της HTML ως δομικού στοιχείου του Παγκόσμιου Ιστού. Οι μαθητές πρέπει να είναι σε θέση: √ να αναγνωρίζουν τη δομή ενός εγγράφου HTML και να επεξεργάζονται ετικέτες. √ να ανακαλύψουν τα οφέλη του διαχωρισμού δομής και περιεχομένου ενός εγγράφου HTML από την εμφάνισή του. √ να εφαρμόζουν στυλ εμφάνισης (CSS) σε έγγραφα HTML. √ να ενσωματώνουν κώδικα HTML από ιστοσελίδες και να τον προσαρμόζουν. Ερωτήματα √ Γνωρίζετε τι είναι HTML; √ Ξέρετε ότι μία ιστοσελίδα HTML μπορεί να εμφανιστεί τελείως διαφορετικά, αν αλλάξετε μόνο μία γραμμή του κώδικα HTML της; √ Ένα έγγραφο HTML έχει δομή και σημασιολογία. Ξέρετε τι σημαίνουν αυτά; √ Γνωρίζετε ότι μπορείτε εκτός από το να αναρτήσετε βίντεο από το youtube να το εμφανίσε- τε στο προσωπικό σας ιστολόγιο και σε πάρα πολλές άλλες ιστοσελίδες; Βασική ορολογία HTML, SGML, ετικέτες, σύνδεσμοι, HREF, HTML5, CSS, ενσωμάτωση Εισαγωγή Το παρόν κεφάλαιο πραγματεύεται την έννοια της HTML ως αναπόσπαστου κομματιού του Παγκόσμιου Ιστού. Παρουσιάζει τα βασικά δομικά στοιχεία της γλώσσας, δηλαδή τις βασικές ετικέτες, και παρουσιάζει την HTML5 που αποτελεί την τελευταία εξέλιξη της γλώσσας HTML με έμφαση σε νέες τεχνολογίες και δομή. Μαζί με το πρότυπο CSS μπορούμε να δημιουργήσου- με σελίδες εξειδικευμένες στις προτιμήσεις μας τις οποίες μπορούμε να εμπλουτίσουμε με κώδι- κα HTML που θα εμφανίζει περιεχόμενο από άλλες πηγές. ΚΕΦΑΛΑΙΟ 11
-
Upload
kiriakougr -
Category
Documents
-
view
25 -
download
1
Transcript of KEF11_Εφαρμογές Πληροφορικής 2014.pdf
-
93 HTML 11
HTML
11.1 HTML 11.2 HTML511.3 (Embedding)11.4 CSS
HTML .
:
HTML . HTML
. (CSS) HTML. HTML .
HTML; HTML ,
HTML ; HTML . ; youtube -
;
HTML, SGML, , , HREF, HTML5, CSS,
HTML . , , HTML5 HTML . CSS - - HTML .
11
-
3
94
11.1 HTML
HTML
HTML HyperText Markup Language, - SGML, Standard Generalized Markup Language, - - .
HTML , -. O Web , (titles), (headings), (paragraphs), (lists) (tables). < >, - (tags).
, - HTML . , HTML, -, .
1990 Tim Berners-Lee CERN, , - , - . - HTTP (HyperText Transfer Protocol) (World Wide Web) . , , HTML. 1994 HTML 2.0 (Internet Engineering Task Forse). H , 3.0, Microsoft Netscape, 1996 3.2 W3C, . , tags, . 4.0 - 1999 W3C. , HTML, HTML HTML+, HTML 2, HTML 3.2 HTML 4, - - .
- L;
- Internet - HTML. , html, , - web site.
11.1. Tim Berners-Lee, HTML -
-
95 HTML 11
HTML :
. HTML, ,
, - ().
HTML -, , , . ..:
HTML . - , - .
-
HTML, , - < >. .. - .
... .... -
. .
... .
... .... . . -image-
, , ..
... URL.
test.html () ():
... ...
HTML
, ASCII, - Windows, Geany Linux, .html .htm.
-
3
96
(headings) - . HTML 6 , :
(1 6). , , - .
HTML . - - :
(Links)
HTML , (anchor). (anchor tag), , . (tag) :
HREF (Hypertext REFerence, --) . ( ) - , () .
GIF JPEG, - . - (image),
,
- .
, ...
....
HTML
, , -, -. , - -, . , - .
-
97 HTML 11
, , - SRC (source). SRC URL , .
, image.gif, , - (tag):
HTMLhttp://www.codecademy.com/learn
-
1. W3C http://www.w3c.gr - HTML.
2. - HTML .
3. 10 HTML .
4. HTML , (link).
11.2 HTML5
HTML5 HTML . - . HTML5 - , , (plug-ins) -. :
- , header, section, article nav.
, audio video .
(canvas), (drag-and-drop), - (web storage) (offline web applications).
( -, , ) - - SVG.
- - . -.
SVG -. .
-
3
98
HTML5 , -. video , - -.
:
src
width height -
controls
video , .
audio!
: (mp3
ogg),
-
( audio!) - - .
.
11.2 HTML , . , - . - . :
11.1. HTML5 ;
section , -
article , -
header -
footer
nav
-
99 HTML 11
...
2
2
.
...
|
11.2. - HTML
(header) (nav).
(footer) (nav)
(article) - , - (section) .
(article) , .
HTML - , ( 11.1).
HTML5
HTML5 . - Javascript - . , - HTML5 , - . CSS - - (responsive web design).
-
HTML4. - - - . , - (div) HTML4 .
...
...
2 2
...
|
-
3
100
11.3 (Embedding)
HTML -. - .
youtube. iframe , - . (420x315) iframe, width height, src - .
, .
E -
1. https://el.khanacademy.org/ . HTML5;
2. . http://www.weebly.com/ . . .
iframe, . div Javascript.
, -. HTML .
11.4 CSS
CSS, Cascading Style Sheets ( ), HTML. - HTML.
HTML. - HTML -
-
101 HTML 11
. HTML HTML, .
CSS .css HTML :
link, head ( )
HTML style h1 { color: red; }
CSS ( ) - ; :.
P { color: green; border-bottom: 1px solid black; padding: 10px; }
(P) -, 1 pixel 10 px .
HTML ( P, H1, div) . ( class ) , - ( id ) -. :
P#title { color: red; font-size: 20px; }
, - title, 20pixel.
P.orismos { padding-left: 20px; border-left: 2px; }
, orismos 20pixel 2pixel.
csszengarden.com, , - HTML . HTML CSS. . .
-
3
102
, - .
color background font-size text-align font-weight border margin padding width
HTML
HTML HTML ; HTML CSS . - . - , Notepad++. .
, HTML. .
, - HTML CSS, . jsfiddle (http://jsfiddle.net), codepen (http://codepen.io), dabblet (http://dabblet.com) cssdesk (http://cssdesk.com). codepen. - HTML, CSS. - , HTML CSS.
E -
1. http://maps.bing.com . - .
2. -. issuu.com slideshare.com . . - .
