Θέκα: Εκθάληζε κε ζηπι (Style) Ζκεξνκελία:... /... /. Όλνκα καζεηή/ηξηαο:... Τκήκα:... Σηόρνη : Σην ηέινο ηνπ θύιινπ εξγαζίαο ζα πξέπεη λα κπνξείηε λα: 1. Μνξθνπνηήζεηε ην πεξηερόκελν ηεο ζειίδαο ζαο κε νδεγίεο δηαδνρηθώλ θύιιωλ ζηπι css, νη νπνίεο εθαξκόδνληαη κε ηε βνήζεηα ηεο παξακέηξνπ style ζε θάζε εηηθέηα πνπ ζέινπκε. 2. Νέεο Δηηθέηεο : Παξάκεηξνο Style, <sub>, <sup> 1. Δεκηνπξγία αξρείνπ HTML - Σηνλ ππνθάθειν HTML πνπ βξίζθεηαη ζηνλ θάθειν ζαο, λα δεκηνπξγήζεηε έλα λέν αξρείν θεηκέλνπ. Πιεθηξνινγήζηε ην θείκελν όπσο αθξηβώο θαίλεηαη ζηηο ζειίδεο 3 αθη 4. 2. Απνζεθεύζηε ην αξρείν κε όλνκα ex05a.html. Μελ μεράζεηε λα επηιέμεηε ην ζσζηό encoding (UTF-8) 3. Εκθαλίζηε ην αξρείν κε ηνλ θπιινκεηξεηή ζαο. 4. Θα πξέπεη λα κνηάδεη κε ηελ επόκελε εηθόλα. 5. Να απνζεθεύζεηε ην αξρείν ex05a.html κε ην όλνκα ex05b.html θαη λα ηξνπνπνηήζεηε ηα πεξηερόκελα ηνπ λένπ αξρείνπ ώζηε λα εκθαλίδεη ζην παξάζπξν ηνπ θπινκεηξεηή ηελ εηθόλα πνπ ζα βξείηε ζην αξρείν ex05bsample.pdf 6. Επεμεγεκαηηθέο ζεκεηώζεηο: Ξεθηλνύκε κε ηηο εηηθέηεο <sup> θαη <sub> ζηηο γξακκέο 11 θαη 12. Απηέο πξνθαινύλ «1» θαη ην «0» λα γξαθνύλ σο δείθηεο θαη σο εθζέηεο αληίζηνηρα, κε απνηέιεζκα λα έρνπκε ην θείκελν «ΘΖΧ 1» θαη «1 ν». Άριςτοσ Παςιάσ Σελίδα 1
Σηηο γξακκέο 30-39 παξαηεξνύκε όηη ρξεζηκνπνηνύκε ην ζύκβνιν ηνπ κηθξόηεξνπ (<) κε ηε κνξθή νληόηεηαο (<). Απηό είλαη έλα ηξηθ γηα λα εκθαληζηνύλ νη εηηθέηεο HTML σο θώδηθαο γηα ην παξάδεηγκα ηεο ηζηνζειίδαο, αιιά θαη λα κε δηαηαξαρζεί ε ζπλέρεηα ηνπ θώδηθα ηεο ηζηνζειίδαο καο. Απηό ζπκβαίλεη δηόηη ν δηεξκελέαο HTML ηνπ θπιινκεηξεηή αληηιακβάλεηαη ηηο εηηθέηεο HTML όπνπ ηηο εληνπίζεη ζην αξρείν ηεο ηζηνζειίδαο, επηζεκαίλνληαο ή κνξθνπνηώληαο θαηάιιεια ην πεξηερόκελό ηεο. Αλ γηα παξάδεηγκα ζηε γξακκή 39 γξάθακε </html> αληί γηα </html> ηόηε δελ ζα εκθαληδόηαλ ην θείκελν </html> ζην πεξηερόκελν θαη επηπιένλ πηζαλώο λα ζεσξνύζε ν δηεξκελεπηήο HTML όηη ζην ζεκείν ηειεηώλεη ν θώδηθαο ηεο ηζηνζειίδαο, αγλνώληαο ηνλ ππόινηπν θώδηθα. Τόζν ζηε γξακκή 11, όζν θαη ζε επόκελεο, παξαηεξνύκε ηελ ύπαξμε ηεο παξακέηξνπ style ζε δηάθνξεο εηηθέηεο. Ζ παξάκεηξνο απηή καο επηηξέπεη λα εθαξκόζνπκε ζηα αληίζηνηρα ζηνηρεία κνξθνπνίεζε ζύκθσλα κε ηνπο θαλόλεο ησλ δηαδνρηθώλ θύιισλ ζηπι. Απηόο ν ηξόπνο κνξθνπνίεζεο είλαη ε ζύγρξνλε ηάζε ζηε ζπληξηπηηθή πιεηνςεθία ησλ ηζηνηόπσλ. Ζ εθαξκνγή κνξθνπνίεζεο CSS επηηξέπεη λα εθαξκόζνπκε πνιππινθόηεξεο κνξθνπνηήζεηο ζην πεξηερόκελν από απηέο πνπ ππνζηεξίδεη ε HTML, ελώ, όπσο ζα δνύκε θαη ζε επόκελα παξαδείγκαηα, επηηξέπεη ην δηαρσξηζκό ηνπ πεξηερνκέλνπ από ηε κνξθή ηνπ. Έηζη κπνξνύκε λα ρξεζηκνπνηνύκε ηελ HTML γηα ηελ πεξηγξαθή θαη επηζήκαλζε ηνπ πεξηερνκέλνπ θαη ηε γιώζζα CSS γηα ηελ απόδνζε ηεο εκθάληζεο ηνπ ζην παξάζπξν ηνπ θπιινκεηξεηή. Ψο ηηκή ζηελ παξάκεηξν style δίλνπκε έλαλ ή πεξηζζόηεξνπο θαλόλεο (rule) κνξθνπνίεζεο ηεο γιώζζαο CSS. Κάζε θαλόλαο ζπληάζζεηαη σο εμήο: Έηζη ε θάζε style ζα έρεη ηε κνξθή: ηδηόηεηα: ηηκή; Καλόλαο style = ηδηόηεηα1: ηηκή1; ηδηόηεηα2: ηηκή2;... ζύλνιν θαλόλωλ Ζ ζεηξά ησλ θαλόλσλ κέζα ζηε style δελ έρεη ζεκαζία. Δίλαη ζεκαληηθό θάζε θαλόλαο λα ηειεηώλεη κε έλα εξσηεκαηηθό (;) (ραξαθηήξαο colon). Γελ πεηξάδεη αλ ν ηειεπηαίνο θαλόλαο δελ ηειεηώλεη ζε εξσηεκαηηθό, θαζώο εθεί ηεξκαηίδεη θαη ε ζπκβνινζεηξά πνπ απνηειεί ηελ παξάκεηξν ηεο style. Τνλίδεηαη όηη ε θάζε εηηθέηα style επεξεάδεη ηε κνξθνπνίεζε ηνπ ζηνηρείνπ ζην νπνίν γξάθεηαη. Έηζη ζε δηαθνξεηηθέο εηηθέηεο έλαξμεο κπνξνύκε λα έρνπκε δηαθνξεηηθέο κνξθνπνηήζεηο. Βέβαηα νη κνξθνπνηήζεηο CSS ρσξίδνληαη ζε θαηεγνξίεο, θαζώο θάζε είδνο πεξηερνκέλνπ έρεη ηηο δηθέο ηνπ ηδηόηεηεο. Έηζη, θάπνηεο ηδηόηεηεο αθνξνύλ ηνπο ραξαθηήξεο ηνπ θεηκέλνπ, άιιεο ηηο ελόηεηεο θεηκέλνπ, όπσο νη επηθεθαιίδεο θαη νη παξάγξαθνη, δηαθνξεηηθέο ηδηόηεηεο ηηο εηθόλεο, ηνπο πίλαθεο, θ.ν.θ. Σηε ζπλέρεηα παξνπζηάδνληαη νη θαλόλεο CSS πνπ εκθαλίδνληαη ζην ζπγθεθξηκέλν παξάδεηγκα, καδί κε κηα ζύληνκε εμήγεζε θαη θάπνηα ζρόιηα. Δθηελή αλαθνξά ζηε γιώζζα κνξθνπνίεζεο CSS κπνξνύκε λα βξνύκε ζηνλ ηζηόηνπν ηνπ World Wide Web Consortium (W3C) (http://www.w3.org/tr/css/). Άριςτοσ Παςιάσ Σελίδα 2
Καλόλαο 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 γηα ην θνξαιιί, θ.ιπ.). Οη πηζαλνί ζπλδπαζκνί ρξσκάησλ είλαη 2563 16,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, θ.ιπ. Ζ ελόηεηα θεηκέλνπ ζα εκθαληζηεί σο έλα κπινθ ην νπνίν ζα πεξηνξηζηεί ζην πιάηνο ηνπ πεξηερνκέλνπ ηνπ, επηηξέπνληαο ζε άιιεο ελόηεηεο λα ζηαζνύλ δίπια ηεο. Χρήσιμη επισήμανση: Σηε γιώζζα HTML ηα ζηνηρεία ηνπ πεξηερνκέλνπ ρσξίδνληαη ζε δύν κεγάιεο θαηεγνξίεο, σο πξνο ηνλ ηξόπν εκθάληζήο ηνπο, ηνλ ηξόπν δειαδή κε ηνλ νπνίν «γεκίδνπλ» ην παξάζπξν ηνπ θπιινκεηξεηή. Η πξώηε θαηεγνξία είλαη ηα ζηνηρεία πνπ ηνπνζεηνύληαη ζηε ζεηξά ηνπ θεηκέλνπ (inline). Απηά αθνινπζνύλ ηε ξνή ηνπ θεηκέλνπ, δίρσο λα πξνθαινύλ ηελ αιιαγή παξαγξάθνπ. Έρνπκε ζπλαληήζεη αξθεηά ζηνηρεία απηνύ ηνπ ηύπνπ ζηα παξαδείγκαηά καο. Παξαδείγκαηα απνηεινύλ νη ραξαθηήξεο ηνπ θεηκέλνπ, νη νληόηεηεο (π.ρ. ), νη εηηθέηεο small, Άριςτοσ Παςιάσ Σελίδα 3
br, mark, em, strong, small, b, i, u, code, small, samp, cite, q, sub, sup, θ.α. Η δεύηεξε θαηεγνξία είλαη ηα ζηνηρεία πνπ ηνπνζεηνύληαη ζε κηα λέα παξάγξαθν θαη απνηεινύλ κηα εληαία ελόηεηα, έλα κπινθ πεξηερνκέλνπ. Τα ζηνηρεία ηύπνπ κπινθ ηείλνπλ λα θαηαιακβάλνπλ όιν ην πιάηνο ηεο ηζηνζειίδαο γηα ηελ πεξηνρή πνπ θαιύπηεη ην ύςνο ηνπο. Με άιια ιόγηα «πξνζπαζνύλ» ώζηε λα κελ ππάξρεη άιιν πεξηερόκελν αξηζηεξά ή δεμηά ηνπο. Παξαδείγκαηα απνηεινύλ νη εηηθέηεο p, h1, h2, h3, hr, pre, article, header, footer, blockquote, θ.α. Επηζεκαίλνπκε όηη ε εηηθέηα br αλήθεη ζηελ πξώηε θαηεγνξία, θαζώο απιά πξνθαιεί ηελ αιιαγή γξακκήο ζηελ ηξέρνπζα ελόηεηα δίρσο λα εηζάγεη λέα ελόηεηα. Το μοντέλο πλαισίου (box model) του περιεχομένου Τα ζηνηρεία ηεο HTML εκθαλίδνληαη κέζα ζε έλα λνεηό πιαίζην, έλα θνπηί πνπ έρεη ηηο δηθέο ηνπ ηδηόηεηεο. Οη ηδηόηεηεο θαζνξίδνληαη από ην αληίζηνηρν κνληέιν πιαηζίνπ (box model) (Δηθόλα 10). Τν πιενλέθηεκα ηεο ρξήζεο CSS είλαη όηη κπνξνύκε λα αιιάμνπκε ηε κνξθνπνίεζε απηνύ ηνπ πιαηζίνπ γηα θάζε ζηνηρείν ηνπ πεξηερνκέλνπ. Δπίζεο κπνξνύκε λα εκθαλίζνπκε ηα ζηνηρεία ηύπνπ ζεηξάο σο ζηνηρεία ηύπνπ κπινθ θαη αληίζηξνθα. Άριςτοσ Παςιάσ Σελίδα 4
Άριςτοσ Παςιάσ Σελίδα 5