Περιεχόμενα με μια ματιά

Περιεχόμενα με μια ματιά Ευχαριστίες... 6 Εισαγωγή... 17 Κεφάλαιο 1 Τα δομικά στοιχεία των ιστοσελίδων... 27 Κεφάλαιο 2 Εργασία με αρχεία ιστοσελίδων... 51 Κεφάλαιο 3 Η βασική δομή της HTML... 67 Κεφάλαιο 4 Κείμενο... 125 Κεφάλαιο 5 Εικόνες... 173 Κεφάλαιο 6 Σύνδεσμοι... 191 Κεφάλαιο 7 Τα θεμέλια της CSS... 205 Κεφάλαιο 8 Εργασία με φύλλα στυλ... 223 Κεφάλαιο 9 Ορισμός επιλογέων... 239 Κεφάλαιο 10 Μορφοποίηση κειμένου με στυλ... 267 Κεφάλαιο 11 ιάταξη σελίδων με στυλ... 301 Κεφάλαιο 12 Φύλλα στυλ για κινητά μέχρι επιτραπέζιους υπολογιστές... 353 Κεφάλαιο 13 Εργασία με γραμματοσειρές Ιστού... 379 Κεφάλαιο 14 Βελτιώσεις με τη CSS3... 397 Κεφάλαιο 15 Λίστες... 423 Κεφάλαιο 16 Φόρμες... 443 Κεφάλαιο 17 Βίντεο, ήχος, και άλλα πολυμέσα... 475 Κεφάλαιο 18 Πίνακες... 515 Κεφάλαιο 19 Εργασία με σενάρια... 523 Κεφάλαιο 20 Έλεγχος και αποσφαλμάτωση ιστοσελίδων... 531 Κεφάλαιο 21 ημοσίευση των σελίδων σας στον Ιστό... 547 Παράρτημα Α Οδηγός αναφοράς HTML... 555 Παράρτημα Β Ιδιότητες και τιμές CSS... 569 Ευρετήριο... 585 8

Περιεχόμενα Ευχαριστίες... 6 Εισαγωγή... 17 Η HTML και η CSS με μια ματιά... 18 Προοδευτική βελτίωση: Μια βέλτιστη πρακτική... 20 Είναι αυτό το βιβλίο κατάλληλο για σας;... 22 Πώς χρησιμοποιείται αυτό το βιβλίο... 24 Συνοδευτικός ιστότοπος... 26 Κεφάλαιο 1 Τα δομικά στοιχεία των ιστοσελίδων... 27 Μια βασική σελίδα HTML... 29 Σημασιολογική HTML: Σήμανση με σημασία... 32 Σήμανση: Στοιχεία, ιδιότητες, και τιμές... 39 Το περιεχόμενο κειμένου μιας ιστοσελίδας... 42 Σύνδεσμοι, εικόνες, και άλλα στοιχεία που δεν είναι κείμενο... 43 Ονόματα αρχείων... 45 Διευθύνσεις URL... 46 Βασικά σημεία... 50 Κεφάλαιο 2 Εργασία με αρχεία ιστοσελίδων... 51 Σχεδιασμός της τοποθεσίας σας... 52 Δημιουργία νέας ιστοσελίδας... 54 Αποθήκευση της ιστοσελίδας σας... 56 Καθορισμός προεπιλεγμένης σελίδας ή αρχικής σελίδας... 59 Επεξεργασία ιστοσελίδων... 61 Οργάνωση αρχείων... 62 Προβολή της σελίδας σας σε φυλλομετρητή... 63 Έμπνευση από τους άλλους... 65 9

10 Περιεχόμενα Κεφάλαιο 3 Η βασική δομή της HTML... 67 Ξεκίνημα της ιστοσελίδας σας... 69 Δημιουργία τίτλου... 72 Δημιουργία επικεφαλίδων... 74 Κατανόηση της διάρθρωσης εγγράφου στην HTML5... 76 Ομαδοποίηση επικεφαλίδων... 84 Συνηθισμένες σχηματικές δομές σελίδων... 86 Δημιουργία κεφαλίδας... 87 Σήμανση πλοήγησης... 90 Δημιουργία άρθρου... 94 Ορισμός ενότητας... 98 Καθορισμός παράλληλης ενότητας... 101 Δημιουργία υποσέλιδου... 106 Δημιουργία γενικών αποδεκτών... 110 Βελτίωση της προσπελασιμότητας με την ARIA... 114 Ονομασία στοιχείων με κλάση ή αναγνωριστικό... 118 Προσθήκη της ιδιότητας τίτλου σε στοιχεία... 121 Προσθήκη σχολίων... 122 Κεφάλαιο 4 Κείμενο... 125 Ξεκίνημα νέας παραγράφου... 126 Προσθήκη πληροφοριών επικοινωνίας του συγγραφέα... 128 Δημιουργία σχήματος... 130 Καθορισμός ώρας... 132 Σήμανση σημαντικού και εμφατικού κειμένου... 136 Καθορισμός παραπομπής ή αναφοράς... 138 Παράθεση κειμένου... 139 Επισήμανση κειμένου... 142 Επεξήγηση συντομογραφιών... 144 Καθορισμός όρου... 146 Δημιουργία εκθετών και δεικτών... 147 Επισήμανση διορθώσεων και ανακριβούς κειμένου... 150 Χαρακτηρισμός κώδικα... 154 Χρήση προμορφοποιημένου κειμένου... 156 Καθορισμός ψιλών γραμμάτων... 158 Δημιουργία αλλαγών γραμμών... 159 Δημιουργία στοιχείων span... 160 Άλλα στοιχεία... 162

Περιεχόμενα 11 Κεφάλαιο 5 Εικόνες... 173 Εικόνες στον Ιστό... 174 Απόκτηση εικόνων... 178 Επιλογή προγράμματος επεξεργασίας εικόνων... 179 Αποθήκευση των εικόνων σας... 180 Εισαγωγή εικόνων σε σελίδα... 182 Παροχή εναλλακτικού κειμένου... 183 Καθορισμός του μεγέθους εικόνας... 184 Αλλαγή της κλίμακας μιας εικόνας με τον φυλλομετρητή... 186 Αλλαγή της κλίμακας μιας εικόνας με πρόγραμμα επεξεργασίας εικόνων... 187 Προσθήκη εικονιδίων για τον ιστότοπό σας... 188 Κεφάλαιο 6 Σύνδεσμοι... 191 Η ανατομία ενός συνδέσμου... 192 Δημιουργία συνδέσμου προς άλλη ιστοσελίδα... 193 Δημιουργία σημείων αγκύρωσης... 198 Σύνδεση σε συγκεκριμένο σημείο αγκύρωσης... 200 Δημιουργία συνδέσμων άλλων τύπων... 201 Κεφάλαιο 7 Τα θεμέλια της CSS... 205 Κατασκευή κανόνα στυλ... 207 Προσθήκη σχολίων σε κανόνες στυλ... 208 Η επαλληλία: Όταν οι κανόνες συγκρούονται... 210 Η τιμή μιας ιδιότητας... 214 Κεφάλαιο 8 Εργασία με φύλλα στυλ... 223 Δημιουργία εξωτερικού φύλλου στυλ... 224 Σύνδεση με εξωτερικά φύλλα στυλ... 226 Δημιουργία ενσωματωμένου φύλλου στυλ... 228 Εφαρμογή εμβόλιμων στυλ... 230 Η σημασία της θέσης... 232 Χρήση φύλλων στυλ για συγκεκριμένα μέσα... 234 Παροχή εναλλακτικών φύλλων στυλ... 236 Έμπνευση από τους άλλους: CSS... 238 Κεφάλαιο 9 Ορισμός επιλογέων... 239 Κατασκευή επιλογέων... 240 Επιλογή στοιχείων με βάση το όνομα... 242 Επιλογή στοιχείων με βάση την κλάση ή το αναγνωριστικό... 244

12 Περιεχόμενα Επιλογή στοιχείων με βάση το θεματικό πλαίσιο... 247 Επιλογή μέρους ενός στοιχείου... 253 Επιλογή συνδέσμων με βάση την κατάστασή τους... 256 Επιλογή στοιχείων με βάση τις ιδιότητες... 258 Προσδιορισμός ομάδων στοιχείων... 262 Συνδυασμός επιλογέων... 264 Ανακεφαλαίωση επιλογέων... 266 Κεφάλαιο 10 Μορφοποίηση κειμένου με στυλ... 267 Επιλογή οικογένειας γραμματοσειρών... 269 Καθορισμός εναλλακτικών γραμματοσειρών... 270 Εφαρμογή πλάγιας γραφής... 272 Εφαρμογή έντονης γραφής... 274 Καθορισμός του μεγέθους γραμματοσειράς... 276 Καθορισμός του ύψους γραμμής... 281 Καθορισμός όλων των τιμών γραμματοσειράς μαζί... 282 Καθορισμός του χρώματος... 284 Αλλαγή του φόντου του κειμένου... 286 Ρύθμιση των αποστάσεων... 290 Προσθήκη εσοχών... 291 Καθορισμός ιδιοτήτων του κενού χώρου... 292 Στοίχιση κειμένου... 294 Αλλαγή πεζών-κεφαλαίων... 296 Χρήση μικρών κεφαλαίων... 297 Διακόσμηση κειμένου... 298 Κεφάλαιο 11 ιάταξη σελίδων με στυλ... 301 Ζητήματα που πρέπει να εξετάσετε πριν ξεκινήσετε μια διάταξη σελίδας... 302 Δόμηση των σελίδων σας... 305 Μορφοποίηση στοιχείων HTML5 σε παλαιούς φυλλομετρητές... 312 Επαναφορά ή κανονικοποίηση των προεπιλεγμένων στυλ... 316 Το μοντέλο πλαισίων... 318 Αλλαγή του φόντου... 320 Καθορισμός του ύψους ή του πλάτους για ένα στοιχείο... 324 Καθορισμός των περιθωρίων γύρω από ένα στοιχείο... 328 Προσθήκη συμπλήρωσης γύρω από ένα στοιχείο... 330 Δημιουργία στοιχείων που επιπλέουν... 332

Περιεχόμενα 13 Έλεγχος του σημείου όπου επιπλέουν τα στοιχεία... 334 Ρύθμιση του περιγράμματος... 337 Μετατόπιση στοιχείων στη φυσική ροή... 340 Απόλυτη τοποθέτηση στοιχείων... 342 Τοποθέτηση στοιχείων σε 3Δ... 344 Χειρισμός της υπερχείλισης... 346 Κατακόρυφη στοίχιση στοιχείων... 348 Αλλαγή του δείκτη του ποντικιού... 349 Εμφάνιση και απόκρυψη στοιχείων... 350 Κεφάλαιο 12 Φύλλα στυλ για κινητά μέχρι επιτραπέζιους υπολογιστές... 353 Στρατηγικές και ζητήματα για κινητά... 354 Κατανόηση και υλοποίηση ερωτημάτων μέσων... 359 Κατασκευή μιας σελίδας που προσαρμόζεται με ερωτήματα μέσων... 366 Κεφάλαιο 13 Εργασία με γραμματοσειρές Ιστού... 379 Τι είναι η γραμματοσειρά Ιστού;... 380 Πού θα βρείτε γραμματοσειρές Ιστού... 382 Κατέβασμα της πρώτης σας γραμματοσειράς Ιστού... 384 Χρήση της δήλωσης @font-face... 386 Μορφοποίηση γραμματοσειρών Ιστού και διαχείριση του μεγέθους αρχείων... 391 Κεφάλαιο 14 Βελτιώσεις με τη CSS3... 397 Κατανόηση των προθεμάτων συγκεκριμένου κατασκευαστή... 399 Μια γρήγορη ματιά στη συμβατότητα των φυλλομετρητών... 401 Χρήση πολυσυμπληρώσεων για προοδευτική βελτίωση... 402 Στρογγύλευση των γωνιών σε στοιχεία... 404 Προσθήκη σκιάς σε κείμενο... 408 Προσθήκη σκιάς σε άλλα στοιχεία... 410 Εφαρμογή πολλών φόντων... 414 Χρήση ντεγκραντέ ως φόντου... 416 Ρύθμιση της αδιαφάνειας για στοιχεία... 420 Κεφάλαιο 15 Λίστες... 423 Δημιουργία διατεταγμένης και μη διατεταγμένης λίστας... 424 Επιλογή των σημειωτών σας... 427 Επιλογή της αρχής για την αρίθμηση της λίστας... 429 Χρήση προσαρμοσμένων σημειωτών... 430

14 Περιεχόμενα Έλεγχος της προεξοχής των σημειωτών... 432 Καθορισμός όλων των ιδιοτήτων στυλ λίστας μονομιάς... 433 Μορφοποίηση ένθετης λίστας... 434 Δημιουργία λίστας περιγραφών... 438 Κεφάλαιο 16 Φόρμες... 443 Δημιουργία φορμών... 445 Επεξεργασία φορμών... 447 Αποστολή φορμών μέσω ηλεκτρονικού ταχυδρομείου... 450 Οργάνωση των στοιχείων φόρμας... 452 Δημιουργία πλαισίων κειμένου... 454 Δημιουργία πλαισίων κωδικού πρόσβασης... 457 Δημιουργία πλαισίων ηλεκτρονικού ταχυδρομείου, τηλεφώνου, και URL... 458 Δημιουργία ετικετών για τμήματα της φόρμας... 460 Δημιουργία ραδιοπλήκτρων... 462 Δημιουργία πλαισίων επιλογής... 464 Δημιουργία πλαισίων ελέγχου... 466 Δημιουργία περιοχών κειμένου... 467 Δυνατότητα ανεβάσματος αρχείων από τους χρήστες... 468 Δημιουργία κρυφών πεδίων... 469 Δημιουργία κουμπιού υποβολής... 470 Χρήση εικόνας για την υποβολή μιας φόρμας... 472 Απενεργοποίηση στοιχείων φόρμας... 473 Νέες λειτουργίες της HTML5 και υποστήριξη από τους φυλλομετρητές... 474 Κεφάλαιο 17 Βίντεο, ήχος, και άλλα πολυμέσα... 475 Πρόσθετα τρίτων κατασκευαστών και εγγενής υποστήριξη... 477 Μορφές αρχείου βίντεο... 478 Προσθήκη ενός μόνο βίντεο στην ιστοσελίδα σας... 479 Εξερεύνηση των ιδιοτήτων βίντεο... 480 Προσθήκη χειριστηρίων και αυτόματης εκτέλεσης στο βίντεό σας... 481 Βίντεο σε βρόχο και καθορισμός εικόνας αφίσας... 483 Αποτροπή της προφόρτωσης ενός βίντεο... 484 Χρήση βίντεο με πολλές προελεύσεις... 485 Πολλές προελεύσεις πολυμέσων και το στοιχείο source... 486 Προσθήκη βίντεο με υπερσύνδεσμο ως λύση καταφυγής... 487 Προσθήκη βίντεο με λύση καταφυγής Flash... 489

Περιεχόμενα 15 Παροχή προσπελασιμότητας... 493 Προσθήκη μορφών αρχείου ήχου... 494 Προσθήκη ενός μόνο αρχείου ήχου στην ιστοσελίδα σας... 495 Προσθήκη ενός μόνο αρχείου ήχου στην ιστοσελίδα σας μαζί με χειριστήρια... 496 Εξερεύνηση των ιδιοτήτων ήχου... 497 Προσθήκη χειριστηρίων και αυτόματη εκτέλεση ήχου σε βρόχο... 498 Προφόρτωση ενός αρχείου ήχου... 499 Παροχή πολλών προελεύσεων ήχου... 500 Προσθήκη ήχου με υπερσύνδεσμο ως λύση καταφυγής... 501 Προσθήκη ήχου με λύση καταφυγής Flash... 502 Προσθήκη ήχου με υπερσύνδεσμο και Flash ως λύση καταφυγής... 504 Λήψη αρχείων πολυμέσων... 506 Διαχείριση ψηφιακών πνευματικών δικαιωμάτων (DRM)... 507 Ενσωμάτωση κινούμενων εικόνων Flash... 508 Ενσωμάτωση βίντεο YouTube... 510 Χρήση βίντεο με καμβά... 511 Συνδυασμός βίντεο με γραφικά SVG... 512 Πρόσθετοι πόροι... 513 Κεφάλαιο 18 Πίνακες... 515 Δόμηση πινάκων... 516 Επέκταση σε πολλές στήλες και γραμμές... 520 Κεφάλαιο 19 Εργασία με σενάρια... 523 Φόρτωση εξωτερικού σεναρίου... 525 Προσθήκη ενσωματωμένου σεναρίου... 528 Συμβάντα JavaScript... 529 Κεφάλαιο 20 Έλεγχος και αποσφαλμάτωση ιστοσελίδων... 531 Δοκιμή κάποιων τεχνικών αποσφαλμάτωσης... 532 Έλεγχος των εύκολων πραγμάτων: Γενικά... 534 Έλεγχος των εύκολων πραγμάτων: HTML... 536 Έλεγχος των εύκολων πραγμάτων: CSS... 538 Επικύρωση του κώδικά σας... 540 Έλεγχος της σελίδας σας... 542 Όταν οι εικόνες δεν εμφανίζονται... 545 Ακόμα κολλημένοι;... 546

16 Περιεχόμενα Κεφάλαιο 21 ημοσίευση των σελίδων σας στον Ιστό... 547 Απόκτηση του δικού σας ονόματος περιοχής... 548 Εύρεση υπηρεσίας στέγασης για την τοποθεσία σας... 549 Μεταφορά αρχείων στον διακομιστή... 551 Παράρτημα Α Οδηγός αναφοράς HTML... 555 Παράρτημα Β Ιδιότητες και τιμές CSS... 569 Ευρετήριο... 585

ΕΙΣΑΓΩΓΗ Είτε απλώς ξεκινάτε τώρα το ταξίδι σας στην κατασκευή ιστότοπων, είτε έχετε κατασκευάσει ιστότοπους και στο παρελθόν αλλά θέλετε να εξασφαλίσετε ότι οι γνώσεις σας είναι επίκαιρες, ήρθατε σε μια πολύ συναρπαστική περίοδο για αυτόν τον κλάδο. Ο τρόπος με τον οποίο δημιουργούμε και μορφοποιούμε σελίδες, οι φυλλομετρητές στους ο- ποίους προβάλλουμε τις σελίδες, και οι συσκευές στις οποίες εμφανίζουμε τους φυλλομετρητές έχουν εξελιχθεί με αλματώδη βήματα τα τελευταία χρόνια. Ενώ κάποτε ήμασταν περιορισμένοι στη φυλλομέτρηση του Ιστού από τους επιτραπέζιους ή τους φορητούς υπολογιστές μας, τώρα μπορούμε να πάρουμε τον Ιστό μαζί μας σε μια μεγάλη ποικιλία συσκευών: τηλέφωνα, ταμπλέτες, και ναι, φορητούς και επιτραπέζιους υπολογιστές, και πολλά άλλα. Κάτι που είναι και το αναμενόμενο, επειδή η μεγάλη υπόσχεση του Ιστού ήταν πάντα η κατάργηση των ορίων η δυνατότητα να μοιραζόμαστε και να προσπελάζουμε πληροφορίες ελεύθερα από οποιαδήποτε μεγαλούπολη ή αγροτική κοινότητα, ή από οπουδήποτε ενδιάμεσα, και με οποιαδήποτε συσκευή που να έχει δυνατότητα χρήσης του Ιστού. Με λίγα λόγια, η υπόσχεση του Ιστού έγκειται στην καθολικότητά του. Και η εμβέλεια του Ιστού συνεχίζει να επεκτείνεται καθώς η τεχνολογία βρίσκει τρόπους για να προσεγγίσει κοινότητες που ήταν κάποτε αποκλεισμένες. Ένα άλλο πράγμα που συμβάλλει στο μεγαλείο του Ιστού είναι το ότι ο οποιοσδήποτε είναι ε- λεύθερος να δημιουργήσει και να ξεκινήσει έναν ιστότοπο (ή τοποθεσία Ιστού). Το βιβλίο αυτό σας δείχνει τον τρόπο. Είναι ιδανικό για τους αρχάριους που δεν έχουν γνώσεις HTML ή CSS και θέλουν να αρχίσουν να δημιουργούν ιστοσελίδες. Εδώ θα βρείτε ξεκάθαρες, εύκολες στην εκτέλεση οδηγίες που σας καθοδηγούν βήμα προς βήμα στη διαδικασία της δημιουργίας σελίδων. Τέλος, το βιβλίο αποτελεί χρήσιμο οδηγό αναφοράς. Μπορείτε να αναζητήσετε θέματα στον πίνακα περιεχομένων και το ευρετήριο και να συμβουλευτείτε μόνο τα θέματα εκείνα για τα οποία χρειάζεστε περισσότερες πληροφορίες. 17

18 Εισαγωγή Η HTML και η CSS με μια ματιά Στη ρίζα της επιτυχίας του Ιστού βρίσκεται μια απλή, βασισμένη σε κείμενο γλώσσα σήμανσης που είναι εύκολη στην εκμάθηση και την οποία μπορεί να διαβάσει οποιαδήποτε συσκευή με έναν απλό φυλλομετρητή Ιστού: η HTML. Όλες οι ιστοσελίδες απαιτούν τουλάχιστον κάποιον κώδικα HTML χωρίς αυτόν δεν θα ήταν ιστοσελίδες. Όπως θα μάθετε με περισσότερες λεπτομέρειες καθώς προχωράτε στη μελέτη αυτού του βιβλίου, η HTML χρησιμοποιείται για τον καθορισμό της σημασίας του περιεχομένου, ενώ η γλώσσα CSS χρησιμοποιείται για τον καθορισμό της εμφάνισης του περιεχομένου και της ιστοσελίδας. Τόσο οι σελίδες HTML όσα και τα αρχεία CSS (τα φύλλα στυλ) είναι αρχεία κειμένου, γεγονός που κάνει εύκολη την επεξεργασία τους. Μπορείτε να δείτε αποσπάσματα κώδικα HTML και CSS στην ενότητα «Πώς χρησιμοποιείται αυτό το βιβλίο», κοντά στο τέλος αυτής της εισαγωγής. Θα ξεκινήσετε να μαθαίνετε τα βασικά στοιχεία μιας σελίδας HTML ήδη από το Κεφάλαιο 1, και θα αρχίσετε να μαθαίνετε πώς να μορφοποιείτε τις σελίδες σας με εντολές CSS στο Κεφάλαιο 7. Στην ενότητα «Τι θα σας μάθει αυτό το βιβλίο» μπορείτε να δείτε μια επισκόπηση όλων των κεφαλαίων, καθώς και μια σύνοψη των θεμάτων που καλύπτονται. Τι είναι η HTML5; Είναι χρήσιμο να γνωρίζετε κάποια βασικά πράγματα σχετικά με την προέλευση της HTML, έτσι ώστε να μπορέσετε να κατανοήσετε την HTML5. Η HTML ξεκίνησε στις αρχές της δεκαετίας του 1990 ως ένα σύντομο έγγραφο που παρέθετε κάποια λίγα στοιχεία τα οποία χρησιμοποιούνταν για την κατασκευή ιστοσελίδων. Πολλά από αυτά τα στοιχεία αφορούσαν την περιγραφή περιεχομένου ιστοσελίδων όπως οι επικεφαλίδες, οι παράγραφοι, και οι λίστες. Ο αριθμός έκδοσης της HTML μεγάλωνε καθώς η γλώσσα εξελισσόταν με την εισαγωγή νέων στοιχείων και προσαρμογών στους κανόνες της. Η τελευταία έκδοση είναι η HTML5. Η HTML5 αποτελεί φυσική εξέλιξη των προηγούμενων εκδόσεων της HTML και προσπαθεί να καλύψει τις ανάγκες των υπαρχόντων και των μελλοντικών ιστότοπων. Κληρονομεί τη συντριπτική πλειονότητα των λειτουργιών από τους προκατόχους της, γεγονός που σημαίνει ότι αν έχετε γράψει κώδικα HTML πριν από την έλευση της HTML5, γνωρίζετε ήδη πολλά για την HTML5. Αυτό σημαίνει επίσης ότι μεγάλο μέρος της HTML5 λειτουργεί τόσο σε παλιούς όσο και σε νέους φυλλομετρητές η προς τα πίσω συμβατότητα αποτελεί βασική αρχή στον σχεδιασμό της HTML5 (δείτε τη σελίδα www.w3.org/ TR/html-design-principles/). Η HTML5 προσθέτει επίσης άφθονες νέες λειτουργίες. Πολλές από αυτές είναι απλές, όπως τα πρόσθετα στοιχεία (article, section, figure, και πολλά άλλα) που χρησιμοποιούνται για την περιγραφή περιεχομένου. Άλλες είναι αρκετά περίπλοκες και βοηθούν στη δημιουργία ισχυρών εφαρμογών Ιστού. Θα χρειαστεί να κατανοήσετε σε βάθος τον τρόπο δημιουργίας ιστοσελίδων πριν να μπορέσετε να προχωρήσετε στις πιο περίπλοκες λειτουργίες που παρέχει η HTML5. Η HTML5 εισάγει επίσης την εγγενή αναπαραγωγή ήχου και βίντεο στις ιστοσελίδες σας, που καλύπτεται σε αυτό το βιβλίο. Τι είναι η CSS3; Η πρώτη έκδοση της γλώσσας CSS εμφανίστηκε χρόνια μετά την έλευση της HTML, και επισημοποιήθηκε το 1996. Όπως συμβαίνει και με την HTML5 και τη σχέση της με τις προηγούμενες εκδόσεις της HTML, η CSS3 αποτελεί φυσική εξέλιξη των προηγούμενων εκδόσεων της γλώσσας CSS. Η CSS3 είναι πιο ισχυρή από τις προηγούμενες εκδόσεις της γλώσσας CSS και εισάγει διάφορα οπτικά εφέ, όπως οι σκιές σε πλαίσια και κείμενο, οι στρογγυλεμένες γωνίες, και τα ντεγκραντέ. (Στην ενότητα «Τι θα σας μάθει αυτό το βιβλίο» θα δούμε λεπτομερώς τα θέματα που θα καλυφθούν στο βιβλίο.) Πρότυπα και προδιαγραφές Ιστού Μπορεί να αναρωτιέστε ποιος δημιούργησε αρχικά την HTML και τη CSS, και ποιος συνεχίζει να τις εξελίσσει. Η Κοινοπραξία Παγκόσμιου Ιστού (World Wide Web Consortium, W3C) την οποία διευθύνει ο εφευρέτης του Ιστού και της HTML, ο Tim Berners-Lee είναι ο οργανισμός που είναι υπεύθυνος για την επίβλεψη της ανάπτυξης των προτύπων για τον Ιστό. Οι προδιαγραφές (specifications ή specs, για συντομία) είναι έγγραφα που ορίζουν τις παραμέτρους

Εισαγωγή 19 ❶ Η τοποθεσία του W3C είναι η κύρια πηγή του κλάδου ως προς τις προδιαγραφές των προτύπων για τον Ιστό. για γλώσσες όπως η HTML και η CSS. Με άλλα λόγια, οι προδιαγραφές προτυποποιούν τους κανόνες. Μπορείτε να δείτε τη δραστηριότητα του W3C στη διεύθυνση www.w3.org ❶. Για διάφορους λόγους, ένας άλλος οργανισμός η Ομάδα Εργασίας για την Τεχνολογία Εφαρμογών Υπερ-Κειμένου στον Ιστό (Web Hypertext Application Technology Working Group ή WHATWG, δείτε τη διεύθυνση www.whatwg.org) αναπτύσσει τις προδιαγραφές για την HTML5. Το W3C ενσωματώνει τη δουλειά της WHATWG στην επίσημη έκδοση των εν εξελίξει προδιαγραφών. Αφού υπάρχουν τα πρότυπα, μπορούμε να κατασκευάσουμε τις σελίδες μας με βάση το συμφωνημένο σύνολο κανόνων, και μπορούν να φτιαχτούν φυλλομετρητές όπως οι Chrome, Firefox, Internet Explorer (IE), Opera, και Safari για την εμφάνιση των σελίδων μας με βάση αυτούς τους κανόνες. (Σε γενικές γραμμές, οι φυλλομετρητές υλοποιούν καλά τα πρότυπα. Κάποια προβλήματα υπάρχουν στις παλαιότερες εκδόσεις του IE, και ειδικά στον IE6.) Οι προδιαγραφές περνούν από διάφορα στάδια ανάπτυξης πριν θεωρηθούν οριστικές, οπότε α- ποκαλούνται Συστάσεις (Recommendations, δείτε τη σελίδα www.w3.org/2005/10/process- 20051014/tr). Κάποια τμήματα των προδιαγραφών για την HTML5 και τη CSS3 είναι ακόμα στο στάδιο της οριστικοποίησης, όμως αυτό δεν σημαίνει ότι δεν μπορείτε να τα χρησιμοποιείτε. Απαιτείται πολύς καιρός (στην κυριολεξία χρόνια) για να περάσει τα διάφορα στάδια η προτυποποίηση. Οι φυλλομετρητές αρχίζουν να υλοποιούν τις λειτουργίες των προδιαγραφών πολύ πριν αυτές να γίνουν Σύσταση, επειδή αυτό αποτελεί ανάδραση και για την ίδια τη διαδικασία ανάπτυξης των προδιαγραφών. Έτσι οι φυλλομετρητές περιλαμβάνουν ήδη μεγάλο εύρος λειτουργιών HTML5 και CSS3, παρά το ότι αυτές δεν είναι ακόμα Συστάσεις. Συνολικά, οι λειτουργίες που καλύπτονται σε αυτό το βιβλίο είναι καλά θεμελιωμένες στις αντίστοιχες προδιαγραφές τους, έτσι ο κίνδυνος να αλλάξουν πριν να γίνουν Συστάσεις είναι ελάχιστος. Οι κατασκευαστές ιστότοπων χρησιμοποιούν πολλές λειτουργίες HTML5 και CSS3 εδώ και καιρό. Το ίδιο μπορείτε να κάνετε και εσείς.

20 Εισαγωγή Προοδευτική βελτίωση: Μια βέλτιστη πρακτική Ξεκίνησα την εισαγωγή μιλώντας για την καθολικότητα του Ιστού την ιδέα ότι οι πληροφορίες του Ιστού θα πρέπει να είναι προσπελάσιμες από όλους. Η προοδευτική βελτίωση (progressive enhancement) μάς βοηθά να κατασκευάζουμε τοποθεσίες έχοντας κατά νου την καθολικότητα. Δεν είναι κάποια γλώσσα, αλλά είναι μια προσέγγιση ως προς την κατασκευή τοποθεσιών, την οποία δημιούργησε ο Steve Champeon το 2003 (http://en.wikipedia.org/wiki/ Progressive_enhancement). Η ιδέα είναι απλή αλλά πανίσχυρη: Ξεκινάτε την τοποθεσία σας με περιεχόμενο και συμπεριφορές HTML που να είναι προσπελάσιμα από ό- λους τους επισκέπτες ❶. Στην ίδια σελίδα, προσθέτετε σχεδιαστική μορφοποίηση με εντολές CSS ❷ και πρόσθετες συμπεριφορές με JavaScript, συνήθως με φόρτωσή τους από εξωτερικά αρχεία (θα μάθετε πώς να το κάνετε αυτό). Το αποτέλεσμα είναι ότι οι συσκευές και οι φυλλομετρητές που έχουν δυνατότητα προσπέλασης μόνο των απλών σελίδων θα πάρουν το απλοποιημένο, προεπιλεγμένο περιβάλλον οι συσκευές και οι φυλλομετρητές που μπορούν να εμφανίσουν πιο εμπλουτισμένες τοποθεσίες θα προβάλουν τη βελτιωμένη έκδοση. Η αίσθηση που αποδίδει η τοποθεσία σας δεν είναι απαραίτητο να είναι ίδια για όλους, εφόσον το περιεχόμενό σας είναι προσπελάσιμο. Ουσιαστικά, η ιδέα πίσω από την προοδευτική βελτίωση είναι ότι όλοι βγαίνουν κερδισμένοι. ❶ Μια απλή σελίδα HTML χωρίς την εφαρμογή καμίας προσαρμοσμένης μορφοποίησης με φύλλα CSS. Η σελίδα μπορεί να μην έχει σπουδαία εμφάνιση, όμως οι πληροφορίες είναι προσπελάσιμες και αυτό είναι το σημαντικό. Ακόμα και οι φυλλομετρητές που χρονολογούνται από τις απαρχές του Ιστού, περισσότερα από 20 χρόνια πριν, μπορούν να εμφανίσουν αυτή τη σελίδα το ίδιο συμβαίνει και με τα παλαιότερα κινητά τηλέφωνα με φυλλομετρητές Ιστού. Και οι αναγνώστες οθόνης (screen readers), που είναι λογισμικό το οποίο εκφωνεί το περιεχόμενο ιστοσελίδων για λογαριασμό επισκεπτών με προβλήματα όρασης, θα μπορούν εύκολα να πλοηγηθούν σε αυτή.

Εισαγωγή 21 ❷ Η ίδια σελίδα όπως προβάλλεται από έναν φυλλομετρητή που υποστηρίζει φύλλα CSS. Οι πληροφορίες είναι ίδιες, όμως απλώς παρουσιάζονται με διαφορετικό τρόπο. Οι χρήστες που διαθέτουν συσκευές και φυλλομετρητές με περισσότερες δυνατότητες έχουν βελτιωμένη εμπειρία από την επίσκεψη στη σελίδα. Το βιβλίο αυτό θα σας μάθει πώς να κατασκευάζετε τοποθεσίες σύμφωνα με την αρχή της προοδευτικής βελτίωσης, ακόμα και όταν το κάνει αυτό χωρίς να το αναφέρει ρητά. Πρόκειται για φυσικό αποτέλεσμα των βέλτιστων πρακτικών που μεταδίδονται μέσω του βιβλίου. Όμως τα Κεφάλαια 12 και 14 όντως ασχολούνται άμεσα με την προοδευτική βελτίωση. Ρίξτε μια γρήγορη ματιά στα κεφάλαια αυτά αν θέλετε να δείτε με ποιον τρόπο η αρχή της προοδευτικής βελτίωσης βοηθά στην κατασκευή μιας τοποθεσίας που προσαρμόζει τη διάταξή της με βάση το μέγεθος οθόνης της συσκευής και τις δυνατότητες του φυλλομετρητή, ή με ποιον τρόπο οι παλαιότεροι φυλλομετρητές θα εμφανίζουν απλοποιημένες σχεδιάσεις ενώ οι σύγχρονοι φυλλομετρητές θα εμφανίζουν σχεδιάσεις που είναι εμπλουτισμένες με εφέ CSS3. Η προοδευτική βελτίωση είναι μια βασική βέλτιστη πρακτική που βρίσκεται στον πυρήνα της κατασκευής τοποθεσιών για όλους.

22 Εισαγωγή Είναι αυτό το βιβλίο κατάλληλο για σας; Το βιβλίο αυτό δεν προϋποθέτει καμία προηγούμενη γνώση σχετικά με την κατασκευή ιστότοπων. Έτσι, κατ αυτή την έννοια, απευθύνεται στους τελείως αρχάριους. Θα μάθετε τόσο για την HTML όσο και για τη CSS από μηδενική βάση. Στην πορεία θα μάθετε επίσης για λειτουργίες που είναι νέες στην HTML5 και τη CSS3, με έμφαση στις λειτουργίες εκείνες τις οποίες χρησιμοποιούν σήμερα οι σχεδιαστές και οι προγραμματιστές στην καθημερινή τους δουλειά. Όμως ακόμα και αν είστε εξοικειωμένοι με την HTML και τη CSS, και πάλι θα μάθετε από αυτό το βιβλίο, ειδικά αν θέλετε να ενημερωθείτε στα γρήγορα για τις τελευταίες εξελίξεις στην HTML5, τη CSS3, και τις βέλτιστες πρακτικές. Τι θα σας μάθει αυτό το βιβλίο Προσθέσαμε περίπου 125 σελίδες στο βιβλίο σε σχέση με την προηγούμενη αγγλική έκδοση, έ- τσι ώστε να σας δώσουμε όσο το δυνατόν περισσότερο υλικό. (Η πρώτη έκδοση του βιβλίου, που δημοσιεύτηκε το 1996, είχε συνολικά 176 σελίδες.) Κάναμε επίσης ουσιαστική ενημέρωση (ή και εξολοκλήρου συγγραφή εκ νέου) σε σχεδόν όλες τις σελίδες της προηγούμενης έκδοσης. Με λίγα λόγια, αυτή η Έβδομη Έκδοση αντιπροσωπεύει μια πολύ σημαντική αναθεώρηση. Τα κεφάλαια είναι οργανωμένα ως εξής: Τα Κεφάλαια 1 έως 6 και 15 έως 18 καλύπτουν τις αρχές της δημιουργίας σελίδων HTML και την εργαλειοθήκη στοιχείων HTML που έχετε στη διάθεσή σας, δείχνοντας ξεκάθαρα πού να χρησιμοποιήσετε το καθένα από αυτά. Τα Κεφάλαια 7 έως 14 ασχολούνται με τη CSS, από τη δημιουργία του πρώτου σας κανόνα στυλ μέχρι την εφαρμογή βελτιωμένων οπτικών εφέ με τη CSS3. Το Κεφάλαιο 19 δείχνει πώς να προσθέτετε έτοιμο κώδικα JavaScript στις σελίδες σας. Το Κεφάλαιο 20 δείχνει πώς να ελέγχετε και να αποσφαλματώνετε τις σελίδες σας, πριν να τις τοποθετήσετε στον Ιστό. Το Κεφάλαιο 21 εξηγεί πώς να αποκτήσετε το δικό σας όνομα περιοχής και πώς να δημοσιεύσετε την τοποθεσία σας στον Ιστό ώστε να μπορεί να τη δει το κοινό. Πιο αναλυτικά, κάποια από τα θέματα που καλύπτονται είναι τα εξής: Δημιουργία, αποθήκευση, και επεξεργασία αρχείων HTML και CSS. Τι είναι η συγγραφή σημασιολογικής HTML (semantic HTML) και γιατί είναι σημαντική. Πώς να διαχωρίσετε το περιεχόμενο της σελίδας σας (δηλαδή τον κώδικα HTML σας) από την παρουσίασή του (δηλαδή τα στυλ CSS σας) που είναι μια βασική πτυχή της προοδευτικής βελτίωσης. Δόμηση του περιεχομένου σας με έναν τρόπο που να έχει νόημα, με χρήση τόσο στοιχείων HTML που υπάρχουν εδώ και χρόνια, όσο και νέων στοιχείων της HTML5. Βελτίωση της προσπελασιμότητας της τοποθεσίας σας με ρόλους οροσήμου ARIA και άλλες καλές πρακτικές συγγραφής κώδικα. Προσθήκη εικόνων στις σελίδες σας και βελτιστοποίησή τους για τον Ιστό. Σύνδεση από τη μία ιστοσελίδα σε μια άλλη, ή από το ένα μέρος της σελίδας σε ένα άλλο. Μορφοποίηση του κειμένου (μέγεθος, χρώμα, έντονα, πλάγια, και άλλα) προσθήκη χρωμάτων και εικόνων φόντου και υλοποίηση μιας ρευστής και πολύστηλης διάταξης σελίδας που να μπορεί να συρρικνώνεται και να επεκτείνεται έτσι ώστε να χωράει σε διάφορα μεγέθη οθόνης.

Εισαγωγή 23 Χρήση των νέων επιλογέων της CSS3 που σας επιτρέπουν να στοχεύσετε τα στυλ σας με περισσότερους τρόπους απ ό,τι στο παρελθόν. Παρουσίαση των επιλογών σας σχετικά με την κάλυψη των επισκεπτών που χρησιμοποιούν συσκευές κινητών. Κατασκευή μίας μόνο τοποθεσίας για όλους τους χρήστες ανεξάρτητα από το αν χρησιμοποιούν κινητό τηλέφωνο, ταμπλέτα, φορητό υπολογιστή, επιτραπέζιο υπολογιστή, ή κάποια άλλη συσκευή με δυνατότητα χρήσης του Ιστού με βάση πολλές από τις αρχές της ανταποκρινόμενης σχεδίασης για τον Ι- στό, κάποιες από τις οποίες χρησιμοποιούν ερωτήματα μέσων CSS3. Προσθήκη προσαρμοσμένων γραμματοσειρών Ιστού στις σελίδες σας με τη δήλωση @font-face. Χρήση εφέ CSS3 όπως η αδιαφάνεια, η διαφάνεια φόντου με κανάλια άλφα, τα ντεγκραντέ, οι στρογγυλεμένες γωνίες, οι σκιές, οι σκιές μέσα σε στοιχεία, οι σκιές κειμένου, και οι πολλαπλές εικόνες φόντου. Κατασκευή φορμών για τη λήψη εισόδου από τους επισκέπτες σας, όπου συμπεριλαμβάνεται και η χρήση κάποιων από τα νέα στοιχεία εισόδου φορμών της HTML5. Συμπερίληψη πολυμέσων στις σελίδες σας με τα στοιχεία audio και video της HTML5. Και πολλά άλλα. Τα θέματα αυτά συμπληρώνονται με πολλές δεκάδες δείγματα κώδικα που σας δείχνουν με ποιον τρόπο να υλοποιήσετε τις λειτουργίες, με βάση τις βέλτιστες πρακτικές του κλάδου. Τι δεν θα σας μάθει αυτό το βιβλίο Δυστυχώς, ακόμα και μετά την προσθήκη τόσο πολλών σελίδων σε σύγκριση με την προηγούμενη έκδοση, υπάρχουν τόσο πολλά πράγματα που μπορεί να πει κανείς για την HTML και τη CSS που έπρεπε υποχρεωτικά να παραλείψουμε κάποια θέματα. Με ελάχιστες εξαιρέσεις, επιλέξαμε να παραλείψουμε στοιχεία που θα έχετε λιγότερες ευκαιρίες να χρησιμοποιήσετε, βρίσκονται ακόμα σε φάση αλλαγών, δεν έχουν ευρεία υποστήριξη από τους φυλλομετρητές, απαιτούν γνώση της JavaScript, ή είναι προηγμένες λειτουργίες. Κάποια από τα θέματα που δεν καλύπτονται είναι τα εξής: Τα στοιχεία details, summary, menu, command, και keygen της HTML5. Το στοιχείο canvas της HTML5, που σας επιτρέπει να σχεδιάζετε γραφικά (ή ακόμα και να δημιουργείτε παιχνίδια) σε συνδυασμό με την JavaScript. Τις Διασυνδέσεις Προγραμματισμού Εφαρμογών HTML5 (HTML5 API) και άλλες προηγμένες λειτουργίες που απαιτούν γνώση JavaScript ή δεν σχετίζονται άμεσα με τα νέα σημασιολογικά στοιχεία της HTML5. Τα μπλοκ εικονοστοιχείων CSS (CSS sprites). Η τεχνική αυτή περιλαμβάνει τον συνδυασμό πολλών εικόνων σε μία, κάτι που είναι πολύ χρήσιμο για την ελαχιστοποίηση του πλήθους πόρων που θα πρέπει να φορτώσει η σελίδα σας. Για περισσότερες πληροφορίες δείτε τη διεύθυνση www.bruceontheloose.com/sprites/. Αντικατάσταση εικόνων CSS. Οι τεχνικές αυτές συχνά συνδυάζονται με τα μπλοκ εικονοστοιχείων CSS. Για περισσότερες πληροφορίες δείτε τη διεύθυνση www.bruceontheloose.com/ir/. Μετασχηματισμοί, κινούμενες εικόνες, και μεταβάσεις CSS3. Οι νέες υπομονάδες διάταξης σελίδας CSS3.

24 Εισαγωγή Πώς χρησιμοποιείται αυτό το βιβλίο Σχεδόν όλες οι ενότητες του βιβλίου περιέχουν πρακτικά παραδείγματα που δείχνουν τη χρήση σε πραγματικές συνθήκες (❶ και ❷). Συνήθως, τα παραδείγματα αυτά συνδυάζονται με στιγμιότυπα οθόνης που δείχνουν τα αποτελέσματα του κώδικα όταν προβάλλετε την ιστοσελίδα σε έναν φυλλομετρητή ❸. Πολλά από τα στιγμιότυπα οθόνης απεικονίζουν την τελευταία έκδοση του Firefox που ήταν διαθέσιμη κατά τη στιγμή της παραγωγής του βιβλίου. Όμως αυτό δεν σημαίνει κάποια προτίμηση στον Firefox έναντι οποιουδήποτε άλλου φυλλομετρητή. Τα δείγματα κώδικα θα έχουν παρόμοια εμφάνιση σε οποιαδήποτε από τις τελευταίες εκδόσεις των Chrome, Internet Explorer, Opera, ή Safari. Όπως θα μάθετε στο Κεφάλαιο 20, θα πρέπει να ελέγχετε τις σελίδες σας σε ένα μεγάλο εύρος φυλλομετρητών πριν να τις δημοσιεύσετε στον Ιστό, επειδή δεν μπορείτε να ξέρετε ποιον φυλλομετρητή θα χρησιμοποιούν οι επισκέπτες σας. Ο κώδικας και τα στιγμιότυπα οθονών συνοδεύονται από περιγραφές των στοιχείων HTML ή των ιδιοτήτων CSS που εξετάζονται, τόσο για να φαίνεται το θεματικό πλαίσιο του δείγματος κώδικα, όσο και για να μπορέσετε να τον κατανοήσετε ευκολότερα. Σε πολλές περιπτώσεις θα διαπιστώσετε ότι οι περιγραφές και τα δείγματα κώδικα είναι αρκετά για να αρχίσετε να χρησιμοποιείτε τις λειτουργίες HTML και CSS. Αν όμως χρειάζεστε ρητή καθοδήγηση ως προς τον τρόπο χρήσης τους, παρέχονται επίσης και βήμα προς βήμα οδηγίες. Τέλος, οι περισσότερες ενότητες περιλαμβάνουν συμβουλές που περιέχουν πρόσθετες πληροφορίες χρήσης, βέλτιστες πρακτικές, αναφορές σε συναφή τμήματα του βιβλίου, συνδέσμους σε σχετικούς πόρους, και πολλά άλλα. ❶ Θα βρείτε αποσπάσματα κώδικα HTML σε πολλές σελίδες, με επισημασμένα τα συναφή τμήματα. Τα αποσιωπητικά (...) αντιπροσωπεύουν πρόσθετο κώδικα ή περιεχόμενο που παραλείφθηκε για λόγους συντομίας. Συχνά το τμήμα που έχει παραλειφθεί φαίνεται σε κάποια άλλη εικόνα με κώδικα.... <body> <header role="banner">... <nav role="navigation"> <ul class="nav"> <li><a href="/" class="current">home</a></li> <li><a href="/about/">about</a></li> <li><a href="/resources/">resources</a></li> <li><a href="/archives/">archives</a></li> </ul> </nav>... </header>... </body> </html>

Εισαγωγή 25 ❷ Αν ο κώδικας CSS σχετίζεται με το παράδειγμα, θα εμφανίζεται σε δικό του πλαίσιο, με επισημασμένες τις συναφείς ενότητες. /* Πλοήγηση τοποθεσίας */.nav li { float: left; font-size:.75em; /* makes the bullets smaller */ }.nav li a { font-size: 1.5em; }.nav li:first-child { list-style: none; padding-left: 0; } ❸ Στιγμιότυπα οθόνης από έναν ή περισσότερους φυλλομετρητές δείχνουν με ποιον τρόπο επηρεάζει ο κώδικας αυτός τη σελίδα. Συμβάσεις που χρησιμοποιούνται σε αυτό το βιβλίο Στο βιβλίο χρησιμοποιούνται οι ακόλουθες συμβάσεις: Η λέξη HTML έχει γενικό περιεχόμενο, και αντιπροσωπεύει τη γλώσσα συνολικά. Όταν αναφέρομαι στη συγκεκριμένη έκδοση της HTML χρησιμοποιώ τη λέξη HTML5 για παράδειγμα, αυτό συμβαίνει όταν αναφέρομαι σε κάποια λειτουργία που είναι καινούργια στην HTML5 και δεν υπήρχε σε προηγούμενες εκδόσεις της HTML. Η ίδια προσέγγιση ισχύει και για τη χρήση των όρων CSS (γενικά) και CSS3 (συγκεκριμένα για τη CSS3). Το κείμενο ή ο κώδικας που αποτελεί δεσμευτικό θέσης για μια τιμή την οποία θα πρέπει να δημιουργήσετε εσείς εμφανίζεται με πλάγια. Για παράδειγμα, «Ή πληκτρολογήστε #rrggbb, όπου το rrggbb είναι η δεκαεξαδική αναπαράσταση του χρώματος». Ο κώδικας τον οποίο θα πρέπει να πληκτρολογήσετε πραγματικά ή που αναπαριστάνει στοιχεία HTML ή CSS εμφανίζεται με αυτή τη γραμματοσειρά. Το βέλος ( ) σε μια εικόνα κώδικα δείχνει ότι πρόκειται για συνέχεια της προηγούμενης γραμμής η γραμμή έχει αναδιπλωθεί για να χωράει στη στήλη του βιβλίου ❷. Το βέλος δεν αποτελεί τμήμα του ίδιου του κώδικα, έτσι δεν είναι κάτι που θα πρέπει να πληκτρολογήσετε. Αντιθέτως, θα πρέπει να πληκτρολογήσετε τη γραμμή συνεχόμενα, σαν να μην αναδιπλωνόταν σε άλλη γραμμή. Στην πρώτη παρουσία ενός όρου χρησιμοποιείται πλάγια γραφή εκεί όπου δίνεται ο ορισμός του. Το IE χρησιμοποιείται συχνά ως δημοφιλής συντομογραφία για τον Internet Explorer. Για παράδειγμα, το IE9 είναι συνώνυμο του Internet Explorer 9. Όταν υπάρχει ένα σύμβολο συν (+) μετά από τον αριθμό έκδοσης ενός φυλλομετρητή, αυτό υποδηλώνει τη συγκεκριμένη έκδοση που αναφέρεται καθώς και όλες τις επόμενες εκδόσεις. Για παράδειγμα, ο Firefox 8+ αναφέρεται στον Firefox 8.0 και όλες τις μεταγενέστερες εκδόσεις.

26 Εισαγωγή Συνοδευτικός ιστότοπος Η τοποθεσία του βιβλίου, στη διεύθυνση www.bruceontheloose.com/htmlcss/, περιέχει τον πίνακα περιεχομένων (του αγγλικού βιβλίου), κάθε ολοκληρωμένο παράδειγμα κώδικα που παρουσιάζεται στο βιβλίο (συν κάποια πρόσθετα παραδείγματα που δεν χωρούσαν στο βιβλίο), συνδέσμους σε πόρους που αναφέρονται στο βιβλίο (αλλά και σε πρόσθετους πόρους), πληροφορίες σχετικά με τις αναφορές που χρησιμοποιήθηκαν κατά τη συγγραφή, κατάλογο παροραμάτων, και πολλά άλλα. Η τοποθεσία περιλαμβάνει επίσης δύο ενότητες αναφοράς (Παραρτήματα Α και Β) που δεν υ- πήρχε χώρος για να συμπεριληφθούν στην αγγλική έκδοση του βιβλίου (αλλά συμπεριλαμβάνονται στην ελληνική έκδοση). Οι αναφορές αυτές είναι χρήσιμες για τη γρήγορη αναζήτηση σχετικά με στοιχεία και ιδιότητες HTML ή ιδιότητες και τιμές CSS. (Περιέχουν επίσης και κάποιες πληροφορίες που δεν καλύπτονται στο κυρίως σώμα του βιβλίου.) Μπορείτε να βρείτε τα παραδείγματα κώδικα στη διεύθυνση www.bruceontheloose.com/ htmlcss/examples/. Από εκεί μπορείτε είτε να τα εξετάσετε είτε να τα κατεβάσετε στον υπολογιστή σας όλα τα αρχεία HTML και CSS είναι στη διάθεσή σας. Σε κάποιες περιπτώσεις έχω συμπεριλάβει πρόσθετα σχόλια στον κώδικα, για να εξηγήσω περισσότερα σχετικά με το αποτέλεσμα που έχει ή τον τρόπο χρήσης του. Κάποια από τα δείγματα κώδικα του βιβλίου έχουν περικοπεί για λόγους χώρου, όμως στον ιστότοπο του βιβλίου υπάρχουν οι πλήρεις εκδόσεις. Χρησιμοποιήστε ε- λεύθερα τον κώδικα με όποιον τρόπο σας αρέσει, τροποποιώντας τον σύμφωνα με τις ανάγκες των έργων σας. Οι διευθύνσεις URL για κάποιες από τις βασικές σελίδες της τοποθεσίας του βιβλίου είναι οι ε- ξής: Αρχική σελίδα: www.bruceontheloose.com/htmlcss/ Παραδείγματα κώδικα: www.bruceontheloose.com/htmlcss/examples/ Παράρτημα A: Οδηγός αναφοράς HTML: www.bruceontheloose.com/ref/html/ Παράρτημα B: Ιδιότητες και τιμές CSS: www.bruceontheloose.com/ref/css/ Ελπίζω ότι η τοποθεσία θα σας φανεί χρήσιμη.

ΤΑ ΟΜΙΚΑ ΣΤΟΙΧΕΙΑ ΤΩΝ ΙΣΤΟΣΕΛΙ ΩΝ Αν και οι ιστοσελίδες έχουν γίνει όλο και πιο πολύπλοκες, η εσωτερική δομή τους παραμένει αξιοσημείωτα απλή. Το πρώτο πράγμα που θα πρέπει να γνωρίζετε είναι ότι είναι αδύνατο να δημιουργήσετε μια ιστοσελίδα χωρίς HTML. Όπως θα μάθετε, η HTML στεγάζει το περιεχόμενό σας και περιγράφει τη σημασία του. Με τη σειρά τους, οι φυλλομετρητές Ιστού αποδίδουν (render) το περιβεβλημένο από χαρακτηρισμούς HTML περιεχόμενο ώστε να το προβάλουν στους χρήστες. Η ιστοσελίδα αποτελείται κατά κύριο λόγο από τρία συστατικά στοιχεία: Περιεχόμενο κειμένου: Το απλό κείμενο που εμφανίζεται στη σελίδα για να πληροφορήσει τους επισκέπτες σχετικά με την επιχείρησή σας, τις οικογενειακές διακοπές σας, τα προϊόντα σας, ή όποιο άλλο μπορεί να είναι το αντικείμενο της σελίδας σας. Αναφορές σε άλλα αρχεία: Αυτές φορτώνουν στοιχεία όπως εικόνες, αρχεία ήχου και βίντεο, ή αρχεία SVG, και παρέχουν σύνδεση με άλλες σελίδες και στοιχεία, καθώς και με φύλλα στυλ (τα οποία ελέγχουν την οπτική διάταξη της σελίδας σας) και με αρχεία JavaScript (που προσθέτουν συμπεριφορές behaviors στη σελίδα σας). Σήμανση: Αυτά είναι τα στοιχεία HTML που περιγράφουν το περιεχόμενο κειμένου σας και κάνουν τις αναφορές να λειτουργούν. (Το γράμμα m στη λέξη HTML προέρχεται από τη λέξη markup που σημαίνει σήμανση.) Σε αυτό το κεφάλαιο Μια βασική σελίδα HTML 29 Σημασιολογική HTML: Σήμανση με σημασία 32 Σήμανση: Στοιχεία, ιδιότητες, και τιμές 39 Το περιεχόμενο κειμένου μιας ιστοσελίδας 42 Σύνδεσμοι, εικόνες, και άλλα στοιχεία που δεν είναι κείμενο 43 Ονόματα αρχείων 45 Διευθύνσεις URL 46 Βασικά σημεία 50 27

28 Κεφάλαιο 1 Είναι σημαντικό να τονίσουμε ότι το καθένα από αυτά τα στοιχεία σε μια ιστοσελίδα αποτελείται αποκλειστικά από κείμενο. Αυτό σημαίνει ότι οι ιστοσελίδες αποθηκεύονται σε μορφή α- πλού κειμένου και μπορούν να προβληθούν από πρακτικά οποιονδήποτε φυλλομετρητή σε ο- ποιαδήποτε υπολογιστική πλατφόρμα, ανεξάρτητα από το αν είναι επιτραπέζιος υπολογιστής, κινητό τηλέφωνο, ταμπλέτα, ή κάτι άλλο. Αυτό εξασφαλίζει την καθολικότητα του Ιστού. Η σελίδα μπορεί να έχει διαφορετική εμφάνιση όταν προβάλλεται σε διαφορετικές συσκευές, όμως αυτό δεν πειράζει. Το σημαντικό πρώτο βήμα είναι να γίνει το περιεχόμενο διαθέσιμο σε ό- λους τους χρήστες, και αυτό το παρέχει η HTML. Εκτός από τα τρία αυτά συστατικά στοιχεία από τα οποία αποτελείται κατά κύριο λόγο μια ιστοσελίδα, στη σελίδα περιλαμβάνεται επίσης κώδικας HTML που παρέχει πληροφορίες σχετικά με την ίδια τη σελίδα, τον οποίο οι χρήστες κανονικά δεν βλέπουν και ο οποίος προορίζεται για τους φυλλομετρητές και τις μηχανές αναζήτησης. Στον κώδικα αυτόν μπορεί να περιλαμβάνονται πληροφορίες σχετικά με την κύρια γλώσσα του περιεχομένου (Αγγλικά, Ελληνικά, και λοιπά), την κωδικοποίηση των χαρακτήρων (συνήθως UTF-8), και πολλά άλλα. Στο κεφάλαιο αυτό θα αναλύσουμε μια βασική σελίδα HTML, θα δούμε κάποιες βέλτιστες πρακτικές, και θα εξηγήσουμε καθένα από τα τρία αυτά σημαντικά συστατικά στοιχεία. Σημείωση: Όπως αναφέρθηκε και στην εισαγωγή, χρησιμοποιώ τον όρο HTML για να αναφερθώ στη γλώσσα γενικά. Στις περιπτώσεις όπου θέλω να τονίσω κάποια ειδικά χαρακτηριστικά που υπάρχουν μόνο σε μια συγκεκριμένη έκδοση της γλώσσας, θα χρησιμοποιώ ξεχωριστό ό- νομα. Για παράδειγμα, «η HTML5 εισάγει αρκετά νέα στοιχεία και επαναπροσδιορίζει ή απαλείφει άλλα που υπήρχαν προηγουμένως στην HTML 4 και την XHTML 1.0.» Για περισσότερες λεπτομέρειες, δείτε την ενότητα «Πώς χρησιμοποιείται αυτό το βιβλίο» στην Εισαγωγή.

Τα δομικά στοιχεία των ιστοσελίδων 29 ❶ Η τυπική προεπιλεγμένη απόδοση της σελίδας. Αν και η εικόνα δείχνει τη σελίδα στον Firefox, η σελίδα έχει παρόμοια εμφάνιση και στους άλλους φυλλομετρητές. Μια βασική σελίδα HTML Ας ρίξουμε μια ματιά σε μια βασική σελίδα HTML, για να πάρετε μια ιδέα σχετικά με τα όσα θα ακολουθήσουν σε αυτό το κεφάλαιο και τα επόμενα. Η Εικόνα ❶ δείχνει πώς αποδίδουν συνήθως οι φυλλομετρητές επιτραπέζιων υπολογιστών τον κώδικα HTML της Εικόνας ❷. Θα μάθετε κάποια από τα βασικά σχετικά με τον κώδικα της Εικόνας ❷, όμως μην ανησυχείτε αν δεν τον κατανοείτε όλο τώρα. Ο στόχος είναι να πάρετε απλώς μια γεύση από την HTML. Έχετε το υπόλοιπο βιβλίο για να μάθετε περισσότερα σχετικά με αυτή. Μπορείτε πιθανότατα να μαντέψετε κάποια από τα όσα γίνονται στον κώδικα, ειδικά στην ενότητα body. Ας εξετάσουμε όμως πρώτα το τμήμα πριν από την ενότητα body. ❷ Αυτός είναι ο κώδικας για τη βασική σελίδα HTML. Έχω επισημάνει τα τμήματα HTML έτσι ώστε να μπορείτε να τα ξεχωρίσετε από το περιεχόμενο κειμένου της σελίδας. Όπως φαίνεται στην Εικόνα ❶, ο κώδικας HTML που περιβάλλει το περιεχόμενο κειμένου δεν εμφανίζεται όταν βλέπετε τη σελίδα σε έναν φυλλομετρητή. Όπως όμως θα μάθετε, η σήμανση είναι απαραίτητη επειδή περιγράφει τη σημασία του περιεχομένου. Σημειώστε, επίσης, ότι κάθε γραμμή φαίνεται να τερματίζεται με χαρακτήρα αλλαγής γραμμής. Αυτό δεν είναι υποχρεωτικό και δεν επηρεάζει την απόδοση της σελίδας. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>blue Flax (Linum lewisii)</title> </head> <body> <article> <h1>the Ephemeral Blue Flax</h1> <img src="blueflax.jpg" width="300" height="175" alt="blue Flax (Linum lewisii)" /> <p>i am continually <em>amazed</em> at the beautiful, delicate <a href="http:// en.wikipedia.org/wiki/linum_lewisii" rel="external" title="learn more about Blue Flax">Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> </article> </body> </html>

30 Κεφάλαιο 1 Όλα όσα βρίσκονται πάνω από την ετικέτα αρχής <body> είναι οι ενημερωτικές πληροφορίες για τους φυλλομετρητές και τις μηχανές αναζήτησης που αναφέραμε προηγουμένως ❸. Όλες οι σελίδες ξεκινούν με τη δήλωση DOCTYPE (τύπος εγγράφου), που ενημερώνει τον φυλλομετρητή σχετικά με την έκδοση HTML της σελίδας. Θα πρέπει να χρησιμοποιείτε πάντα την εντολή DOCTYPE της HTML5, που είναι η <!DOCTYPE html>. Δεν έχει σημασία η γραφή των λέξεων με πεζά ή κεφαλαία, όμως είναι πιο συνηθισμένο να γράφετε τη λέξη DOCTYPE με κεφαλαία. Ανεξάρτητα από αυτό, να συμπεριλαμβάνετε πάντα τη δήλωση DOCTYPE στις σελίδες σας. (Για περισσότερες πληροφορίες δείτε το ειδικό πλαίσιο «Η βελτιωμένη εντολή DOCTYPE της HTML5» στο Κεφάλαιο 3.) Όσα βρίσκονται ανάμεσα στην εντολή <!DOCTYPE html> και την εντολή </head> είναι αόρατα για τους χρήστες, με μία εξαίρεση: το κείμενο ανάμεσα στις ετικέτες <title> και </title> δηλαδή το κείμενο Blue Flax (Linum lewisii) εμφανίζεται ως τίτλος στην κορυφή του παραθύρου του φυλλομετρητή και στην καρτέλα του φυλλομετρητή ❷. Επίσης, αποτελεί συνήθως το προεπιλεγμένο όνομα για σελιδοδείκτη στον φυλλομετρητή και είναι μια πολύτιμη πληροφορία για τις μηχανές αναζήτησης. Το Κεφάλαιο 3 εξηγεί τι κάνουν τα υπόλοιπα κομμάτια του αρχικού τμήματος της σελίδας. ❸ Το στοιχείο κειμένου title είναι το μοναδικό τμήμα της αρχής ενός εγγράφου HTML που βλέπουν οι χρήστες. Τα υπόλοιπα είναι πληροφορίες σχετικά με τη σελίδα που προορίζονται για φυλλομετρητές και μηχανές αναζήτησης. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>the Ephemeral Blue Flax (Linum lewisii)</title> </head>

Τα δομικά στοιχεία των ιστοσελίδων 31 ❹ Το περιεχόμενο της σελίδας βρίσκεται ανάμεσα στις ετικέτες αρχής και τέλους του στοιχείου body. Το έγγραφο τερματίζεται στην ετικέτα </html>. <!DOCTYPE html> <html lang="en">... [document head]... <body> <article> <h1>the Ephemeral Blue Flax</h1> <img src="blueflax.jpg" width="300" height="175" alt="blue Flax (Linum lewisii)" /> <p>i am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.org/ wiki/linum_lewisii" rel="external" title="learn more about Blue Flax"> Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> </article> </body> </html> Στο μεταξύ, το περιεχόμενο της σελίδας σας δηλαδή αυτά που είναι ορατά στους χρήστες βρίσκεται ανάμεσα στις ετικέτες <body> και </body>. Τέλος, η τελική ετικέτα </html> σηματοδοτεί το τέλος της σελίδας ❹. Οι εσοχές που βλέπετε στον κώδικα δεν έχουν απολύτως καμία σχέση με το αν ο κώδικας αποτελεί έγκυρη HTML. Δεν επηρεάζουν επίσης τον τρόπο προβολής του περιεχομένου στον φυλλομετρητή (η μοναδική εξαίρεση, όπως θα μάθετε στο Κεφάλαιο 4, είναι το στοιχείο pre). Παρόλα αυτά, είναι συνηθισμένο να τοποθετούμε σε εσοχή τον κώδικα που είναι ένθετος σε κάποιο γονικό στοιχείο, έτσι ώστε να μπορούμε να δούμε με μια ματιά την ιεραρχία των στοιχείων καθώς διαβάζουμε τον κώδικα. Θα μάθετε περισσότερα για τα γονικά και τα θυγατρικά στοιχεία στη συνέχεια του κεφαλαίου. Θα μάθετε επίσης περισσότερα σχετικά με την προεπιλεγμένη απόδοση (rendering) από τους φυλλομετρητές. Κατ αρχήν, ας δούμε τι σημαίνει η συγγραφή σημασιολογικής HTML (semantic HTML) και γιατί αποτελεί θεμέλιο λίθο για έναν αποτελεσματικό ιστότοπο.

32 Κεφάλαιο 1 Σημασιολογική HTML: Σήμανση με σημασία Η HTML είναι ένα έξυπνο σύστημα συμπερίληψης πληροφοριών σχετικά με το περιεχόμενο μέσα σε ένα έγγραφο κειμένου. Οι πληροφορίες αυτές, που ονομάζονται σήμανση (markup), περιγράφουν τη σημασία του περιεχομένου, δηλαδή τη σημασιολογία. Έχετε ήδη δει μερικά παραδείγματα στη βασική σελίδα μας HTML, όπως το στοιχείο p που σηματοδοτεί περιεχόμενο παραγράφου. Η HTML δεν ορίζει με ποιον τρόπο θα πρέπει να εμφανιστεί το περιεχόμενο στον φυλλομετρητή αυτός είναι ο ρόλος των CSS (Cascading Style Sheets, επάλληλα φύλλα στυλ). Η HTML5 τονίζει αυτή τη διάκριση πιο εμφατικά από οποιαδήποτε προηγούμενη έκδοση της HTML. Η διάκριση βρίσκεται στον πυρήνα της ίδιας της γλώσσας. Μπορεί λοιπόν να αναρωτιέστε γιατί, εφόσον συμβαίνει αυτό, κάποιο κείμενο στη βασική σελίδα μας HTML ❶ φαίνεται μεγαλύτερο από το υπόλοιπο κείμενο, ή έχει έντονη ή πλάγια γραφή ❷. Πολύ καλή ερώτηση. Ο λόγος είναι ότι ο κάθε φυλλομετρητής Ιστού διαθέτει ένα ενσωματωμένο αρχείο CSS (ένα φύλλο στυλ) που επιβάλλει τον προεπιλεγμένο τρόπο προβολής του κάθε στοιχείου HTML, εκτός κι αν δημιουργήσετε το δικό σας φύλλο στυλ που θα υπερισχύει. Η προεπιλεγμένη αναπαράσταση ποικίλλει ελαφρώς από φυλλομετρητή σε φυλλομετρητή, όμως γενικά είναι αρκετά συνεπής. Το πιο σημαντικό είναι ότι παραμένουν αναλλοίωτες η εσωτερική δομή και η σημασία του περιεχομένου, όπως περιγράφονται από τον κώδικα HTML που δημιουργήσατε. ❶ Το περιεχόμενο της βασικής σελίδας μας μαζί με την προσθήκη μιας δεύτερης παραγράφου στο τέλος. Τα στοιχεία HTML δεν επιβάλλουν τον τρόπο εμφάνισης του περιεχομένου, αλλά απλώς δηλώνουν τη σημασία του. Από την άλλη πλευρά, το ενσωματωμένο φύλλο στυλ του κάθε φυλλομετρητή καθορίζει ποια θα είναι η προεπιλεγμένη εμφάνιση του περιεχομένου ❷.... <body> <article> <h1>the Ephemeral Blue Flax</h1> <img src="blueflax.jpg" width="300" height="175" alt="blue Flax (Linum lewisii)" /> <p>i am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.org/ wiki/linum_lewisii" rel="external" title="learn more about Blue Flax"> Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> <p><small> Blue Flax Society. </small></p> </article> </body> </html>

Τα δομικά στοιχεία των ιστοσελίδων 33 ❷ Το προεπιλεγμένο φύλλο στυλ του φυλλομετρητή αποδίδει τις επικεφαλίδες (τα στοιχεία h1 h6) με διαφορετικό τρόπο από το κανονικό κείμενο, εμφανίζει με πλάγια γραφή το κείμενο em, και χρωματίζει και υπογραμμίζει τους συνδέσμους. Επιπρόσθετα, κάποια στοιχεία ξεκινούν σε δική τους γραμμή (για παράδειγμα, τα h1 και p), ενώ άλλα εμφανίζονται ανάμεσα σε περιεχόμενο που τα περιβάλλει (όπως τα στοιχεία a και em). Το παράδειγμα αυτό περιλαμβάνει μια δεύτερη παράγραφο (τη σημείωση πνευματικών δικαιωμάτων) για να δείξει ξεκάθαρα ότι η κάθε παράγραφος ξεκινά σε ξεχωριστή γραμμή. Μπορείτε εύκολα να αντικαταστήσετε κάποιον ή και όλους αυτούς του κανόνες παρουσίασης χρησιμοποιώντας τα δικά σας φύλλα στυλ. Στοιχεία επιπέδου μπλοκ, εμβόλιμα στοιχεία, και HTML5 Όπως μπορείτε να δείτε, κάποια στοιχεία HTML (για παράδειγμα, τα στοιχεία article, h1, και p) εμφανίζονται σε δική τους γραμμή όπως συμβαίνει με τις παραγράφους ενός βιβλίου, ενώ άλλα (για παράδειγμα, τα a και em) αποδίδονται στην ίδια γραμμή με το υπόλοιπο περιεχόμενο ❷. Και πάλι, αυτό έχει να κάνει με τους προεπιλεγμένους κανόνες στυλ του φυλλομετρητή, και όχι με τα ίδια τα στοιχεία HTML. Ας το αναλύσουμε αυτό λίγο περισσότερο. Πριν από την HTML5, τα περισσότερα στοιχεία κατηγοριοποιούνταν είτε ως επιπέδου μπλοκ (block-level, τα στοιχεία που εμφανίζονται σε δική τους γραμμή), είτε ως εμβόλιμα (inline, τα στοιχεία που εμφανίζονται μέσα σε μια γραμμή κειμένου). Η HTML5 απομακρύνεται από αυτούς τους όρους, επειδή συσχετίζουν τα στοιχεία με την παρουσίαση, που όπως μάθατε δεν είναι ο ρόλος της HTML. Σε αντιδιαστολή, γενικά, τα στοιχεία που προηγουμένως χαρακτηρίζονταν ως εμβόλιμα κατηγοριοποιούνται στην HTML5 ως περιεχόμενο διατύπωσης (phrasing content) δηλαδή πρόκειται για στοιχεία με αντίστοιχο περιεχόμενο τα οποία εμφανίζονταν κυρίως στο εσωτερικό μιας παραγράφου. (Το Κεφάλαιο 4 εστιάζει σχεδόν αποκλειστικά στο περιεχόμενο διατύπωσης. Μπορείτε να δείτε έναν πλήρη κατάλογο στη διεύθυνση http://dev.w3.org/html5/spec-authorview/content-models.html#phrasing-content-0.) Τα παλιά στοιχεία επιπέδου μπλοκ υπάγονται επίσης σε νέες κατηγορίες HTML5 που εστιάζουν στη σημασιολογία τους. Πολλά από αυτά τα στοιχεία αφορούν τα κύρια δομικά μπλοκ και τις επικεφαλίδες του περιεχομένου σας (στο Κεφάλαιο 3 θα μάθετε περισσότερα σχετικά με τις ενότητες περιεχομένου και τα στοιχεία επικεφαλίδων περιεχομένου). Αφού τα είπαμε όλα αυτά, πρέπει να πούμε ότι οι φυλλομετρητές δεν έχουν αλλάξει τους προεπιλεγμένους κανόνες εμφάνισης για τα στοιχεία αυτά, ούτε και θα έπρεπε να το κάνουν. Άλλωστε, πιθανότατα δεν θα θέλετε οι δύο παράγραφοι (τα στοιχεία p) να πέφτουν η μία πάνω στην άλλη, ή το κείμενο em (όπως η λέξη amazed στη

34 Κεφάλαιο 1 σελίδα) να σπάει στη μέση την πρόταση και να εμφανίζεται σε δική του γραμμή (το em είναι το στοιχείο που χρησιμοποιείτε για να δώσετε έμφαση σε κάτι). Έτσι, συνήθως οι επικεφαλίδες, οι παράγραφοι, και τα δομικά στοιχεία όπως το article εμφανίζονται σε ξεχωριστή γραμμή, ενώ το περιεχόμενο διατύπωσης εμφανίζεται στην ίδια γραμμή με το περιεχόμενο που το περιβάλλει. Και παρά το ότι η HTML5 δεν χρησιμοποιεί πλέον τους όρους «επίπεδο μπλοκ» και «εμβόλιμο», είναι χρήσιμο να ξέρετε τι σημαίνουν. Είναι πολύ συνηθισμένο να χρησιμοποιούνται οι όροι αυτοί σε εκπαιδευτικά βοηθήματα, αφού ήταν ριζωμένοι στη διάλεκτο της HTML πριν από την HTML5. Υπάρχει περίπτωση να χρησιμοποιήσω περιστασιακά τους όρους αυτούς στο βιβλίο για να δείξω στα γρήγορα αν το στοιχείο εμφανίζεται εξ ορισμού σε δική του γραμμή, ή μοιράζεται την ίδια γραμμή με άλλο περιεχόμενο. Θα καλύψουμε εκτενώς τα φύλλα CSS σε επόμενα κεφάλαια, όμως προς το παρόν πρέπει να γνωρίζετε ότι το φύλλο στυλ, όπως και η σελίδα HTML, είναι απλώς κείμενο, έτσι μπορείτε να το δημιουργείτε με το ίδιο πρόγραμμα διόρθωσης κειμένου όπως και για την HTML. Η εστίαση της HTML5 στη σημασιολογία Η HTML5 δίνει έμφαση στη σημασιολογία HTML, αφήνοντας όλη την οπτική μορφοποίηση για τα φύλλα CSS. Όμως αυτό δεν συνέβαινε πάντα με τις προηγούμενες εκδόσεις της HTML. Τα πρώτα χρόνια του Ιστού δεν υπήρχε κάποια καλή μέθοδος για τη μορφοποίηση σελίδων. Η HTML είχε ήδη ηλικία κάποιων ετών όταν παρουσιάστηκε επίσημα το πρότυπο CSS1, τον Δεκέμβριο του 1996. Για να καλύψει στο μεταξύ το κενό, η HTML περιλάμβανε μερικά στοιχεία παρουσίασης των οποίων ο σκοπός ήταν να επιτρέπουν κάποιες βασικές μορφοποιήσεις στο κείμενο, όπως η εφαρμογή έντονης ή πλάγιας γραφής ή η χρήση διαφορετικού μεγέθους από το περιβάλλον κείμενο. Τα στοιχεία αυτά εξυπηρέτησαν τον σκοπό τους για εκείνη την εποχή, όμως δικαιωματικά έπεσαν σε δυσμένεια καθώς αναπτύσσονταν καλύτερες πρακτικές για την κατασκευή ιστοσελίδων. Η κεντρική ιδέα ήταν και σε μεγάλο βαθμό είναι ακόμα ότι η HTML αφορά μόνο την περιγραφή της σημασίας του περιεχομένου, και όχι την εμφάνισή του. Τα στοιχεία παρουσίασης της HTML έρχονταν σε αντίθεση με αυτή τη βέλτιστη πρακτική. Έ- τσι, η HTML 4 αποθάρρυνε τη χρήση τους, συνιστώντας στους δημιουργούς σελίδων να χρησιμοποιούν φύλλα CSS για τη μορφοποίηση του κειμένου και των άλλων στοιχείων της σελίδας. Η HTML5 προχωρά ακόμα παραπέρα εξαλείφει κάποια στοιχεία παρουσίασης και επαναπροσδιορίζει άλλα έτσι ώστε να μεταφέρουν σημασιολογική ερμηνεία, αντί να επιβάλλουν έναν τρόπο παρουσίασης. Ένα τέτοιο παράδειγμα είναι το στοιχείο small. Αρχικά είχε ως στόχο να κάνει το κείμενο μικρότερο από το κανονικό κείμενο. Ό- μως στην HTML5 το στοιχείο small αναπαριστάνει τα «ψιλά γράμματα», όπως στις νομικές υποσημειώσεις. Μπορείτε, αν θέλετε, να χρησιμοποιήσετε κώδικα CSS για να το κάνετε το μεγαλύτερο κείμενο στη σελίδα, όμως αυτό δεν πρόκειται να αλλάξει τη σημασία του περιεχομένου small. Στο μεταξύ, το παλιό αντίθετο του small, το στοιχείο big, δεν υπάρχει στην HTML5. Υπάρχουν και άλλα τέτοια παραδείγματα, τα οποία θα μάθετε στη συνέχεια του βιβλίου. Η HTML5 ορίζει επίσης νέα στοιχεία, όπως τα στοιχεία header, footer, nav, article, section, και πολλά άλλα που εμπλουτίζουν τη σημασιολογία του περιεχομένου σας. Και για αυτά επίσης θα μιλήσουμε αργότερα. Όμως, ανεξάρτητα από το αν χρησιμοποιείτε κάποιο στοιχείο HTML που υπήρχε από το ξεκίνημα της γλώσσας ή κάποιο που πρωτοεμφανίστηκε με την HTML5, ο στόχος σας θα πρέπει να είναι ο ίδιος. Επιλέξτε τα στοιχεία που περιγράφουν καλύτερα τη σημασία του περιεχομένου σας, χωρίς να σας απασχολεί η εμφάνισή τους.