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

Transcript

1 Θέκα: Οξγάλωζε ηνπ πεξηερνκέλνπ ζε ιίζηεο Ηκεξνκελία:... /... / 2017 Όλνκα καζεηή/ηξηαο:... Τκήκα:... Σηόρνη : Σην ηέινο ηνπ θύιινπ εξγαζίαο ζα πξέπεη λα κπνξείηε λα: 1. Φξεζηκνπνηείηε ιίζηεο γηα ηελ νξγάλσζε ηνπ πεξηερνκέλνπ ηεο ζειίδαο ζαο. 2. Εηζάγεκε εηθόλεο θαη λα ηηο κνξθνπνηείηε κε ηε βνήζεηα ελόο εζσηεξηθνύ δηαδνρηθνύ θύιινπ ζηπι. 3. Μνξθνπνηήζεηε ην πεξηερόκελν ηεο ζειίδαο ζαο κε νδεγίεο δηαδνρηθώλ θύιισλ ζηπι css, 4. Νέεο Εηηθέηηεο : 1. Δεκηνπξγία αξρείνπ HTML. Να αλνίμεηε ην πξόγξακκα notepad Να δεκηνπξγήζεηε έλα λέν αξρείν κε όλνκα ex06a.html θαη λα εηζάγεηε ζε απηό ηνλ θώδηθα HTML όπσο αθξηβώο θαίλεηαη ζηηο ζειίδεο 3 θαη Απνζεθεύζηε ην αξρείν κε όλνκα ex06a.html ζηνλ ίδην θάθειν. 4. Εκθαλίζηε ην αξρείν κε ηνλ θπιινκεηξεηή ζαο. 5. Θα πξέπεη λα κνηάδεη κε ηελ εηθόλα πνπ βξίζθεηαη ζην ηέινο ηνπ απηνύ ηνπ θεηκέλνπ θαη ζην αξρείν ex06a.pdf πνπ βξίζθεηαη ζηνλ ίδην θάθειν. 6. Επεμεγεκαηηθέο ζεκεηώζεηο: Σηηο γξακκέο ρξεζηκνπνηνύκε κεξηθέο από ηηο εηηθέηεο κεηαδεδνκέλσλ πνπ ζπλαληήζακε ζην θεθάιαην 3. Οη εηηθέηεο meta ησλ γξακκώλ απηώλ έρνπλ κία παξάκεηξν name, ζηελ νπνία νξίδεηαη ην όλνκα κηαο παξακέηξνπ κεηαδεδνκέλσλ θαη ηελ παξάκεηξν content, όπνπ νξίδεηαη ε ηηκή ηεο παξακέηξνπ κεηαδεδνκέλσλ. Έηζη παξέρνληαη πιεξνθνξίεο από ηελ ηζηνζειίδα καο πξνο θάζε ελδηαθεξόκελν κεραληζκό ηνπ παγθόζκηνπ ηζηνύ ζρεηηθά κε ην ζπγγξαθέα ηεο ηζηνζειίδαο (author), ηελ πεξηγξαθή ηνπ πεξηερνκέλνπ ηεο (description), ην ινγηζκηθό κε ην νπνίν δεκηνπξγήζεθε (generator) θαη θάπνηεο ιέμεηο θιεηδηά πνπ ζα βνεζήζνπλ ηηο κεραλέο αλαδήηεζεο λα ηελ εληνπίζνπλ. Σηηο γξακκέο ζπλαληνύκε ην ζηνηρείν style (εηηθέηεο <style> </style>). Εθεί νξίδνληαη νη θαλόλεο ηεο γιώζζαο CSS γηα ηε κνξθνπνίεζε ηνπ πεξηερνκέλνπ ηεο ηζηνζειίδαο. Κάζε ζύλνιν θαλόλσλ ραξαθηεξίδεηαη από έλαλ επηινγέα. επηινγέαο { } ηδηόηεηα1: ηηκή1; ηδηόηεηα2: ηηκή2;... ζύλνιν θαλόλωλ Αλ ν επηινγέαο κπνξεί λα είλαη κία εηηθέηα ηεο HTML, ηόηε όια ηα ζηνηρεία ηεο ηζηνζειίδαο πνπ μεθηλνύλ κε απηή ηελ εηηθέηα κνξθνπνηνύληαη ζύκθσλα κε ην ζύλνιν θαλόλσλ πνπ δειώλνληαη γηα απηό ηνλ επηινγέα. Απηή ε δπλαηόηεηα παξέρεη κεγάιε επειημία, θαζώο νξίδνληαο γηα παξάδεηγκα όηη νη επηθεθαιίδεο h1 ζέινπκε λα είλαη θεληξαξηζκέλεο, ηόηε θάζε επηθεθαιίδα απηνύ ηνπ ηύπνπ ζηελ ηζηνζειίδα καο θεληξάξεηαη, ρσξίο λα ρξεηάδεηαη λα ην δειώζνπκε ζε θάζε εηηθέηα <h1> ρσξηζηά. Έηζη ζε απηή ηελ ηζηνζειίδα επηιέγνπκε λα κνξθνπνηήζνπκε ην ζώκα ηεο ηζηνζειίδαο (body), ηηο επηθεθαιίδεο επηπέδνπ 1 (h1) θαη 2 (h2), ηηο εηθόλεο (img) θαη ηα ζηνηρεία πνπ αλήθνπλ ζε κε αξηζκεκέλεο ιίζηεο (ul li). Μπνξνύκε ινηπόλ όρη κόλν λα αλαθεξζνύκε γεληθά ζε θάπνηα ζηνηρεία, αιιά θαη ζε θάπνηα ζηνηρεία πνπ έρνπλ σο «γνλείο» άιια ζηνηρεία. Σην παξάδεηγκα απηό ρξεζηκνπνηνύκε κόλν επηινγείο κε νλόκαηα εηηθεηώλ, αιιά ππάξρνπλ, όπσο ζα δνύκε ζηα επόκελα παξαδείγκαηα, θαη άιινη ηξόπνη ώζηε λα επηιέγνπκε νκάδεο πεξηερνκέλνπ. Πξέπεη λα αλαθέξνπκε όηη ε ζπγθέληξσζε ησλ κνξθνπνηήζεσλ ζηελ θεθαιή ηεο ηζηνζειίδαο δελ απνθιείεη ηε ρξήζε ηεο Άριςτοσ Παςιάσ Σελίδα 1

2 παξακέηξνπ style ηνπηθά ζε θάπνηεο εηηθέηεο. Έηζη ην ζηνηρείν style ηνπ head νξίδεη ηνπο θαλόλεο πνπ ηζρύνπλ γηα όιν ην έγγξαθν, αιιά όπνπ ζέινπκε κπνξνύκε λα ρξεζηκνπνηήζνπκε ηε style σο παξάκεηξν γηα λα εθαξκόζνπκε ηδηαίηεξε κνξθνπνίεζε ζε θάπνηα ζηνηρεία. Οη λένη θαλόλεο CSS πνπ ζπλαληνύκε ζε απηό ην παξάδεηγκα αθνξνύλ ηηο εηθόλεο Καλόλαο height:80px; vertical-align:middle; ul li Πεξηγξαθή Ύςνο εηθόλαο ζηα 80 pixel. Αθνύ δελ νξίδνπκε θαη ην πιάηνο ηεο (width) ε εηθόλα ζα αιιάμεη κέγεζνο αλαινγηθά. Τν θείκελν ζα ζηνηρίδεηαη ζηε κέζε σο πξνο ην ύςνο ηεο εηθόλαο. Άιιεο επηινγέο είλαη: Top, Bottom Επηινγή κόλν ησλ ζηνηρείσλ li πνπ ππάξρνπλ κέζα ζε ζηνηρεία ul. Σηηο γξακκέο νξίδεηαη κία κε αξηζκεκέλε ιίζηα κε θνπθθίδεο. Οη εηηθέηεο <ul> </ul> ζεκαηνδνηνύλ ηελ αξρή θαη ην ηέινο ηεο ιίζηαο, ελώ θάζε ζηνηρείν ηεο επηζεκαίλεηαη από ηηο εηηθέηεο <li> </li>. Κάζε ζηνηρείν ηεο ιίζηαο έρεη κία εηθόλα πνπ εηζάγεηαη κε ηελ εηηθέηα img, ε νπνία έρεη δύν παξακέηξνπο, ην URL ζην νπνίν βξίζθεηαη ε εηθόλα, πνπ νξίδεηαη κε ηελ src, θαη έλα ελαιιαθηηθό θείκελν πνπ ζα εκθαληζηεί αλ γηα θάπνην ιόγν δελ κπνξεί λα εκθαληζηεί ε εηθόλα, πνπ νξίδεηαη κε ηελ εηηθέηα alt. Χξεηάδεηαη πξνζνρή ζηνλ νξηζκό ηεο δηαδξνκήο πνπ βξίζθεηαη ε εηθόλα. Αλ θαη ην URL κπνξεί λα παξαπέκπεη ζε νπνηαδήπνηε εηθόλα ζηνλ παγθόζκην ηζηό, θαιό είλαη λα έρνπκε απνζεθεπκέλεο ζηνλ ππνινγηζηή ή ην δηαθνκηζηή πνπ θηινμελεί ηηο ηζηνζειίδεο καο, ηηο εηθόλεο πνπ ζα εκθαλίδνληαη ζε απηέο. Είλαη επίζεο θαιή πξαθηηθή λα νξγαλώλνπκε ηηο εηθόλεο κηαο ηζηνζειίδαο ή ελόο ηζηνηόπνπ ζε ρωξηζηνύο θαθέινπο, ώζηε λα κε ρξεηάδνληαη πνιύπινθα URL γηα λα ηηο πξνζπειάζνπκε θαη λα κελ έρνπκε πξνβιήκαηα κεηά ηε κεηαθνξά ελόο ηζηνηόπνπ από ηνλ ππνινγηζηή αλάπηπμεο ζηνλ εμππεξεηεηή πνπ ζα ηνλ θηινμελεί κόληκα. Καιό είλαη λα νξίδεηαη πάληνηε ε alt, ώζηε λα ππάξρεη πάληα πιεξνθόξεζε γηα ην πεξηερόκελν ηεο εηθόλαο, αλ θάηη δελ πάεη θαιά. Επηπιένλ πξέπεη λα ζεβόκαζηε ηνπο θαλόλεο πξνζβαζηκόηεηαο ηνπ πεξηερνκέλνπ. Υπάξρεη ινηπόλ πεξίπησζε λα επηζθεθζεί ηελ ηζηνζειίδα καο θάπνην άηνκν κε πξνβιήκαηα όξαζεο πνπ ρξεζηκνπνηεί αλαγλώζηε νζόλεο. Αλ έρνπκε νξίζεη ζηελ παξάκεηξν alt ηελ πεξηγξαθή ηεο εηθόλαο, ην ινγηζκηθό αλάγλσζεο ζα ηνπ ηε δηαβάζεη θαη έηζη ελώ δελ κπνξεί ίζσο λα δεη θαζαξά ή θαζόινπ ηελ εηθόλα, ζα θαηαιάβεη ηη αθνξά απηή. Οη γξακκέο αλαθέξνληαη ζε κηα αξηζκεκέλε ιίζηα. Καη ζε απηή ηελ πεξίπησζε θάζε ζηνηρείν ηεο ιίζηαο ραξαθηεξίδεηαη από ηηο εηηθέηεο <li> </li> ώζηε λα ζεσξεζεί ελόηεηα πεξηερνκέλνπ θαη λα ιάβεη απηόκαηα ηελ αξίζκεζή ηνπ. Ο θώδηθαο ηεο ηζηνζειίδαο ηειεηώλεη κε κηα ιίζηα νξηζκώλ ζηηο γξακκέο Η ιίζηα νξηζκώλ ραξαθηεξίδεηαη από ηηο εηηθέηεο <dl> </dl> νη νπνίεο πεξηθιείνπλ δεύγε ησλ ζηνηρείσλ dt, dd. Τν ζηνηρείν dt έρεη ζθνπό λα εκθαλίδεη έλαλ όξν, ελώ ην ζηνηρείν dd, ηελ εμήγεζή ηνπ. Άριςτοσ Παςιάσ Σελίδα 2

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

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

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