Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #2 0 : Εισαγωγή στην XHTML Γαβαλάς Δαμιανός dgavalas@aegean.gr Στόχοι εργαστηρίου Η γλώσσα XHTML: διαφορές με HTML, μετατροπή HTML εγγράφων σε XTML, Έλεγχος εγκυρότητας (validation) XHTML εγγράφων Σχεδιασμός web sites με χρήση CSS Γραμματοσειρές, χρώμα, background γραφικά, μηχανισμοί πλοήγησης, δημιουργία εφέ, σχεδιασμός διάταξης (layout) ιστοσελίδων, σχεδιασμός πινάκων δεδομένων και φορμών Σχεδιασμός web sites προσβάσιμων από άτομα με προβλήματα όρασης Σχεδιασμός web sites για μικρές κινητές συσκευές 1
HyperText Markup Language: HTML (Ι) Γλώσσα κειμένου που χρησιμοποιείται για να δημιουργηθούν σελίδες ιστού. HyperText (υπερ κείμενο): δίνει στο χρήστη τη δυνατότητα ανάγνωσης και κίνησης μέσα σε κείμενο και άλλες μορφές οπτικής πληροφορίας με μη γραμμικό τρόπο ακολουθώντας μια σειρά από συνδέσμους Σχεδιάστηκε για να καθορίσει τη λογική οργάνωση ενός αρχείου κειμένου που προορίζεται να «δημοσιευτεί» στον παγκόσμιο ιστό Ουσιαστικά πρόκειται για μια γλώσσα οδηγιών που καθοδηγεί διαφορετικά προγράμματα ανάγνωσης ιστοσελίδων (φυλλομετρητές browsers) να «μεταφράσουν» τις οδηγίες και να σχεδιάσουν τα αποτελέσματα (πληροφορία) στη σελίδα του χρήστη Οι οδηγίες της HTML δίνονται με χρήση των ετικετών (tags). Οι ετικέτες είναι το τμήμα εκείνο του κειμένου που περικλείεται από τα σύμβολα μικρότερο (<) και μεγαλύτερο (>) και την εντολή μέσα στα σύμβολα αυτά που αποτελεί την οδηγία. Οι ετικέτες «ανοίγουν» και «κλείνουν». Π.χ.: <b>this text will be displayed as bold!</b> HyperText Markup Language: HTML (II) Ενα HTML αρχείο είναι ένα απλό αρχείο κειμένου (text file). Έτσι, δεν χρειάζεται ένα ειδικό επεξεργαστή κειμένου. Αρκεί ένας απλός επεξεργαστής κειμένου όπως είναι το NotePad ή το MS Word Υπάρχουν ωστόσο και ειδικά προγράμματα για τη γρήγορη και εύκολη συγγραφή HTML κώδικα (web authoring tools), όπως το MS FrontPage ή το Adobe Dreamweaver (απαιτούν άδεια!) και άλλα τα οποία διατίθενται δωρεάν Η HTML δεν αποτελεί έναν "Παίρνεις Αυτό Που Βλέπεις" (What You See Is What You Get, WYSIWYG) επεξεργαστή κειμένου όπως το MS Word. Δηλαδή, ο HTML κώδικας δεν απεικονίζεται αυτούσιος όταν το HTML αρχείο ανοίγεται από έναν browser 2
Βασική δομή ενός HTML εγγράφου Δηλώνει την ύπαρξη HTML κώδικα Τα κυρίως περιεχόμενο που περιλαμβάνει τα στοιχεία που αναλύονται και απεικονίζονται στην οθόνη <HTML> <HEAD> </HEAD> <BODY> Επικεφαλίδα: περιέχει πληροφορίες σχετικά με το υπερκείμενο (τίτλος, λέξειςκλειδιά,...) </BODY> </HTML> Ένα πρώτο αρχείο HTML <html> <head> <title>page il Title</title> i l </head> <body> These are the pages contents </body> </html> Τι αποτέλεσμα θα εμφανίσει στην οθόνη; 3
Τι είναι οι ετικέτες (tags) της HTML; Όταν ο web browser εμφανίζει μία σελίδα στην ουσία διαβάζει από ένα αρχείο απλoύ κειμένου και κοιτάει για ειδικούς κώδικες ή αλλιώς "ετικέτες" που περιλαμβάνονται μεταξύ των συμβόλων < και >. Η γενική μορφή μιας HTML ετικέτας είναι: <tag_name>σώμα κειμένου</tag_name> Οι ετικέτες συνιστούν οδηγίες προς τον browser σχετικά με το πως θα μορφοποιήσει και θα εμφανίσει το σώμα κειμένου που βρίσκεται ανάμεσά τους Άσκηση #1 Δημιουργήστε ένα folder lab02 όπου θα αποθηκεύσετε τα αρχεία του σημερινού εργαστηρίου και έναν subfolder images μέσα σε αυτόν Αποθηκεύστε το λογότυπο του Τμήματος Πολιτισμικής Τεχνολογίας & Επικοινωνίας στον images Δημιουργήστε μια html σελίδα όπου να εμφανίζεται το λογότυπο σε διαστάσεις 700x110, το οποίο να λειτουργεί ως link προς τη σελίδα http://www.ct.aegean.gr/ 4
Τι πρόβλημα υπάρχει με την HTML; Η HTML έχει ένα συντακτικό (οδηγίες ή σήμανση) κατανοητό από ειδικά προγράμματα που λέγονται φυλλομετρητές (browsers) Όλοι οι διαθέσιμοι browsers σήμερα (π,χ, Internet Explorer, Mozilla Firefox, Chrome, Safari, Opera, Netscape, κλπ) είναι συμβατοί (υποστηρίζουν, κατανοούν) το συντακτικό της HTML 4.x Δυστυχώς, οι HTML σελίδες δεν εμφανίζονται ακριβώς με τον ίδιο τρόπο σε όλους τους browsers Το πρόβλημα μεγεθύνεται στους browsers κινητών τηλεφώνων ή PDAs Βασικός στόχος κάθε πληροφορικού που σχεδιάζει και αναπτύσσει ιστοτόπους (web developer) είναι να εξασφαλίσει ότι το μεγαλύτερο δυνατό ποσοστό επισκεπτών θα «δουν» τις σελίδες του όπως ακριβώς εκείνος επιθυμεί. O πόλεμος των browsers To 1994 η Netscape για να προσελκύσει χρήστες, δημιούργησε ένα σύνολο επεκτάσεων της HTML που δεν προδιαγράφονταν στο πρότυπο (standard) της HTML και υποστηρίζονταν μόνο από τον Netscape browser Οι χρήστες άλλων browsers δεν μπορούσαν να δουν ή έβλεπαν προβληματικές όλες τις σελίδες που ενσωμάτωναν αυτές τις «ιδιωτικές» ετικέτες Με τη σειρά της η Microsoft ανταπέδωσε δημιουργώντας τις δικές της ιδιωτικές ετικέτες που μπορούσε να «δει» μόνο ο Internet Explorer Οι web developers έχαναν το 25% του χρόνου τους δημιουργώντας διαφορετικές εκδόσεις της ίδιας σελίδας!! 5
Η ανάγκη για standards Τάξη στο χάος προσπάθησε να βάλει το World Wide Web Consortium (W3C) που διευθύνεται από τον εφευρέτη του web Tim Berners Lee Στο W3C ανήκουν εταιρίες μεγαθήρια του χώρου της πληροφορικής, ανάμεσά τους εταιρίες που έχουν κατασκευάσει τους δημοφιλέστερους browsers Η ιδέα πίσω από το W3C είναι η συμφωνία όλων αυτών των παικτών πάνω σε ένα σύνολο από προδιαγραφές (standards) για την HTML και άλλες τεχνολογίες του διαδικτύου έτσι ώστε τα προϊόντα τους (browsers) να εμφανίζουν τις ιστοσελίδες με πανομοιότυπο τρόπο Έτσι φτάσαμε στο πρότυπο HTML 3.2 HTML 4 και CSS Στην έκδοση 3.2 το περιεχόμενο, η δομή και η μορφοποίηση της ιστοσελίδας περιγράφονται σε ένα html έγγραφο Το W3C ανακοίνωσε τις προδιαγραφές μιας νέας αρχιτεκτονικής που διαχώριζε από τη μια το περιεχόμενο και τη δομή και από την άλλη τη μορφοποίηση Έτσι, στην έκδοση HTML 4, οι περισσότερες ετικέτες που μορφοποιούν περιεχόμενο (π.χ. <b>, <i>, κλπ) επισημάνθηκε ότι πρόκειται να αφαιρεθούν (να μην υποστηρίζονται στο μέλλον: deprecated) και η χρήση τους αποθαρύνθηκε Παράλληλη, δημιουργήθηκε μια νέα τεχνολογία για τη μορφοποίηση HTML εγγράφων, τα CSS (Cascading Style Sheets) Από την έκδοση CSS 2 (1996) αυτή η τεχνολογία μπορούσε να χρησιμοποιηθεί για τη δημιουργία επαγγελματικών διατάξεων (layouts) εκτός από απλή μορφοποίηση 6
Η λύση Ωστόσο, οι browsers εξακολουθούν και υποστηρίζουν «ιδιωτικές» επεκτάσεις της HTML με αποτέλεσμα να εμφανίζουν τις ιστοσελίδες με διαφορετικό τρόπο Παράλληλα, στην HTML δεν υπάρχει κάποιο πρότυπο σύστημα για την προσθήκη νέων στοιχείων (λειτουργικότητας) Το W3C αποφάσισε πως την λύση μπορούσε να προσφέρει η XML (extensible Markup Language Επεκτάσιμη Γλώσσα Σήμανσης) XML και XHTML Με μια πρώτη ματιά, η XML μοιάζει με την HTML: διαθέτει ετικέτες, παραμέτρους (attributes) και τιμές Ωστόσο, η XML δεν είναι μια γλώσσα για τη δημιουργία ιστοσελίδων αλλά μια γλώσσα για τη δημιουργία άλλων γλωσσών (μετα γλώσσα) Μπορούμε να χρησιμοποιήσουμε την XML για να δημιουργήσουμε τη δική μας γλώσσα σήμανσης η οποία θα είναι η βάση για μορφοποιήσουμε τα έγγραφά μας Η XML είναι εξαιρετικά ευέλικτη καθώς εμείς αποφασίζουμε ποιες ετικέτες θα χρησιμοποιήσουμε αλλά αυτή η ευελιξία έχει ένα τίμημα: είναι πολύ αυστηρή! Απαιτεί προσοχή στο γράψιμο των ετικετών με πεζούς ή κεφαλαίους χαρακτήρες, στο κλείσιμο των εισαγωγικών και ετικετών, κλπ 7
Μετα γλώσσες και γλώσσες σήμανσης Μετα-γλώσσες (metalanguages) που χρησιμοποιούνται για την περιγραφή γλωσσών σήμανσης (markup languages), δηλ για να δημιουργήσουν εξειδικευμένες γλώσσες εφαρμογών (application languages) Εξειδικευμένες γλώσσες εφαρμογών Ένα XML έγγραφο <? xml version= 1.0?> <INVENTORY> <BOOK> <TITLE>Moby Dick</TITLE> <AUTHOR>Herman Melville</AUTHOR> <BINDING>trade paperback</binding> <PAGES>605</PAGES> <PRICE>$30</PRICE> </BOOK> <BOOK> <TITLE>The Scarlet Letter</TITLE> <AUTHOR>Nathaniel Howthorne</AUTHOR> <BINDING>trade paperback</binding> <PAGES>253</PAGES> <PRICE>$4.25</PRICE> </BOOK> </INVENTORY> Επιλογή περιγραφικών ονομάτων για τα στοιχεία 8
XML και XHTML Η HTML δεν είναι αυστηρή: ακόμα και αν ξεχάσουμε να κλείσουμε μια ετικέτα, η σελίδα θα εμφανιστεί στον browser, έστω και προβληματικά Επιπλέον, σήμερα υπάρχουν διαθέσιμες στο web δις σελίδες γραμμένες σε HTML To W3C βρήκε μια έξυπνη λύση: ξαναέγραψε την HTML σε XML Αυτή η νέα γλώσσα ονομάστηκε XHTML (extensible HTML) διατήρησε όλα τα στοιχεία της HTML, άρα: είναι συμβατή με τους σημερινούς browsers Όσοι γνωρίζουν HTML χρειάζονται να μάθουν λίγους απλούς συντακτικούς κανόνες Καθώς χρησιμοποιεί XML σύνταξη κερδίζει από τη δύναμη και ευελιξία της και συνεργάζεται πολύ καλά με τα CSS Η XHTML με δυο λόγια Η XHTML είναι σχεδόν πανομοιότυπη με την HTML 4.01 Η XHTML είναι μια αυστηρότερη και καθαρότερη εκδοχή της HTML Η XHTML είναι HTML ορισμένη ως εφαρμογή της XML (ακολουθεί δηλαδή τους κανόνες και προδιαγραφές της XML) Αποτελείται από όλα τα στοιχεία της HTML 4.01 χρησιμοποιώντας τους συντακτικούς κανόνες της XML) Η XHTML είναι ένα πρότυπο του W3C (από το 2000) Όλοι οι μοντέρνοι browsers υποστηρίζουν (είναι συμβατοί με) την XHTML 9
Γιατί XHTML;;; Είμαστε σε ένα σημείο όπου πολλές σελίδες στο web είναι γραμμένες σε «κακή»html Ο παρακάτω HTML κώδικας «δουλεύει» σε ένα browser, παρότι δεν ακολουθεί τους κανόνες της HTML: <html> <head> <title>this is bad HTML</title> <body> <h1>bad HTML </body> Γιατί XHTML;;; Οι XML γλώσσες (οι γλώσσες σήμανσης που ακολουθούν τις προδιαγραφές της HTML) οφείλουν να έχουν σωστή σύνταξη Το αποτέλεσμα πρέπει να είναι «σωστά διατυπωμένα» ("well formed ) έγγραφα Η XML σχεδιάστηκε για να περιγράφει δεδομένα ενώ η HTML σχεδιάστηκε για να εμφανίζει δεδομένα Η αγορά σήμερα εμπεριέχει πολλές διαφορετικές τεχνολογίες browsers, κάποιοι τρέχουν σε Η/Υ και κάποιοι σε κινητά τηλέφωνα ή άλλες μικρές συσκευές. Οι τελευταίοι δεν μπορούν να ερμηνεύσουν σελίδες γραμμένες σε «κακή» ή HTML Άρα, συνδυάζοντας τις HTML και XML, με τις δυνατές του πλευρές, προκύπτει μια γλώσσα σήμανσης που είναι χρήσιμη τώρα και στο μέλλον, η XHTML 10
Διαφορές μεταξύ XHTML και HTML Η XHTML δεν είναι πολύ διαφορετική από το πρότυπο HTML 4.01 Άρα κάνοντας το έγγραφό μας συμβατό με το 401 4.01 πρότυπο είναι μια πολύ καλή αρχή Επιπλέον, οι ετικέτες πρέπει να γράφονται με πεζά γράμματα και ποτέ να μην παραλείπονται οι ετικέτες λήξης (π.χ. </p>) Οι βασικότερες διαφορές: Τα XHTML στοιχεία (ετικέτες) πρέπει να είναι κατάλληλα φωλιασμένα (nested) ή ενσωματωμένα το ένα μέσα στο άλλο Τα XHTML στοιχεία πρέπει πάντοτε να κλείνονται Τα XHTML στοιχεία γράφονται πάντοτε με πεζούς χαρακτήρες Τα XHTML έγγραφα πρέπει να έχουν ένα ριζικό στοιχείο (root element) Τα XHTML στοιχεία πρέπει να είναι κατάλληλα φωλιασμένα Στην HTML, κάποια στοιχεία επιτρέπεται να μην είναι κατάλληλα φωλιασμένα το ένα μέσα στο άλλο, π.χ.: <b><i>this text is bold and italic</b></i> Στην XHTML είναι υποχρεωτικό να είναι κατάλληλα φωλιασμένα, π.χ.: <b><i>this text is bold and italic</i></b> 11
Τα XHTML στοιχεία πρέπει πάντοτε να κλείνονται Τα στοιχεία που δεν είναι άδεια (non empty), δηλαδή περιέχουν κάποια δεδομένα, πρέπει να κλείνουν με μια ετικέτα λήξης Αυτό είναι λάθος: <p>this is a paragraph <p>this is another paragraph Αυτό είναι σωστό: <p>this is a paragraph</p> <p>this is another paragraph</p> Τα XHTML στοιχεία γράφονται πάντοτε με πεζούς χαρακτήρες Στις προδιαγραφές (πρότυπο) της XHTML ορίζεται ότι τα ονόματα των ετικετών πρέπει να γράφονται με πεζούς χαρακτήρες: Αυτό είναι λάθος: <BODY> <P>This is a paragraph</p> </BODY> Αυτό είναι σωστό: <body> <p>this is a paragraph</p> </body> 12
Τα XHTML έγγραφα πρέπει να έχουν ένα ριζικό στοιχείο Όλα τα XHTML στοιχεία πρέπει να είναι φωλιασμένα με σα σε ένα <html> ριζικό στοιχείο. Όλα τα υπόλοιπα στοιχεία μπορούν να περιλαμβάνουν υπο στοιχεία (στοιχεία παιδιά). Τα υπο στοιχεία πρέπει να γράφονται σε ζευγάρια (δηλ. με ετικέτα λήξης) και να είναι σωστά φωλιασμένα μέσα στο πατρικό τους στοιχείο. Η βασική δομή του εγγράφου είναι: <html> <head>... </head> <body>... </body> </html> Συντακτικοί κανόνες για τις ιδιότητες Τα ονόματα των ιδιοτήτων γράφονται με πεζούς χαρακτήρες. Λάθος: <table WIDTH="100%"> Σωστό: <table width="100%"> Οι τιμές των ιδιοτήτων πρέπει να εσωκλείονται σε διπλά εισαγωγικά. Λάθος: <table width=100%> Σωστό: <table width="100%"> 13
Υποχρεωτικά XHTML στοιχεία Όλα τα XHTML έγγραφα πρέπει να έχουν μια DOCTYPE δήλωση. Η DOCTYPE δήλωση δεν είναι ακριβώς μέρος του XHTML εγγράφου, δηλ δεν είναι ένα XHTML στοιχείο και δεν χρειάζεται να έχει ετικέτα λήξης Το παρακάτω είναι ένα ελάχιστο πρότυπο XHTML εγγράφου: <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title goes here</title> </head> <body> </body> </html> <!DOCTYPE> Άρα ένα XHTML έγγραφο αποτελείται από 3 κυρίως μέρη: την DOCTYPE δήλωση το <head> τμήμα το <body> τμήμα Η DOCTYPE δήλωση ορίζει τον τύπο του εγγράφου (Document Type Definition, DTD). Το υπόλοιπο έγγραφο μοιάζει με τα HTML έγγραφα. Ένας τύπος εγγράφου XHTML (δηλαδή ένα XHTML DTD) περιγράφει με ακρίβεια την επιτρεπόμενη XHTML σήμανση Υπάρχουν 3 επιτρεπτοί τύποι εγγράφων XHTML (DTDs): STRICT TRANSITIONAL FRAMESET 14
XHTML 1.0 Strict Το strict (αυστηρό) DOCTYPE χρησιμοποιείται όταν θέλουμε πραγματικά «καθαρή» σήμανση, χωρίς δηλαδή ετικέτες που καθορίζουν την παρουσίαση του εγγράφου Χρησιμοποιείται σε συνάρτηση με CSS <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 strict.dtd"> XHTML 1.0 Transitional Το transitional (μεταβατικό) DOCTYPE χρησιμοποιείται όταν θέλουμε να διατηρήσουμε τις δυνατότητες μορφοποίησης που παρέχει η HTML <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> 15
XHTML 1.0 Frameset Το frameset DOCTYPE χρησιμοποιείται όταν θέλουμε να χρησιμοποιήσουμε HTML πλαίσια (frames) για να διαχωρίσουμε μια σελίδα σε δύο ή περισσότερα πλαίσια <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 frameset.dtd"> Έλεγχος εγκυρότητας (validation) ΧΗΤΜL κώδικα Το επίσημο εργαλείο ελέγχου εγκυρότητας της W3C http://validator.w3.org/ Ελέγχει για μια σελίδα που έχουμε ήδη ανεβάσει σε κάποιον διακομιστή ή που έχουμε αποθηκευμένη στον Η/Υ μας (την κάνουμε upload για να ελεγχθεί) Υπάρχουν εργαλεία που μετατρέπουν τα αρχεία μας από HTML σε (ένα συγκεκριμένο τύπο εγγράφου) XHTML, π.χ.: HTML TIDY, http://www.w3.org/people/raggett/tidy/ 16
Έλεγχος εγκυρότητας (validation) ΧΗΤΜL κώδικα Άσκηση #2 Ανοίξτε από τη σελίδα του εργαστηρίου το αρχείο bad_html.html και βρείτε τα λάθη στον κώδικα προσπαθώντας να το επικυρώσετε με το εργαλείο: http://validator.w3.org/ Σε περίπτωση που ο validator εντοπίσει λάθος στη χρήση κάποιας ιδιότητας (attribute) που δεν υπάρχει, διορθώστε το λάθος όχι αφαιρώντας την ιδιότητα αλλά αλλάζοντας τον τύπο του εγγράφου (DOCTYPE) 17
XHTML Character Sets Για να εμφανίσει σωστά μια (Χ)HTML σελίδα, ο browser πρέπει να γνωρίζει ποιο character set (κωδικοποίηση) να χρησιμοποιήσει Το character set που χρησιμοποιούνταν στις πρώτες ημέρες του web ήταν ο ASCII Ο ASCII υποστηρίζει τους αριθμούς 0 9, τα πεζά και κεφαλαία γράμματα του αγγλικού αλφαβήτου και κάποιους ειδικούς χαρακτήρες Επειδή πολλές γλώσσες χρησιμοποιούν χαρακτήρες που δεν είναι μέρος του ASCII (π.χ. κάποιοι γαλλικοί ή ισπανικοί χαρακτήρες), ) το df default character set των μοντέρνων browsers είναι το ISO 8859 1 Πρακτικά, το ISO 8859 1 συμπεριλαμβάνει όλους τους λατινικούς χαρακτήρες (Βόρεια Αμερική, Δυτική Ευρώπη, Λατινική Αμερική, Αφρική) XHTML Character Sets Άλλα character sets: ISO 8859 2 (Ανατολική Ευρώπη), ISO 8859 7 (νέα ελληνικά), Όταν μια ιστοσελίδα χρησιμοποιεί διαφορετικό character set από το ISO 8859 1, πρέπει να προσδιορίζεται στο αντίστοιχο <meta> tag (μέσα στο <head> τμήμα) <meta http equiv="content type" content="text/html; charset=utf 8"/> Επειδή τα παραπάνω character sets είναι περιορισμένα σε εύρος και δεν είναι συμβατά με πολυγλωσσικά περιβάλλοντα, αναπτύχθηκε το Unicode standard που καλύπτει όλους τους χαρακτήρες και σύμβολα των γλωσσών του κόσμου. Το πρότυπο Unicode υλοποιείται με διάφορα character sets To πιο κοινό είναι το UTF 8, το οποίο είναι το πλέον κατάλληλο για σελίδες με πολυγλωσσικό (multilingual) περιεχόμενο 18
Άσκηση #3 Στο αρχείο της προηγούμενης άσκησης, προσθέστε στον XHTML κώδικα κάποιους ελληνικούς χαρακτήρες και ανοίξτε το σε ένα browser Προσπαθήστε να αντιμετωπίσετε το πρόβλημα που προκύπτει με την εμφάνιση των ελληνικών χαρακτήρων 19