9 ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ HTML

Transcript

1

2 9 ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ HTML Βασικές Έννοιες Διαδίκτυο, Παγκόσμιος Ιστός, Ιστοσελίδες URL Έγγραφο HTML, Υπερκείμενο Σήμανση HTML CSS HTML 5

3 9.1 ΙΝΤΕΡΝΕΤ, ΙΣΤΟΣ, ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ HTML Το διαδίκτυο (internet) είναι ένα παγκόσμιο δίκτυο διασυνδεμένων δικτύων υπολογιστών στο οποίο ανταλλάσσονται δεδομένα μέσω του πρωτοκόλλου επικοινωνίας TCP/IP. Στο ίντερνετ προσφέρονται διάφορες υπηρεσίες επικοινωνίας και διάδρασης. Ο παγκόσμιος ιστός, γνωστός ως World Wide Web, η απλά Web, είναι μια υπηρεσία που υλοποιείται μέσω του διαδικτύου. Άλλες υπηρεσίες που προσφέρονται στο διαδίκτυο είναι το ηλεκτρονικό ταχυδρομείο ( ), η ανταλλαγή αρχείων (ftp), τηλεφωνία, τηλεδιάσκεψη κ.ά. Σύμφωνα με την κοινοπραξία του παγκόσμιου ιστού W3C 1 ο ιστός είναι: «... ένας χώρος πληροφορίας στον οποίο τα αντικείμενα ενδιαφέροντος, αναφερόμενα ως πόροι, αναγνωρίζονται από στοιχεία που ονομάζονται Ενιαία Αναγνωριστικά Πόρων (Uniform Resource Identifiers,)» (WWW Consortium 2004). Ο ιστός, λοιπόν, είναι ένα χώρος πληροφορίας (κατά βάση εγγράφων αλλά και άλλων πόρων), στον οποίο διασυνδέονται υπολογιστές χρηστών (clients) μέσω ενός πρωτοκόλλου επικοινωνίας γνωρίζοντας τα μοναδικά αναγνωριστικά των πόρων και χρησιμοποιώντας εφαρμογές περιήγησης (web browsers) οι χρήστες έχουν τη δυνατότητα πρόσβασης σε πόρους που γνωρίζουμε ως ιστοσελίδες. Το πρωτόκολλο επικοινωνίας είναι το HTTP, τα αναγνωριστικά είναι τα URL και οι ιστοσελίδες είναι έγγραφα HTML αποθηκευμένα σε ένα απομακρυσμένο υπολογιστή (server), ή εξυπηρετητή, ή αλλιώς διακομιστή. Ο τρόπος αυτής της επικοινωνίας ονομάζεται μοντέλο πελάτη/εξυπηρετητή (client/server). Το Πρωτόκολλο Μεταφοράς Υπερκειμένου (Hypertext Transfer Protocol HTTP) είναι η βάση της επικοινωνίας δεδομένων στον παγκόσμιο ιστό και αφορά στους κανόνες σύμφωνα με τους οποίους γίνεται η ανταλλαγή πακέτων πληροφορίας στο διαδίκτυο, ανάμεσα στον εξυπηρετητή (server) και στον πελάτη (client). Άλλα πρωτόκολλα επικοινωνίας είναι τα mailto (ηλεκτρονικό ταχυδρομείο), το ftp (File Transfer Protocol) κ.ά. Κάθε συσκευή που μπορεί να συνδεθεί στο διαδίκτυο χαρακτηρίζεται (από κατασκευής της) από μια μοναδική ταυτότητα η οποία αποτελείται από μια αλληλουχία δεδομένων των 8-bit (6x8-bit) και λέγεται MAC Address (Media Access Control Αddress). Η ταυτότητα αυτή είναι η φυσική «διεύθυνση» της συσκευής, αφορά δηλαδή στην ταυτοποίηση του υλισμικού (hardware). Η διεύθυνση αυτή είναι πάγια γενικά, κάθε συσκευή που βρίσκεται συνδεδεμένη στο διαδίκτυο είναι αναγνωρίσιμη. Όταν ένας υπολογιστής (εξυπηρετητής ή πελάτης) συνδεθεί στο διαδίκτυο, του αποδίδεται μια μοναδική διεύθυνση IP (Internet Protocol address) η οποία, σύμφωνα με το πρότυπο IPv4 (Internet Protocol version 4), 2 είναι ένας αριθμός 32-bit (4Χ8-bit). Εμφανίζεται με τη μορφή δεκαδικών αριθμών, όπως π.χ , η IP του εξυπηρετητή που προσφέρει την υπηρεσία ηλεκτρονικού 1 H κοινοπραξία παγκόσμιου ιστού «World Wide Web Consortium» (W3C ή W3) είναι ο κύριος διεθνής οργανισμός τυποποίησης για τον παγκόσμιο ιστό. 2 Λόγω της ανάπτυξης του ίντερνετ και της έλλειψης διευθύνσεων, το πρωτόκολλο IP έχει φτάσει στην έκδοση 6.0 (IPv6) το οποίο χρησιμοποιεί λέξεις 32-bit και προσφέρει έως και 2128 διευθύνσεις.

4 ταχυδρομείου του ΤΕΙ Αθήνας. Επειδή είναι δύσκολο να θυμόμαστε ότι ο εξυπηρετητής ηλεκτρονικού ταχυδρομείου του ΤΕΙ Αθήνας είναι ο , η διεύθυνση IP εμφανίζεται με το κείμενο «webmail.teiath.gr». Για την ονομαστική αντιστοίχιση φροντίζουν ειδικοί εξυπηρετητές που ονομάζονται Domain Name Servers (Εξυπηρετητές Ιστού ή Διακομιστές Ονόματος Επικράτειας). Εικόνα URI και URL O Ενιαίος Αναγνωριστής Πόρου URI ταυτοποιεί ένα αφηρημένο ή φυσικό πόρο και μπορεί να ταξινομηθεί περαιτέρω ως εντοπιστής (URL), όνομα (URN) ή και τα δύο. Ο όρος URL (Ενιαίος Εντοπιστής Πόρου) αναφέρεται σε ένα υποσύνολο URIs, το οποίο, εκτός από την αναγνώριση του πόρου, προσφέρει έναν τρόπο εντοπισμού του, περιγράφοντας τη δικτυακή του «τοποθεσία» (T. Berners-Lee 2005). Το URL είναι αυτό που ονομάζουμε διεύθυνση της ιστοσελίδας (ή του πόρου γενικότερα). Το URL έχει συγκεκριμένη δομή και περιγράφει συγκεκριμένες πληροφορίες (T. Berners-Lee, (URL) 1994). Παρακάτω βλέπουμε ένα URL από τον ιστότοπο του Μουσείου Μοντέρνας Τέχνης του Αγίου Φραγκίσκου στην Καλιφόρνια. Το πρώτο μέρος του (http) δηλώνει ότι το πρωτόκολλο επικοινωνίας είναι το HTTP. Το επόμενο τμήμα (www) δηλώνει τον τύπο του εξυπηρετητή (web server). Στην περίπτωση που απουσιάζει από το URL, ο χρήστης συνήθως παραπέμπεται αυτόματα στον εξυπηρετητή ιστοσελίδων (web server) του ιστότοπου. Το αμέσως επόμενο μέρος (sfmoma.org) δηλώνει το όνομα του εξυπηρετητή (Domain Name) που φιλοξενεί τις ιστοσελίδες. Παρά το ότι είναι μια συντομογραφία, είναι αναγνωρίσιμο καθώς παραπέμπει εύκολα στο «San

5 Francisco Museum of Modern Art», όπως το «teiath.gr» παραπέμπει εύκολα στο «TEI Αθήνας». Η κατάληξη «.org» υποδηλώνει το «οργανισμός» και κατά συνέπεια τη φύση του ιστότοπου, σε αντίθεση π.χ. με το «.com» που υποδηλώνει μια εμπορική δραστηριότητα (από το commercial). Το αντίστοιχο «.gr» δηλώνει ότι ο εν λόγω ιστότοπος είναι καταχωρημένος στην ελληνική επικράτεια. Στην Ελλάδα, υπεύθυνη για θέματα ονομάτων επικράτειας ή αλλιώς χώρου (Domain Names) με κατάληξη «.gr», είναι η Εθνική Επιτροπή Τηλεπικοινωνιών και Ταχυδρομείων (ΕΕΤΤ - Ένα άλλο URL από τον ίδιο ιστότοπο είναι: Η διεύθυνση αυτή παραπέμπει στην ιστοσελίδα η οποία περιγράφει το φωτογραφικό έργο «Untitled, Greenwood, Mississippi, 1977» του Αμερικανού φωτογράφου William Eggleston. Το τμήμα «/explore/collection/artwork/15320» λέγεται μονοπάτι ή διαδρομή αρχείων (file path) και δηλώνει ιεραρχικά τη διαδρομή για την αναζήτηση του πόρου (δηλ. της ιστοσελίδας) στους καταλόγους αρχείων του ιστότοπου. Το file path αντιστοιχεί στη δομή των καταλόγων αρχείων του ιστότοπου. Οι πλάγιες κάθετες γραμμές δηλώνουν διαφορετικούς καταλόγους (directories). Η πρώτη κάθετος από μόνη της δηλώνει τον αρχικό κατάλογο του ιστοτόπου που λέγεται root directory ή root folder. Ο περιέχων κατάλογος είναι ο «explore», προφανώς κάποια βασική ενότητα του ιστότοπου o οποίος βρίσκεται στο root folder. Αυτός περιέχει τον υποκατάλογο «collection», ο οποίος με τη σειρά του περιέχει τον «artwork». Εικόνα 9.3. Στην ιστοσελίδα εμφανίζεται και μια αναπαραγωγή του εν λόγω φωτογραφικού έργου του Eggleston. Αυτή η εικόνα είναι ένα ξεχωριστός πόρος τον οποίο «καλεί» η ιστοσελίδα από ένα διαφορετικό κατάλογο με το όνομα «medium», ο οποίος εμπεριέχεται στον κατάλογο «artwork» και αυτός με τη σειρά του στον κατάλογο «images». Προφανώς οι εικόνες των ιστοσελίδων του ιστοχώρου, για λόγους μάλλον οργανωτικούς, είναι αποθηκευμένες σε μια άλλη δομή καταλόγων. Το URL της εικόνας είναι:

6 Η κατάληξη «94.584_01 b02.jpg» της διεύθυνσης αναγνωρίζει τον πόρο (πρόκειται για μια εικόνα bitmap σε μορφότυπο JPEG) και το μονοπάτι-αρχείου την τοποθεσία του μέσα στο αρχείο των καταλόγων του εξυπηρετητή. Στην περίπτωση που στο URL δεν δίδεται το όνομα του πόρου όπως στο « ο εξυπηρετητής συνήθως ενεργεί ως εξής (ανάλογα με τη διαμόρφωσή του): Αναζητεί στον κεντρικό κατάλογο αρχείων του ιστότοπου (root directory) ένα προεπιλεγμένο αρχείο και το επιστρέφει στον πελάτη. Για ιστότοπους που έχουν συνταχθεί στη γλώσσα HTML το προεπιλεγμένο αρχείο είναι πάντα το «index.html». Αυτός είναι και ο λόγος που η εισαγωγική σελίδα ενός ιστότοπου έχει τυπικά την ονομασία «index.html». Εμφανίζει μία λίστα των αρχείων του καταλόγου. Εμφανίζει ένα μήνυμα ότι η σελίδα δεν μπορεί να βρεθεί ή ότι δεν επιτρέπεται η πρόσβαση στα αρχεία του καταλόγου. Όταν όλες οι ιστοσελίδες εμφανίζονται αμέσως μετά το domain name του ιστότοπου (δεν εμφανίζεται δηλ. site path στο URL), σημαίνει πως όλα τα αρχεία βρίσκονται στον αρχικό κατάλογο (root folder). Στην περίπτωση που σε ένα URL, στη θέση του «www» βρίσκεται ένα άλλο όνομα, αυτό δηλώνει συνήθως ότι ο ιστότοπος είναι υποσύνολο ενός ευρύτερου ιστοχώρου (π.χ. και Κωδικοποίηση URL Για την αποστολή URLs μέσω του διαδικτύου μπορούν να χρησιμοποιηθούν μόνο χαρακτήρες που ανήκουν στο σύνολο χαρακτήρων ASCII. Επειδή πολλές διευθύνσεις URL μπορεί να περιέχουν πολλών ειδών χαρακτήρες, η διεύθυνση μπορεί να κωδικοποιείται σε ένα έγκυρο σχήμα με τη μέθοδο κωδικοποίησης URL Encoding. Η κωδικοποίηση URL συνήθως αντικαθιστά τους μη ASCII χαρακτήρες με το σύμβολο «%» ακολουθούμενο από δύο δεκαεξαδικά ψηφία και τα κενά με το σύμβολο «+» ή «%20» (W3C 2011). 9.3 HTML ΚΑΙ ΕΓΓΡΑΦΑ HTML Οι ιστοσελίδες είναι κατά βάση έγγραφα απλού κειμένου (plain text) με την κατάληξη.html. Το απλό κείμενο, όπως υπονοεί και το όνομά του δεν επιδέχεται μορφοποίηση, όπως αυτή που μπορεί να γίνει σε μια εφαρμογή κειμενογράφου (π.χ. έντονα ή πλάγια γράμματα ή γράμματα από διαφορετικές γραμματοσειρές με άλλο χρώμα κλπ.) Το κείμενο στα έγγραφα.html είναι δομημένο σύμφωνα με τους κανόνες μιας γλώσσας που λέγεται HyperText Markup Language ή απλά HTML. Η HTML είναι μια γλώσσα σήμανσης η οποία χρησιμοποιεί μια σειρά από σημαντήρες, ή αλλιώς ετικέτες (tags), για να σημαδέψει το κείμενο με οδηγίες που αφορούν πρωταρχικά στη δομή του εγγράφου, αλλά χρησιμοποιούνται και για τη μορφοποίηση (στυλ) του περιεχομένου του.

7 Η ιδέα της «ετικέτας» δεν είναι αποκλειστικότητα της HTML. Παρόμοια μέθοδο χρησιμοποιούν και οι δημοφιλείς εφαρμογές «γραφείου» (Word και OpenOffice) με τη διαφορά ότι οι ετικέτες (κωδικοποιημένες οδηγίες μορφοποίησης) είναι αφανείς για τον χρήστη. Οι ετικέτες HTML περικλείονται σε οριοθέτες σήμανσης, δύο σύμβολα ανισότητας, το «<» (λιγότερο από) και το «>» (μεγαλύτερο από), τα οποία τυπικά χρησιμοποιούνται ανά ζεύγη, όπως π.χ.: <body>αυτό είναι ένα κείμενο</body> ή <p>αυτό είναι ένα κείμενο</p> Η πρώτη ετικέτα (opening tag) σηματοδοτεί την έναρξη του πεδίου σήμανσης στο κείμενο και η δεύτερη (closing tag) το τέλος του, χρησιμοποιώντας πριν από το όνομα της ετικέτας μια πλάγια μπάρα (slash). Οι ετικέτες και ό, τι αυτές περικλείουν λέγεται στοιχείο HTML. Τα στοιχεία HTML μπορούν να περικλείουν άλλα στοιχεία HTML, τα οποία λέγεται ότι «φωλιάζουν» μέσα σε αυτό. Υπάρχουν ετικέτες υποχρεωτικές, οι οποίες αναφέρονται στη δομή του εγγράφου και ετικέτες με ιδιότητες που καθορίζουν την προσδοκώμενη απεικόνιση του κειμενικού περιεχομένου ή των άλλων μέσων που κατά κάποιο τρόπο «ενσωματώνουν» στο έγγραφο (εικόνες, γραφικά, ήχους, βίντεο). Οι ετικέτες HTML και το περιεχόμενό τους διαβάζονται από τις εφαρμογές περιήγησης (browsers) και διερμηνεύονται με την απεικόνιση του εγγράφου ως ιστοσελίδας στην οθόνη του υπολογιστή. Οι ιστοσελίδες, δηλαδή, είναι εκφάνσεις εγγράφων HTML. Ο ίδιος κώδικας HTML δεν εξασφαλίζει απόλυτα την ίδια απεικόνιση από διαφορετικές εφαρμογές περιήγησης. Τα στοιχεία HTML μπορεί να διαθέτουν ιδιοχαρακτηριστικά (attributes) που έχουν τη δυνατότητα να διαμορφώσουν τη συμπεριφορά του στοιχείου και να εισαγάγουν πρόσθετο νόημα. Πολλά ιδιοχαρακτηριστικά είναι κοινά για όλα τα στοιχεία HTML ενώ κάποια αφορούν σε συγκεκριμένα στοιχεία. Εικόνα 9.3. Κώδικας HTML (αριστερά) και όπως αποδίδεται (δεξιά) σε μορφή ιστοσελίδας. Τα ιδιοχαρακτηριστικά ορίζονται στις προδιαγραφές της εκάστοτε γλώσσας HTML και δηλώνονται σαν ζεύγος με το σχήμα: «όνομα χαρακτηριστικού = "τιμή"». Κάποια εξαιρούνται, όπως τα ιδιοχαρακτηριστικό «id» και «class», οι τιμές των οποίων δεν είναι απόλυτες και μπορεί να επινοηθούν για να δηλώσουν κάποιο νόημα. Στις ιστοσελίδες ο κώδικας HTML είναι αφανής. Όλες οι εφαρμογές περιήγησης έχουν τη δυνατότητα να τον απεικονίσουν, συνήθως μέσα από την επιλογή View Code ή View Source από το κυρίως μενού. Η ανάγνωση της ιστοσελίδας ως

8 εγγράφου HTML είναι συνηθισμένη πρακτική για όσους θέλουν να μάθουν HTML και να πάρουν παραδείγματα κωδικοποίησης. Εικόνα 9.4. Συμβατικό κείμενο με γραμμική ροή (επάνω) και σελίδες υπερκειμένου με κόμβους επικοινωνίας. Εικόνα 9.6. Κώδικας HTML σε παράθυρο εφαρμογής κειμενογράφου HTML (HTML editor). Επειδή τα αρχεία HTML περιγράφουν έγγραφα απλού κειμένου, μπορεί να δημιουργηθούν με μια οποιαδήποτε εφαρμογή κειμενογράφου, όπως π.χ. το Notepad (Windows) ή το TextEdit (MaxOs) αρκεί να αποθηκευτούν με την κατάληξη «.html». Μπορούν επίσης να γραφούν και με επαγγελματικές εφαρμογές ανάπτυξης ιστοσελίδων και ιστοτόπων, όπως το Dreamweaver. Η διαφορά ανάμεσα στις δύο επιλογές είναι ότι με τη δεύτερη υπάρχει η δυνατότητα άμεσης απεικόνισης του κώδικα ως ιστοσελίδας (προεπισκόπηση τελικού αποτελέσματος), ενώ με την πρώτη ο συγγραφέας βλέπει απλά ένα κείμενο. Στην αγορά υπάρχει μεγάλη ποικιλία κειμενογράφων (text editors), από εξαιρετικά

9 απλούς, οι οποίοι συνήθως συνοδεύουν τα λειτουργικά λογισμικά, έως και επαγγελματικές εκδόσεις που απευθύνονται σε σχεδιαστές ιστοσελίδων (html editors) Υπερκείμενο Αυτό που ξεχωρίζει τα έγγραφα HTML από τα κοινά έγγραφα κειμένου είναι ότι έχουν τη δυνατότητα να ενσωματώσουν στο κείμενο λογικούς δεσμούς (links) ως αναφορές στη δικτυακή τοποθεσία άλλων κειμένων, εγγράφων ή πόρων γενικότερα (ονομάζονται κόμβοι), επιτρέποντας στον χρήστη την άμεση σύνδεσή τους και την πρόσβαση σε αυτά μέσω του διαδικτύου. Το κείμενο πλέον μετατρέπεται σε κάτι που ξεπερνά το κοινό στατικό κείμενο, γίνεται ανώτερο, είναι υπερκείμενο. Αυτή είναι και η έννοια που ήθελε να αποδώσει ο εμπνευστής του όρου hypertext, Ted Nelson (T. Berners-Lee, HyperText and CERN 1990) την δεκαετία του 50. Τα έγγραφα HTML είναι έγγραφα υπερκειμένου XTHML Η γλώσσα XHTML (Extensible Hypertext Markup Language Επεκτάσιμη Γλώσσα Σήμανσης Υπερκειμένου) σχεδιάστηκε για να πάρει τη θέση της HTML. Είναι σχεδόν πανομοιότυπη με την έκδοση HTML 4.01, αλλά έχει πιο αυστηρούς κανόνες σύνταξης (βλ HTML ΚΑΙ XHTML) JAVASCRIPT Η JavaScript είναι μια δυναμική γλώσσα προγραμματισμού που χρησιμοποιείται εκτεταμένα στις ιστοσελίδες. Χρησιμοποιώντας σενάρια εντολών (scripts) μπορεί να προσδίδει διαδραστικότητα, να δημιουργεί περιεχόμενο ανάλογα με τις επιλογές του χρήστη, να επικυρώνει τη σωστή συμπλήρωση πεδίων σε φόρμες επικοινωνίας, να αλλάζει δυναμικά το περιεχόμενο της ιστοσελίδας, κ.ά. Ένα παράδειγμα εφαρμογής Javascript υπάρχει στην αρχική ιστοσελίδα του Τμήματος Φωτογραφίας και Οπτικοαουστικών του ΤΕΙ Αθήνας, όπου εικόνες εναλλάσσονται διαδοχικά μέσα σε ένα λευκό πλαίσιο χρησιμοποιώντας ένα «σενάριο» Javascript (Crossfade 2010) DHTML Η DHTML (Dynamic HTML) δεν είναι γλώσσα προγραμματισμού αυτή καθαυτή, αλλά ένας συνδυασμός HTML, CSS, και JavaScript. O συνδυασμός JavaScript και φύλλων CSS χρησιμοποιείται για τη διαχείριση και διευθέτηση των στοιχείων HTML και για τον έλεγχο ιδιοτήτων που αλλάζουν την εμφάνιση μιας ιστοσελίδας δυναμικά HTML DOM To HTML DOM (Document Object Model) είναι ένα πρότυπο του W3C (World Wide Web Consortium) για την πρόσβαση και την επεξεργασία εγγράφων HTML. Αποτελεί μια πλατφόρμα ανεξάρτητη γλώσσας που επιτρέπει σε προγράμματα και σενάρια (Jacascript scripts) να προσπελάσουν και να ενημερώσουν δυναμικά το περιεχόμενο, τη δομή και τη μορφοποίηση (στυλ) ενός εγγράφου HTML (W3C 2015).

10 Σύμφωνα με το μοντέλο HTML DOM, τα πάντα είναι ένας κόμβος το έγγραφο, όλα τα στοιχεία HTML, όλα τα ιδιοχαρακτηριστικά HTML, το κείμενο μέσα στα στοιχεία HTML. Όταν ένα έγγραφο HTML διαβάζεται από μια εφαρμογή περιήγησης, μετατρέπεται σε μια οντότητα με δενδροειδή μορφή. Η οντότητα του εγγράφου είναι ο πρωταρχικός κόμβος (η ρίζα του δένδρου), στον οποίο αναφέρονται όλοι οι υπόλοιποι (οι κόμβοι των στοιχείων HTML, των κειμένων, των χαρακτηριστικών, κλπ.). Το μοντέλο αυτό απεικόνισης της δομής του εγγράφου επιτρέπει σε σενάρια εντολών της γλώσσας Javascript την προσπέλαση σε όλους τους κόμβους. Εικόνα 9.6. Το «δένδρο» του μοντέλου HTML DOM. 9.4 CSS Τα CSS (Cascading Style Sheets - Αλληλουχία [Διαδοχικών] Φύλλων Στυλ) είναι ένα σύστημα που ορίζει τη μορφοποίηση της απεικόνισης των στοιχείων HTML σε μια ιστοσελίδα. Αναπτύχθηκε από την κοινοπραξία World Wide Web Consortium (W3C) για να απαλλάξει τους σχεδιαστές ιστοσελίδων από τη χρήση των στοιχείων HTML ως εργαλείων μορφοποίησης στυλ κάτι άλλωστε για το οποίο δεν είχε (αρχικά) σχεδιαστεί η γλώσσα HTML. Τα CSS αφορούν στην παρουσίαση του περιεχομένου και αποτελούν καλή πρακτική. Τα αρχεία CSS είναι δομημένα κείμενα απλού κειμένου με συγκεκριμένο συντακτικό και έχουν την κατάληξη «.css». Όπως και η HTML, μπορούν να δημιουργηθούν εύκολα με οποιοδήποτε κειμενογράφο απλού κειμένου. Περιγράφουν κανόνες μορφοποίησης που λέγονται rules (κανόνες) και έχουν δύο κύρια μέρη, έναν Επιλογέα (selector) και μια ή περισσότερες δηλώσεις

11 (declarations / διακηρύξεις). Ο επιλογέας αναφέρεται στο στοιχείο HTML. Οι δηλώσεις αποτελούνται από μια ιδιότητα και από μια τιμή για την ιδιότητα αυτή. Η ιδιότητα είναι το χαρακτηριστικό μορφοποίησης (στυλ) που ρυθμίζεται. Εικόνα 9.7. Κώδικας CSS. Η εφαρμογή στυλ με φύλλα CSS μπορεί να υλοποιηθεί με τρεις τρόπους. Με ένα εξωτερικό φύλλο CSS, με ενσωμάτωση του κώδικα CSS στον κώδικα της σελίδας και με την ενσωμάτωση δηλώσεων CSS μέσα σε κάθε στοιχείο HTML ξεχωριστά. Για την εφαρμογή στυλ μπορούν να χρησιμοποιηθούν πολλαπλά φύλλα CSS. Στην πρώτη περίπτωση, το ξεχωριστό φύλλο CSS (αρχείο) συνήθως αποθηκεύεται μέσα στους καταλόγους αρχείων του ιστότοπου. Θα μπορούσε να βρίσκεται οπουδήποτε, εφόσον ο υπολογιστής που το περιέχει είναι συνδεδεμένος στο διαδίκτυο. Το πλεονέκτημα είναι ότι το ίδιο φύλλο CSS μπορεί να ελέγχει περισσότερες από μία ιστοσελίδες ή και το σύνολο του ιστότοπου γεγονός ιδιαίτερα πρακτικό, αν φανταστούμε ότι ένας ιστότοπος μπορεί να έχει εκατοντάδες σελίδες. Κάθε σελίδα συνδέεται με το φύλλο στυλ μέσω της ετικέτας <link> χρησιμοποιώντας το URL του αρχείου CSS. Η ετικέτα <link> φωλιάζει μέσα στην ετικέτα <head>, όπως: <head> <link rel="stylesheet" type="text/css" href="basicstyle.css"/> </head> Στη δεύτερη περίπτωση, το κείμενο του αρχείου CSS ενσωματώνεται στον ίδιο τον κώδικα του εγγράφου HTML που μορφοποιεί και λέγεται «εσωτερικό φύλλο στυλ». Η λύση αυτή αφορά αποκλειστικά ένα έγγραφο HTML. Υλοποιείται με τη χρήση της ετικέτας <style> η οποία φωλιάζει μέσα στην ετικέτα <head> του εγγράφου, όπως: <head> <style type="text/css"> hr {color:red;} p {margin-right:12px;} body {background-image:url("images/myphoto.jpg");} </style> </head> Στην τρίτη περίπτωση χρησιμοποιείται το χαρακτηριστικό «style» απευθείας σε στοιχεία HTML του εγγράφου (κάτι που γενικά δεν αποτελεί καλή πρακτική) όπως:

12 <p style="color:green;margin-left:33px">καλημέρα</p> Πολλαπλά Φύλλα CSS Όταν κάποιες ιδιότητες έχουν ρυθμιστεί για τον ίδιο επιλογέα σε διαφορετικά φύλλα CSS, οι ιδιότητες που τελικά εφαρμόζονται σε ένα στοιχείο HTML κληρονομούνται από το πλέον σχετικό φύλλο. Για παράδειγμα, στην περίπτωση που ένα εξωτερικό φύλλο CSS έχει τις παρακάτω τιμές ιδιοτήτων στη δήλωση για τον επιλογέα h1 (οι συγκεκριμένες ιδιότητες καθορίζουν το χρώμα, την στοίχιση και το μέγεθος γραμματοσειράς της κεφαλίδας πρώτου επιπέδου): h1{color:red; text-align:right; font-size:12pt;} και ένα εσωτερικό φύλλο CSS έχει τις παρακάτω ιδιότητες για τον ίδιο επιλογέα: h1{text-align:left; font-size:12pt;} Αν η σελίδα με το εσωτερικό φύλλο στυλ συνδέεται επίσης και με το εξωτερικό φύλλο, οι ιδιότητες που τελικά θα εφαρμοστούν για την κεφαλίδα h1 θα είναι: color:red; text-align:left; font-size:12pt; Η ιδιότητα «color» (χρώμα) υιοθετείται από το εξωτερικό φύλλο (δεν δηλώνεται στο εσωτερικό), η τιμή της ιδιότητας «text-alignment» (στοίχιση κειμένου), η οποία δηλώνεται και στα δύο φύλλα, κληρονομείται από το εσωτερικό φύλλο, και η τιμή της ιδιότητας «font size» (μέγεθος γραμματοσειράς) κληρονομείται από το εσωτερικό φύλλο στυλ (απλά τυχαίνει να έχει την ίδια τιμή και στα δύο φύλλα). Τα πολλαπλά φύλλα CSS λειτουργούν επικαλυπτόμενα το στοιχείο HTML κληρονομεί, όπως λέγεται, όλες τις δηλώσεις για επιλογείς που εμφανίζονται μια φορά, ανεξάρτητα από το φύλλο στυλ. Στην περίπτωση που για τον ίδιο επιλογέα υπάρχουν δηλώσεις σε περισσότερα από ένα φύλλα στυλ, το στοιχείο HTML κληρονομεί καταρχήν τη δήλωση που εμφανίζεται στο «εγγύτερο» φύλλο στυλ. Επικαλυπτόμενα λειτουργούν και οι δηλώσεις. Αν δηλαδή για τον ίδιο επιλογέα εμφανίζονται διαφορετικές ιδιότητες στα επικαλυπτόμενα φύλλα στυλ, αυτές κληρονομούνται από το στοιχείο HTML, ανεξάρτητα της εγγύτητάς του στο φύλλο στυλ. Όταν στα επικαλυπτόμενα φύλλα εμφανίζονται διαφορετικές τιμές για ιδιότητες του ίδιου επιλογέα, κληρονομείται η τιμή που εμφανίζεται για τον επιλογέα του εγγύτερου φύλλου στυλ. Ο βαθμός εγγύτητας στο στοιχείο HTML είναι το κλειδί για την εφαρμογή χαρακτηριστικών διαμόρφωσης στυλ κληρονομείται και εφαρμόζεται από την εφαρμογή περιήγησης η εγγύτερη στο στοιχείο HTML πληροφορία. Ο βαθμός εγγύτητας καθορίζεται από την τοποθεσία της πληροφορίας σε σχέση με τη θέση του στοιχείου HTML με την παρακάτω σειρά: (4) - προρυθμίσεις στυλ της εφαρμογής περιήγησης (browser settings) (3) - εξωτερικό φύλλο στυλ (external style sheet) (2) - εσωτερικό φύλλο στυλ (internal style sheet), στο στοιχείο <head> του εγγράφου HTML (1) - εσωτερικό στυλ (inline style), μέσα σε ένα στοιχείο HTML (0) - Στοιχείο HTML

13 Δηλαδή, οι εσωτερικές οδηγίες στυλ, που εμφανίζονται μέσα σε ένα στοιχείο HTML, έχουν τη μέγιστη εγγύτητα, γεγονός που σημαίνει ότι υπερισχύουν αυτών ενός εσωτερικού φύλλου στυλ, ενός εξωτερικού φύλλου και αυτών (των προτιμήσεων) που διαθέτει η εφαρμογή περιήγησης. Αν η ετικέτα <a> που αντιστοιχεί στον σύνδεσμο με ένα εξωτερικό φύλλο CSS, τοποθετηθεί μετά το εσωτερικό φύλλο στο πεδίο <head> του εγγράφου, το εξωτερικό φύλλο υπερισχύει του εσωτερικού. Εικόνα 9.8. Ο συμψηφισμός μιας αλληλουχίας διαδοχικών πληροφοριών στυλ για τη μορφοποίηση κειμένου.

14 9.5 ΤΟ ΕΓΓΡΑΦΟ HTML Εικόνα 9.9. Μια οπτικοποίηση της δομής ενός απλού εγγράφου HTML. Σε μορφή ιστοσελίδας εμφανίζεται μόνο η λευκή περιοχή, δηλαδή το περιεχόμενο χωρίς τις ετικέτες. 9.6 Η ΔΟΜΗ ΤΟΥ ΕΓΓΡΑΦΟΥ HTML Η δομή ενός απλού εγγράφου HTML, με περιεχόμενο μία επικεφαλίδα και δύο παραγράφους είναι όπως παρακάτω: <html> <head> <title>το ΚΕΦΑΛΑΙΟ</title> </head> <body> <h1>το ΚΕΦΑΛΑΙΟ</h1> <p>τα πάντα είναι δρόμος</p> <p>τα Πάντα Όλα</p> </body> </html> Ο κώδικας θα μπορούσε να συνταχθεί και σε μία μόνο γραμμή, αλλά χάνεται η εικόνα της δομής του. Τα κενά διαστήματα ανάμεσα στα στοιχεία HTML δεν εμφανίζονται στην ιστοσελίδα. Στην Εικόνα 9.9 φαίνεται η οργανωτική δομή του εγγράφου και στην εικόνα Εικόνα 9.10 το αποτέλεσμα στο παράθυρο της εφαρμογής που διαβάζει το έγγραφο HTML.

15 Εικόνα Το έγγραφο HTML (αριστερά) και η μεταμόρφωσή του σε ιστοσελίδα. Η γραμματοσειρά που εμφανίζεται είναι προ-ρυθμισμένη επιλογή της εφαρμογής περιήγησης <html> Η ετικέτα <html> δηλώνει την αρχή ενός εγγράφου HTML και η αντίστοιχη </html> το τέλος του. Στην ετικέτα <html> φωλιάζουν όλα τα στοιχεία HTML του εγγράφου. Στη συγκεκριμένη περίπτωση η έκδοση της γλώσσας HTML που χρησιμοποιείται δεν προσδιορίζεται. Η δήλωση της γλώσσας HTML θεωρείται απαραίτητη (βλ DOCTYPE) <head> Το στοιχείο head είναι το πεδίο των μεταδεδομένων, των πληροφοριών δηλαδή που αφορούν στο έγγραφο και το περιεχόμενό του δεν εμφανίζεται στην ιστοσελίδα. Τα μεταδεδομένα τυπικά περιγράφουν τον τίτλο του εγγράφου, στυλ μορφοποίησης, υπερσυνδέσμους, κ.ά. Στο στοιχείο head μπορεί να καταχωρηθούν και σχόλια, για παράδειγμα: <!--Αυτή η ιστοσελίδα σχεδιάστηκε από εμάς --> Οι ετικέτες που περιγράφουν μεταδεδομένα είναι: <title>, <style>, <meta>, <link>, <script> και <base> <title> Το στοιχείο title δηλώνει το όνομα του εγγράφου το οποίο και απαιτείται για όλα τα έγγραφα HTML και XTML. Ορίζει τον τίτλο της σελίδας στην καρτέλα του browser και εμφανίζεται σε αποτελέσματα αναζήτησης ιστοσελίδων <style> <link> Το στοιχείο style χρησιμοποιείται για να ορίσει στυλ μορφοποίησης των στοιχείων HTML του εγγράφου. Θεωρείται εσωτερικό στυλ μορφοποίησης (βλ CSS). Το στοιχείο link ορίζει τη σχέση του εγγράφου με έναν εξωτερικό πόρο και συνήθως χρησιμοποιείται για να συνδέσει το έγγραφο με εξωτερικά φύλλα στυλ. Παράδειγμα: <link rel="stylesheet

16 9.6.6 <meta> href="mystyle.css"> Το στοιχείο meta χρησιμοποιείται για την περιγραφή του εγγράφου, για λέξεις κλειδιά και άλλα μεταδεδομένα. Τα μεταδεδομένα χρησιμοποιούνται από εφαρμογές περιήγησης, μηχανές αναζήτησης και άλλες υπηρεσίες. Το στοιχείο meta έχει το ιδιοχαρακτηριστικό «name» με πεδίο τιμών το «content»: Παραδείγματα: <meta name="description" content="ο κώδικας είναι τέχνη"> <meta name="keywords" content="φωτογραφία, τέχνη, πορτραίτο"> <meta charset="utf-8"> <meta name="author" content="κώστας Κολοκυθάς"> <script> <base> Το στοιχείο script χρησιμοποιείται για να ορίσει σενάρια-πελάτη Javascript. Το στοιχείο base ορίζει ένα URL σαν βάση αναφοράς για όλους τους σχετικούς συνδέσμους της ιστοσελίδας. Για παράδειγμα: <head> <base href=" </head> <body> <img src="parthenon.jpg" width="24" height="39"> <img src="thessaloniki.jpg" width="24" height="39"> </body> Πίνακας 9.1.Στοιχεία HTML που περιέχονται στο στοιχείο head <body> Στο στοιχείο body βρίσκεται το περιεχόμενο του εγγράφου, αυτό που θα φαίνεται και στην ιστοσελίδα. Μπορεί να συμπεριλαμβάνει πολλά άλλα διαφορετικά στοιχεία HTML.

17 9.7 ΕΤΙΚΕΤΕΣ HTML Επικεφαλίδες Σαν επικεφαλίδα λογίζεται το περιεχόμενο που ορίζει την επικεφαλίδα ενός τμήματος του εγγράφου HTML. Για να δηλωθεί ένα στοιχείο επικεφαλίδας χρησιμοποιούνται οι ετικέτες h1, h2, h3, h4, h5 και h6. Η ετικέτα h1 απεικονίζει το περιεχόμενο με τη μεγαλύτερη γραμματοσειρά, ενώ η h6 με την μικρότερη, χωρίς τα μεγέθη να είναι συγκεκριμένα. Τυπικά στην ιστοσελίδα εμφανίζεται μια κενή γραμμή πριν και μετά την επικεφαλίδα. Το στοιχείο προσδιορίζει το περιεχόμενο δομικά. <h1>επικεφαλίδα1</h1> <h2>επικεφαλίδα2</h2> <h3>επικεφαλίδα3</h3> <h4>επικεφαλίδα4</h4> <h5>επικεφαλίδα5</h5> <h6>επικεφαλίδα6</h6> Εικόνα Παράγραφοι Παράγραφος τυπικά θεωρείται μια ροή φραστικού περιεχομένου που σχηματίζει ένα μπλοκ κειμένου με μια ή περισσότερες προτάσεις που αφορούν σε ένα συγκεκριμένο θέμα. Οι παράγραφοι δηλώνονται αποκλειστικά με την ετικέτα <p>. Το στοιχείο διακόπτει τη ροή του κειμένου και το κείμενο αλλάζει γραμμή. Για την αλλαγή γραμμής χωρίς αλλαγή παραγράφου χρησιμοποιείται η ετικέτα <br>. Συνήθως χρησιμοποιείται και μόνη της με το σχήμα <br />.

18 Εικόνα Λίστες Οι λίστες που χρησιμοποιούνται στην HTML είναι οι αταξινόμητες (unorderd) και οι ταξινομημένες (ordered). Μια αταξινόμητη λίστα ξεκινά με την ετικέτα <ul>. Κάθε αντικείμενο της λίστας ξεκινά με την ετικέτα <li>. Όλα τα στοιχεία <li> εμπεριέχονται στο στοιχείο <ul>. Πριν από την κάθε γραμμή της λίστας εμφανίζεται μια μαύρη τελεία. Το στοιχείο <ul> διαθέτει το ιδιοχαρακτηριστικό style (Πίνακας 9.2) για την αντικατάσταση της τελείας με ένα δίσκο, με ένα κύκλο, με ένα τετράγωνο ή με κενό χώρο. Πίνακας 9.2. Εικόνα Οι ταξινομημένες λίστες ξεκινούν με την ετικέτα <ol>. Κάθε αντικείμενο της λίστας αρχίζει με την ετικέτα <li>. Τα αντικείμενο της λίστας αριθμούνται με νούμερα ξεκινώντας από το 1. Η αρίθμηση μπορεί να γίνει επίσης και με γράμματα, πεζά και κεφαλαία, και με άλλα σύμβολα (Πίνακας 9.3) χρησιμοποιώντας το ιδιοχαρακτηριστικό type.

19 Πίνακας 9.3. Το ιδιοχαρακτηριστικό type για την αλλαγή συμβόλων αταξινόμητης λίστας. Εικόνα Πίνακες Οι πίνακες ορίζονται από το στοιχείο <table>. Χωρίζονται σε σειρές με την ετικέτα <tr> (table raw) και οι σειρές χωρίζονται σε κυψέλες δεδομένων πίνακα (table data) με την ετικέτα <td>. Η ετικέτα <th> (table header). Οι ετικέτες <td> περικλείουν τα δεδομένα του πίνακα, μπορεί όμως να περιέχουν διάφορα άλλα στοιχεία όπως κείμενα, εικόνες, άλλους πίνακες κλπ. Πίνακας 9.4.

20 Τυπικός κώδικας HTML για ένα πίνακα με τρεις σειρές και τρεις κυψέλες δεδομένων για κάθε σειρά (3x3). Εκτός από τα βασικά στοιχεία χρησιμοποιείται η ετικέτα <caption> για λεζάντα που θα εμφανίζεται επάνω από τον πίνακα. Ο πίνακας εμφανίζεται όπως στην Εικόνα <table> <caption>αυτός είναι ένας πίνακας</caption> <tr> <td>σειρά 01 - στήλη 01</em></td> <td>σειρά 01 - στήλη 02</em></td> <td>σειρά 01 - στήλη 03</em></td> </tr> <tr> <td>σειρά 02 - στήλη 01</em></td> <td>σειρά 02 - στήλη 02</em></td> <td>σειρά 02 - στήλη 03</em></td> </tr> <tr> <td>σειρά 03 - στήλη 01</em></td> <td>σειρά 03 - στήλη 02</em></td> <td>σειρά 03 - στήλη 03</em></td> </tr> </table> Εικόνα 9.15.

21 Εικόνα Για τη διαμόρφωση του πίνακα μπορούν να χρησιμοποιηθούν και ιδιοχαρακτηριστικά των στοιχείων, όπως το «colspan» (προεκτείνει ένα κελί σε περισσότερες από μία στήλες) και το «rawspan» (προεκτείνει ένα κελί σε περισσότερες από μία σειρές). Για τη μορφοποίηση του πίνακα (χρώματα, γραμμές, κλπ), θεωρείται καλή πρακτική η χρήση φύλλων CSS και όχι οι ιδιότητες των ετικετών HTML. Τα αποτέλεσματα διαμορφώσεων του ίδιου πίνακα φαίνονται στην Εικόνα Εικόνες Για την ενσωμάτωση εικόνων σε ιστοσελίδες χρησιμοποιείται το στοιχείο <img>. Η ετικέτα <img> είναι κενή, περιέχει μόνο ιδιοχαρακτηριστικά και δεν απαιτεί αντίστοιχη ετικέτα λήξης. Η τυπική σύνταξη είναι: <img src="url" alt="η φωτογραφία μου"> To ιδιοχαρακτηριστικό src (από το source - πηγή) δηλώνει το URL του πόρου (εικόνας) και το alt ένα εναλλακτικό κείμενο, στην περίπτωση που δεν είναι εφικτή η προβολή της εικόνας. Το alt θεωρείται εφαρμογή καλής πρακτικής και επιβάλλεται χωρίς αυτό η σελίδα δεν θεωρείται έγκυρος κώδικας HTML. Για τον ορισμό των διαστάσεων της εικόνας μπορεί να χρησιμοποιηθεί το ιδιοχαρακτηριστικό <style> με τις τιμές να ορίζονται σε pixels. <img src="url" style="width:128px;height:128px;"> Οι εικόνες μπορούν να χρησιμοποιηθούν και σαν σύνδεσμοι (links) με την χρήση της ετικέτας <a>: <a href="mysite.html">

22 <img src="image.jpg" style="width:300px;height:150px;border:0;"> </a> Σύνδεσμοι Οι σύνδεσμοι ή υπερσύνδεσμοι (hyperlinks) ορίζονται με την χρήση της ετικέτας <a>, όπως: <a href="url" target="_blank">η συλλογή</a> Το ιδιοχαρακτηριστικό href ορίζει το URL του συνδεμένου εγγράφου και το target ορίζει που θα ανοίξει το συνδεδεμένο έγγραφο HTML. Πίνακας 9.5. Τιμές του ιδιοχαρακτηριστικού target. Όταν ο δείκτης του ποντικιού περνά πάνω από ένα σύνδεσμο τυπικά μετατρέπεται σε μικρό χέρι και το κείμενο αλλάζει χρώμα. Η προ-ρύθμιση για όλες τις εφαρμογές περιήγησης είναι: ο σύνδεσμος που δεν έχει επισκεφτεί είναι υπογραμμισμένος με χρώμα μπλε. ο σύνδεσμος που έχει επισκεφτεί είναι υπογραμμισμένος με χρώμα μωβ. ο σύνδεσμος που είναι ενεργός είναι υπογραμμισμένος με χρώμα κόκκινο. Τα χρώματα αυτά μπορούν να αλλάξουν με το στοιχείο <style>, όπως για παράδειγμα: <style> a:link {color:green; background-color:transparent; text-decoration:none} a:visited {color:pink; background-color:transparent; text-decoration:none} a:hover {color:red; background-color:transparent; textdecoration:underline} a:active {color:yellow; background-color:transparent; textdecoration:underline} </style> 9.8 HTML ΚΑΙ XHTML Η γλώσσα XHTML (EXtensible HyperText Markup Language Επεκτάσιμη Γλώσσα Σήμανσης Υπερκειμένου) είναι HTML γραμμένη ως XML. Η XML

23 (Extensible Markup Language) είναι μια γλώσσα σήμανσης, όπως και η HTML, η οποία σχεδιάστηκε για να αποθηκεύει και να μεταφέρει δεδομένα καθορίζει τους κανόνες για την κωδικοποίηση εγγράφων σε μία αναγνώσιμη διαμόρφωση για ανθρώπους αλλά και για μηχανές. Η XHTML σε επίπεδο σήμανσης είναι σχεδόν παρόμοια με την HTML, έχει πιο αυστηρούς κανόνες σύνταξης και υποστηρίζεται από όλες τις εφαρμογές περιήγησης. Η τελευταία έκδοση είναι η XHTML5 και αναπτύσσεται παράλληλα με το πρότυπο HTML5. Σημαντικές διαφορές από την HTML, αφορούν στα παρακάτω: Δομή του Εγγράφου Η δήλωση DOCTYPE είναι υποχρεωτική. Οι ετικέτες <html>, <head>, <title> και <body> είναι υποχρεωτικές. Στοιχεία XHTML Πρέπει να είναι σωστά φωλιασμένα. Πρέπει να έχουν ετικέτες λήξης ή να κλείνουν μόνα τους. Πρέπει αν είναι γραμμένα με πεζούς χαρακτήρες Ιδιοχαρακτηριστικά XHTML Πρέπει αν είναι γραμμένα με πεζούς χαρακτήρες. Οι τιμές των χαρακτηριστικών πρέπει να περικλείονται σε εισαγωγικά Η Βασική Δομή ενός Εγγράφου XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>τίτλος Εγγράφου</title> </head> <body> περιεχόμενο, περιεχόμενο, περιεχόμενο </body> </html> 9.9 DOCTYPE Τα έγγραφα HTML και XTHML είναι σημαντικό να περιέχουν τη δήλωση DTD (Document Type Declaration). Ο λόγος είναι γιατί τα έγγραφα προσδιορίζονται όχι μόνο από την εκάστοτε εκδοχή της γλώσσας HTML (HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, κ.ά.), στην οποία συμμορφώνονται, αλλά και από μια γλώσσα μηχανής η οποία προσδιορίζει την εγκυρότητα της δομής των στοιχείων HTML και των χαρακτηριστικών τους. Αυτός ο προσδιορισμός λέγεται Document Type Definition και δηλώνεται στην αρχή κάθε εγγράφου HTML μέσα στο πεδίο της ετικέτας <html> με το «!DOCTYPE» (Πίνακας 9.6).

24 Εικόνα Το GUI της δικτυακής εφαρμογής Markup Validation Service του οργανισμού W3C 3. Προγράμματα και εργαλεία που επεξεργάζονται έγγραφα HTML χρειάζεται να γνωρίζουν ποιο DTP χρησιμοποιείται. Ένα τέτοιο ιδιαίτερα χρήσιμο εργαλείο είναι το πρόγραμμα που ελέγχει την εγκυρότητα του κώδικα σε έγγραφα HTML και προσφέρεται δωρεάν από τον οργανισμό W3C (Εικόνα 9.17). Πίνακας 9.6. Δηλώσεις DOCTYPE για διαφορετικές εκδόσεις HTML στο στοιχείο <html>. 3 (Πηγή: Copyright W3C (MIT, ERCIM, KEIO, BEIHANG), All Rights Reserved, η εικόνα διανέμεται σύμφωνα με την άδεια: «Web Document License:

25 Εικόνα Τυπική δομή του αρχείου καταλόγων ενός ιστότοπου. Ο κατάλογος (φάκελος) πρώτου επιπέδου, που αποκαλείται και site root (μπορεί να έχει οποιοδήποτε όνομα) περιέχει όλους τους υποκαταλόγους, οι οποίοι με την σειρά τους περιέχουν όλους τους πόρους του ιστότοπου. Το πρώτο αρχείο έχει τυπικά την ονομασία «index» (ευρετήριο) και την κατάληξη «.html» (index.html) ΜΟΝΟΠΑΤΙΑ ΚΑΙ URL Κάθε ψηφιακός πόρος (αρχεία κειμένου, εικόνας, γραφικών, ήχου, βίντεο, κλπ.) βρίσκεται μέσα σε κάποιο κατάλογο αρχείων (ή αλλιώς φάκελο) του συστήματος αρχείων του υπολογιστή. Η ακριβής τοποθεσία του ενδιαφέρει να ορίζεται πάντοτε σε σχέση με τον αρχικό κατάλογο, δηλαδή τον κατάλογο πρώτου επιπέδου (λέγεται και κατάλογος ρίζα), αυτόν που περιέχει όλους τους υποκαταλόγους με τα αρχεία του υπολογιστή. Η ακριβής θέση του αρχείου περιγράφεται από τη λεγόμενη διαδρομή αρχείου ή μονοπάτι αρχείου (file path), η οποία δίνει ονομαστικά τη σειρά των φακέλων από τον κατάλογο ρίζα μέχρι και τον φάκελο όπου βρίσκεται το αρχείο και το όνομα του αρχείου. Τα ονόματα των φακέλων τυπικά διαχωρίζονται με μία κάθετη πλάγια μπάρα (ποικίλλει από λειτουργικό σε λειτουργικό) η μπάρα που βρίσκεται στην αρχή αυτής της σειράς υποδηλώνει τον κατάλογο ρίζα. Η διαδρομή αρχείου που ορίζεται ως προς τον αρχικό κατάλογο περιέκτη (κατάλογο-ρίζα) λέγεται απόλυτη διαδρομή αρχείου. Αν η θέση του αρχείου οριστεί σε σχέση με κάποιον άλλον ενδιάμεσο φάκελο, τότε η διαδρομή αυτή λέγεται σχετική διαδρομή αρχείου. Οι διαδρομές αρχείων στο σύστημα αρχείων ενός ιστότοπου καθορίζουν το URL του πόρου (βλ URI και URL). Τυπικά τα URLs έχουν τρία μέρη. Το όνομα του πρωτοκόλλου επικοινωνίας των δεδομένων (HTTP). Το όνομα του εξυπηρετητή που φιλοξενεί τον πόρο (Domain Name Server).

26 Την διαδρομή αρχείου του πόρου (file path). Ανάλογα με τον τύπο της διαδρομής αρχείου που χρησιμοποιείται, δημιουργούνται τριών είδους URLs. Τα απόλυτα και τα σχετικά ως προς τη ρίζα και ως προς το έγγραφο. Στην περίπτωση που σε ένα έγγραφο HTML θέλουμε να δημιουργήσουμε ένα υπερσύνδεσμο (hyperlink) προς ένα πόρο που βρίσκεται στον ίδιο κατάλογο αρχείων (Εικόνα 9.19) με αυτό, χρησιμοποιούμε τη σχετική διαδρομή αρχείου, δηλαδή μόνο το όνομα του αρχείου, όπως: «another.html» ή «4685.docx» και το χαρακτηριστικό href της ετικέτας σύνδεσης <a> θα έχει την τιμή: 4685.docx ή another.html. <a href="4685.docx"></a>, <a href=" another.html"></a> Όταν θέλουμε να δημιουργήσουμε έναν σύνδεσμο προς ένα πόρο που βρίσκεται σε άλλο κατάλογο (Εικόνα 9.20), χρησιμοποιούμε το ανάλογο σχετικό μονοπάτι αρχείου, όπως: artists/old/another.html. <a href="artists/old/another.html ">κείμενο συνδέσμου</a> όπου το σύμβολο «/» δηλώνει την αλλαγή ενός επιπέδου καταλόγου στην ιεραρχία των φακέλων προς τα κάτω. Όταν θέλουμε να δημιουργήσουμε έναν σύνδεσμο προς ένα πόρο που βρίσκεται σε ανώτερο επίπεδο καταλόγου (Εικόνα 9.21), χρησιμοποιούμε τη σχετική διαδρομή προς τα επάνω. Για τη δημιουργία συνδέσμου από την σελίδα «another» προς την σελίδα «index» το μονοπάτι αρχείου είναι «../../index.html», όπως: <a href="../../index.html ">κείμενο συνδέσμου</a> όπου το σύμβολο «../» δηλώνει την αλλαγή επίπεδου καταλόγου προς τα επάνω. Εφόσον το έγγραφο «another.html» βρίσκεται στον φάκελο «old» και το «index.html» στον κατάλογο-ρίζα του ιστότοπου (δύο επίπεδα πιο πάνω), χρησιμοποιούμε το σύμβολο «../" δύο φορές. Η χρήση σχετικών διαδρομών αρχείων ως προς τη θέση του πόρου (documentrelative paths) είναι η πιό συνηθισμένη λέγονται και τοπικές συνδέσεις. Τυπικά, σε ένα πρόγραμμα συγγραφής ιστοσελίδων δίνεται στον χρήστη η δυνατότητα να επιλέξει και έναν άλλο τύπο σχετικής διαδρομής, αυτής σε σχέση με τη ρίζα του ιστότοπου και όχι με τον κατάλογο του πόρου, η οποία λέγεται site root-relative. Συντάσσεται ξεκινώντας πάντοτε με μια πλάγια μπάρα η οποία υποδηλώνει τον κατάλογο ρίζα του ιστότοπου. <a href="/artists/old/another.html">κείμενο συνδέσμου</a> Τα σχετικά URL (αυτά δηλ. με σχετικά μονοπάτια αρχείων) είναι πρακτικά σε ότι αφορά την οικονομία συγγραφής του κώδικα HTML. Αυτά, πάντοτε μεταφράζονται σε απόλυτα URL για να είναι εφικτή η προσπέλαση στον πόρο που καταδεικνύουν μέσω διαδικτύου. Όλα τα URL που αναφέραμε, παραπέμπουν στον πόρο αυτό καθαυτό αλλά όχι σε κάποιο συγκεκριμένο σημείο μέσα στον ίδιο τον πόρο. Γι αυτό και οι τυπικές ιστοσελίδες εμφανίζονται πάντοτε από την αρχή και όχι από το τέλος τους ή κάποιο άλλο ενδιάμεσο σημείο. Αν θέλουμε να παραπέμψουμε σε ένα

27 συγκεκριμένο σημείο της ιστοσελίδας, π.χ. κάποιας ενότητας ή κεφαλαίου κλπ., χρησιμοποιούμε στο τέλος της διαδρομής αρχείου μια δίεση (#) η οποία αντιστοιχεί στη θέση αυτή. Η θέση σημαίνεται με την ετικέτα <a> (σημείο αγκύρωσης) στο εν λόγω σημείο του εγγράφου, ακολουθούμενη από το όνομα της θέσης (αγκύρωσης). Παράδειγμα: Η σήμανση της εν λόγω θέσης «section_2» πρέπει να έχει τη μορφή (η τιμή «name» είναι το όνομά της): <a name="section_2">κατάλογος Φωτογραφικών Έργων<a> Τα URLs αυτού του τύπου λέγονται κατακερματισμένα (fragmented URLs) και μπορούν να χρησιμοποιούν απόλυτη ή σχετική διαδρομή-αρχείου (W3C n.d.). Εικόνα Διαδρομές αρχείων στον ίδιο κατάλογο. Εικόνα Διαδρομή αρχείου σε πόρο άλλου καταλόγου που βρίσκεται δύο επίπεδα προς τα κάτω.

28 Εικόνα Διαδρομή αρχείου σε πόρο άλλου καταλόγου που βρίσκεται δύο επίπεδα προς τα κάτω. Το index.html βρίσκεται στον κατάλογο-ρίζα του ιστότοπου ΧΡΩΜΑΤΑ HTML Επειδή τα χρώματα μιας ιστοσελίδας προβάλλονται σε οθόνες υπολογιστών και επειδή οι οθόνες χρησιμοποιούν το χρωματικό μοντέλο RGB, αυτό που μας ενδιαφέρει είναι να επικοινωνήσουμε τις εντάσεις των τριών βασικών χρωμάτων, του Κόκκινου (R), Πράσινου (G) και Μπλε (B), δηλαδή τιμές RGB. Τα χρώματα στη γλώσσα HTML μπορούν να οριστούν με αριθμούς που εκπροσωπούν τιμές RGB κάποια χρώματα μπορούν να οριστούν και περιγραφικά με το όνομά τους. Οι αριθμοί μπορεί να είναι δεκαδικοί ή δεκαεξαδικοί Δεξαεξαδικά Χρώματα Ένα δεκαεξαδικό χρώμα ορίζεται με το σχήμα #RRGGBB, όπου τα RR (Red), GG (Green) και BB (Blue) είναι δεκαεξαδικοί αριθμοί που ορίζουν τις αντίστοιχες εντάσεις των χρωμάτων. Όλες οι τιμές πρέπει να είναι ανάμεσα από το 00 και το FF. Για παράδειγμα, η τιμή #FF0000 αποδίδεται ως Κόκκινο, γιατί το Κόκκινο έχει την ανώτερη τιμή του (FF), ενώ το Πράσινο και το Μπλε την ελάχιστη δυνατή (00). Η τιμή # αποδίδεται ως μαύρο, ενώ η τιμή #FFFFFF ως λευκό. Οι δεκαεξαδικές χρωματικές τιμές υποστηρίζονται από όλες τις εφαρμογές περιήγησης.

29 Χρώματα RGB Μια χρωματική τιμή RGB ορίζεται με το σχήμα rgb (red, green, blue), όπου κάθε μια από τις τρεις παραμέτρους μπορεί να πάρει μια τιμή από Αν και οι τρεις τιμές είναι 000 το χρώμα αποδίδεται ως μαύρο, αν και οι τρεις είναι 255 το χρώμα αποδίδεται ως λευκό. Αν και οι τρεις τιμές είναι 128 το χρώμα αποδίδεται ως μεσαίο γκρι. Ανάλογα με τις αναλογίες των εντάσεων προκύπτουν όλα τα χρώματα. Οι χρωματικές τιμές RGB υποστηρίζονται από όλες τις εφαρμογές περιήγησης Χρώματα RGBΑ Παραλλαγή του RGB. Το σχήμα είναι rgb (red, green, blue, alpha). H τέταρτη παράμετρος περιγράφει διαφάνεια (Alpha) και δέχεται τιμές από 0.0 (100% διαφάνεια) έως 1.0 (100% αδιαφάνεια) Χρώματα με Όνομα Όλες οι κύριες εφαρμογές περιήγησης υποστηρίζουν την απεικόνιση 140 ονομαστικών χρωμάτων. Τα 17 από αυτά είναι τα: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white και yellow. Σύμφωνα με το σχήμα rgb(r,g,b) είναι δυνατή η περιγραφή χρωμάτων. Από αυτά μπορούν απεικονιστούν σε οθόνες υπολογιστών περίπου Το πραγματικό χρώμα που προκύπτει δεν μπορεί να είναι το ίδιο για κάθε συσκευή.

30 9.12 HTML 5 Η HTML5 είναι η πιο πρόσφατη εξέλιξη της γλώσσας HTML (η τελευταία έγινε το 1999). Αν και πρόκειται για εργασία σε εξέλιξη, υποστηρίζεται από το σύνολο σχεδόν των γνωστών εφαρμογών περιήγησης (Safari, Chrome, Firefox, Opera, Internet Explorer). Η ανάπτυξή της ξεκίνησε το 2006 από κοινού με το World Wide Web Consortium (W3C) και το Web Hypertext Application Technology Working Group (WHATWG). Βασικοί στόχοι ήταν η μείωση της εξάρτησης από εξωτερικά προγράμματα (plugins), όπως π.χ. το Adobe Flash, η μείωση της εξάρτησης από προγράμματα σεναρίων με την εισαγωγή νέων στοιχείων HTML, ο καλύτερος χειρισμός αστοχιών και σφαλμάτων, η μη εξάρτηση από συσκευές για την εφαρμογή της και η διαφάνεια της διαδικασίας ανάπτυξης. Όλα τα νέα χαρακτηριστικά της έκδοσης βασίζονται στην HTML, CSS, DOM και στην γλώσσα JavaScript (W3C 2014). Τα πιο ενδιαφέροντα νέα στοιχεία της HTML5 είναι το στοιχείο canvas (για σχέδιο), τα στοιχεία video και audio, η καλύτερη υποστήριξη τοπικής αποθήκευσης, στοιχεία HTML που σχετίζονται με το είδος του περιεχόμενου μιας ιστοσελίδας και τα νέα στοιχεία για τον έλεγχο σε φόρμες υποβολής. Πίνακας 9.7. Ετικέτες των νέων στοιχείων HTML για ψηφιακά μέσα Σημασιολογικά Στοιχεία HTML 5 Τα σημασιολογικά στοιχεία HTML είναι αυτά που περιγράφουν ξεκάθαρα το νόημά τους, τόσο στην εφαρμογή περιήγησης όσο και στον σχεδιαστή των ιστοσελίδων. Παραδείγματα μη σημασιολογικού στοιχείου HTML είναι το <div> και το <span>. Το <div> λειτουργεί απλά ως περιέκτης και μπορεί να περικλείει άλλα στοιχεία, όπως παραγράφους κειμένου κ.ά., με σκοπό την ομαδοποίησή τους ή τον ξεχωριστό χειρισμό τους από το υπόλοιπο περιεχόμενο της σελίδας. Το ίδιο κάνει και το στοιχείο <span> αλλά εφαρμόζεται σε περιεχόμενο εντός του μπλοκ περιεχομένου, π.χ. σε μια λέξη του κειμένου. Παραδείγματα σημασιολογικών στοιχείων είναι τα: <form>, <table>, και <img>, τα οποία περιγράφουν ξεκάθαρα το περιεχόμενό τους. Τα σημασιολογικά στοιχεία HTML 5, υποστηρίζονται από όλες τις σύγχρονες εφαρμογές περιήγησης.

31 Εικόνα Στοιχεία HTML5 που ορίζουν τη δομή ενός εγγράφου σημασιολογικά. Πίνακας 9.8. Σημασιολογικά στοιχεία HTML 5.

32 9.13 ΗΧΟΣ ΚΑΙ HTML 5 Μέχρι τώρα δεν υπήρχε κάποιο πρότυπο για την αναπαραγωγή ήχου σε μια ιστοσελίδα και η πλειοψηφία των αρχείων ήχου απαιτούσε βοηθητικά προγράμματα (plugins) διάφορων κατασκευαστών τα οποία δεν ήταν προεγκαταστημένα. Η έκδοση HTML 5 καθορίζει αυτό το πρότυπο. Το πρότυπο HTML 5 ορίζει για το στοιχείο <audio> μεθόδους DOM, ιδιότητες και συμβάντα. Αυτό επιτρέπει ελέγχους που αφορούν στη φόρτωση, εκτέλεση (play, pause), διάρκεια και στην ένταση του ήχου. Υπάρχουν επίσης και συμβάντα DOM που προειδοποιούν πότε αρχίζει μια εκτέλεση ήχου κ.ά. (W3C 2015). Το στοιχείο <audio> υποστηρίζει (προς το παρόν) τρεις τύπους αρχείων ήχου: Ogg Vorbis, MP3 και WAV Ο Κώδικας για το Στοιχείο Audio <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> Εικόνα Για να καλυφθούν προβλήματα συμβατότητας με διάφορες εφαρμογές περιήγησης μπορούν να προστεθούν πολλαπλά εναλλακτικά στοιχεία «source». Ένα από αυτά είναι συνήθως σε μορφή MP3, η οποία έχει καθολική υποστήριξη. Το χαρακτηριστικό «controls» ορίζει την μπάρα ελέγχου που θα εμφανιστεί με τα πλήκτρα play, pause, stop κλπ. Το κείμενο ανάμεσα στις ετικέτες <audio> και </audio> είναι ορατό όταν η εφαρμογή περιήγησης δεν υποστηρίζει το στοιχείο <audio>. Άλλα ιδιοχαρακτηριστικά εκτός από το controls που μπορούν να προστεθούν στην ετικέτα <audio>, είναι τα: autoplay, loop, muted, preload και src.

33 Πίνακας 9.9. Ιδιοχαρακτηριστικά του στοιχείου HTML <audio> με τις αντίστοιχες τιμές ΒΙΝΤΕΟ ΚΑΙ HTML 5 Όπως και με τον ήχο, τα περισσότερα βίντεο απαιτούν βοηθητικά προγράμματα (plugins) διάφορων κατασκευαστών τα οποία όμως δεν ήταν προ-εγκαταστημένα σε όλες τις εφαρμογές περιήγησης. Το στοιχείο video προδιαγράφει έναν πρότυπο τρόπο ενσωμάτωσης αρχείων βίντεο χωρίς την ανάγκη plugins. Προς το παρόν υποστηρίζονται τρεις μορφότυποι αρχείων βίντεο: Ogg / Αρχεία Ogg με Theora codec για το βίντεο και Vorbis audio για τον ήχο. MPEG4 / Αρχεία MPEG 4 με H.264 codec για το βίντεο και AAC για τον ήχο. WebM / Αρχεία WebM με VP8 codec για το βίντεο και Vorbis για τον ήχο Ο Κώδικας για το Στοιχείο Video <!DOCTYPE html><html> <body> <video width="320" height="240" controls> <source src="mymovie.mp4" type="video/mp4"> <source src="mymovie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html>

34 Εικόνα Το ιδιοχαρακτηριστικό «controls» ορίζει την μπάρα ελέγχου που θα εμφανιστεί με τα πλήκτρα play, pause, stop, ένταση ήχου κλπ.. Σημαντικές είναι και οι ιδιότητες «width» και «height» της ετικέτας «source» που ορίζουν τις διαστάσεις προβολής του βίντεο. Το κείμενο ανάμεσα στις ετικέτες <video> και </video> είναι ορατό όταν η εφαρμογή περιήγησης δεν υποστηρίζει το στοιχείο <video>. Πίνακας Ιδιοχαρακτηριστικά του στοιχείου <video>

35 9.15 Σύνοψη - Τα έγγραφα HTML είναι έγγραφα κειμένου γραμμένα στην γλώσσα HTML. - Η HTML είναι μια γλώσσα σήμανσης κειμένου. Ένα έγγραφο HTML είναι ένα αρχείο απλού κειμένου με σήμανση HTML. - Οι ιστοσελίδες είναι η απεικόνιση εγγράφων HTML μέσω εφαρμογών περιήγησης (browsers). - Μια εφαρμογή περιήγησης μπορεί να απεικονίσει ένα έγγραφο HTML διαβάζοντας τις ετικέτες σήμανσης. - Ένα έγγραφο HTML μπορεί να δημιουργηθεί με μια απλή εφαρμογή κειμενογράφου ή με μια εφαρμογή δημιουργίας ιστοσελίδων. - Η XHTML (Extensible Hypertext Markup Language) είναι μια γλώσσα σήμανσης υπερκειμένου. Είναι σχεδόν ίδια με την HTML αλλά έχει αυστηρούς όρους σύνταξης. - Τα φύλλα CSS επιτρέπουν την διαμόρφωση απεικόνισης των στοιχείων HTML. Πολλαπλά φύλλα CSS μπορούν να συνδυαστούν σε ένα. - Η JavaScript είναι μια γλώσσα σεναρίων-εντολών για ιστοσελίδες. Μπορεί να δημιουργήσει περιεχόμενο βάσει επιλογών του χρήστη. Η Δυναμική HTML (DHTML) είναι ένας συνδυασμός HTML, CSS, και JavaScript. Όταν η JavaScript συνδυάζεται με φύλλα CSS μπορεί να ορίσει δυναμικά ιδιότητες όπως το στυλ κειμένου, το χρώμα, την ορατότητα και τη θέση των στοιχείων HTML. - Το URL (Μοναδικός Εντοπιστής Πόρου) χρησιμοποιείται για να δηλώσει τη θέση των πόρων στον Παγκόσμιο Ιστό. - Οι ετικέτες HTML χρησιμοποιούνται σε ζεύγη, όπως <p></p> ή <body></body - Ta ιδιοχαρακτηριστικά των ετικετών καθορίζουν τις ιδιότητες του στοιχείου HTML. - Ένα έγγραφο XHTML έχει την ίδια βασική δομή με ένα έγγραφο HTML, συμπεριλαμβάνει όμως και την δήλωση DOCTYPE. - Σε ένα έγγραφο HTML μπορούν να χρησιμοποιηθούν τρεις τύποι διαδρομώναρχείων: απόλυτες διαδρομές (προς εξωτερικούς πόρους στο διαδίκτυο), σχετικές διαδρομές ως προς ένα έγγραφο του ιστοτόπου (document-relative) και σχετικές διαδρομές ως προς τη ρίζα του ιστότοπου (site root-relative). - Ta χρώματα σε ένα έγγραφο HTML περιγράφονται με δεκαεξαδικούς αριθμούς. - H HTML 5 επιτρέπει την ενσωμάτωση ήχου και εικόνας βίντεο χωρίς τη χρήση βοηθητικών προγραμμάτων (plugins).

36 9.16 ΒΙΒΛΙΟΓΡΑΦΙΑ - ΑΝΑΦΟΡΕΣ Berners-Lee, T. "Uniform Resource Identifier (URI): Generic Syntax." IETF Tools. The Internet Society. Ιανουάριος (πρόσβαση 2015). Berners-Lee, Tim. (URL) (πρόσβαση 2015).. "HyperText and CERN." World Wide Web Consortium. Μάιος (πρόσβαση 2015). "Crossfade." Τμήμα Φωτογραφίας και Οπτικοακουστικών (πρόσβαση 2015). W3C. "HTML and URLs." W3C. (πρόσβαση 2015).. "HTML Audio/Video DOM Reference." W3C Schools (πρόσβαση Απρίλιος 23, 2015).. "HTML5 A vocabulary and associated APIs for HTML and XHTML." W3C. Οκτώβριος 28, (πρόσβαση 2015).. The HTML DOM Document Object (πρόσβαση 2015).. URL Encoding (πρόσβαση 2015). WWW Consortium. Architecture of the World Wide Web. Δεκέμβριος 15, (πρόσβαση 2015).