Σχεδίαση και Ανάπτυξη Ιστότοπων Η Γλώσσα HTML Παρουσίαση 4 η 1 Βελώνης Γεώργιος Καθηγητής
Περιεχόμενα Κανόνες σύνταξης της HTML Δομή σελίδας και βασικές ετικέτες Ιεραρχία (Hierarchy) Κανόνες σύνταξης της XHTML Κανόνες σύνταξης της HTML5 Έλεγχος εγκυρότητας κώδικα HTML 2
Κανόνες σύνταξης της HTML Η HTML (HyperText Markup Language) είναι η βασική γλώσσα ανάπτυξης ιστοσελίδων στο Διαδίκτυο. Χρησιμοποιείται για να την επισήμανση τμημάτων κειμένου, ώστε αυτό να εμφανίζεται καλύτερα μορφοποιημένο και επιπλέον επιτρέπει την ενσωμάτωση ήχου και εικόνων στις ιστοσελίδες. Αρχικά υποστήριζε μόνο την μορφοποίηση κειμένου, αλλά σε μεταγενέστερες εκδόσεις ενσωμάτωσε σχεδιαστικές τεχνικές κ.ά. Η γλώσσα χρησιμοποιεί ένα αριθμό από ετικέτες (tags), όχι μόνο για την μορφοποίηση του κειμένου, αλλά και για την δημιουργία συνδέσμων (links), για την εισαγωγή εικόνων, ήχου, βίντεο κ.ά. 3
Κανόνες σύνταξης της HTML Όταν ένας web browser ανοίγει ένα αρχείο HTML, τα tags μεταφράζονται σε κατάλληλα χαρακτηριστικά, με αποτελέσματα στην εμφάνιση και στην λειτουργικότητα της συγκεκριμένης σελίδας. Τα tags υπακούουν σε συγκεκριμένους κανόνες σύνταξης, ορισμένοι από τους οποίους είναι οι εξής: Όλες οι ετικέτες εσωκλείονται μεταξύ των χαρακτήρων «<» και «>». Κάθε τι που βρίσκεται μεταξύ των χαρακτήρων «<!- -» και «- ->», αποτελεί σχόλιο και δεν εμφανίζεται από το browser. Παράδειγμα: <!- - Αυτό είναι ένα σχόλιο - -> 4
Κανόνες σύνταξης της HTML Υπάρχουν δύο ειδών ετικέτες, οι απλές ετικέτες της μορφής <ετικέτα>, όπως η ετικέτα <br>, η οποία δηλώνει αλλαγή γραμμής στο κείμενο και οι διπλές. Οι διπλές ετικέτες είναι της μορφής <ετικέτα> </ετικέτα>, όπως οι ετικέτες <b> Έντονη γραφή </b>, όπου υπάρχει μία ετικέτα αρχής και μία ετικέτα τέλους. Οι διπλές ετικέτες συνήθως περιβάλλουν το κείμενο, τη διαμόρφωση του οποίου καθορίζουν. Η ετικέτα τέλους ακυρώνει την ισχύ της πρώτης ετικέτας και πάντα περιέχει το χαρακτήρα «/». Αυτό ισχύει για όλες τις διπλές ετικέτες. 5
Κανόνες σύνταξης της HTML Ορισμένες ετικέτες μπορεί να ακολουθούνται από παραμέτρους, οι οποίες διευκρινίζουν τη λειτουργία τους. Για παράδειγμα, η ετικέτα <body> μπορεί να εμφανιστεί και με παραμέτρους, όπως το χρώμα φόντου της σελίδας (π.χ. <body bgcolor= #cccccc>), το χρώμα των συνδέσμων κ.ά. Στην προκειμένη περίπτωση, χρησιμοποιώντας την παράμετρο bgcolor, ορίζεται το χρώμα του υπόβαθρου της σελίδας σε γκρίζο. Αν δεν χρησιμοποιούσατε παράμετρο, τότε το χρώμα του υπόβαθρου θα ήταν λευκό, το οποίο και αποτελεί την προκαθορισμένη ρύθμιση της ετικέτας <body>. Οι ετικέτες μπορεί να γράφονται με πεζά ή κεφαλαία γράμματα της λατινικής αλφαβήτου. Είναι καλό πάντως να υπάρχει μία ομοιομορφία στον τρόπο γραφής, ώστε ο κώδικας να είναι ευανάγνωστος. 6
Κανόνες σύνταξης της HTML Κενές γραμμές, καθώς και περισσότερα του ενός κενά μεταξύ των λέξεων στο κείμενο, που περιλαμβάνει μια ιστοσελίδα δε λαμβάνονται υπόψη. Ο κώδικας HTML πρέπει να εσωκλείεται μέσα στις ετικέτες <html> και </html>. Η ιδιότητα lang μπορεί να εφαρμοστεί σε όλες τις ετικέτες της HTML5, ενώ στην HTML 4.01 δε μπορεί να χρησιμοποιηθεί με τις ετικέτες <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> και <script>. Η χρήση της γίνεται για να δηλωθεί η γλώσσα μιας ιστοσελίδας ή ενός τμήματός της. Αυτό έχει ως στόχο να βοηθήσει τα spiders των μηχανών αναζήτησης στη συλλογή πληροφοριών, τη μορφοποίηση της σελίδας και την τεχνολογία ανάγνωσης της οθόνης, για την υποβοήθηση ατόμων με προβλήματα στην όραση, π.χ. <html lang="el">. 7
Κανόνες σύνταξης της HTML Όλα τα έγγραφα της HTML, καθώς και της XHTML, πρέπει να έχουν μια δήλωση <!DOCTYPE> η οποία ορίζει τον τύπο του εγγράφου (DTD - Document Type Definition). Η δήλωση <! DOCTYPE> δεν είναι μια ετικέτα HTML, αλλά μια οδηγία στο web browser για την έκδοση της HTML, στην οποία είναι γραμμένη σελίδα. Για το λόγο αυτό, δε πρέπει να συνοδεύεται από tag κλεισίματος και δε κάνει διάκριση πεζών-κεφαλαίων. Στην HTML 4.01, η δήλωση <! DOCTYPE> αναφέρεται σε έναν DTD, επειδή η έκδοση αυτή βασίστηκε στην SGML. Το DTD καθορίζει τους κανόνες για τη γλώσσα σήμανσης, έτσι ώστε οι browsers να παρουσιάζουν σωστά το περιεχόμενο. 8
Κανόνες σύνταξης της HTML Η ανατομία ενός DOCTYPE 9
Κανόνες σύνταξης της HTML Το HTML, όπως και το XHTML στάνταρτ ορίζει τρεις τύπους ορισμού εγγράφου (DTD), όπου ο πιο κοινός είναι ο Transitional. Οι άλλοι δύο είναι ο Strict και ο Frameset. HTML 4.01 Strict: Αυτός ο τύπος περιέχει όλα τα στοιχεία και τις ιδιότητες της HTML, αλλά δε περιλαμβάνει στοιχεία που έχουν καταργηθεί, όπως οι ετικέτες <font>, <cite> κ.λπ., ενώ και τα frames (πλαίσια) δεν είναι επίσης επιτρεπτά. Παράδειγμα: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> 10
Κανόνες σύνταξης της HTML HTML 4.01 Transitional: Είναι ο κατάλληλος τύπος, όταν σε ένα έγγραφο γίνεται χρήση και ετικετών που έχουν αποκλειστεί από το πρότυπο της HTML 4.01, όπως οι <font>, <cite> κ.λπ. Τα frames δεν είναι επιτρεπτά, όπως και με τον τύπο Strict. Παράδειγμα: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> HTML 4.01 Frameset: Αυτός ο τύπος είναι ισοδύναμος με το HTML 4.01 Transitional, με τη διαφορά ότι τα πλαίσια είναι επιτρεπτά. Παράδειγμα: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> 11
Δομή σελίδας και βασικές ετικέτες Όπως προαναφέρθηκε, ο κώδικας κάθε σελίδας HTML αρχίζει με την ετικέτα <HTML> και τελειώνει με την </HTML>. Μεταξύ αυτής της διπλής ετικέτας γράφεται ο κώδικας της HTML σελίδας και πριν τη δήλωσή της ετικέτας καλό θα είναι να προηγείται η ετικέτα <!DOCTYPE>. Ο ρόλος της απλής αυτής ετικέτας, είναι να αναγνωρίσει ο browser ότι το κείμενο που περιέχει είναι κώδικας HTML, έτσι ώστε να το ερμηνεύσει ανάλογα. Ο κώδικας HTML αποτελείται από δύο βασικά τμήματα: την επικεφαλίδα και το κυρίως σώμα της σελίδας. Η επικεφαλίδα ορίζεται μέσα σε διπλή ετικέτα <HEAD> και </HEAD>, ενώ το κυρίως σώμα της σελίδας ορίζεται μέσα στη διπλή ετικέτα <BODY> και </BODY>. 12
Δομή σελίδας και βασικές ετικέτες Η επικεφαλίδα συνήθως περιγράφει το περιεχόμενο της σελίδας. Ο τίτλος της σελίδας, ο οποίος εμφανίζεται στο πάνω μέρος του browser, περιέχεται στην επικεφαλίδα και μέσα στη διπλή ετικέτα <TITLE> </TITLE>. Παράδειγμα: <head> <title> Εδώ τοποθετείται ο τίτλος της σελίδας </title> </head> Το κυρίως σώμα της σελίδας ξεκινά αμέσως μετά την επικεφαλίδα και περιλαμβάνει όλα τα συστατικά στοιχεία της σελίδας, όπως κείμενο, εικόνες, ήχους, συνδέσμους κ.λπ. 13
Δομή σελίδας και βασικές ετικέτες HTML κώδικας Επικεφαλίδα Κυρίως Σώμα <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="el"> <head> </head> <body> </body> </html> <title>η πρώτη σελίδα</title> <meta charset="utf-8" /> Η πρώτη μου σελίδα στο Διαδίκτυο 14
Δομή σελίδας και βασικές ετικέτες Κείμενο σελίδας Τίτλος σελίδας Οπτικό αποτέλεσμα μετάφρασης κώδικα από έναν browser Σημείωση: Η δήλωση <meta charset="utf-8"/> στο τμήμα <head>, είναι απαραίτητη για την άμεση κωδικοποίηση της σελίδας στην Ελληνική γλώσσα από το browser. 15
Δομή σελίδας και βασικές ετικέτες Κείμενο σελίδας Τίτλος σελίδας Αποτέλεσμα απεικόνισης κειμένου στην Ελληνική γλώσσα από έναν browser, με παράληψη της δήλωσης <meta charset="utf-8"/> 16
Ιεραρχία (Hierarchy) Στην HTML, κάθε στοιχείο αποτελεί «απόγονο» (descendant) κάποιου άλλου στοιχείου, εκτός από το στοιχείο <html>, που αποτελεί πρόγονο (anchestor) για κάθε στοιχείο στη σελίδα σας. Το κάθε στοιχείο μπορεί να έχει και δικούς του απογόνους, εκτός αν πρόκειται για μονές ετικέτες (self closing στοιχεία), όπως η img και η input, οι οποίες δε διαθέτουν tag κλεισίματος (end tag). Έτσι διαμορφώνεται μια ιεραρχία, η οποία αποτελεί το DOM tree (Document Object Model tree). Παράδειγμα Ιεραρχίας 17
Ιεραρχία (Hierarchy) 18 Document Object Model tree
Ιεραρχία (Hierarchy) Παράδειγμα: <html> <head> <title>παράδειγμα DOM</title> </head> <body> <h1>σχολείο</h1> <p>1ο ΕΠΑΛ Κατερίνης</p> </body> </html> head html body title h1 p #text #text #text To DOM tree του παραδείγματος 19
Ιεραρχία (Hierarchy) Ανάλυση του κώδικα HTML του παραδείγματος (διαφ. 19): <html> είναι ο κόμβος ρίζα και δεν έχει γονείς <html> είναι ο γονιός των <head> και <body> <head> είναι το 1 ο παιδί του <html> <body> είναι το τελευταίο παιδί του <html> Και <head> έχει ένα παιδί <title> <title> έχει ένα παιδί (το κείμενο) "Παράδειγμα DOM" <body> έχει δύο παιδία <h1> και <p> <h1> έχει ένα παιδί (το κείμενο) "Σχολείο" <p> έχει ένα παιδί (το κείμενο) "1ο ΕΠΑΛ Κατερίνης" <h1> και <p> είναι αδέλφια 20
Κανόνες σύνταξης της XHTML Η XHTML είναι ότι και η HTML μιας και αποτελεί απλά επέκταση αυτής. Πιο συγκεκριμένα αποτελεί συνδυασμό με την XML, με τη διαφορά ότι ακολουθεί κάποιους επιπλέον αυστηρούς κανόνες δόμησης κυρίως. Σήμερα όλοι οι browsers είναι συμβατοί και μπορούν να «διαβάσουν» XHTML κώδικα, ενώ όλο και περισσότερες ιστοσελίδες χρησιμοποιούν το πρότυπο της XHTML ή της HTML5, αντί αυτού της HTML. Οι κανόνες σύνταξης που υπακούει η XHTML είναι οι παρακάτω: Ετικέτες, ιδιότητες και τιμές γράφονται με πεζούς χαρακτήρες. Παράδειγμα: <p align="center"> μπλα... μπλα...</p> 21
Κανόνες σύνταξης της XHTML Οι τιμές των ιδιοτήτων θα πρέπει να εσωκλείονται σε διπλά εισαγωγικά. Παράδειγμα: <hr align="center" size="7" width="50%"/> Όλες οι XHTML ετικέτες πρέπει να κλείνουν. Μερικές ετικέτες όπως η <br>, η <img>, και η <input> δεν έχουν ετικέτα τέλους. Στην περίπτωση αυτή, βάζουμε «/» πριν το δεξιό κλείσιμο της ετικέτας. Παράδειγμα: <img src="./logo.gif" border="2"/><br/> Οι XHTML ετικέτες πρέπει να είναι σωστά φωλιασμένες (η πρώτη που ανοίγει, κλείνει τελευταία). Παράδειγμα: <b><i><u>μαθαίνω XHTML</u></i></b> 22
Κανόνες σύνταξης της XHTML Ο κώδικας XHTML, όπως και αυτός της HTML, πρέπει να εσωκλείεται από μια ετικέτα-ρίζα, δηλαδή οτιδήποτε γράφεται μέσα στον κώδικα πρέπει να υπάρχει μέσα στις ετικέτες <html> και </html>. Η ιδιότητα lang μπορεί να εφαρμοστεί σχεδόν σε όλες τις ετικέτες της XHTML και προσδιορίζει τη γλώσσα, στην οποία είναι γραμμένο το κείμενο. Παράδειγμα: <html xmlns="http://www.w3.org/1999/xhtml" lang="el" xml:lang="el"> 23
Κανόνες σύνταξης της XHTML Η HTML 4.01 ορίζει την ιδιότητα (attribute) name, για τα στοιχεία a, applet, frame, iframe, img και map. Στην XHTML, στη θέση της ιδιότητας name χρησιμοποιείται η ιδιότητα id. Παράδειγμα: <img src= "myface.gif" id="pic1"/> Η σύντμηση δεν επιτρέπεται στην XHTML, όπως σε ορισμένες περιπτώσεις στην HTML, όπου μπορείτε να παραλείψετε την τιμή μιας ιδιότητας, όταν αυτή είναι ίδια με την ιδιότητα. Παράδειγμα XHTML: <input type="radio" checked="checked"/> Παράδειγμα HTML: <input type="radio" checked/> 24
Κανόνες σύνταξης της XHTML HTML XHTML compact compact="compact" checked checked="checked" declare declare="declare" readonly readonly="readonly" disabled disabled="disabled" selected selected="selected" defer defer="defer" ismap ismap="ismap" nohref nohref="nohref" noshade noshade="noshade" nowrap nowrap="nowrap" multiple multiple="multiple" noresize noresize="noresize" Συντμήσεις των ιδιοτήτων που υπάρχουν στην HTML και οι αντιστοιχίσεις τους στην XHTML 25
Κανόνες σύνταξης της XHTML Όλα τα έγγραφα της XHTML πρέπει να έχουν μια δήλωση DOCTYPE, η οποία ορίζει τον τύπο του εγγράφου. Επίσης πρέπει να υπάρχουν τα στοιχεία html, head και body και το στοιχείο title πρέπει να βρίσκεται μέσα στο στοιχείο head. 26
Κανόνες σύνταξης της XHTML Το XHTML στάνταρτ ορίζει επίσης τρεις DTD, τους Transitional, Frameset και Strict. XHTML 1.0 Strict: Χρησιμοποιήστε το όταν θέλετε να τηρήσετε πραγματικά τους κανόνες του προτύπου της XHTML 1.0. Σε αυτού του τύπου τα έγγραφα, μπορείτε να χρησιμοποιήσετε ετικέτες XHTML αλλά και κώδικα CSS, σύμφωνα με το πρότυπο της XHTML 1.0. Επίσης σε αυτό το DTD δεν θα πρέπει να έχετε ετικέτες, οι οποίες έχουν αποκλειστεί από το πρότυπο της HTML 4.01 (<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> και <script>). Παράδειγμα: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/ DTD/xhtml1-strict.dtd"> 27
Κανόνες σύνταξης της XHTML XHTML 1.0 Transitional: Χρησιμοποιήστε το, όταν θέλετε να χρησιμοποιήσετε στο έγγραφό σας και ετικέτες που έχουν αποκλειστεί από το πρότυπο της HTML 4.01, όπως οι <font>, <cite> κ.λπ. Παράδειγμα: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/ xhtml1/dtd/xhtml1-transitional.dtd"> XHTML 1.0 Frameset: Χρησιμοποιήστε το, όταν θέλετε να χρησιμοποιήσετε frames, τα οποία δε συνιστά το πρότυπο της XHTML 1.0. Παράδειγμα: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/ xhtml1/dtd/xhtml1-frameset.dtd"> 28
Κανόνες σύνταξης της XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="el" xml:lang="el"> <head> <title>η πρώτη σελίδα</title> <meta charset="utf-8"/> </head> <body> Η πρώτη μου σελίδα στο Διαδίκτυο </body> </html> 29 XHTML κώδικας
Κανόνες σύνταξης της HTML5 Λόγω των εντυπωσιακών της δυνατοτήτων, είναι σχεδόν βέβαιο ότι η HTML5 θα είναι το μέλλον στον Παγκόσμιο Ιστό. Στην HTML5 δεν υπάρχουν πολλοί νέοι κανόνες σύνταξης, παρά μόνο κάποιες αλλαγές σε παλιούς, όπως: Είναι περισσότερο ευέλικτη όσον αφορά στη σύνταξή της. Για παράδειγμα, δε κάνει διάκριση πεζών-κεφαλαίων (case insensitive) και επιτρέπει τέσσερις διαφορετικές μορφές σύνταξης των ιδιοτήτων. Τύπος Empty Unquoted Παράδειγμα <input type="text" value="html" disabled> <input type="text" value=html> Double-quoted <input type="text" value="html 5"> Single-quoted <input type="text" value='html 5'> 30
Κανόνες σύνταξης της HTML5 Η δήλωση doctype έχει μια μοναδική μορφή. Παράδειγμα: <!DOCTYPE html> Δεν χρειάζεται να χρησιμοποιήσετε Τύπο για τις συνδέσεις και τα Scripts. Παραδείγματα: <link rel="stylesheet" href="path/to/stylesheet.css"> αντί για <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css"> <script src="path/to/javascript.js"> </script> αντί για <script type="text/javascript" src="path/to/javascript.js"> </script> 31
Κανόνες σύνταξης της HTML5 <!DOCTYPE html> <html lang="el"> <head> </head> <body> <title> Η πρώτη σελίδα </title> <meta charset="utf-8"/> Η πρώτη μου σελίδα στο Διαδίκτυο </body> </html> 32 Μορφή ενός HTML5 εγγράφου
Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) Για τον έλεγχο της εγκυρότητας του HTML κώδικα της σελίδας σας, μπορείτε να κάνετε χρήση ενός από τα πολλά ειδικά sites, που μπορείτε να βρείτε και να χρησιμοποιήσετε στο Διαδίκτυο. Για παράδειγμα, ένα από αυτά είναι το site του W3C, που είναι ο υπεύθυνος οργανισμός για την εξέλιξη της HTML: https://validator.w3.org Κατά την επίσκεψή σας στο site, έχετε να επιλέξετε τον τρόπο ελέγχου της εγκυρότητας του κώδικά σας, μέσα από τις τρεις επιλογές: Πληκτρολογώντας το URI (Uniform Resource Identifier) στο κατάλληλο πλαίσιο. Ανεβάζοντας το html αρχείο για έλεγχο. Άμεσα, επικολλώντας τον κώδικα html στο κατάλληλο πλαίσιο. 33
Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) 34 Αρχικό παράθυρο του Markup Validation Service της W3C
Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) 35 Άμεσος έλεγχος εγκυρότητας κώδικα HTML
Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) 36 Επισήμανση εσφαλμένου κώδικα HTML
Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) 37 Επισήμανση εσφαλμένου κώδικα HTML
Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) Στο Διαδίκτυο μπορείτε να βρείτε επίσης εφαρμογές, δωρεάν ή μη, οι οποίες πραγματοποιούν έλεγχο της εγκυρότητας του κώδικά σας, όπως το CSE HTML Validator Lite. 38 Περιβάλλον εφαρμογής CSE HTML Validator Lite
Πηγές Προγραμματιστικά Εργαλεία για το Διαδίκτυο: Σχολικό βιβλίο W3schools (http://www.w3schools.com) WLearn (http://www.wlearn.gr) 39