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

Transcript

1

2 Περιεχόμενα με μια ματιά Ευχαριστίες... 6 Εισαγωγή Κεφάλαιο 1 Τα δομικά στοιχεία των ιστοσελίδων Κεφάλαιο 2 Εργασία με αρχεία ιστοσελίδων Κεφάλαιο 3 Η βασική δομή της HTML Κεφάλαιο 4 Κείμενο Κεφάλαιο 5 Εικόνες Κεφάλαιο 6 Σύνδεσμοι Κεφάλαιο 7 Τα θεμέλια της CSS Κεφάλαιο 8 Εργασία με φύλλα στυλ Κεφάλαιο 9 Ορισμός επιλογέων Κεφάλαιο 10 Μορφοποίηση κειμένου με στυλ Κεφάλαιο 11 ιάταξη σελίδων με στυλ Κεφάλαιο 12 Φύλλα στυλ για κινητά μέχρι επιτραπέζιους υπολογιστές Κεφάλαιο 13 Εργασία με γραμματοσειρές Ιστού Κεφάλαιο 14 Βελτιώσεις με τη CSS Κεφάλαιο 15 Λίστες Κεφάλαιο 16 Φόρμες Κεφάλαιο 17 Βίντεο, ήχος, και άλλα πολυμέσα Κεφάλαιο 18 Πίνακες Κεφάλαιο 19 Εργασία με σενάρια Κεφάλαιο 20 Έλεγχος και αποσφαλμάτωση ιστοσελίδων Κεφάλαιο 21 ημοσίευση των σελίδων σας στον Ιστό Παράρτημα Α Οδηγός αναφοράς HTML Παράρτημα Β Ιδιότητες και τιμές CSS Ευρετήριο

3 Περιεχόμενα Ευχαριστίες... 6 Εισαγωγή Η HTML και η CSS με μια ματιά Προοδευτική βελτίωση: Μια βέλτιστη πρακτική Είναι αυτό το βιβλίο κατάλληλο για σας; Πώς χρησιμοποιείται αυτό το βιβλίο Συνοδευτικός ιστότοπος Κεφάλαιο 1 Τα δομικά στοιχεία των ιστοσελίδων Μια βασική σελίδα HTML Σημασιολογική HTML: Σήμανση με σημασία Σήμανση: Στοιχεία, ιδιότητες, και τιμές Το περιεχόμενο κειμένου μιας ιστοσελίδας Σύνδεσμοι, εικόνες, και άλλα στοιχεία που δεν είναι κείμενο Ονόματα αρχείων Διευθύνσεις URL Βασικά σημεία Κεφάλαιο 2 Εργασία με αρχεία ιστοσελίδων Σχεδιασμός της τοποθεσίας σας Δημιουργία νέας ιστοσελίδας Αποθήκευση της ιστοσελίδας σας Καθορισμός προεπιλεγμένης σελίδας ή αρχικής σελίδας Επεξεργασία ιστοσελίδων Οργάνωση αρχείων Προβολή της σελίδας σας σε φυλλομετρητή Έμπνευση από τους άλλους

4 10 Περιεχόμενα Κεφάλαιο 3 Η βασική δομή της HTML Ξεκίνημα της ιστοσελίδας σας Δημιουργία τίτλου Δημιουργία επικεφαλίδων Κατανόηση της διάρθρωσης εγγράφου στην HTML Ομαδοποίηση επικεφαλίδων Συνηθισμένες σχηματικές δομές σελίδων Δημιουργία κεφαλίδας Σήμανση πλοήγησης Δημιουργία άρθρου Ορισμός ενότητας Καθορισμός παράλληλης ενότητας Δημιουργία υποσέλιδου Δημιουργία γενικών αποδεκτών Βελτίωση της προσπελασιμότητας με την ARIA Ονομασία στοιχείων με κλάση ή αναγνωριστικό Προσθήκη της ιδιότητας τίτλου σε στοιχεία Προσθήκη σχολίων Κεφάλαιο 4 Κείμενο Ξεκίνημα νέας παραγράφου Προσθήκη πληροφοριών επικοινωνίας του συγγραφέα Δημιουργία σχήματος Καθορισμός ώρας Σήμανση σημαντικού και εμφατικού κειμένου Καθορισμός παραπομπής ή αναφοράς Παράθεση κειμένου Επισήμανση κειμένου Επεξήγηση συντομογραφιών Καθορισμός όρου Δημιουργία εκθετών και δεικτών Επισήμανση διορθώσεων και ανακριβούς κειμένου Χαρακτηρισμός κώδικα Χρήση προμορφοποιημένου κειμένου Καθορισμός ψιλών γραμμάτων Δημιουργία αλλαγών γραμμών Δημιουργία στοιχείων span Άλλα στοιχεία

5 Περιεχόμενα 11 Κεφάλαιο 5 Εικόνες Εικόνες στον Ιστό Απόκτηση εικόνων Επιλογή προγράμματος επεξεργασίας εικόνων Αποθήκευση των εικόνων σας Εισαγωγή εικόνων σε σελίδα Παροχή εναλλακτικού κειμένου Καθορισμός του μεγέθους εικόνας Αλλαγή της κλίμακας μιας εικόνας με τον φυλλομετρητή Αλλαγή της κλίμακας μιας εικόνας με πρόγραμμα επεξεργασίας εικόνων Προσθήκη εικονιδίων για τον ιστότοπό σας Κεφάλαιο 6 Σύνδεσμοι Η ανατομία ενός συνδέσμου Δημιουργία συνδέσμου προς άλλη ιστοσελίδα Δημιουργία σημείων αγκύρωσης Σύνδεση σε συγκεκριμένο σημείο αγκύρωσης Δημιουργία συνδέσμων άλλων τύπων Κεφάλαιο 7 Τα θεμέλια της CSS Κατασκευή κανόνα στυλ Προσθήκη σχολίων σε κανόνες στυλ Η επαλληλία: Όταν οι κανόνες συγκρούονται Η τιμή μιας ιδιότητας Κεφάλαιο 8 Εργασία με φύλλα στυλ Δημιουργία εξωτερικού φύλλου στυλ Σύνδεση με εξωτερικά φύλλα στυλ Δημιουργία ενσωματωμένου φύλλου στυλ Εφαρμογή εμβόλιμων στυλ Η σημασία της θέσης Χρήση φύλλων στυλ για συγκεκριμένα μέσα Παροχή εναλλακτικών φύλλων στυλ Έμπνευση από τους άλλους: CSS Κεφάλαιο 9 Ορισμός επιλογέων Κατασκευή επιλογέων Επιλογή στοιχείων με βάση το όνομα Επιλογή στοιχείων με βάση την κλάση ή το αναγνωριστικό

6 12 Περιεχόμενα Επιλογή στοιχείων με βάση το θεματικό πλαίσιο Επιλογή μέρους ενός στοιχείου Επιλογή συνδέσμων με βάση την κατάστασή τους Επιλογή στοιχείων με βάση τις ιδιότητες Προσδιορισμός ομάδων στοιχείων Συνδυασμός επιλογέων Ανακεφαλαίωση επιλογέων Κεφάλαιο 10 Μορφοποίηση κειμένου με στυλ Επιλογή οικογένειας γραμματοσειρών Καθορισμός εναλλακτικών γραμματοσειρών Εφαρμογή πλάγιας γραφής Εφαρμογή έντονης γραφής Καθορισμός του μεγέθους γραμματοσειράς Καθορισμός του ύψους γραμμής Καθορισμός όλων των τιμών γραμματοσειράς μαζί Καθορισμός του χρώματος Αλλαγή του φόντου του κειμένου Ρύθμιση των αποστάσεων Προσθήκη εσοχών Καθορισμός ιδιοτήτων του κενού χώρου Στοίχιση κειμένου Αλλαγή πεζών-κεφαλαίων Χρήση μικρών κεφαλαίων Διακόσμηση κειμένου Κεφάλαιο 11 ιάταξη σελίδων με στυλ Ζητήματα που πρέπει να εξετάσετε πριν ξεκινήσετε μια διάταξη σελίδας Δόμηση των σελίδων σας Μορφοποίηση στοιχείων HTML5 σε παλαιούς φυλλομετρητές Επαναφορά ή κανονικοποίηση των προεπιλεγμένων στυλ Το μοντέλο πλαισίων Αλλαγή του φόντου Καθορισμός του ύψους ή του πλάτους για ένα στοιχείο Καθορισμός των περιθωρίων γύρω από ένα στοιχείο Προσθήκη συμπλήρωσης γύρω από ένα στοιχείο Δημιουργία στοιχείων που επιπλέουν

7 Περιεχόμενα 13 Έλεγχος του σημείου όπου επιπλέουν τα στοιχεία Ρύθμιση του περιγράμματος Μετατόπιση στοιχείων στη φυσική ροή Απόλυτη τοποθέτηση στοιχείων Τοποθέτηση στοιχείων σε 3Δ Χειρισμός της υπερχείλισης Κατακόρυφη στοίχιση στοιχείων Αλλαγή του δείκτη του ποντικιού Εμφάνιση και απόκρυψη στοιχείων Κεφάλαιο 12 Φύλλα στυλ για κινητά μέχρι επιτραπέζιους υπολογιστές Στρατηγικές και ζητήματα για κινητά Κατανόηση και υλοποίηση ερωτημάτων μέσων Κατασκευή μιας σελίδας που προσαρμόζεται με ερωτήματα μέσων Κεφάλαιο 13 Εργασία με γραμματοσειρές Ιστού Τι είναι η γραμματοσειρά Ιστού; Πού θα βρείτε γραμματοσειρές Ιστού Κατέβασμα της πρώτης σας γραμματοσειράς Ιστού Χρήση της 386 Μορφοποίηση γραμματοσειρών Ιστού και διαχείριση του μεγέθους αρχείων Κεφάλαιο 14 Βελτιώσεις με τη CSS Κατανόηση των προθεμάτων συγκεκριμένου κατασκευαστή Μια γρήγορη ματιά στη συμβατότητα των φυλλομετρητών Χρήση πολυσυμπληρώσεων για προοδευτική βελτίωση Στρογγύλευση των γωνιών σε στοιχεία Προσθήκη σκιάς σε κείμενο Προσθήκη σκιάς σε άλλα στοιχεία Εφαρμογή πολλών φόντων Χρήση ντεγκραντέ ως φόντου Ρύθμιση της αδιαφάνειας για στοιχεία Κεφάλαιο 15 Λίστες Δημιουργία διατεταγμένης και μη διατεταγμένης λίστας Επιλογή των σημειωτών σας Επιλογή της αρχής για την αρίθμηση της λίστας Χρήση προσαρμοσμένων σημειωτών

8 14 Περιεχόμενα Έλεγχος της προεξοχής των σημειωτών Καθορισμός όλων των ιδιοτήτων στυλ λίστας μονομιάς Μορφοποίηση ένθετης λίστας Δημιουργία λίστας περιγραφών Κεφάλαιο 16 Φόρμες Δημιουργία φορμών Επεξεργασία φορμών Αποστολή φορμών μέσω ηλεκτρονικού ταχυδρομείου Οργάνωση των στοιχείων φόρμας Δημιουργία πλαισίων κειμένου Δημιουργία πλαισίων κωδικού πρόσβασης Δημιουργία πλαισίων ηλεκτρονικού ταχυδρομείου, τηλεφώνου, και URL Δημιουργία ετικετών για τμήματα της φόρμας Δημιουργία ραδιοπλήκτρων Δημιουργία πλαισίων επιλογής Δημιουργία πλαισίων ελέγχου Δημιουργία περιοχών κειμένου Δυνατότητα ανεβάσματος αρχείων από τους χρήστες Δημιουργία κρυφών πεδίων Δημιουργία κουμπιού υποβολής Χρήση εικόνας για την υποβολή μιας φόρμας Απενεργοποίηση στοιχείων φόρμας Νέες λειτουργίες της HTML5 και υποστήριξη από τους φυλλομετρητές Κεφάλαιο 17 Βίντεο, ήχος, και άλλα πολυμέσα Πρόσθετα τρίτων κατασκευαστών και εγγενής υποστήριξη Μορφές αρχείου βίντεο Προσθήκη ενός μόνο βίντεο στην ιστοσελίδα σας Εξερεύνηση των ιδιοτήτων βίντεο Προσθήκη χειριστηρίων και αυτόματης εκτέλεσης στο βίντεό σας Βίντεο σε βρόχο και καθορισμός εικόνας αφίσας Αποτροπή της προφόρτωσης ενός βίντεο Χρήση βίντεο με πολλές προελεύσεις Πολλές προελεύσεις πολυμέσων και το στοιχείο source Προσθήκη βίντεο με υπερσύνδεσμο ως λύση καταφυγής Προσθήκη βίντεο με λύση καταφυγής Flash

9 Περιεχόμενα 15 Παροχή προσπελασιμότητας Προσθήκη μορφών αρχείου ήχου Προσθήκη ενός μόνο αρχείου ήχου στην ιστοσελίδα σας Προσθήκη ενός μόνο αρχείου ήχου στην ιστοσελίδα σας μαζί με χειριστήρια Εξερεύνηση των ιδιοτήτων ήχου Προσθήκη χειριστηρίων και αυτόματη εκτέλεση ήχου σε βρόχο Προφόρτωση ενός αρχείου ήχου Παροχή πολλών προελεύσεων ήχου Προσθήκη ήχου με υπερσύνδεσμο ως λύση καταφυγής Προσθήκη ήχου με λύση καταφυγής Flash Προσθήκη ήχου με υπερσύνδεσμο και Flash ως λύση καταφυγής Λήψη αρχείων πολυμέσων Διαχείριση ψηφιακών πνευματικών δικαιωμάτων (DRM) Ενσωμάτωση κινούμενων εικόνων Flash Ενσωμάτωση βίντεο YouTube Χρήση βίντεο με καμβά Συνδυασμός βίντεο με γραφικά SVG Πρόσθετοι πόροι Κεφάλαιο 18 Πίνακες Δόμηση πινάκων Επέκταση σε πολλές στήλες και γραμμές Κεφάλαιο 19 Εργασία με σενάρια Φόρτωση εξωτερικού σεναρίου Προσθήκη ενσωματωμένου σεναρίου Συμβάντα JavaScript Κεφάλαιο 20 Έλεγχος και αποσφαλμάτωση ιστοσελίδων Δοκιμή κάποιων τεχνικών αποσφαλμάτωσης Έλεγχος των εύκολων πραγμάτων: Γενικά Έλεγχος των εύκολων πραγμάτων: HTML Έλεγχος των εύκολων πραγμάτων: CSS Επικύρωση του κώδικά σας Έλεγχος της σελίδας σας Όταν οι εικόνες δεν εμφανίζονται Ακόμα κολλημένοι;

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

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

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

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

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

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

16 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 και άλλες καλές πρακτικές συγγραφής κώδικα. Προσθήκη εικόνων στις σελίδες σας και βελτιστοποίησή τους για τον Ιστό. Σύνδεση από τη μία ιστοσελίδα σε μια άλλη, ή από το ένα μέρος της σελίδας σε ένα άλλο. Μορφοποίηση του κειμένου (μέγεθος, χρώμα, έντονα, πλάγια, και άλλα) προσθήκη χρωμάτων και εικόνων φόντου και υλοποίηση μιας ρευστής και πολύστηλης διάταξης σελίδας που να μπορεί να συρρικνώνεται και να επεκτείνεται έτσι ώστε να χωράει σε διάφορα μεγέθη οθόνης.

17 Εισαγωγή 23 Χρήση των νέων επιλογέων της CSS3 που σας επιτρέπουν να στοχεύσετε τα στυλ σας με περισσότερους τρόπους απ ό,τι στο παρελθόν. Παρουσίαση των επιλογών σας σχετικά με την κάλυψη των επισκεπτών που χρησιμοποιούν συσκευές κινητών. Κατασκευή μίας μόνο τοποθεσίας για όλους τους χρήστες ανεξάρτητα από το αν χρησιμοποιούν κινητό τηλέφωνο, ταμπλέτα, φορητό υπολογιστή, επιτραπέζιο υπολογιστή, ή κάποια άλλη συσκευή με δυνατότητα χρήσης του Ιστού με βάση πολλές από τις αρχές της ανταποκρινόμενης σχεδίασης για τον Ι- στό, κάποιες από τις οποίες χρησιμοποιούν ερωτήματα μέσων CSS3. Προσθήκη προσαρμοσμένων γραμματοσειρών Ιστού στις σελίδες σας με τη Χρήση εφέ 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). Η τεχνική αυτή περιλαμβάνει τον συνδυασμό πολλών εικόνων σε μία, κάτι που είναι πολύ χρήσιμο για την ελαχιστοποίηση του πλήθους πόρων που θα πρέπει να φορτώσει η σελίδα σας. Για περισσότερες πληροφορίες δείτε τη διεύθυνση Αντικατάσταση εικόνων CSS. Οι τεχνικές αυτές συχνά συνδυάζονται με τα μπλοκ εικονοστοιχείων CSS. Για περισσότερες πληροφορίες δείτε τη διεύθυνση Μετασχηματισμοί, κινούμενες εικόνες, και μεταβάσεις CSS3. Οι νέες υπομονάδες διάταξης σελίδας CSS3.

18 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>

19 Εισαγωγή 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 και όλες τις μεταγενέστερες εκδόσεις.

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

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

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

23 Τα δομικά στοιχεία των ιστοσελίδων 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=" 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>

24 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>

25 Τα δομικά στοιχεία των ιστοσελίδων 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=" 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) και γιατί αποτελεί θεμέλιο λίθο για έναν αποτελεσματικό ιστότοπο.

26 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=" 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>

27 Τα δομικά στοιχεία των ιστοσελίδων 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 εστιάζει σχεδόν αποκλειστικά στο περιεχόμενο διατύπωσης. Μπορείτε να δείτε έναν πλήρη κατάλογο στη διεύθυνση Τα παλιά στοιχεία επιπέδου μπλοκ υπάγονται επίσης σε νέες κατηγορίες HTML5 που εστιάζουν στη σημασιολογία τους. Πολλά από αυτά τα στοιχεία αφορούν τα κύρια δομικά μπλοκ και τις επικεφαλίδες του περιεχομένου σας (στο Κεφάλαιο 3 θα μάθετε περισσότερα σχετικά με τις ενότητες περιεχομένου και τα στοιχεία επικεφαλίδων περιεχομένου). Αφού τα είπαμε όλα αυτά, πρέπει να πούμε ότι οι φυλλομετρητές δεν έχουν αλλάξει τους προεπιλεγμένους κανόνες εμφάνισης για τα στοιχεία αυτά, ούτε και θα έπρεπε να το κάνουν. Άλλωστε, πιθανότατα δεν θα θέλετε οι δύο παράγραφοι (τα στοιχεία p) να πέφτουν η μία πάνω στην άλλη, ή το κείμενο em (όπως η λέξη amazed στη

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