Η Γλώςςα κωδικοποίηςησ HTML

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Η Γλώςςα κωδικοποίηςησ HTML"

Γιάννη Δοξαράς
5 χρόνια πριν
Προβολές:

1 Θέκα: Διαγώνισμα Ηκεξνκελία:... /... / 2018 Όλνκα καζεηή/ηξηαο:... Τκήκα: ΘΗΨ1 1. Να γξάςεηε πην θάησ ηηο απαξαίηεηεο εληνιέο γηα ηε δεκηνπξγία ηνπ ζθειεηνύ κηαο ηζηνζειίδαο (2 κνλ.) 2. Πνηέο ηζηνζειίδεο ραξαθηεξίδνληαη σο «Σηαηηθέο» θαη πνηεο ραξαθηεξίδνληαη σο «Δπλακηθέο» ηζηνζειίδεο; Να αλαθέξεηε έλα παξάδεηγκα Σηαηηθήο θαη έλα Δπλακηθήο ηζηνζειίδαο. (2 κνλ.) 3. Να γξάςεηε ην πην θάησ αληηθείκελν όπσο ζα ην εκθαλίζεη ην πξόγξακκα πεξηήγεζεο ηζηνύ (Browser) (3 κνλ.) Η ευτυχία είναι πράγμα απλό και λιτοδίαιτο, ένα ποτήρι κρασί, ένα κάστανο, ένα φτωχικό μαγκαλάκι, η βουή της θάλασσας. τίποτα άλλο. <hr> νικοσ ΚΑΖΑΝΤΖΑΚΗΣ Συγγραφέας, Γεννήθηκε στη Κρήτη στο τέλος του 20ουαιώνα.<hr> Άριςτοσ Παςιάσ Σελίδα 1

2 4. Πην θάησ βιέπεηε έλα κηθξό απόζπαζκα από ηνλ θώδηθα HTML κηαο ηζηνζειίδαο. Να ηνλ δηαβάζεηε πξνζεθηηθά θαη λα απαληήζεηε ηηο εξσηήζεηο πνπ αθνινπζνύλ. (2 Μνλ.) <Η2 style="font-family:courier; font-size:120%; background-color:lightgreen; border:1px solid black; display: inline-block"> Έλαο ηξειόο επηζηήκνλαο </H2> 1. Πνηα είλαη ε ζεκαζία ηεο εηηθέηαο <Η2> </Η2>; 2. Σε ηη ρξώκα εκθαλίδνληαη ηα γξάκκαηα; 3. Πνην είλαη ην κέγεζνο ησλ γξακκάησλ; 4. Πνην είλαη ην ρξώκα ηνπ ππόβαζξνπ; 5. Πνην είλαη ην ρξώκα ηνπ πεξηζσξίνπ; 6. Πνην είλαη ην θείκελν πνπ εκθαλίδεηαη; 7. Πνηα γξακκαηνζεηξά ρξεζηκνπνηείηαη; 8. Σε ηη ρξεζηκεύεη ε εληνιή : inline-block; Άριςτοσ Παςιάσ Σελίδα 2

5. Να δεκηνπξγήζεηε έλα αξρείν HTML ην νπνίν λα πεξηέρεη ηνλ απαξαίηεην θώδηθα γηα ηε δεκηνπξγία ηεο ηζηνζειίδαο πνπ θαίλεηαη ζηε πην θάησ εηθόλα θαη λα ην απνζεθεύζεηε ζην USB ζαο κε όλνκα TestEx5.

3 5. Να δεκηνπξγήζεηε έλα αξρείν HTML ην νπνίν λα πεξηέρεη ηνλ απαξαίηεην θώδηθα γηα ηε δεκηνπξγία ηεο ηζηνζειίδαο πνπ θαίλεηαη ζηε πην θάησ εηθόλα θαη λα ην απνζεθεύζεηε ζην USB ζαο κε όλνκα TestEx5.html. (3 κνλ.) 6. Σην USB ζαο ζα βξείηε ην αξρείν TestEx6.html ην νπνίν δεκηνπξγήζεθε γηα λα εκθαλίδεη ηελ πην θάησ ηζηνζειίδα. Να βξείηε θαη λα δηνξζώζεηε ηα ιάζε πνπ ππάξρνπλ ζηνλ θώδηθα. (4 κνλ.) 7. Να θάλεηε ηηο απαξαίηεηεο αιιαγέο ζην αξρείν TestEx7.html πνπ ζα βξείηε ζην USB ζαο ώζηε λα δεκηνπξγήζεηε ηελ ηζηνζειίδα όπσο εηθνλίδεηαη ζην αξρείν TestEx7.pdf (4 κνλ.) Άριςτοσ Παςιάσ Σελίδα 3

4 Άριςτοσ Παςιάσ Σελίδα 4

5 Σπλνπηηθόο Πίλαθαο ρξήζηκσλ εληνιώλ HTML Εντολή Περιγραυή <!... --> Σρόιην <html>... </html> Αληηθείκελν HTML <body>... </body> Κπξίσο ζώκα ηζηνζειίδαο <head>... </head> Κεθαιή Θζηνζειίδαο <title>... </title> Τίηινο Θζηνζειίδαο ... Παξάγξαθνο <article>...</article> Άξζξν &...; Οληόηεηα Αιιαγή Γξακκήο ... Έληνλε γξαθή ... Μηθξά γξάκκαηα <abbr>... </abbr> Ταπειάθη ... Μαξθάξηζκα θεηκέλνπ ... Υπνγξάκκηζε θεηκέλνπ ... Bold ... Italics <hr> Οξηδόληηα γξακκή ... Έκθαζε ζην θείκελν ... Subscript - Δείθηεο ... Superscript - Εθζέηεο <cite>... </cite> Αλαθνξά ζε πεγή <q>... </q> Απόζπαζκα από πεγή <del>... </del> Δηαγξακέλν θείκελν <samp>... </samp> <code>... </code> Δηαηήξεζε κνξθνπνίεζεο <pre>... </pre> <meta παράμετρος="τιμή"> Εηζαγσγή κεηαδεδνκέλσλ <h1>... </h1>,h2 Επηθεθαιίδα ηύπνπ 1, 2,... <datetime>...<datetime> Ηκεξνκελία, ώξα Παράμετρος title Tool Tip - Τακπειάθη Παράμετρος style πχ <h2 style="color:blue; backgroundcolor:yellow"> Μνξθνπνίζε θεηκέλνπ Άριςτοσ Παςιάσ Σελίδα 5

6 Καλόλεο κνξθνπνίεζεο ζηελ HTML Κανόνας text-align:center; color:white; background-color:blue; font-family:courier; font-size:120%; border:1px solid black; display:inline-block; Περιγραυή Σηνίρηζε ηνπ θεηκέλνπ ζην θέληξν. Είλαη επίζεο εθηθηή ε ζηνίρηζε αξηζηεξά (left), δεμηά (right) θαη πιήξσο (justified). Λεπθό ρξώκα ησλ ραξαθηήξσλ. Οη ηηκέο ησλ ρξσκάησλ κπνξνύλ λα απνδνζνύλ κε ηξεηο ηξόπνπο: α) Ολνκαζηηθά (π.ρ. green, red, lightgreen, coral, θ.ιπ.). β) Με ηε δεθαδηθή ηηκή ηνπο σο rgb(x,y,z), όπνπ x κηα δεθαδηθή ηηκή από 0 έσο 255 πνπ αληηζηνηρεί ζην θόθθηλν ρξώκα, όπνπ y κηα δεθαδηθή ηηκή από 0 έσο 255 πνπ αληηζηνηρεί ζην πξάζηλν ρξώκα θαη z κηα δεθαδηθή ηηκή από 0 έσο 255 πνπ αληηζηνηρεί ζην κπιε ρξώκα (π.ρ. rgb(255,0,0) γηα ην έληνλν θόθθηλν, rgb(0,255,0) γηα ην έληνλν πξάζηλν, rgb(255,255,0) γηα έληνλν θίηξηλν, rgb(255,127,80) γηα ην θνξαιιί, θ.ιπ.). γ) Με ηε δεθαεμαδηθή ηηκή ηνπο σο #ΦΦΥΥΖΖ, όπνπ ΦΦ κηα δεθαεμαδηθή ηηκή από 00 έσο FF πνπ αληηζηνηρεί ζην θόθθηλν ρξώκα, όπνπ ΥΥ κηα δεθαεμαδηθή ηηκή από 00 έσο FF πνπ αληηζηνηρεί ζην πξάζηλν ρξώκα θαη ΖΖ κηα δεθαεμαδηθή ηηκή από 00 έσο FF πνπ αληηζηνηρεί ζην κπιε ρξώκα (π.ρ. #FF0000 γηα ην έληνλν θόθθηλν, #0000FF γηα ην έληνλν κπιε, #FF7F50 γηα ην θνξαιιί, θ.ιπ.). Οη πηζαλνί ζπλδπαζκνί ρξσκάησλ είλαη ,7 εθαηνκκύξηα ρξώκαηα. Μπιε ρξώκα ηνπ ππνβάζξνπ (θόληνπ) ησλ ραξαθηήξσλ. Επηινγή γξακκαηνζεηξάο ηεο νηθνγέλεηαο Courier. Οη γξακκαηνζεηξέο κπνξνύλ εθηόο από νλνκαζηηθά, λα επηιεγνύλ θαη θαηά νηθνγέλεηα ή θαηεγνξία (π.ρ. serif, sansserif, monospace). Τν κέγεζνο ησλ ραξαθηήξσλ ζην 120% ηνπ ηππηθνύ κεγέζνπο ραξαθηήξσλ. Τν ηππηθό κέγεζνο ελόο ραξαθηήξα ζε κηα παξάγξαθν είλαη 16px, δειαδή 16 pixel (εηθνλνζηνηρεία). Τν 120% αθνξά ην αληίζηνηρν πνζνζηό ησλ 16 pixel θαη αληηζηνηρεί ζε 19px. Υπάξρεη θαη ε κνλάδα κέηξεζεο em κε 1em λα αληηζηνηρεί ζην ηππηθό κέγεζνο ελόο ραξαθηήξα. Έηζη 1em = 16px = 100%. Σην παξάδεηγκά καο 1.2em = 19px = 120%. Η ελόηεηα θεηκέλνπ ζα έρεη πεξίγξακκα ζπκπαγνύο καύξεο γξακκήο, πάρνπο 1px. Άιιεο κνξθέο πεξηγξάκκαηνο είλαη νη dashed, ridge, dotted, θ.ιπ. Η ελόηεηα θεηκέλνπ ζα εκθαληζηεί σο έλα κπινθ ην νπνίν ζα πεξηνξηζηεί ζην πιάηνο ηνπ πεξηερνκέλνπ ηνπ, επηηξέπνληαο ζε άιιεο ελόηεηεο λα ζηαζνύλ δίπια ηεο. Άριςτοσ Παςιάσ Σελίδα 6

Σχετικά έγγραφα

Η Γλώςςα κωδικοποίηςησ HTML Φύλλο Εργαςίασ 5

Η Γλώςςα κωδικοποίηςησ HTML Φύλλο Εργαςίασ 5 Θέκα: Εκθάληζε κε ζηπι (Style) Ζκεξνκελία:... /... /. Όλνκα καζεηή/ηξηαο:... Τκήκα:... Σηόρνη : Σην ηέινο ηνπ θύιινπ εξγαζίαο ζα πξέπεη λα κπνξείηε λα: 1. Μνξθνπνηήζεηε ην πεξηερόκελν ηεο ζειίδαο ζαο κε