ΚΕΦΑΛΑΙΟ 4. H Γλώσσα Σήµανσης HTML. - Απρίλιος ηµήτριος Σάµψων. Επίκουρος Καθηγητής

Transcript

1 ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ Τµήµα ιδακτικής της Τεχνολογίας και Ψηφιακών Συστηµάτων ΚΕΦΑΛΑΙΟ 4 H Γλώσσα Σήµανσης HTML ηµήτριος Σάµψων Επίκουρος Καθηγητής - Απρίλιος

2 Περιεχόµενα 4 Η Γλώσσα Σήµανσης HTML Εισαγωγή Γενική επισκόπηση της γλώσσας SGML HTML Βασικοί κανόνες σύνταξης ετικετών HTML Βασικές ετικέτες HTML εγγράφου Ιεραρχική οµή HTML Κώδικα Βασικά τµήµατα µιας HTML σελίδας Ειδικοί Χαρακτήρες και Σχόλια Ετικέτες: H1, H2, H3, H4, H5, H Ετικέτα Παραγράφου P Αλλαγή γραµµής στην HTML Λίστες στην ΗΤΜL Ενσωµάτωση Εικόνων Σύνδεσµοι Υπερκειµένου Παράδειγµατα HTML κώδικα Εσωτερική διασύνδεση ηµιουργία Πινάκων ηµιουργία Φορµών ηµιουργία Πλαισίων ιαδοχικά Φύλλα Στυλ Σύνταξη των κανόνων στυλ Επισκόπηση των ιδιοτήτων και των τιµών που χρησιµοποιούνται στα φύλλα στυλ Ασκήσεις HTML Σύνοψη Βιβλιογραφία ηµήτριος Σάµψων

3 Λίστα Σχηµάτων Σχήµα 4-1 Η γλώσσα SGML και οι εφαρµογές της... 6 Σχήµα 4-2 Ιεραρχική δοµή του HTML κώδικα...11 Λίστα Εικόνων Εικόνα 4-1 Παράδειγµα χρήσης οντοτήτων για την εισαγωγή δεσµευµένων χαρακτήρων...12 Εικόνα 4-2 Παράδειγµα χρήσης της ετικέτας <H1>...13 Εικόνα 4-3 Παράδειγµα χρήσης της ετικέτας <Η2>...14 Εικόνα 4-4 Παράδειγµα στοιχισµένης παραγράφου...15 Εικόνα 4-5 Αλλαγή γραµµής στην HTML...16 Εικόνα 4-6 Παράδειγµα αριθµηµένης λίστας...17 Εικόνα 4-7 Παράδειγµα χαρτογραφηµένης εικόνας. Κάθε νοµός της Ελλάδας στο χάρτη αντιστοιχεί σε διαφορετικό σύνδεσµο...20 Εικόνα 4-8 Ένα απλό παράδειγµα HTML εγγράφου (1)...21 Εικόνα 4-9 Ένα απλό παράδειγµα HTML εγγράφου (2)...23 Εικόνα 4-10 Παράδειγµα χρήσης εσωτερικών υπερσυνδέσµων...25 Εικόνα 4-11 Μια HTML σελίδα που περιέχει έναν πίνακα...26 Εικόνα 4-12 Παράδειγµα δηµιουργίας ενός πίνακα...28 Εικόνα 4-13 Παράδειγµα HTML σελίδας που περιέχει στοιχεία φόρµας...29 Εικόνα 4-14 Ένα απλό παράδειγµα µιας φόρµας...33 Εικόνα 4-15 Μια HTML σελίδα χωρισµένη σε πλαίσια...34 Εικόνα 4-16 Ένα απλό παράδειγµα δηµιουργίας πλαισίων...35 Εικόνα 4-17 Μορφοποίηση της ετικέτας <h1>...37 Εικόνα 4-18 ηλώνοντας κανόνες στυλ στην επικεφαλίδα και στο κυρίως τµήµα ενός HTML εγγράφου...38 Εικόνα 4-19 Χρήση πολύπλοκων κανόνων στυλ...40 Εικόνα 4-20 Χρήση ανώνυµων κλάσεων...43 Εικόνα 4-21 Παράδειγµα µορφοποίησης χρώµατος υποβάθρου και χρώµατος κειµένου...46 Εικόνα 4-22 Παραδείγµατα στυλ περιγράµµατος...49 Εικόνα 4-23 Ένα ολοκληρωµένο παράδειγµα µορφοποίησης περιγράµµατος πλαισίου...50 Εικόνα 4-24 Παράδειγµα µορφοποίησης των περιθωρίων ενός πλαισίου..52 Εικόνα 4-25 Παράδειγµα µορφοποίησης απόστασης κειµένου από το...53 Εικόνα 4-26 Απλή Φόρµα Πιστοποίησης Χρήστη...55 Εικόνα 4-27 Ιστοσελίδα που αποτελείται από πέντε πλαίσια ηµήτριος Σάµψων

4 Εικόνα 4-28 Πίνακας 2 στηλών και 3 γραµµών...58 Εικόνα 4-29 Αριθµηµένες και µη αριθµηµένες λίστες...59 Εικόνα 4-30 Μια απλή HTML σελίδα...60 Εικόνα 4-31 Πλοήγηση στα πλαίσια µέσω της παραµέτρου TARGET...69 Λίστα Πινάκων Πίνακας 4-1 Καθορισµών των συνδέσµων ενός υπερκειµένου...19 Πίνακας 4-2 Ενδεικτικά Παραδείγµατα περιεχοµένων φόρµας ηµήτριος Σάµψων

5 4 Η Γλώσσα Σήµανσης HTML 4.1 Εισαγωγή Στο παρών κεφάλαιο θα µελετήσουµε τη γλώσσα σήµανσης HTML (Hypertext Markup Language) και πιο συγκεκριµένα τους κύριους κανόνες σύνταξής της, τα βασικά τµήµατα των HTML εγγράφων και οι τρόποι δηµιουργίας αυτών. Επίσης, µελετώνται τα διαδοχικά φύλλα στυλ, που παρέχουν κανόνες µορφοποίησης των HTML εγγράφων καθώς και οι κανόνες σύνταξης αυτών και παρουσιάζονται ορισµένα παραδείγµατα σύνταξης κανόνων στυλ. Τέλος, το κεφάλαιο αυτό παρέχει µια σειρά ενδεικτικών ασκήσεων δηµιουργίας HTML σελίδων για την βαθύτερη κατανόηση των δηλώσεων της γλώσσας HTML. Πριν όµως µελετήσουµε την HTML, θα ήταν σωστό να ορίσουµε την έννοια της σήµανσης, να προχωρήσουµε σε µια µικρή κατηγοριοποίηση των γλωσσών σήµανσης και τέλος να κάνουµε µια σύντοµη επισκόπηση του προγόνου της HTML, την SGML. Έτσι λοιπόν σήµανση, ονοµάζεται η εισαγωγή πληροφορίας σε συγκεκριµένα σηµεία ενός υπάρχοντος κειµένου µε σκοπό τον καθορισµό της δοµής του ή τον καθορισµό του τρόπου εµφάνισής του. Οι γλώσσες σήµανσης µπορούν να χωριστούν σε δυο µεγάλες κατηγορίες. Στις γλώσσες σήµανσης Γενικού Σκοπού και στις γλώσσες σήµανσης Ειδικού Σκοπού. Οι γλώσσες σήµανσης Γενικού Σκοπού περιγράφουν τη δοµή και τη σηµασία ενός κειµένου σε κάποιο αρχείο και δεν προσδιορίζουν πώς θα χρησιµοποιηθεί το κείµενο. Τα χαρακτηριστικά των γλωσσών γενικού σκοπού είναι τα εξής: δεν δηµιουργήθηκαν για συγκεκριµένη εφαρµογή, είναι αρκετά γενικές ώστε να µπορούν να χρησιµοποιηθούν σε πολλές και διαφορετικές εφαρµογές, τα αρχεία που δηµιουργούνται είναι δυνατό να µεταφερθούν µε ευκολία σε περισσότερες από µία εφαρµογές. Ένα αντιπροσωπευτικό παράδειγµα Γλώσσας Σήµανσης Γενικού Σκοπού αποτελεί και η SGML () Οι γλώσσες σήµανσης Ειδικού Σκοπού χρησιµοποιούνται για τη δηµιουργία κώδικα για µια συγκεκριµένη εφαρµογή ή µηχανή Γενική επισκόπηση της γλώσσας SGML H HTML, είναι µια εφαρµογή της γλώσσας SGML (Standard Generalized Markup Language). Μέσω της γλώσσας αυτής επιτρέπεται ο καθορισµός νέων γλωσσών σήµανσης και δηµιουργήθηκε πολύ νωρίτερα από την ανάπτυξη του Παγκόσµιου Ιστού. Αρχικά σχεδιάστηκε για τον καθορισµό της διαρρύθµισης των σελίδων και των γραµµατοσειρών, µέσω της διαδικασίας της σήµανσης. Στη συνέχεια, η χρήση της επεκτάθηκε για τον καθορισµό οδηγιών που αφορούν την µορφοποίηση, την εκτύπωση και άλλα είδη επεξεργασίας ηλεκτρονικών εγγράφων. Η SGML δεν αποτέλεσε την πρώτη προσπάθεια ψηφιακής στοιχειοθέτησης. Πριν από αυτή γινόταν χρήση ποικίλων προγραµµάτων, όπως των latex και troff, τα οποία παρήγαγαν ασύµβατες µεταξύ τους µορφοποιήσεις. Η SGML αποτέλεσε την πρώτη προσπάθεια για τη δηµιουργία µιας γλώσσας η οποία θα επέτρεπε την παραγωγή διαφορετικών γλωσσών σήµανσης αλλά συµβατών µεταξύ τους. Για το 5 ηµήτριος Σάµψων

6 λόγο αυτό η γλώσσα SGML περιγράφεται πολλές φορές και ως µετα-γλώσσα σήµανσης. Μετα-γλώσσα σήµανσης Εφαρµογή SGML Γλώσσα σήµανσης XML HyTime HTML XHTML SMIL SOAP WML Σχήµα 4-1 Η γλώσσα SGML και οι εφαρµογές της Μια SGML εφαρµογή (όπως για παράδειγµα η HTML), αποτελείται από τα εξής τέσσερα βασικά µέρη, κάθε ένα από τα οποία έχει ξεχωριστό ρόλο στον καθορισµό της σύνταξης και της σηµασίας της εφαρµογής: Την SGML δήλωση, η οποία καθορίζει τους αποδεκτούς χαρακτήρες που µπορούν να χρησιµοποιηθούν στην εκάστοτε εφαρµογή Από ένα έγγραφο που καθορίζει τις έγκυρες δοµές σήµανσης. Το έγγραφο αυτό ονοµάζεται Document Type Definition (DTD) και µπορεί επίσης να συµπεριλαµβάνει επιπρόσθετους ορισµούς Μια προδιαγραφή που περιγράφει τη σηµασιολογία της σήµανσης. Η προδιαγραφή αυτή χρησιµοποιείται επίσης για την επιβολή περαιτέρω συντακτικών περιορισµών οι οποίοι δεν είναι δυνατόν να εκφραστούν µέσω ενός DTD Από στιγµιότυπα εγγράφων τα οποία περιέχουν κείµενο µαζί µε την απαραίτητη σήµανση. Κάθε στιγµιότυπο περιλαµβάνει µια αναφορά στο έγγραφο DTD, προκειµένου να ελεγχθεί η εγκυρότητα του στιγµιότυπου ως προς το DTD. 4.2 HTML H γλώσσα σήµανσης ΗΤΜL (Hypertext Markup Language) αποτελεί µια εφαρµογή της SGML, η οποία έχει σχεδιασθεί µε σκοπό: Τη στοιχειοθέτηση (µορφοποίηση-formating) ηλεκτρονικών κειµένων Την αναµετάδοσή τους στο ιαδίκτυο Την αναπαράστασή τους σε διαφορετικού είδους οθόνες Η περιγραφή της στοιχειοθέτησης του κειµένου γίνεται µε την εισαγωγή ετικετών της HTML στο σώµα του εγγράφου. Οι περισσότερες ετικέτες της HTML 6 ηµήτριος Σάµψων

7 χρησιµοποιούνται για την οργάνωση του περιεχοµένου σε µια λογική ιεραρχική δοµή. Υπάρχουν ωστόσο και καθαρά µορφολογικοί χαρακτήρες (π.χ. <Β>, <Ι>). Η HTML επιτρέπει την ενσωµάτωση υπερσυνδέσµων (links, δεικτών) προς άλλα κείµενα αλλά και αρχεία ήχου, εικόνων, κινουµένων σχεδίων κλπ. Έτσι, µπορεί να χρησιµοποιηθεί για τον σχεδιασµό και την ανάπτυξη εφαρµογών υπερµέσων. Ένα άλλο χαρακτηριστικό της HTML είναι ότι η γλώσσα αυτή είναι επεκτάσιµη, υπό την έννοια ότι σε αυτή µπορούν να προστεθούν νέες ιδιότητες και λειτουργίες, χωρίς να ακυρώνονται υπερκείµενα ανεπτυγµένα σε παλαιότερες εκδόσεις της. Αρχεία HTML Τα αρχεία τα οποία περιέχουν κώδικα HTML έχουν συνήθως κατάληξη.html ή.htm. Τα αρχεία αυτά περιέχουν χαρακτήρες ASCII και µπορούν να δηµιουργηθούν µε έναν οποιονδήποτε επεξεργαστή κειµένου ASCII (editor), όπως ο vi και ο emacs, ο notepad κλπ. Υπάρχουν επίσης πληθώρα WYSIWYG εργαλείων συγγραφής HTML σε περιβάλλοντα Windows, UNIX και Apple, όπως FrontPage, HotMetal, NetObject Fusion, Net, DreamWeaver, κα. Προκειµένου να δηµιουργήσει κάποιος µια ιστοσελίδα είναι απαραίτητη η καλή γνώση των προδιαγραφών HTML, παράλληλα µε την χρήση κάποιου ισχυρού εργαλείου συγγραφής εφαρµογών HTML Ο έλεγχος ενός αρχείου HTML µπορεί να γίνει «τοπικά» µε την χρήση φυλλοµετρητή ιστού (web browser) Σύντοµη ιστορική αναδροµή της HTML Ξεκινώντας από το 1989, η προδιαγραφή της γλώσσας σήµανσης HTML άλλαξε αρκετές φορές. Ο λόγος που οδήγησε στο µεγάλο αριθµό αλλαγών ήταν η προσπάθεια καθορισµού µιας σταθερής σύνταξης. Έτσι λοιπόν, τον Μάιο του 1989 έγινε η πρώτη εισήγηση για τη χρήση της HTML, ενώ τον εκέµβριο του 1991 έγινε η πρώτη δηµοσίευση. Τον Ιούλιο του 1994 κυκλοφόρησε η HTML 2.0, η οποία οριζόταν ως ένα DTD της γλώσσας SGML και τον Ιανουάριο 1997 ανακοινώθηκε από την WWW Consortium (W3C) η κυκλοφορία της HTML 3.2. Τέλος, τον εκέµβριο του ίδιου χρόνου κυκλοφόρησε η πρώτη έκδοση της HTML 4.0, η οποία επεκτείνει την HTML 3.2 όσον αφορά στη διεθνοποίηση της γλώσσας, στην υποστήριξη φύλλων στυλ (style sheets), πλαισίων, και στην αποδοχή από τον διεθνή οργανισµό προτυποποίησης ISO (ISO 15445).Η τελευταία έκδοση της HTML (HTML 4.01) κυκλοφόρησε τον εκέµβρη του Από κει και έπειτα έγινε προφανές ότι µελλοντικές επεκτάσεις της γλώσσας θα ήταν πολύ δύσκολο να επιτευχθούν στα πλαίσια της SGML. Το κυριότερο πρόβληµα που τίθεται, είναι η συµβατότητα της γλώσσας HTML µε παλιότερες εκδόσεις της. H HTML 4.01 επιλύει, µερικώς, το πρόβληµα αυτό καθότι βασίζεται τόσο σε µεταβατικές όσο και σε αυστηρά ορισµένες προδιαγραφές. Είναι προφανές ότι η HTML 4.01 θα αποτελέσει την τελική προδιαγραφή της γλώσσας, ενώ οποιαδήποτε περαιτέρω ανάπτυξή της θα επικεντρωθεί στον απόγονο αυτής, την XHTML η οποία αποτελεί µια προσαρµογή της γλώσσας HTML στους κανόνες της XML. H πρώτη έκδοση της XHTML ως σύσταση, κυκλοφόρησε το εκέµβριο του Μια από τις νέες δυνατότητες της HTML είναι η ύπαρξη µηχανισµών που υποστηρίζουν την εισαγωγή scripts (ακολουθία δηλώσεων που παρέχουν εντολές στο φυλλοµετρητή), πλαισίων και την ενσωµάτωση αντικειµένων όπως εικόνες, video, ήχο, µαθηµατικές εκφράσεις και άλλα αντικείµενα ή εφαρµογές. 7 ηµήτριος Σάµψων

8 4.2.1 Βασικοί κανόνες σύνταξης ετικετών HTML Οι βασικοί κανόνες σύνταξης των HTML ετικετών είναι οι εξής: Όλες οι ετικέτες περικλείονται µεταξύ των χαρακτήρων "<" και ">". Οτιδήποτε βρίσκεται ανάµεσα στους χαρακτήρες "<!--" και "-->", αποτελεί σχόλιο και δεν εµφανίζεται στο φυλλοµετρητή. Υπάρχουν δύο ειδών ετικέτες: Απλές: οι οποίες έχουν τη µορφή "<ετικέτα>", όπως για παράδειγµα η ετικέτα <BR> που υποδηλώνει αλλαγή γραµµής ιπλές: οι οποίες έχουν τη µορφή <ετικέτα> </ετικέτα>. Το πρώτο µέρος της ετικέτας είναι η αρχή της ετικέτας ή το σηµείο στο οποίο «ανοίγει» και το δεύτερο είναι το τέλος ή το σηµείο στο οποίο κλείνει. Παράδειγµα διπλής ετικέτας είναι η ετικέτα <TITLE> η οποία χρησιµοποιείται για να οριστεί ο τίτλος της ιστοσελίδας <TITLE>Αυτός είναι ένας τίτλος</title> Παρότι ορισµένες φορές το τέλος µίας διπλής ετικέτας µπορεί να παραλείπεται, καλό είναι όλες οι διπλές ετικέτες να έχουν και τέλος, ώστε να είναι ευανάγνωστος ο HTML κώδικας. Ορισµένες ετικέτες µπορεί να περιέχουν παραµέτρους, οι οποίες διευκρινίζουν τη λειτουργία της ετικέτας. Η συνήθης µορφή είναι <ετικέτα παράµετρος= τιµή_παραµέτρου > Για παράδειγµα, στο τµήµα του HTML κώδικα που ακολουθεί: <BODY bgcolor= yellow > ορίζεται ορισµός του χρώµατος του υποβάθρου της ιστοσελίδας σε κίτρινο Οι ετικέτες µπορεί να γράφονται µε πεζά και κεφαλαία γράµµατα. Ωστόσο, για χάρη οµοιοµορφίας, καλό είναι οι ετικέτες να εισάγονται µόνο µε πεζά ή µε κεφαλαία γράµµατα. Ιδιαίτερη προσοχή πρέπει να δοθεί στη χρήση ελληνικών-αγγλικών χαρακτήρων στις ετικέτες. Μπορεί ορισµένοι χαρακτήρες να φαίνονται ίδιοι, αλλά στην πραγµατικότητα δεν είναι. Οι ετικέτες καθορίζουν την δοµή ενός εγγράφου HTML, όπως και στην SGML. Π.χ., η ετικέτα <P> αναπαριστά µια παράγραφο, ενώ η ετικέτα <Β> κάνει πιο έντονο ένα τµήµα του περιεχοµένου. Η τοποθέτηση των ετικετών σε ένα έγγραφο πρέπει να ακολουθεί τους δοµικούς κανόνες της HTML: Τα πεδία δύο ετικετών δεν µπορεί να τέµνονται. Για παράδειγµα, το ακόλουθο τµήµα του HTML κώδικα είναι λάθος: <Η3>Μια<Β>επικεφαλίδα</H1>έντονα γραµµένη</β> Η ένθεση (nesting) διαφορετικών ετικετών δεν επιτρέπεται για όλες τις ετικέτες. Για παράδειγµα, ανάµέσα στην ετικέτα µιας επικεφαλίδας, δηλαδή ανάµεσα στη διπλή ετικέτα <HEAD> δεν πρέπει να υπάρχει η ετικέτα 8 ηµήτριος Σάµψων

9 παραγράφου <Ρ>. Αντίθετα, ανάµεσα στην ετικέτα µίας παραγράφου, δηλαδή ανάµεσα στις ετικέτες <Ρ> και </Ρ> µπορεί να εµφανιστεί η ετικέτα <ΕΜ> Βασικές ετικέτες HTML εγγράφου Κάθε HTML έγγραφο αποτελείται από τα εξής τµήµατα: µία γραµµή που περιέχει την έκδοση της HTML που χρησιµοποιεί το τρέχον έγγραφο, για παράδειγµα <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " την διπλή ετικέτα <HTML> </HTML>, η οποία δηλώνει ότι περικλείεται HTML κώδικας, µέσα στην οποία βρίσκεται: η επικεφαλίδα του εγγράφου, η οποία ορίζεται από την ετικέτα <HEAD> και περιέχει πληροφορίες σχετικές µε το υπερκείµενο, όπως τίτλο, λέξεις, κλειδιά, κλπ. το κυρίως σώµα του εγγράφου, το οποίο ορίζεται από την διπλή ετικέτα <BODY> που περιλαµβάνει το περιεχόµενο του εγγράφου, ή την διπλή ετικέτα <FRAMESET> για χρήση πλαισίων (frames). H βασική ετικέτα <HEAD> Η διπλή ετικέτα <HEAD> δηλώνει την επικεφαλίδα του ΗΤΜL Εγγράφου. Αν παραλείψουµε την ετικέτα </HEAD>, τότε το τέλος της ετικέτας <HEAD> συνάγεται από την ετικέτα <BODY> ή <FRAMESET>. Η ετικέτα <HEAD> περιλαµβάνει πληροφορίες για το έγγραφο, όπως τον τίτλο του, λέξεις κλειδιά, περιγραφή και το και το φύλλο στυλ που µπορεί να χρησιµοποιηθεί για την µορφοποίησή του. Τα περιεχόµενα της ετικέτας <HEAD> δεν εµφανίζονται στην οθόνη του φυλλοµετρητή, µε εξαίρεση τον τίτλο που αντιστοιχεί στην ετικέτα <TITLE>. Οι ετικέτες που περικλείει η <HEAD> είναι οι: <TITLE> <BASE> <STYLE> <LINK> <META> <SCRIPT> <OBJECT> Η ετικέτα <TITLE> Η ετικέτα <TITLE> περικλείει τον τίτλο του εγγράφου HTML. Εµφανίζεται στο παράθυρο του φυλλοµετρητή κατά την αναπαραγωγή του εγγράφου (συνήθως στο άνω πλαίσιο). Αποθηκεύεται και εµφανίζεται στα αρχεία σελιδοδεικτών (bookmarks). Χρησιµοποιείται κατά την διαδικασία αναζήτησης ευρετηρίασης 9 ηµήτριος Σάµψων

10 των ιστοσελίδων ενός δικτυακού τόπου από µηχανές αναζήτησης. Ο τίτλος του εγγράφου πρέπει να είναι συνοπτικός και περιεκτικός. Η ετικέτα <BASE> Απλή ετικέτα, που περιέχεται στην ετικέτα <HEAD>. Καθορίζει το URL αναφοράς, το οποίο µπορεί να χρησιµοποιηθεί για την διευθέτηση των σχετικών URL s που υπάρχουν µέσα στο έγγραφο HTML. Οι περισσότερες ιστοσελίδες δεν απαιτούν τη δήλωση του URL αναφοράς τους, καθώς το δικό τους URI αποτελεί το URΙ αναφοράς για ενδεχόµενα σχετικά URL. Η δήλωση ενός URL αναφοράς είναι αναγκαία όταν το ίδιο το έγγραφο µπορεί να ανακτηθεί από διαφορετικές διευθύνσεις και όταν κάποιο έγγραφο HTML αποστέλλεται µέσω για παράδειγµα, ηλεκτρονικού ταχυδροµείου. Παράµετροι: HREF = URL (To URL αναφοράς) TARGET (Το όνοµα του πλαισίου στο οποίο θα εµφανίζονται τα έγγραφα) Η ετικέτα <STYLE> Χρησιµοποιείται για την ενσωµάτωση (inlining) ενός φύλλου στυλ (βλ. παράγραφος 4.3) σε ένα έγγραφο HTML και περιέχεται στην ετικέτα <HEAD>. Η ετικέτα <LINK> Η ετικέτα <LINK> είναι µια απλή ετικέτα η οποία περιέχεται στην ετικέτα <HEAD>. Όλες οι πληροφορίες που αφορούν την ετικέτα αυτή ορίζονται στις παραµέτρους της. H ετικέτα <LINK>, προσδιορίζει συσχετίσεις ανάµεσα στο έγγραφο στο οποίο ενσωµατώνεται και σε έναν αριθµό άλλων εγγράφων. Στην επικεφαλίδα (HEAD) ενός αρχείου HTML µπορεί να εισαχθεί ένας οποιοσδήποτε αριθµός από στοιχεία <LINK>. Οι περισσότεροι πλοηγοί δεν υποστηρίζουν την ετικέτα αυτή, γι αυτό και οι συγγραφείς εφαρµογών HTML, δεν πρέπει να θεωρούν ότι η χρήση του εξασφαλίζει την εµφάνιση των αντίστοιχων υπερσυνδέσµων στους χρήστες µέσω της διαπροσωπείας των φυλλοµετρητών. Η χρήση της ετικέτας <LINK> γίνεται κυρίως για την διασύνδεση µε αρχεία που ορίζονται φύλλα στυλ (βλ. παράγραφος 4.3.1). Η βασική ετικέτα <BODY> Η διπλή ετικέτα <BODY> δηλώνει τo περιεχόµενο του ΗΤΜL Εγγράφου. Αν παραληφθεί η ετικέτα τέλους </BODY>, τότε αυτή συνάγεται από τo κλείσιµο της ετικέτας </HTML>. Η ετικέτα <BODY> περιλαµβάνει όλο το κείµενο, τη µορφοποίηση, συνδέσµους σε εικόνες και σε λοιπά πολυµεσικά στοιχεία, τα οποία εµφανίζονται στο παράθυρο του φυλλοµετρητή. Βασική παράµετρος είναι η BgColor που ορίζει το χρώµα του υποβάθρου της ιστοσελίδας. Οι βασικές ετικέτες που περιέχει η ετικέτα <BODY> είναι οι εξής: Η1 Η2 Η3 U I EM UL OL LI 10 ηµήτριος Σάµψων

11 Η4 STRONG TABLE Η5 PRE FONT Η6 CENTER FORM P HR BR BIG A SMALL IMG SUB B SUP Ιεραρχική οµή HTML Κώδικα Στην παρακάτω εικόνα απεικονίζεται η ιεραρχική δοµή ενός HTML κώδικα. Βασικές ετικέτες <HTML> <HEAD> <BODY> <TITLE> <H1> <P> <BR> <UL> <OL> Σχήµα 4-2 Ιεραρχική δοµή του HTML κώδικα Στην κορυφή της ιεραρχίας βρίσκεται η ετικέτα <HTML>, ενώ ακολουθούν οι ετικέτες <ΗEAD> και <BODY> Βασικά τµήµατα µιας HTML σελίδας Τα βασικά τµήµατα από τα οποία αποτελείται µια ιστοσελίδα είναι τα εξής Επικεφαλίδες Παράγραφοι Λίστες (Αριθµηµένες και µη αριθµηµένες) Εικόνες Συνδέσµους Πίνακες Φόρµες <LI> 11 ηµήτριος Σάµψων

12 Πλαίσια Στις επόµενες παραγράφους περιγράφεται ο τρόπος µε τον οποίο δηλώνονται τα τµήµατα αυτά στην HTML Ειδικοί Χαρακτήρες και Σχόλια Ορισµένοι χαρακτήρες είναι «δεσµευµένοι» από την HTML ως χαρακτήρες οριοθέτησης ή σήµανσης. Για την εισαγωγή τους στο περιεχόµενο ενός αρχείου HTML, γίνεται χρήση ενός συνδυασµού χαρακτήρων που ονοµάζονται οντότητες: Ο χαρακτήρας "<" εισάγεται µε χρήση της οντότητας < Ο χαρακτήρας ">" εισάγεται µε χρήση της οντότητας > Ο χαρακτήρας "&" εισάγεται µε χρήση της οντότητας & Τ Ο χαρακτήρας " " εισάγεται µε χρήση της οντότητας " Ο χαρακτήρας κενού (space) εισάγεται µε χρήση της οντότητας Με αντίστοιχο τρόπο εισάγονται και χαρακτήρες που δεν περιλαµβάνονται στο πληκτρολόγιο. Π.χ.: ο χαρακτήρας που αντιστοιχεί στο copyright ( ) εισάγεται σαν Για παράδειγµα το τµήµα του HTML κώδικα που ακολουθεί: <P> X>Y<P> θα απεικονίζεται σε ένα φυλλοµετρητή ως εξής: Εικόνα 4-1 Παράδειγµα χρήσης οντοτήτων για την εισαγωγή δεσµευµένων χαρακτήρων Αντί οντοτήτων, µπορούν να εισαχθούν αριθµητικοί κώδικες που αντιστοιχούν κωδικοποίηση Unicode. Για παράδειγµα, ο κώδικας επιτρέπει εισαγωγή του χαρακτήρα. Τα σχόλια σε έναν HTML κώδικα έχουν την εξής µορφή <!-- Αυτό είναι ένα σχόλιο --> Κάθε γραµµή κειµένου θα πρέπει να σχολιάζεται ξεχωριστά και δεν πρέπει να περιλαµβάνονται άλλες ετικέτες της HTML µέσα στα σχόλια 12 ηµήτριος Σάµψων

13 4.2.6 Ετικέτες: H1, H2, H3, H4, H5, H6 H HTML αναγνωρίζει έξι επίπεδα επικεφαλίδων (headings), τα οποία καθορίζονται από τις ετικέτες Η1 µέχρι Η6. Θα πρέπει να σηµειωθεί ότι οι επικεφαλίδες αυτές αφορούν επικεφαλίδες του περιεχοµένου του εγγράφου, όπως τίτλοι παραγράφων στο έγγραφο και δεν έχουν σχέση µε την επικεφαλίδα HEAD του HTML εγγράφου. Κάθε επικεφαλίδα είναι διπλή ετικέτα, η οποία περικλείει κείµενο, το οποίο συνήθως αναπαρίσταται στην οθόνη ενός φυλλοµετρητή µε γραµµατοσειρά µεγαλύτερου µεγέθους και έντασης. Για παράδειγµα το τµήµα του HTML κώδικα που ακολουθεί: <Η1>Αυτή είναι µια επικεφαλίδα επιπέδου 1</Η1> θα έχει σαν αποτέλεσµα Εικόνα 4-2 Παράδειγµα χρήσης της ετικέτας <H1> ενώ το ακόλουθο τµήµα του HTML κώδικα <H2>Η επικεφαλίδα αυτή είναι επιπέδου2 και εµφανίζεται µε µικρότερη γραµµατοσειρά</h2> θα έχει το εξής αποτέλεσµα 13 ηµήτριος Σάµψων

14 Εικόνα 4-3 Παράδειγµα χρήσης της ετικέτας <Η2> Ετικέτα Παραγράφου P Η διπλή ετικέτα <P> περικλείει κείµενο και ορίζει µία παράγραφο. Το τέλος της ετικέτας </P> είναι προαιρετικό, αλλά η χρήση της συνίσταται για την αποφυγή σφαλµάτων των πλοηγών, ειδικά όταν γίνεται χρήση φύλλων στυλ. Mια παράµετρος της ετικέτας <P> είναι η ALIGN που χρησιµοποιείται για την οριζόντια στοίχιση του κειµένου και οι τιµές που µπορεί να πάρει είναι οι εξής: ALIGN=[left center right justify ] Η χρήση της παραµέτρου ALIGN δεν προτείνεται (deprecated) καθώς τα φύλα στυλ παρέχουν µεγαλύτερη ευελιξία για την στοίχιση παραγράφων. Για παράδειγµα το τµήµα του HTML κώδικα που ακολουθεί: <P ALIGN= CENTER >Αυτή είναι µια παράγραφος στοιχισµένη στο κέντρο</p> έχει σαν αποτέλεσµα: 14 ηµήτριος Σάµψων

15 Εικόνα 4-4 Παράδειγµα στοιχισµένης παραγράφου Η ετικέτα <P> περιέχεται στις εξής ετικέτες: <ADDRESS>, <APPLET>, <BLOCKQUOTE>, <BODY>, <BUTTON>, <CENTER>, <DEL>, <DD>, <DIV>, <FIELDSET>, <FORM>, <IFRAME>, <INS>, <LI>, <MAP>, <NOFRAMES>, <NOSCRIPT>, <OBJECT>, <TD>, <TH> Αλλαγή γραµµής στην HTML Τα κενά, τα tabs και η εισαγωγή νέων γραµµών δεν επηρεάζουν την στοιχειοθέτηση ενός HTML εγγράφου. Πολλαπλά κενά, tabs και νέες γραµµές συµπτύσσονται σε ένα κενό από τους περισσότερους φυλλοµετρητές. Αν δυο ή περισσότερες ετικέτες HTML έπονται η µία της άλλης σε κάποιο κείµενο και η χρήση τους προδικάζει την εισαγωγή κενού χώρου στο στοιχειοθετηµένο κείµενο, τότε, κατά την στοιχειοθέτηση, γίνεται εισαγωγή κενών σαν να υπήρχε µία µόνο τέτοια ετικέτα. Η ετικέτα <BR> επιτάσσει την αλλαγή γραµµής στο σηµείο στο οποίο τοποθετείται. Η ετικέτα αυτή είναι απλή. Το τµήµα του HTML κώδικα που ακολουθεί: <P>Εδώ<BR>γίνεται αλλαγή γραµµής</p> έχει σαν αποτέλεσµα 15 ηµήτριος Σάµψων

16 4.2.9 Λίστες στην ΗΤΜL Εικόνα 4-5 Αλλαγή γραµµής στην HTML H HTML υποστηρίζει λίστες κουκκίδων καθώς και αριθµηµένες λίστες. Οι ετικέτες που χρησιµοποιούνται για τη δήλωση των λιστών είναι οι εξής: <UL> </UL> Ετικέτα µη αριθµηµένης λίστας <ΟL> </OL> Ετικέτα αριθµηµένης λίστας Το πεδίο κάθε καταλόγου ΗΤΜL δεν µπορεί να είναι κενό και πρέπει να περιέχει τουλάχιστον ένα στοιχείο καταλόγου, το οποίο ορίζεται µε την ετικέτα <LI>. Η ετικέτα αυτή είναι διπλή, αλλά το τέλος της </LI> µπορεί να παραληφθεί. εν πρέπει να υπάρχουν κενά µεταξύ του <LI> και του κειµένου που το ακολουθεί, διότι έτσι δηµιουργούνται προβλήµατα στην στοιχειοθέτηση της λίστας. Το τµήµα του HTML κώδικα που ακολουθεί: <OL> </OL> <LI>Επικεφαλίδες <LI>Παράγραφοι <LI>Αριθµηµένες και µη αριθµηµένες λίστες <LI>Σύνδεσµοι <LI>Εικόνες θα έχει σαν αποτέλεσµα 16 ηµήτριος Σάµψων

17 Εικόνα 4-6 Παράδειγµα αριθµηµένης λίστας Ενσωµάτωση Εικόνων Η ενσωµάτωση εικόνων σε αρχεία ΗΤΜL (inline images), επιτυγχάνεται µε τη χρήση της απλής ετικέτας <IMG>: <IMG SRC = ucyp.gif > Εξ ορισµού, η εισαγόµενη εικόνα τοποθετείται έτσι ώστε η κάτω ακµή του περιβλήµατός της να είναι ευθυγραµµισµένη µε το κάτω µέρος των χαρακτήρων του υπερκειµένου. Στο πρότυπο ΗΤΜL είναι δυνατή η διαφορετική ευθυγράµµιση µιας εικόνας, µε χρήση της παραµέτρου ALIGN η οποία δέχεται τις τιµές top, bottom, middle. Π.χ.: <ΙΜG SRC= ucyp.gif ALIGN = middle> Η παράµετρος ALT παρέχει έναν τρόπο αντικατάστασης της εικόνας µε άλλο υλικό, ανάλογης σηµασίας, στους φυλλοµετρητές που δεν µπορούν να εµφανίσουν εικόνες: <IMG SRC = ucyp.gif ALIGN = middle ALT = [UCY Logo] > Για την ορθή στοιχειοθέτηση ενός υπερκειµένου µε ενσωµατωµένες εικόνες, ο φυλλοµετρητής θα πρέπει να γνωρίζει το µέγεθος της κάθε εικόνας. Εν γένει, η πληροφορία αυτή δεν είναι γνωστή παρά µόνο µετά την εµφάνιση της εικόνας στον φυλλοµετρητή. Επειδή το γεγονός αυτό, εισάγει έναν επιπλέον παράγοντα καθυστέρησης στην ανάγνωση µιας ιστοσελίδας, η προδιαγραφή της ΗΤΜL προτείνει τη χρήση των παραµέτρων HEIGHT και WIDTH µε την ετικέτα <IMG>. Π.χ.: <ΙΜG SRC = ucy.gif HEIGHT = 10 WIDTH = 20 ALT = [UCY Logo] ALIGN = left> 17 ηµήτριος Σάµψων

18 Η εµφάνιση των εικόνων σε έναν φυλλοµετρητή γίνεται µετά την παραλαβή του αρχείου ΗΤΜL. Στη συνέχεια, ο φυλλοµετρητής αναζητά τις ετικέτες <IMG> του αρχείου ΗΤΜL, για τα οποία στέλνει νέες αιτήσεις προς τον εξυπηρετητή. Οι εικόνες που εισάγονται σε ένα υπερκείµενο δεν πρέπει να είναι πολύ µεγάλου µεγέθους. ιαφορετικά υπάρχει η πιθανότητα η πρόσβαση προς τις αντίστοιχες ιστοσελίδες να είναι πολύ αργή. Ιδανικά, το συνολικό µέγεθος των ενσωµατωµένων εικόνων σε µια ιστοσελίδα δεν πρέπει να ξεπερνά τα Κbytes. Πριν την ενσωµάτωση µιας εικόνας, πρέπει να γίνεται επεξεργασία της ώστε αυτή να µην περιλαµβάνει πολλά διαφορετικά χρώµατα. Αρκετοί φυλλοµετρητές µπορούν να αναπαραστήσουν περιορισµένο αριθµό διαφορετικών χρωµάτων, µικρότερο από τα 256 χρώµατα που µπορούν να αναπαρασταθούν σε µια συνηθισµένη 8-µπιτη οθόνη. Για παράδειγµα, αν ένας φυλλοµετρητής επιτρέπει το πολύ 50 διαφορετικά χρώµατα σε κάθε εικόνα, έχει τη δυνατότητα αναπαράστασης (σε µια ιστοσελίδα) µέχρι 5 εικόνες µε διαφορετικά χρώµατα, πριν εξαντλήσει το όριο των 256 χρωµάτων. Πριν την ενσωµάτωση µιας εικόνας σε ιστοσελίδα, συνίσταται η επεξεργασία της για τον περιορισµό των διαφορετικών χρωµάτων που χρησιµοποιεί. Η επεξεργασία αυτή επιτρέπει και τον περιορισµό του µεγέθους της εικόνας Σύνδεσµοι Υπερκειµένου Οι υπερσύνδεσµοι (hypertext links) στην HTML υλοποιούνται µε τη χρήση της διπλής ετικέτας <Α>, η οποία συµβολίζει µία παραποµπή. Το κείµενο που περικλείεται από τις ετικέτες <Α>...</Α>, αποτελεί την αφετηρία της παραποµπής και αποκαλείται άγκυρα υπερκειµένου (hypertext anchor). Στους περισσότερους φυλλοµετρητές οι αφετηρίες των παραποµπών σηµειώνονται µε ξεχωριστό χρώµα και υπογράµµιση. Παραδείγµατα υπερσυνδέσµων είναι τα εξής: <A HREF=" > <Α HREF="link.html"><IMG SRC="image.gif"></Α> <Α HREF="mailto:mdd@turing.cs.ucy.ac.cy"> </Α> <IMG SRC="mbox.gif" ALIGN="middle" ALT="[ ]"> Η παράµετρος HREF ενός υπερσυνδέσµου καθορίζει τη διεύθυνση (URL) της παραποµπής. Η επιλογή µίας αφετηρίας µε το ποντίκι καθοδηγεί τον φυλλοµετρητή να ζητήσει το αρχείο που καθορίζεται από την παράµετρο HREF, χρησιµοποιώντας το πρωτόκολλο που ορίζεται από το URL (π.χ. http, ftp, κλπ). Σύνδεσµοι Υπερκειµένου µε εξωτερικά αρχεία Εκτός από τη δυνατότητα ενσωµάτωσης εικόνων σε στοιχειοθετηµένα αρχεία HTML (µε χρήση της ετικέτας <IMG>), υπάρχει η δυνατότητα εµφάνισης των εικόνων σε ξεχωριστή ιστοσελίδα, µε χρήση της παραµέτρου HREF. Π.χ.: <A HREF="image.gif" ALT="[Εικόνα]">Image anchor</a> 18 ηµήτριος Σάµψων

19 <A HREF="image.gif"><IMG SRC="smallimage.gif"></A> Με παρόµοιο τρόπο µπορεί κανείς να εισαγάγει παραποµπές σε αρχεία κινουµένων σχεδίων, ήχου, κλπ. Ενσωµάτωση παραποµπών στα υπερκείµενα Κατά την ενσωµάτωση παραποµπών στα υπερκείµενα, πρέπει να δίνεται προσοχή στα εξής: Η χρήση παραποµπών στα υπερκείµενα πρέπει να γίνεται µε σύνεση και προσοχή, για να αποφεύγονται φαινόµενα όπως ο δικτυακός αποπροσανατολισµός (network disorientation) και η δυσκολία ανάγνωσης του περιεχοµένου. Οι παραποµπές υπερκειµένων είναι δυνατόν να ενυπάρχουν µέσα στη φυσική ροή του κειµένου ενός υπερκειµένου. Οι αφετηρίες των παραποµπών δεν πρέπει να έχουν πολύ µεγάλο µήκος. Η παρουσίαση ενός συνόλου από παραποµπές καλύτερα να γίνεται µε χρήση καταλόγων (lists) και όχι µέσα στην ίδια παράγραφο. Απόλυτες και σχετικές διασυνδέσεις Υπάρχουν δυο ειδών διασυνδέσεων, οι απόλυτες και οι σχετικές διασυνδέσεις. Παραδείγµατα σχετικών διασυνδέσεων είναι τα εξής: <A HREF="ex2b.html">hypertext links</a> <A HREF="Project/info.html">subdirectory</A> Παράδειγµα απόλυτης διασύνδεσης είναι το εξής: <A HREF=" Η χρήση σχετικών συνδέσµων διότι µε αυτό τον τρόπο είναι πιο εύκολη η µεταφορά οµάδας υπερκειµένων από έναν εξυπηρετητή σε κάποιον άλλο εφόσον όµως διατηρείται η ιεραρχία των υπερκειµένων. Η χρήση απολύτων υπερσυνδέσµων προτιµάται όταν διασυνδέονται υπερκείµενα που δεν συσχετίζονται άµεσα. Εµφάνιση συνδέσµων Η εµφάνιση των συνδέσµων ανάλογα µε τον αν έχουµε επισκεφθεί ή όχι την παραποµπή, γίνεται µε προκαθορισµένους τρόπους (οι οποίοι φυσικά µπορούν και να αλλάζουν). Στον πίνακα που ακολουθεί παρουσιάζεται ο τρόπος καθορισµού της εµφάνισης των συνδέσµων: Πίνακας 4-1 Καθορισµών των συνδέσµων ενός υπερκειµένου Είδος Συνδέσµου Links Visited links Περιγραφή Σύνδεσµος που απλώς προβάλλεται (δεν έχει ακόµη ενεργοποιηθεί) Σύνδεσµος που έχει ενεργοποιηθεί (τον έχουµε επισκεφθεί) HTML Κώδικας <BODY LINK="color"> <BODY VLINK="color"> 19 ηµήτριος Σάµψων

20 Active links Σύνδεσµος που είναι έτοιµος να ενεργοποιηθεί <BODY ALINK="color"> Ωστόσο καλύτερος τρόπος για την εµφάνιση συνδέσµων είναι η χρήση των φύλλων στυλ. Ένα τέτοιο παράδειγµα βρίσκεται στην παράγραφο Χαρτογραφηµένες εικόνες (Image Maps) Εικόνα 4-7 Παράδειγµα χαρτογραφηµένης εικόνας. Κάθε νοµός της Ελλάδας στο χάρτη αντιστοιχεί σε διαφορετικό σύνδεσµο Συνήθως όταν ενσωµατώνεται µια εικόνα σε έναν σύνδεσµο, κάνοντας κλικ οπουδήποτε πάνω στην επιφάνεια αυτής της εικόνας, µεταφέρει το χρήστη σε µια και µόνο θέση. Με τη χρήση όµως των χαρτογραφηµένων εικόνων, είναι δυνατόν οι χρήστες να µεταφέρονται σε διαφορετικές θέσεις, ανάλογα µε την περιοχή της εικόνας πάνω στην οποία έκαναν κλικ. Οι εικόνες αυτές διαχειρίζονται είτε από τον εξυπηρετητή (server-side διαχείριση), όπου η επεξεργασία των συνδέσµων γίνεται στον εξυπηρετητή ή από συγκεκριµένα προγράµµατα που τρέχουν σε αυτόν, είτε από τον πελάτη (client-side διαχείριση) όπου οι πληροφορίες για τους συνδέσµους βρίσκονται στο ίδιο το html έγγραφο. Η client-side διαχείριση δεν υποστηρίζεται από όλους τους φυλλοµετρητές Παράδειγµατα HTML κώδικα Ακολουθούν δύο απλά παραδείγµατα HTML κώδικα στα οποία γίνεται χρήση των περισσότερων ετικετών που αναφέρθηκαν στις προηγούµενες παραγράφους Παράδειγµα 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <HTML> <HEAD> 20 ηµήτριος Σάµψων

21 </HTML> </HEAD> <BODY> </BODY> <TITLE>Ο τίτλος της σελίδας</title> <H1>Βασικός τίτλος</h1> <P>Μία παράγραφος που περιέχει και <EM>έµφαση</EM></P> <H2> ευτερεύον τίτλος</h2> <U>υπογράµµιση</U> <P>Μία άλλα παράγραφος που περιέχει το σήµα του copyright </P> <H2>Τρίτος τίτλος</h2> <P>Παράγραφος µε πολλά κενά (space).τελοσ</p> το αποτέλεσµα του οποίου απεικονίζεται στην εικόνα που ακολουθεί Παράδειγµα 2 Εικόνα 4-8 Ένα απλό παράδειγµα HTML εγγράφου (1) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " </HTML> <HEAD> <TITLE>Μια απλή ιστοσελίδα </TITLE> </HEAD> <BODY> 21 ηµήτριος Σάµψων

22 <H1>Μια απλή ιστοσελίδα</h1> <P ALIGN="justify">Αυτή είναι µια απλή ιστοσελίδα. Σκοπός της είναι η περιγραφή των πιο γνωστών ετικετών HTML. Αφού µάθετε τις ετικέτες αυτές θα µπορείτε να φτιάχνετε απλές ιστοσελίδες και να ξεκινήσετε να µαθαίνετε την κατασκευή πιο πολύπλοκων ιστοσελίδων</p> <H2>Απλές HTML ετικέτες</h2> <OL> <LI>Επικεφαλίδες (Headings) <LI>Παράγραφοι <LI>Αριθµηµένες και µη Λίστες (Ordered and Unordered Lists) <LI>Σύνδεσµοι (Links) <LI>Εικόνες (Images) </OL> <P ALIGN= CENTER ><IMG SRC="sample.gif" WIDTH="157" HEIGHT="117"></P> <P>Εδώ γίνεται <A href="html2.html">σύνδεση</a> µε άλλη σελίδα</p> </BODY> </HTML> To αποτέλεσµα του παραπάνω κώδικα φαίνεται στην εικόνα που ακολουθεί 22 ηµήτριος Σάµψων

23 Εικόνα 4-9 Ένα απλό παράδειγµα HTML εγγράφου (2) Εσωτερική διασύνδεση Σε γενικές γραµµές, οι απολήξεις των υπερσυνδέσµων στην HTML στοχεύουν κατά συνθήκη είτε σε ένα άλλο αρχείο HTML είτε σε ένα άλλο αρχείο οποιουδήποτε µέσου (π.χ. εικόνας, ήχου κλπ). Η HTML παρέχει τη δυνατότητα να καθοριστούν ως απολήξεις υπερσυνδέσµων αποσπάσµατα κειµένου από το εσωτερικό αρχείων HTML, µε χρήση της παραµέτρου NAME της ετικέτας <Α>. Για παράδειγµα στο εσωτερικό ενός αρχείου µε όνοµα example.html µπορεί να υπάρχει η εξής δήλωση: <Α ΝΑΜΕ="targ1">Chapter 1</Α> Η τιµή (όνοµα) που ανατίθεται στην παράµετρο NAME καθορίζει µοναδικά το συγκεκριµένο σηµείο του εγγράφου. Η παραποµπή σε ένα ονοµατοδοτηµένο σηµείο ενός εγγράφου γίνεται µέσω της παραµέτρου HREF της ετικέτας <Α> µε τον εξής τρόπο: <Α HREF="#targ1">Chapter 1</A> Σε ένα άλλο αρχείο µπορούµε να εγγράψουµε έναν υπερσύνδεσµο κατευθείαν στο σηµείο targ1 του αρχείου example.html. Π.χ.: <A HREF=" example.html#targ1">παραποµπή στο Ι</A> Υπάρχει η δυνατότητα συνδυασµού των HREF και NAME µέσα σε µία άγκυρα <Α>. Π.χ.: 23 ηµήτριος Σάµψων

24 <A HREF="depthome.html" NAME="top">Home</A> Ακολουθεί ένα ολοκληρωµένο παράδειγµα εσωτερικής διασύνδεσης <HTML> <HEAD><TITLE>Σύνδεσµοι Υπερκειµένου</TITLE></HEAD> <BODY BGCOLOR="#FFFFFF"> <A NAME="periexomena"><H1><U>Περιεχόµενα</U></H1></A> <A HREF="#kef1">Κεφάλαιο 1</A><BR> <a href="#kef2">κεφάλαιο 2</a><BR> <A HREF="#kef3">Κεφάλαιο 3</A><BR> <H2>Εισαγωγή</H2>... <A NAME="kef1"><H2>Κεφάλαιο 1</H2></A>... <A NAME="kef2"><H2>Κεφάλαιο 2</H2></A>... <A NAME="kef3"><H2>Κεφάλαιο 3</H2></A>... <A HREF="#periexomena">Επιστροφή στα Περιεχόµενα</A> </BODY> </HTML> To αποτέλεσµα της οποίας απεικονίζεται στην παρακάτω εικόνα 24 ηµήτριος Σάµψων

25 Εικόνα 4-10 Παράδειγµα χρήσης εσωτερικών υπερσυνδέσµων Πατώντας στους κατάλληλους υπερσυνδέσµους ο χρήστης µεταφέρεται στα αντίστοιχα σηµεία του εγγράφου. Για παράδειγµα πατώντας τον υπερσύνδεσµο Κεφάλαιο 1 ο χρήστης θα µεταφερθεί στην επικεφαλίδα Κεφάλαιο ηµιουργία Πινάκων Οι πίνακες χρησιµοποιούνται συχνά ως µέσο στοίχισης πληροφοριών, αλλά η πρακτική αυτή πρέπει να αποφεύγεται για τους εξής λόγους: Οι πίνακες δηµιουργούν προβλήµατα σε χρήστες µε στενότερα παράθυρα πλοηγού, µε µεγαλύτερες γραµµατοσειρές, µε µη-visual πλοηγούς. Οι τρέχοντες πλοηγοί δεν εµφανίζουν έναν πίνακα µέχρις ότου όλα τα στοιχεία του έχουν φορτωθεί στο σύστηµα του πελάτη. Αυτό έχει αρνητικές συνέπειες όταν ένα ολόκληρο έγγραφο έχει τοποθετηθεί µέσα σε πίνακα. Αντί των πινάκων, για στοίχιση, οι συγγραφείς πρέπει να χρησιµοποιούν φύλλα στυλ. Ένα παράδειγµα ενός πίνακα απεικονίζεται στην παρακάτω εικόνα 25 ηµήτριος Σάµψων

26 Εικόνα 4-11 Μια HTML σελίδα που περιέχει έναν πίνακα Η διπλή ετικέτα <TABLE> επιτρέπει τη δηµιουργία πινάκων στην HTML. Οι γραµµές ενός πίνακα ορίζονται από τις διπλές ετικέτες <TR> που περιέχει, ενώ οι στήλες ενός πίνακα καθορίζονται από τις διπλές ετικέτες <TD> που περιέχονται µέσα στις ετικέτες <TR>. Οι παράµετροι της ετικέτας TABLE είναι οι εξής: Align: Οριζόντια στοίχιση πίνακα (π.χ. left, right, center) BgColor: Χρώµα υποβάθρου πίνακα Border: Πάχος περιθωρίου πίνακα σε pixels BorderColor: Χρώµα περιθωρίου Cellpadding: Απόσταση σε pixel κελιών πίνακα από το περιεχόµενο των κελιών Cellspacing: Απόσταση σε pixel µεταξύ κελιών πίνακα Height: Ύψος πίνακα (σε pixel) (συνήθως καθορίζεται αυτόµατα) Width: Πλάτος πίνακα (σε pixel ή ποσοστό) Caption (προαιρετικό), ακολουθούµενο από µηδέν ή περισσότερα στοιχεία col και colgroup, ακολουθούµενα από προαιρετικά στοιχεία thead, tfoot και από ένα ή περισσότερα tbody. H ετικέτα TR, δεν έχει συνήθως παραµέτρους, ενώ οι παράµετροι της ετικέτας TD είναι οι εξής Align: Οριζόντια στοίχιση κελιού (π.χ. left, right, center) Valign: Κατακόρυφη στοίχιση κελιού (π.χ. top, bottom, center) BgColor: Χρώµα υπόβαθρου κελιού 26 ηµήτριος Σάµψων

27 ColSpan: Αριθµός στηλών που επεκτείνεται το κελί RowSpan: Αριθµός γραµµών που επεκτείνεται το κελί Height: Ύψος κελιού (σε pixel) (συνήθως καθορίζεται αυτόµατα) Width: Πλάτος κελιού (σε pixel ή ποσοστό) Ακολουθεί ένα απλό παράδειγµα δηµιουργίας ενός πίνακα στην HTML <HTML> </HTML> <HEAD> </HEAD> <BODY> </BODY> <TITLE>Πίνακας</TITLE> <TABLE width="100%" border= 1 bgcolor="#c0c0c0 > <TR> </TR> <TR> <TD width= 20% >1</TD> <TD>2</TD><TD>3</TD> <TD width= 20 >4</TD> <TD colspan= 2 rowspan= 2 align= center valign= top >5</TD> </TR> <TR> </TR> <TR>< </TR> <TR> </TR> </TABLE> <TD>6</TD><TD>7</TD> <TD colspan=2 bgcolor= #2EA0FF >8</TD> TD>9</TD> <TD colspan= 2 bgcolor= #ffff00 >10</TD> <TD>11</TD> <TD>12</TD> <TD colspan= 2 >13</TD> <TD>14</TD> Η µορφή του πίνακα όπως ορίζεται στον παραπάνω κώδικα, θα είναι η εξής: 27 ηµήτριος Σάµψων

28 Εικόνα 4-12 Παράδειγµα δηµιουργίας ενός πίνακα ηµιουργία Φορµών H δήλωση των φορµών γίνεται µε τη χρήση της διπλής ετικέτας <FORM>. Η ετικέτα αυτή δεν µπορεί να τεθεί εντός επικεφαλίδων, εντός άλλης φόρµας, ή εντός ετικετών µορφοποίησης κειµένων (π.χ. <STRONG>, <EM>). Επίσης, µπορεί να περιλάβει επικεφαλίδες ή ετικέτες µορφοποίησης χαρακτήρων. Οι παράµετροι της ετικέτας FORM είναι οι εξής: ACTION: το URL του προγράµµατος του εξυπηρετητή στον οποίο θα αποσταλούν τα δεδοµένα που θα συγκεντρωθούν από τη φόρµα, για περαιτέρω επεξεργασία. METHOD: είναι η µέθοδος που χρησιµοποιείται για την υποβολή της συµπληρωµένης φόρµας, σύµφωνα µε το πρωτόκολλο HTTP/1.0. Η επιλογή µεθόδου εξαρτάται από τον εξυπηρετητή. Υπάρχουν οι ακόλουθες δυνατότητες: GET: κατά συνθήκη µέθοδος (default), συνεπάγεται την τοποθέτηση των περιεχοµένων της φόρµας στο URL. POST: συνεπάγεται την αποστολή των περιεχοµένων της φόρµας στον εξυπηρετητή µέσω µηνύµατος HTTP. Ένα παράδειγµα µιας φόρµας φαίνεται στην παρακάτω εικόνα 28 ηµήτριος Σάµψων

29 Εικόνα 4-13 Παράδειγµα HTML σελίδας που περιέχει στοιχεία φόρµας Περιεχόµενα φόρµας Η ετικέτα <input> καθορίζει ένα απλό πεδίο εισαγωγής (input). Είναι απλή ετικέτα και έχει τις παραµέτρους: TYPE, µε δυνατές τιµές: "text": πεδίο εισαγωγής χαρακτήρων-υπονοούµενη τιµή "password": σύνθηµα (πεδίο εισαγωγής κειµένου) "checkbox": απλός διακόπτης ανοικτό/κλειστό "radio": απλός διακόπτης ανοικτό/κλειστό - περισσότεροι του ενός τέτοιοι διακόπτες συνδέονται µεταξύ τους και ένας µόνο µπορεί να είναι "ανοικτός" "submit": κουµπί αποστολής των περιεχοµένων της φόρµας στο URL "reset": κουµπί διαγραφής όλων των δεδοµένων που έχουν εγγραφεί στη φόρµα. "hidden": πεδίο κειµένου το οποίο δεν εµφανίζεται στο φυλλοµετρητή (χρήσιµο για µεταφορά τοπικών παραµέτρων) NAME: συµβολικό όνοµα για το αντίστοιχο πεδίο εισαγωγής (input field, το οποίο δεν προβάλλεται από τον browser, αλλά λειτουργεί ως όνοµα 29 ηµήτριος Σάµψων

30 µεταβλητής για το πρόγραµµα). Πρέπει να χρησιµοποιείται σε όλους τους τύπους (types) εκτός των "submit" και "reset", αφού διαφοροποιεί τα δεδοµένα που αντιστοιχούν σε διαφορετικά πεδία της ίδιας φόρµας. VALUE: καθορίζει τις κατά συνθήκη τιµές ενός πεδίου χαρακτήρων ή ενός πεδίου συνθήµατος. Για τα πεδία checkbox ή radiobutton η κατά συνθήκη τιµή είναι "ανοικτό". Για τα πεδία "submit" ή "reset", το VALUE µπορεί να χρησιµοποιηθεί για την αλλαγή της επιγραφής πάνω στα αντίστοιχα κουµπιά. CHECKED: καθορίζει ότι τα πεδία checkbox ή radiobutton είναι εξ υποθέσεως ανοικτά. SIZE: το µήκος ενός πεδίου χαρακτήρων (προκαθορισµένη τιµή: 20). MAXLENGTH: ο µέγιστος επιτρεπόµενος αριθµός χαρακτήρων που γίνονται αποδεκτοί στην είσοδο (κατά συνθήκη τιµή απεριόριστη). Η ετικέτα <SELECT> καθορίζει έναν κατάλογο επιλογών, µε παραµέτρους: NAME: το συµβολικό όνοµα για το πεδίο επιλογής (υποχρεωτικό). MULTIPLE: εάν η παράµετρος αυτή δηλώνεται, τότε ο χρήστης µπορεί να επιλέξει περισσότερες από µία επιλογές. SIZE: καθορίζει τον αριθµό των επιλογών που εµφανίζονται στην οθόνη. Η κατά συνθήκη τιµή είναι 1 και στην περίπτωση αυτή ο κατάλογος επιλογών αναπαρίσταται σαν κατακόρυφος πίνακας επιλογών (pull-down menu). Η ετικέτα <OPTION>, που είναι ενθετηµένη (nested) στην ετικέτα <SELECT> καθορίζει ένα στοιχείο επιλογής σε κατάλογο επιλογών Η ετικέτα <TEXTAREA> καθορίζει παράθυρο εισαγωγής κειµένου, µε παραµέτρους: NAME: το συµβολικό όνοµα για το πεδίο επιλογής (υποχρεωτικό) ROWS: πλήθος γραµµών COLS: πλήθος στηλών Παραδείγµατα περιεχοµένων µιας φόρµας Ο πίνακας που ακολουθεί περιέχει ορισµένα ενδεικτικά παραδείγµατα τµηµάτων µιας φόρµας και πως αυτά εµφανίζονται στον Internet Explorer HTML Κώδικας Εισαγωγή Κειµένου <input type="text" value="your name here"> Εισαγωγή Συνθηµατικού <input type="password" Πεδίο Τύπου Checkbox <input type="checkbox" Internet Explorer 30 ηµήτριος Σάµψων

31 checked> Κουµπί τύπου Radio <input type="radio" name="r1"> <input type="radio" name="r1"> Κουµπί τύπου Submit <input type="submit"> Κουµπί τύπου Reset <input type="reset"> Πεδίο Εισαγωγής Αρχείων <input type="file"> Περιοχή Κειµένου <TEXTAREA COLS=10 ROWS=3> </TEXTAREA> Αναδεικνυόµενο Επιλογής (pop-up) Μενού <SELECT Size=1 name="s1"> <option>option 1</option> <option>option 2 </option> </SELECT> Κυλιόµενο Μενού Επιλογής (scrolling list) <SELECT Size=3 name="s1"> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </SELECT> Πίνακας 4-2 Ενδεικτικά Παραδείγµατα περιεχοµένων φόρµας Παράδειγµα µιας φόρµας Ο κώδικας που ακολουθεί είναι ένα αντιπροσωπευτικό παράδειγµα της δήλωσης µιας φόρµας <FORM METHOD= "POST" ACTION=" <h2>ερωτήσεις:</h2><hr> 31 ηµήτριος Σάµψων

32 <h4>1. Ποια από τις δύο διατυπώσεις είναι ορθή, η πρώτη (1η) ή η δεύτερη (2η);</h4> </FORM> <P>υπόγραψέ µου ή υπέγραψέ µου: 1η <INPUT NAME="first" TYPE="radio">, 2η <INPUT NAME="first" TYPE="radio"> <h4>2. Ποιοι από τους παρακάτω ζωγράφους είναι Ιµπρεσιονιστές;</h4> <P>α: Ρενουάρ <INPUT NAME="r" TYPE="checkbox">, β: Πικάσο <INPUT NAME="p" TYPE="checkbox">, γ: Νταβίντσι <INPUT NAME="d" TYPE="checkbox"> <h4>3. Αντιστοιχίστε σε κάθε λατινική φράση την κατάλληλη σηµασία της:</h4> <P>α: status quo <SELECT NAME="status"> </SELECT> <OPTION> δικό µου το λάθος <OPTION> η ισχύουσα κατάσταση <OPTION> εκ των υστέρων <P>β: mea culpa <SELECT NAME="culpa"> </SELECT> <OPTION> εκ των υστέρων <OPTION> η ισχύουσα κατάσταση <OPTION> δικό µου το λάθος <P>Συνοδευτικό αρχείο: <INPUT TYPE="file" SIZE="20"> <P><INPUT TYPE="submit"> <INPUT TYPE="reset"> Το αποτέλεσµα του κώδικα αυτού φαίνεται στην επόµενη εικόνα 32 ηµήτριος Σάµψων

33 Εικόνα 4-14 Ένα απλό παράδειγµα µιας φόρµας ηµιουργία Πλαισίων Η χρήση των πλαισίων επιτρέπεται µε τη διπλή ετικέτα <FRAMESET> στο σώµα του HTML εγγράφου. Η ετικέτα αυτή επιτρέπει το διαχωρισµό της οθόνης του φυλλοµετρητή σε περισσότερα του ενός υπο-παράθυρα, καθένα από τα οποία µπορεί να απεικονίζει ένα ξεχωριστό HTML έγγραφο. Οι παράµετροι της ετικέτας <FRAMESET>είναι οι εξής: Rows: Καθορίζει σε πόσες γραµµές θα χωριστεί η οθόνη Cols: Καθορίζει σε πόσες στήλες θα χωριστεί η οθόνη Border: Πλάτος των περιθωρίων των υπο-παραθύρων (σε pixels) BorderColor: Το χρώµα των περιθωρίων των υπο-παραθύρων FrameBorder: Καθορίζει αν τα περιθώρια θα έχουν 3 µορφή Ένα παράδειγµα πλαισίων απεικονίζεται στην παρακάτω εικόνα: 33 ηµήτριος Σάµψων

34 Εικόνα 4-15 Μια HTML σελίδα χωρισµένη σε πλαίσια Η ετικέτα <FRAMESET> µπορεί να περιέχει απλές ετικέτες <FRAME> ή και άλλα <FRAMESET>, κάθε µία από τα οποία αντιστοιχούν σε ένα από τα παράθυρα που έχουν καθοριστεί από την ετικέτα <FRAMESET>. Οι παράµετροι της ετικέτας FRAME είναι οι εξής: BorderColor: Το χρώµα των περιθωρίων του παραθύρου FrameBorder: Καθορίζει αν τα περιθώρια θα έχουν 3 µορφή MarginHeight: Απόσταση σε pixels περιεχοµένων παραθύρου από πάνω και κάτω πλευρά του πλαισίου MarginWidth: Απόσταση σε pixels περιεχοµένων παραθύρου από αριστερή και δεξιά πλευρά του πλαισίου Name: Το όνοµα του πλαισίου Noresize: Καθορίζει αν επιτρέπεται η αλλαγή του µεγέθους του παραθύρου Scrolling: Καθορίζει αν εµφανίζονται µπάρες ολίσθησης SRC: Καθορίζει το ποια ιστοσελίδα θα εµφανίζεται Ακολουθεί ένα απλό παράδειγµα για τη δηµιουργία πλαισίων. Στο παράδειγµα αυτό δηλώνεται ότι η σελίδα θα χωριστεί σε δυο πλαίσια γραµµές. Το πρώτο πλαίσιο θα καταλαµβάνει το 20% της σελίδας ενώ το δεύτερο πλαίσιο θα καταλαµβάνει το υπόλοιπο 80%. Στο πρώτο πλαίσιο θα «φορτώνεται» η σελίδα page1.html, ενώ το δεύτερο πλαίσιο είναι µε τη σειρά του ένα FRAMESET το οποίο χωρίζεται σε δύο πλαίσια στήλες, όπου και τα δύο καταλαµβάνουν το 50% του υπόλοιπου χώρου. 34 ηµήτριος Σάµψων

35 Στο πρώτο πλαίσιο στήλη «φορτώνεται» η σελίδα page2.html, ενώ στο δεύτερο πλαίσιο στήλη «φορτώνεται» η σελίδα page3.html <HTML> <HEAD><TITLE>Πλαίσια</TITLE> </HEAD> <FRAMESET rows= 20%, 80% > </FRAMESET> </HTML> <FRAME src= page1.html > <FRAMESET cols= 50%, 50% > </FRAMESET> <FRAME src= page2.html > <FRAME src= page3.html > Η µορφή των πλαισίων φαίνεται στην παρακάτω εικόνα: Εικόνα 4-16 Ένα απλό παράδειγµα δηµιουργίας πλαισίων Ο κώδικας που περιέχει η σελίδα page1.html, είναι ο ακόλουθος: <HTML> <HEAD> <TITLE>Σελίδα 1</TITLE> </HEAD> <BODY> <p>σελι Α 1</p> </BODY> 35 ηµήτριος Σάµψων

36 </HTML> Ανάλογος κώδικας περιέχεται και στις άλλες δυο σελίδες. 4.3 ιαδοχικά Φύλλα Στυλ Τα ιαδοχικά Φύλλα Στυλ (Cascading StyleSheets, CSS) παρέχουν το µηχανισµό ελέγχου του τρόπου εµφάνισης µιας HTML σελίδας. Ένα στυλ παρέχει ένα σύνολο κανόνων οι οποίοι εφαρµόζονται σε επιλεγµένα στοιχεία της γλώσσας HTML ελέγχοντας έτσι τον τρόπο µε τον οποίο θα εµφανίζεται το στοιχείο αυτό. Υπάρχουν τρεις τρόποι µε τους οποίους είναι δυνατή η εφαρµογή των κανόνων αυτών σε ένα HTML έγγραφο: Με τον ορισµό αυτών µέσα σε µια βασική ετικέτα της γλώσσας HTML Με τον ορισµό αυτών, στο τµήµα του HTML εγγράφου που περικλείεται από την ετικέτα <head> και συγκεκριµένα µε χρήση της ετικέτας <style> Με τον ορισµό αυτών σε εξωτερικά αρχεία, τα οποία ονοµάζονται Φύλλα Στυλ (StyleSheets) και µπορούν να εφαρµοστούν σε ένα οποιοδήποτε έγγραφο εισάγοντας το URL που τους αντιστοιχεί Θα πρέπει να σηµειωθεί ότι η χρήση των φύλλων στυλ δεν υποστηρίζεται από όλους τους φυλλοµετρητές ενώ από την άλλη µεριά είναι αρκετοί αυτοί που δεν τα υποστηρίζουν πλήρως. Ωστόσο αυτό δεν αποτελεί πρόβληµα, από τη στιγµή που οι φυλλοµετρητές είναι σχεδιασµένοι έτσι ώστε να αγνοούν τις HTML ετικέτες που δεν µπορούν να αναγνωρίσουν. Έτσι λοιπόν, ένας φυλλοµετρητής παλαιότερης έκδοσης θα στοιχειοθετήσει το περιεχόµενο ενός HTML εγγράφου σαν να µην υπήρχαν φύλλα στυλ. Στη συνέχεια παρουσιάζονται ορισµένα απλά παραδείγµατα κανόνων µορφοποίησης, προκειµένου ο αναγνώστης να αποκτήσει µια πρώτη εµπειρία στη χρήση αυτών των κανόνων. Μορφοποίηση της ετικέτας <Η1> Στο παράδειγµα αυτό παρουσιάζεται η µορφοποίηση της επικεφαλίδας πρώτου επιπέδου που στην HTML αναπαρίσταται µε τη χρήση της ετικέτας <h1>. <HTML> <head> </head> <title>απλό Παράδειγµα Φύλλου Στυλ</title> <style> <!-- --> h1 { } </style> color: red; border: thin groove; text-align: center; 36 ηµήτριος Σάµψων

37 </html> <body> </body> <h1> Απλό Παράδειγµα Φύλλου Στυλ</h1> Το αποτέλεσµα του παραπάνω κώδικα απεικονίζεται σε έναν φυλλοµετρητή όπως φαίνεται και στην εικόνα που ακολουθεί: Εικόνα 4-17 Μορφοποίηση της ετικέτας <h1> Στο παράδειγµα αυτό οι κανόνες στυλ δηλώνονται µέσω της ετικέτας <style>. Οι κανόνες αυτοί περικλείονται µέσα σε σχόλια προκειµένου οι φυλλοµετρητές που δεν υποστηρίζουν τους κανόνες στυλ να τους αγνοήσουν. Η δήλωση περιλαµβάνει το όνοµα της ετικέτας που πρόκειται να µορφοποιηθεί ενώ ο ορισµός των κανόνων τοποθετείται µέσα σε αγκύλες. Οι κανόνες διαχωρίζονται µεταξύ τους µέσω του χαρακτήρα ;. Κάθε ένας κανόνας περιέχει το όνοµα της ιδιότητας της αντίστοιχης ετικέτας καθώς και τις τιµές που αναµένεται να πάρει. Ο διαχωρισµός αυτών γίνεται µέσω του χαρακτήρα :. Η εισαγωγή τιµών µέσα σε εισαγωγικά δεν επιτρέπεται κατά την δήλωση των κανόνων. Ωστόσο υπάρχουν ορισµένες εξαιρέσεις στον κανόνα αυτό, όπως για παράδειγµα κατά την εισαγωγή δεκαεξαδικών τιµών για τη δήλωση ενός χρώµατος. Μορφοποίηση περισσότερων ετικετών Στο παράδειγµα αυτό παρουσιάζεται η µορφοποίηση περισσότερων ετικετών και συγκεκριµένα της ετικέτας <h1> καθώς και της ετικέτας <p> που αναπαριστά µια παράγραφο ενός HTML εγγράφου. <html> <head> <title>απλό Παράδειγµα Φύλλου Στυλ</title> <style> <!-- h1 { color: red; 37 ηµήτριος Σάµψων

38 </html> --> </head> <body> </body> } </style> border: thin groove; <h1>απλό Παράδειγµα Φύλλου Στυλ</h1> <p>η µορφή της πρώτης παραγράφου παραµένει αναλλοίωτη</p> <p style="margin-left: 10%; border: ridge; background: #ffffcc"> Ωστόσο αυτή η παράγραφος έχει υποστεί ορισµένες αλλαγές</p> <p>η τελευταία παράγραφος παραµένει αναλλοίωτη</p> Το αποτέλεσµα του παραπάνω κώδικα απεικονίζεται σε έναν φυλλοµετρητή όπως φαίνεται και στην εικόνα που ακολουθεί: Εικόνα 4-18 ηλώνοντας κανόνες στυλ στην επικεφαλίδα και στο κυρίως τµήµα ενός HTML εγγράφου Στο παράδειγµα αυτό φαίνεται ότι ο τρόπος δήλωσης των κανόνων διαφοροποιείται όταν αυτό πραγµατοποιείται µέσα σε µια HTML ετικέτα. Συγκεκριµένα η δήλωση των κανόνων γίνεται µε τη χρήση της ιδιότητας style της οποίας οι τιµές περιγράφουν τους κανόνες στυλ που θα εφαρµοστούν στην 38 ηµήτριος Σάµψων

39 αντίστοιχη ετικέτα. Ωστόσο ο συγκεκριµένος τρόπος δήλωσης των κανόνων στυλ δεν προτείνεται καθώς έτσι δε διαχωρίζεται το περιεχόµενο από την παρουσίαση. Ένα πιο πολύπλοκο παράδειγµα Το παράδειγµα αυτό επεκτείνει κατά κάποιο τρόπο το προηγούµενο. Συγκεκριµένα, οι κανόνες δηλώνονται µε χρήση κλάσεων οι οποίοι επιτρέπουν τη δήλωση διαφορετικών κανόνων στυλ για µια συγκεκριµένη ετικέτα. Περισσότερα για τις κλάσεις αναφέρονται σε επόµενη παράγραφο. <html> <head> <title>απλό Παράδειγµα Φύλλου Στυλ</title> <style> <!-- --> </head> <body> h1 { } h2{ }.myid{ }.myid2{ } </style> color: red; border: thin groove; color: green; margin-left: 60%; text-align: right; color: purple; font-size: medium; text-align: right; font-size: large; <h1>απλό Παράδειγµα Φύλλου Στυλ</h1> <p>η µορφή της πρώτης παραγράφου παραµένει αναλλοίωτη</p> <p style="margin-left: 10%; border: ridge; background: #ffffcc"> 39 ηµήτριος Σάµψων

40 </html> </body> Ωστόσο αυτή η παράγραφος έχει υποστεί ορισµένες αλλαγές</p> <p>η παράγραφος αυτή παραµένει επίσης αναλλοίωτη</p> <h2>μια επικεφαλίδα επιπέδου 2</h2> <p class="myid">παράγραφος που χρησιµοποεί την κλάση myid</p> <h3 class="myid">επικεφαλίδα επιπέδου 3 που χρησιµοποιεί την κλάση myid</h3> <p class="myid2">παράγραφος που χρησιµοποεί την κλάση myid2</p> Το αποτέλεσµα του παραπάνω κώδικα απεικονίζεται σε έναν φυλλοµετρητή όπως φαίνεται και στην εικόνα που ακολουθεί: Εικόνα 4-19 Χρήση πολύπλοκων κανόνων στυλ Σύνταξη των κανόνων στυλ Οι κανόνες στυλ καθορίζονται από απλούς κανόνες. Ένα στυλ είναι δυνατόν να περιέχει πολλούς κανόνες ωστόσο αν κάποιος από αυτούς δεν είναι κατανοητός από τον φυλλοµετρητή θα τον αγνοήσει. 40 ηµήτριος Σάµψων

41 ιαδοχικά Φύλλα Στυλ Τα φύλλα στυλ εφαρµόζονται διαδοχικά. Αυτό σηµαίνει ότι οι κανόνες που δηλώνονται σε ένα φύλλο στυλ µπορούν να παρακαµφθούν από τους κανόνες που δηλώνονται σε ένα δεύτερο φύλλο στυλ, δεδοµένου ότι οι κανόνες που περιγράφονται στο τελευταίο φύλλο στυλ αφορούν µια ήδη καθορισµένη µορφοποίηση µιας ετικέτας. Ένας άλλος τρόπος παράκαµψης των κανόνων είναι µε τον ορισµό αυτών µέσα στο κυρίως τµήµα ενός HTML εγγράφου, όπως φαίνεται και στα παραπάνω παραδείγµατα. Κανόνες Ένας κανόνας αποτελείται από δύο µέρη: τον επιλογέα και από ένα σύνολο δηλώσεων. Ο επιλογέας χρησιµοποιείται για να δηµιουργηθεί ένας σύνδεσµος µεταξύ του κανόνα και της αντίστοιχης HTML ετικέτας. Από την πλευρά της, µια δήλωση αποτελείται από δύο µέρη: µια ιδιότητα και µια τιµή. Οι επιλογείς µπορούν να τοποθετηθούν µέσα σε κλάσεις, δίνοντας έτσι τη δυνατότητα ποικίλων µορφοποιήσεων µιας ετικέτας. Ο διαχωρισµός των τµηµάτων µιας δήλωσης γίνεται µέσω του χαρακτήρα :, ενώ ο τερµατισµός µιας δήλωσης γίνεται µέσω του χαρακτήρα ;. Η σύνταξη ενός κανόνα σε όλα τα φύλλα στυλ γίνεται µε τον εξής τρόπο: επιλογέας {ιδιότητα: τιµή; ιδιότητα: τιµή; } Αν κατά τη δήλωση ενός κανόνα δε χρησιµοποιηθεί ένας τουλάχιστον από τους χαρακτήρες : ή ;, ο κανόνας δε µπορεί να επεξεργαστεί. Παραδείγµατα κανόνων είναι τα εξής: body{ } h1{ } background-color : #ffffcc; color : #eeebd2; background-color :#d8a29b; font : Courier New, Times, serif; border: thin groove #9baab2; Κλάσεις Στην προηγούµενη παράγραφο εφαρµόζεται το ίδιο στυλ σε όλες τις περιπτώσεις που εµφανίζεται µια συγκεκριµένη ετικέτα. Οι κλάσεις χρησιµοποιούνται στις περιπτώσεις όπου µια συγκεκριµένη ετικέτα. Η σύνταξη µιας κλάσης γίνεται µε τον εξής τρόπο επιλογέας.όνοµα_κλάσης {ιδιότητα: τιµή; ιδιότητα: τιµή; } <επιλογέας κλάση=όνοµα_κλάσης> Στην περίπτωση των κλάσεων η σύνταξη των κανόνων διαφοροποιείται ελαφρώς. Πιο συγκεκριµένα, σε κάθε κανόνα αντιστοιχίζεται ένα µοναδικό όνοµα το οποίο στη συνέχεια προσαρτάται στον επιλογέα χρησιµοποιώντας µια τελεία. Σε ένα HTML έγγραφο όταν γίνεται χρήση ενός καθορισµένου στυλ η ετικέτα επεκτείνεται εισάγοντας την ιδιότητα class της οποίας η τιµή αντιστοιχεί στο µοναδικό όνοµα του συγκεκριµένου στυλ. Ένα παράδειγµα χρήσης των κλάσεων είναι το εξής: 41 ηµήτριος Σάµψων

42 h1.example{ color: #eeebd2; background-color: #d8a29b; font-family: Book Antiqua, Times, serif; border: thin groove #9baab2; } <h1 class= example >Μια απλή επικεφαλίδα</h1> Ανώνυµες κλάσεις Υπάρχουν περιπτώσεις στις οποίες είναι επιθυµητή η εφαρµογή ενός κανόνα σε διαφορετικά στοιχεία ενός HTML εγγράφου. Τα διαδοχικά φύλλα στυλ παρέχουν τη δυνατότητα δηµιουργίας στυλ επαναχρησιµοποιώντας υπάρχουσες κλάσεις. Αυτό γίνεται µε τη χρήση των ανώνυµων κλάσεων. Ένα παράδειγµα χρήσης ανώνυµων κλάσεων είναι το εξής: <html> </html> <head> <title>χρήση Ανώνυµων Κλάσεων</title> <style> <!-- --> </head> <body>.example{ } </style> color: #eeebd2; background-color: #d8a29b; font-family: "Book Antiqua", Times, serif; border: thin groove #9baab2; <h1 class="example">μια απλή επικεφαλίδα</h1> <p class="example">εφαρµογή του στυλ example σε µια παράγραφο του κειµένου</p> </body> Το αποτέλεσµα του παραπάνω κώδικα απεικονίζεται σε έναν φυλλοµετρητή όπως φαίνεται και στην εικόνα που ακολουθεί: 42 ηµήτριος Σάµψων

43 Εικόνα 4-20 Χρήση ανώνυµων κλάσεων Ενσωµατώνοντας Εξωτερικά Φύλλα Στυλ Η ενσωµάτωση εξωτερικών Φύλλων Στυλ σε ένα HTML έγγραφο γίνεται µε τη χρήση της ετικέτας <link>, η οποία περιέχεται µέσα στην ετικέτα <head> του HTML εγγράφου, µε τον εξής τρόπο: <link rel= StyleSheet href= url type= text/css > H τιµή url της ιδιότητας href αντιστοιχεί στο διεύθυνση στην οποία βρίσκεται τα αρχείο που περιέχει τους κανόνες στυλ. Επίσης, η ιδιότητα type χρησιµοποιείται για να ενηµερωθεί ο φυλλοµετρητής για το είδος του αρχείου που ενσωµατώνεται στο HTML έγγραφο. Ένα παράδειγµα χρήσης της ετικέτας <link> για την ενσωµάτωση εξωτερικών αρχείων είναι το εξής: <link rel= StyleSheet href= type= text/css > Σε περίπτωση που απαιτείται η εισαγωγή περισσότερων του ενός φύλλων στυλ τότε απαιτείται η προσθήκη των εξής γραµµών: <style type= text/css > <! --> url (url); Στο παρακάτω παράδειγµα απεικονίζεται η ενσωµάτωση δύο φύλλων στυλ σε ένα HTML έγγραφο. To ένα στυλ βρίσκεται στη διεύθυνση ενώ το δεύτερο βρίσκεται στη διεύθυνση <link rel= StyleSheet href= type= text/css > <style type= text/css > url ( 43 ηµήτριος Σάµψων

44 --> </style> Επισκόπηση των ιδιοτήτων και των τιµών που χρησιµοποιούνται στα φύλλα στυλ Στο κεφάλαιο αυτό πρόκειται να περιγραφτούν οι πιο γνωστές ιδιότητες µαζί µε τις αντίστοιχες τιµές τους, όπου χρησιµοποιούνται ευρέως κατά τη δηµιουργία των φύλλων στυλ. Πριν περάσουµε όµως στην περιγραφή των ιδιοτήτων θα γίνει µια αναφορά στα σχετικά και στα απόλυτα µεγέθη τα οποία βρίσκουν εφαρµογή στις τιµές ορισµένων ιδιοτήτων. Απόλυτοι και σχετικοί τρόποι µέτρησης µεγεθών Είναι αρκετές οι φορές που κατά τον ορισµό των κανόνων στυλ απαιτείται ο προσδιορισµός ενός µεγέθους. Σε γενικές γραµµές τα µεγέθη µετρώνται είτε µε σχετικό είτε µε απόλυτο τρόπο. Ορισµένα ενδεικτικά παραδείγµατα σχετικών τρόπων µέτρησης είναι τα εξής: em: αντιστοιχεί στο τρέχον µέγεθος µιας γραµµατοσειράς px: αντιστοιχεί σε αριθµό pixels Ενδεικτικά παραδείγµατα χρήσης απολύτων µεγεθών είναι τα εξής: in: µέγεθος σε ίντσες cm: µέγεθος σε εκατοστά mm: µέγεθος σε χιλιοστά pt: βαθµοί όπου 1 pt ισούται µε 1/72 της ίντσας Μορφοποίηση Χρωµάτων Με τη χρήση των κατάλληλων ιδιοτήτων είναι δυνατόν να οριστεί τόσο το χρώµα των στοιχείων που περικλείουν κείµενο, και κατ επέκταση το χρώµα του κειµένου, όσο και το χρώµα του υποβάθρου. Ορίζοντας χρώµατα στοιχείων Με τη χρήση της ιδιότητας color είναι δυνατόν να καθοριστεί το χρώµα του κειµένου που περικλείεται από το αντίστοιχο στοιχείο. Η ιδιότητα αυτή δέχεται ως τιµές, είτε το όνοµα ενός χρώµατος είτε µια τιµή (για παράδειγµα µια δεκαεξαδική τιµή) που αντιστοιχεί σε ένα συγκεκριµένο χρώµα. Κατά τον καθορισµό του χρώµατος του κειµένου, θα πρέπει να δοθεί ιδιαίτερη σηµασία στα χρώµατα των υπερσυνδέσµων. Αυτοί, έχουν διαφορετικά προκαθορισµένα χρώµατα και δε θα αλλάξουν κατά τη χρήση της ιδιότητας color. Ακολουθεί ένα ενδεικτικό παράδειγµα του τρόπου µε τον οποίο αλλάζουν τα χρώµατα των υπερσυνδέσµων: /*καθορισµός χρωµάτων υπερσυνδέσµων*/ a:link { color: #000099; } /* καθορισµός χρώµατος συνδέσµων τους οποίους ο χρήστης έχει επισκεφτεί*/ a:visited { color: #660066; } 44 ηµήτριος Σάµψων

45 /* καθορισµός χρώµατος ενεργών συνδέσµων */ /* ένας ενεργός σύνδεσµος είναι αυτός που έχει */ /* πρόσφατα ενεργοποιηθεί */ a:active { color: #ff0000; } Ορίζοντας χρώµα υποβάθρου Η ιδιότητα background-color χρησιµοποιείται για τον καθορισµό του χρώµατος υποβάθρου ενός στοιχείου. Η ιδιότητα αυτή δέχεται ως τιµές το όνοµα ενός χρώµατος, µια τιµή που αντιστοιχεί σε ένα συγκεκριµένο χρώµα ή την λέξη transparent. Ένα παράδειγµα καθορισµού του χρώµατος υποβάθρου και του χρώµατος ενός κειµένου είναι το εξής: <html> </html> <head> </head> <body> </body> <title>μορφοποίηση Χρώµατος Υποβάθρου</title> <style> p{ background-color: red; } </style> color: yellow; <p>to χρώµα υποβάθρου της παραγράφου έχει οριστεί ως κόκκινο, ενώ το χρώµα του κειµένου κίτρινο</p> Το αποτέλεσµα του παραπάνω κώδικα απεικονίζεται σε έναν φυλλοµετρητή όπως φαίνεται και στην εικόνα που ακολουθεί: 45 ηµήτριος Σάµψων

46 Εικόνα 4-21 Παράδειγµα µορφοποίησης χρώµατος υποβάθρου και χρώµατος κειµένου Μορφοποίηση κειµένου Μέσω των φύλλων στυλ είναι δυνατό να καθοριστούν κανόνες για την εµφάνιση των γραµµατοσειρών καθώς και την εµφάνιση του περιεχοµένου του κειµένου. Ορίζοντας τη γραµµατοσειρά Για τον καθορισµό του είδους της γραµµατοσειράς ενός κειµένου χρησιµοποιείται η ιδιότητα font-family. Η ιδιότητα αυτή δέχεται µια λίστα τιµών, χωρισµένες µε κόµµα, όπου κάθε µια τιµή αντιστοιχεί σε ένα όνοµα γραµµατοσειράς. Επειδή οι υπολογιστές δεν υποστηρίζουν ένα κοινό σύνολο γραµµατοσειρών, ο φυλλοµετρητής εφαρµόζει την πρώτη γραµµατοσειρά που θα βρει στη λίστα και είναι εγκατεστηµένη στο µηχάνηµα που εκτελείται η εφαρµογή του φυλλοµετρητή. Η τελευταία τιµή της λίστας πρέπει να αντιστοιχεί σε ένα όνοµα γραµµατοσειράς γενικής χρήσης µιας συγκεκριµένης οικογένειας γραµµατοσειρών. Όλοι οι φυλλοµετρητές περιέχουν προκαθορισµένη γραµµατοσειρά για µια συγκεκριµένη οικογένεια γραµµατοσειρών. Οι οικογένειες γραµµατοσειρών γενικής χρήσης είναι οι εξής: serif sans-serif cursive fantasy monospace Η προκαθορισµένη οικογένεια γραµµατοσειρών για τους φυλλοµετρητές είναι η serif. Κατά τον καθορισµό της γραµµατοσειράς, προτείνεται να εισάγεται ως πρώτη τιµή, στη λίστα των διαθέσιµων τιµών, η επιθυµητή, ενώ ως δεύτερη τιµή να εισάγεται µια που είναι παρόµοια µε την πρώτη. Για παράδειγµα: p { font-family: Garamond, Centaur, 46 ηµήτριος Σάµψων

47 Times New Roman, New York, serif; } Στο παράδειγµα αυτό, ως πρώτη επιλογή γραµµατοσειράς τίθεται η Garamond, ακολουθεί η Centaur ενώ στη συνέχεια ακολουθούν πιο κοινές γραµµατοσειρές, όπως η Times New Roman και η New York (η γραµµατοσειρά αυτή είναι κοινή σε υπολογιστές τύπου Mac). Τέλος τοποθετείται η οικογένεια γραµµατοσειρών γενικής χρήσης serif, η οποία θα εφαρµοστεί στην περίπτωση που καµία από τις προηγούµενες γραµµατοσειρές δεν είναι διαθέσιµη. Για την µορφοποίηση του µεγέθους µιας γραµµατοσειράς χρησιµοποιείται η ιδιότητα font-size, η οποία δέχεται απόλυτες και σχετικές τιµές, ποσοστιαίες µονάδες ή λέξεις. Τα παραδείγµατα που ακολουθούν αποτελούν έγκυρα παραδείγµατα κανόνων µορφοποίησης του µεγέθους µιας γραµµατοσειράς: p{ font-size: 12pt} p { font-size: 120% } (Θέτει το µέγεθος της γραµµατοσειράς στο 120% του µεγέθους της προκαθορισµένης γραµµατοσειράς) p {font-size: +2pt} (Αυξάνει το µέγεθος της γραµµατοσειράς κατά 2 µονάδες ως προς το µέγεθος της προκαθορισµένης γραµµατοσειράς. Αυτή η προσέγγιση δεν προτείνεται) p {font-size: medium} (Θέτει το µέγεθος του κειµένου ως µεσαία που αντιστοιχεί σε 7 µονάδες. Οι τιµές που µπορούν να εισαχθούν σε αυτή την περίπτωση είναι οι: xx-small, x-small, small, medium, large, x-large, xxlarge) Ορίζοντας τον τρόπο εµφάνισης περιεχοµένου Ορισµένες από τις ιδιότητες που χρησιµοποιούνται για τον τρόπο εµφάνισης του κειµένου είναι οι text-align (καθορίζει την στοίχιση του κειµένου) και η textdecoration (χρησιµοποιείται για τον ειδικό τονισµό τµηµάτων κειµένου, όπως η υπογράµµιση). Η ιδιότητα text-align δέχεται τις τιµές left (αριστερή στοίχιση) right (δεξιά στοίχιση) center (στοίχιση στο κέντρο) justify (πλήρης στοίχιση) Ορισµένες από τις τιµές που δέχεται η ιδιότητα text-decoration είναι οι εξής: underline (υπογράµµιση) line-through (διακριτή διαγραφή) none Μορφοποίηση ορθογώνιων πλαισίων Όταν ένας φυλλοµετρητής αναλύει ένα HTML έγγραφο, αυτό εµφανίζεται ως ένα σύνολο από ενθετηµένα πλαίσια, κάθε ένα από τα οποία περιέχει κείµενο ή δεδοµένα που δεν αφορούν κείµενο (για παράδειγµα µια εικόνα) ή άλλα πλαίσια ενθετηµένα σε αυτό ή, τέλος, ένα συνδυασµό αυτών. 47 ηµήτριος Σάµψων

48 Όταν τα πλαίσια αυτά συνδυάζονται µε κανόνες στυλ για την µορφοποίηση και εµφάνισή τους δηµιουργούνται τα λεγόµενα αντικείµενα ροής (flow objects). Όλοι οι φυλλοµετρητές περιέχουν ένα σύνολο προκαθορισµένων κανόνων για τη δηµιουργία αντικειµένων ροής και για την εµφάνισή τους στο HTML έγγραφο. Το µοντέλο των φύλλων στυλ έχει χτιστεί γύρω από την ιδέα των πλαισίων. Όπως φαίνεται και στην εικόνα που ακολουθεί, το περιεχόµενο τοποθετείται µέσα σε ένα σύνολο από ενθετηµένα ορθογώνια πλαίσια. Έτσι λοιπόν, υπάρχει το κυρίως πλαίσιο στο οποίο τοποθετείται το περιεχόµενο, ενώ τα υπόλοιπα πλαίσια καθορίζουν την απόσταση του κειµένου από το περίγραµµα (padding), το ίδιο το περίγραµµα (border) καθώς και την απόσταση του περιγράµµατος από τα όρια του φυλλοµετριτή (margin). Απόσταση περιγράµµατος από οθόνη Περίγραµµα Απόσταση κειµένου από το περίγραµµα Περιεχόµενο Σηµείωση: Τα πλαίσια αυτά δεν έχουν καµιά σχέση µε τα πλαίσια (frames) της γλώσσας HTML Ορίζοντας το περίγραµµα του πλαισίου Με τη χρήση των κατάλληλων ιδιοτήτων είναι δυνατόν να οριστεί το περίγραµµα του πλαισίου. Ο πιο γενικός κανόνας καθορισµού του περιγράµµατος αντιστοιχεί στην ιδιότητα border, η οποία επιτρέπει τον ταυτόχρονο καθορισµό όλων των ιδιοτήτων του περιγράµµατος. Το χρώµα του περιγράµµατος καθορίζεται από την ιδιότητα border-color το οποίο δέχεται ως τιµές είτε το όνοµα ενός χρώµατος είτε την αντίστοιχη δεκαεξαδική του τιµή και εφαρµόζεται σε όλο το περίγραµµα του πλαισίου. Εναλλακτικά, η µορφοποίηση τµηµάτων του περιγράµµατος γίνεται µε τη χρήση των ιδιοτήτων εξής: border-top-color (Το χρώµα εφαρµόζεται στην πάνω πλευρά του περιγράµµατος) border-right-color (Το χρώµα εφαρµόζεται στην δεξιά πλευρά του περιγράµµατος) border-bottom-color (Το χρώµα εφαρµόζεται στην κάτω πλευρά του περιγράµµατος) border-left-color (Το χρώµα εφαρµόζεται στην αριστερή πλευρά του περιγράµµατος) Το πάχος του περιγράµµατος καθορίζεται από την ιδιότητα border-width, το οποίο δέχεται τις τιµές thin, medium, thick ή µια τιµή που αντιστοιχεί κυρίως σε αριθµό pixels. Οµοίως µε το border-color η µορφοποίηση του πάχους τµηµάτων του περιγράµµατος γίνεται µε τη χρήση των ιδιοτήτων: 48 ηµήτριος Σάµψων

49 border-top-width border-right-width border-bottom-width border-left-width Το στυλ του περιγράµµατος, ή το είδος της γραµµής του περιγράµµατος, καθορίζεται από την ιδιότητα border-style. Μερικές από τις τιµές που δέχεται η ιδιότητα αυτή είναι none, solid, dotted, dashed, ridge, groove κτλ. Τα στυλ που αντιστοιχούν σε αυτές τις τιµές φαίνονται στην παρακάτω εικόνα: Εικόνα 4-22 Παραδείγµατα στυλ περιγράµµατος Οµοίως µε το border-color και το border-width, η µορφοποίηση του πάχους τµηµάτων του περιγράµµατος γίνεται µε τη χρήση των ιδιοτήτων: border-top-style border-right-style border-bottom-style border-left-style Όπως αναφέρθηκε προηγουµένως η ιδιότητα border, επιτρέπει τον καθορισµό και των τριών ιδιοτήτων ενός περιγράµµατος (πάχος, στυλ, χρώµα). Η σύνταξή της γίνεται ως εξής: border: width style color Κατά τη χρήση της ιδιότητας border, προτείνεται ο καθορισµός και των τριών ιδιοτήτων του περιγράµµατος.ένα ολοκληρωµένο παράδειγµα µορφοποίησης του περιγράµµατος είναι το εξής: <html> <head> 49 ηµήτριος Σάµψων

50 </head> <title>ένα ολοκληρωµένο παράδειγµα µορφοποίησης του περιγράµµατος</title> <style> p{ border-top: 5px solid #ffff33; } </style> border-right: 15px solid #33ffff; border-bottom: 25px solid #ff33ff; border-left: 35px solid #33ff33; </html> <body> </body> <p>στο παράδεiγµα αυτό το στυλ του περιγράµµατος είναι <i>solid</i>, ενώ οι πλευρές του περιγράµµατος έχουν πάχος 5, 15, 25 και 35 pixel ξεκινώντας από την πάνω πλευρά και ακολουθώντας τη φορά του ρολογιού</p> Το αποτέλεσµα του παραπάνω κώδικα απεικονίζεται σε έναν φυλλοµετρητή όπως φαίνεται και στην εικόνα που ακολουθεί: Εικόνα 4-23 Ένα ολοκληρωµένο παράδειγµα µορφοποίησης περιγράµµατος πλαισίου Ορίζοντας το περιθώριο 50 ηµήτριος Σάµψων

51 Με τη χρήση των κατάλληλων ιδιοτήτων είναι δυνατόν να οριστεί το περιθώριο του πλαισίου από τα άκρα της οθόνης. Αυτές είναι οι εξής: margin margin-top margin-right margin-bottom margin-left Οι τιµές που δέχονται οι ιδιότητες αυτές αντιστοιχούν είτε σε απόλυτα µετρούµενο µέγεθος σε µια ποσοστιαία µονάδα, είτε στην τιµή auto, η οποία ελαχιστοποιεί το µέγεθος των περιθωρίων. Τέλος, σε περίπτωση χρήσης της ιδιότητας margin είναι δυνατόν να χρησιµοποιηθούν 1, 2 ή 4 τιµές. Σε περίπτωση εισαγωγής τεσσάρων τιµών, αυτές εφαρµόζονται κατά σειρά ως εξής: Στην κορυφή, στη δεξιά πλευρά, στην κάτω και στην αριστερή πλευρά του πλαισίου, δηλαδή δεξιόστροφα (κατά τη φορά του ρολογιού). Σε περίπτωση εισαγωγής δύο τιµών, η πρώτη από αυτές εφαρµόζεται στην κορυφή και την κάτω πλευρά του περιγράµµατος, ενώ η δεύτερη στην αριστερή και στη δεξιά πλευρά. Ένα παράδειγµα µορφοποίησης των περιθωρίων ενός πλαισίου είναι το εξής: <html> </html> <head> </head> <body> </body> <title>μορφοποίηση Περιθωρίου</title> <style> p{ border-style: groove; margin-left: 100px; margin-right: 300px; } </style> <p>στο παράδειγµα αυτό, το δεξί περιθώριο απέχει 300 pixel από την οθόνη και το αριστερό 100 pixel.</p> Το αποτέλεσµα του παραπάνω κώδικα απεικονίζεται σε έναν φυλλοµετρητή όπως φαίνεται και στην εικόνα που ακολουθεί: 51 ηµήτριος Σάµψων

52 Εικόνα 4-24 Παράδειγµα µορφοποίησης των περιθωρίων ενός πλαισίου Ορίζοντας την απόσταση του κειµένου από το περίγραµµα Με τη χρήση των κατάλληλων ιδιοτήτων είναι δυνατόν να οριστεί η απόσταση του κειµένου από το περίγραµµα του πλαισίου και είναι οι εξής: padding padding-top padding-right padding-bottom padding-left Οι τιµές που εισάγονται σε αυτές τις ιδιότητες αντιστοιχούν είτε σε απόλυτα µετρίσιµο µέγεθος είτε σε ποσοστιαίες µονάδες. Κατά τη χρήση της ιδιότητας padding είναι δυνατόν να χρησιµοποιηθούν 1, 2 ή 4 τιµές. Σε περίπτωση εισαγωγής τεσσάρων τιµών, αυτές εφαρµόζονται δεξιόστροφα στα αντίστοιχα τµήµατα του πλαισίου, ξεκινώντας από την πάνω πλευρά. Ένα παράδειγµα µορφοποίησης της απόστασης του κειµένου από το περίγραµµα το εξής: 52 ηµήτριος Σάµψων

53 Εικόνα 4-25 Παράδειγµα µορφοποίησης απόστασης κειµένου από το 4.4 Ασκήσεις HTML Στην παράγραφο αυτή παρουσιάζονται ορισµένες ενδεικτικές ασκήσεις που αφορούν τη γλώσσα HTML και αναµένεται να βοηθήσουν τον αναγνώστη να κατανοήσει καλύτερα τις διάφορες έννοιες που αναφέρθηκαν στις προηγούµενες παραγράφους. Άσκηση 1 Κανόνες Σύνταξης HTML Εγγράφων Να βρείτε τα λάθη στους ακόλουθους HTML κώδικες Κώδικας 1 <HTML> <HEAD> <TITLE Κώδικας 1</TITLE> </HEAD> <BODY> </BODY> </HTML> <H1>Πρώτη άσκηση</h2> <P>Παρακαλείστε να βρείτε τα λάθη του HTML κώδικα <Η2>Πολλά λάθη<η2> </P> <ΙΜG src=my icon.gif> <--σχολιάστε ελεύθερα 53 ηµήτριος Σάµψων

54 Κώδικας 2 <HTML> <TITLE>Κώδικας 2 </HEAD> <BODY> </BODY> </HTML> <H1> εύτερη άσκηση<h1> <P>Παρακαλείστε να βρείτε τα λάθη του HTML κώδικα<p>ψάξτε καλά!</p> </P> Υπάρχουν & άλλα "λάθη". <Η2>Πολλά λάθη</η1> <IMG href= my icon.gif > <--σχολιάστε ελεύθερα Ακολουθεί η ετικέτα <BODY>--> Ακολουθεί ο διορθωµένος κώδικας 1, στον οποίο οι διορθώσεις σηµειώνονται µε γκρι χρώµα <HTML> <HEAD> <TITLE>Κώδικας 1</TITLE> </HEAD> <BODY> <H1>Πρώτη άσκηση</h1> <P>Παρακαλείστε να βρείτε τα λάθη του HTML κώδικα</p> <Η2>Πολλά λάθη</η2> <IMG src= my icon.gif > <!--σχολιάστε ελεύθερα Ακολουθεί η ετικέτα <BODY>--> </BODY> </HTML> Αντίστοιχα ακολουθεί και ο διορθωµένος κώδικας 2 <HTML> <HEAD> <TITLE>Κώδικας 2</TITLE> </HEAD> <BODY> <H1> εύτερη άσκηση</h1> <P>Παρακαλείστε να βρείτε τα λάθη του HTML κώδικα</p><p>ψάξτε καλά! 54 ηµήτριος Σάµψων

55 </P> Υπάρχουν & άλλα "λάθη" <Η2>Πολλά λάθη</η2> <IMG src= my icon.gif > <!--σχολιάστε ελεύθερα--> <!--Ακολουθεί η ετικέτα <BODY>--> </BODY> </HTML> Άσκηση 2 Φόρµα για πιστοποίηση ταυτότητας χρήστη Να γραφτεί HTML κώδικας που υλοποιεί µια φόρµα που θα χρησιµοποιηθεί για την πιστοποίηση της ταυτότητας ενός χρήστη. Ένα ενδεικτικό παράδειγµα µιας τέτοιας φόρµας φαίνεται στην εικόνα που ακολουθεί Εικόνα 4-26 Απλή Φόρµα Πιστοποίησης Χρήστη Ο HTML κώδικας που υλοποιεί την παραπάνω φόρµα είναι ο ακόλουθος <HTML> <HEAD> <TITLE>Login</TITLE> </HEAD> <BODY> <P>Παρακαλώ συµπληρώστε το όνοµα χρήστη και τον κωδικό πρόσβασης.</p> <FORM action="login.php" method="post"> <TR> <TABLE width="100%" border="0"> 55 ηµήτριος Σάµψων

56 </HTML> </BODY> </FORM> </TABLE> </TR> <TR> </TR> <TD>Όνοµα χρήστη</td> <TD> <INPUT name="text1" type="text"></td> <TD>Κωδικός πρόσβασης</td> <TD><INPUT type="password" name="password1"></td> Η φόρµα αυτή χρησιµοποιεί τη µέθοδο POST για την αποστολή των στοιχείων, ενώ το πρόγραµµα που είναι υπεύθυνο για την περαιτέρω επεξεργασία των στοιχείων περιγράφεται από την παράµετρο action και είναι το login.php. Άσκηση 3 ηµιουργία πλαισίων Να γράψετε τον HTML κώδικα όπου χωρίζει την ιστοσελίδα σε 5 πλαίσια. Ένα ενδεικτικό παράδειγµα της δοµής των 5 πλαισίων βρίσκεται στην εικόνα που ακολουθεί: Εικόνα 4-27 Ιστοσελίδα που αποτελείται από πέντε πλαίσια Παρατηρείται ότι η σελίδα χωρίζεται σε τρεις γραµµές εκ των οποίων η µεσαία γραµµή χωρίζεται σε τρείς στήλες. Ο HTML κώδικας είναι ο εξής: 56 ηµήτριος Σάµψων

57 <HTML> </HTML> <HEAD> </HEAD> <TITLE>Πλαίσια</TITLE> <FRAMESET rows="20%, 60%, 20%"> </FRAMESET> <FRAME src="page1.html"> <FRAMESET cols="33%, 33%, 33%"> </FRAMESET> <FRAME src="page2.html"> <FRAME src="page3.html"> <FRAME src="page4.html"> <FRAME src="page5.html"> Η πρώτη ετικέτα <FRAMESET> χωρίζει την σελίδα σε τρία πλαίσια γραµµές, όπου κάθε µια καταλαµβάνει το 20%, 60% και 20% αντίστοιχα της σελίδας. Στο πρώτο πλαίσιο εµφανίζεται η ιστοσελίδα page1.html και στο τρίτο πλαίσιο η ιστοσελίδα page5.html. Αντίθετα, το δεύτερο πλαίσιο έχει αντικατασταθεί από την ετικέτα <FRAMESET> που χωρίζει τη δεύτερη γραµµή σε τρία πλαίσια στήλες (ίδιου µήκους). Στο πλαίσιο της πρώτης στήλης εµφανίζεται η ιστοσελίδα page2.html, στο πλαίσιο της δεύτερης στήλης η ιστοσελίδα page3.html και στην τελευταία στήλη η ιστοσελίδα page4.html Άσκηση 4 ηµιουργία πίνακα Να υλοποιηθεί HTML κώδικας το αποτέλεσµα του οποίου θα είναι ο πίνακας που απεικονίζεται στην παρακάτω εικόνα 57 ηµήτριος Σάµψων

58 Εικόνα 4-28 Πίνακας 2 στηλών και 3 γραµµών Παρατηρείται ότι ο πίνακας αυτός αποτελείται από 3 γραµµές και 2 στήλες. <HTML> <HEAD> <TITLE>Πίνακας</TITLE> </HEAD> <BODY> <H1>Πίνακας µε 2 στήλες</h1> <HR> <TABLE border="2"> <!--Πρώτη γραµµή--> <TR> <TD bgcolor="#c0c0c0">στήλη 1</TD> <TD bgcolor="#c0c0c0">στήλη 2</TD> </TR> <!-- εύτερη γραµµή--> <TR> <TD>Περιεχόµενο 1</TD> <TD>Περιεχόµενο 2</TD> </TR> <!--Τρίτη γραµµή--> <TR> 58 ηµήτριος Σάµψων

59 <TD>Περιεχόµενο 3</TD> </TR> </TABLE> </BODY> </HTML> <TD>Περιεχόµενο 4</TD> Άσκηση 5 Αριθµηµένες και µη αριθµηµένες λίστες Να υλοποιηθεί ο HTML κώδικας που θα εµφανίζει µια σειρά από αριθµηµένες και µη αριθµηµένες λίστες σύµφωνα µε την εικόνα που ακολουθεί Εικόνα 4-29 Αριθµηµένες και µη αριθµηµένες λίστες <HTML> <HEAD> <TITLE>Άσκηση 5</TITLE> </HEAD> <BODY> <UL> <LI>Παράδειγµα µε bullets <LI>Bullet <LI>Το bullet αυτό περιέχει αριθµηµένη λίστα <OL> <LI>αριθµός <LI>αριθµός 59 ηµήτριος Σάµψων

60 </UL> <OL> </OL> </BODY> </HTML> <LI>αριθµός</LI> </OL></LI> <LI>Αριθµηµένη λίστα <LI>αριθµός <LI>αριθµός</LI> Άσκηση 6 - Απλή HTML σελίδα Να γραφτεί ο HTML κώδικας το αποτέλεσµα του οποίου θα είναι η παρακάτω σελίδα Εικόνα 4-30 Μια απλή HTML σελίδα Η σελίδα αυτή αποτελείται από µια επικεφαλίδα επιπέδου 1 (υπογραµµισµένη), µια µη αριθµηµένη λίστα και από µια εικόνα. Ο HTML κώδικας που υλοποιεί τη σελίδα αυτή είναι ο ακόλουθος <HTML> <HEAD> </HEAD> <BODY> <TITLE>Άσκηση 6</TITLE> 60 ηµήτριος Σάµψων

61 </HTML> </BODY> <H1 ALIGN="CENTER"><U>Γλώσσες Σήµανσης - Εισαγωγή στην HTML</U></H1> <CENTER> <UL> </UL> <HR> </CENTER> <LI><B> οµή HTML εγγράφων</b></li> <LI><B> ηµιουργία HTML εγγράφων µε χρήση ετικετών</i></b></li> <LI><B>Γλώσσες Σήµανσης</B></LI> <LI><B>Εισαγωγή στη Javascript</B></LI> <img border="0" src="sample.jpg"> Άσκηση 7 Θέµα Εξετάσεων Ιουνίου 2002 Έστω ότι θέλετε να δηµοσιεύσετε στο ιαδίκτυο τις φωτογραφίες που βγάλατε στις διακοπές του καλοκαιριού. Για το σκοπό αυτό θα πρέπει να φτιάξετε τα εξής: α) Μία ιστοσελίδα (έστω «photo_album.html») η οποία θα περιέχει όλες τις διαθέσιµες φωτογραφίες σε µικρές διαστάσεις (thumbnails), κάθε µία εκ των οποίων θα παρέχει υπερσύνδεση σε ιστοσελίδα που θα περιέχει την αντίστοιχη φωτογραφία πλήρους διάστασης. Έστω ότι οι φωτογραφίες µε µικρές διαστάσεις είναι αυτές που περιγράφονται στον παρακάτω πίνακα: Α/Α Όνοµα αρχείου φωτογραφίας µικρής διάστασης Μήκος Ύψος 1 1.jpg jpg jpg jpg jpg jpg jpg jpg jpg jpg β) ηµιουργήστε µε χρήση πίνακα την ιστοσελίδα που απεικονίζεται παρακάτω. Το αποτέλεσµα του HTML κώδικα που θα γράψετε, θα πρέπει να είναι όσο πιο κοντά γίνεται στην παρακάτω εικόνα. 61 ηµήτριος Σάµψων

62 γ) µία ιστοσελίδα για κάθε φωτογραφία σε πλήρες µέγεθος, η οποία θα περιέχει συνδέσµους (i) στην προηγούµενη φωτογραφία (ii) στην επόµενη φωτογραφία και (iii) στην ιστοσελίδα «photo_album.html». Για λόγους απλότητας αρκεί να υλοποιήσετε την ιστοσελίδα µόνο για την φωτογραφία 7 («7.html»). Λύση: Πρώτη ιστοσελίδα: <HTML> <HEAD> <TITLE>Φωτογραφικό Άλµπουµ</TITLE> </HEAD> <BODY bgcolor=#fbebc5> <H1>Οι φωτογραφίες µου</h1> <P><U><B>Σηµείωση:</B></U> πατώντας πάνω σε οποιαδήποτε εικόνα µπορείτε τη δείτε σε πλήρες µέγεθος.</p> <TABLE border="1"> <TR> <TD valign="top" width="105"> <P align="center"><a href="1.html"> <IMG src="images/1.jpg" alt="εµφάνιση 62 ηµήτριος Σάµψων

63 πλήρους µεγέθους: Φωτογραφία 1" width="100" height="100"></a> <BR>Φωτογραφία 1</P> </TD> <TD valign="top"> <P align="center"><a href="2.html"> <IMG src="images/2.jpg" alt="εµφάνιση πλήρους µεγέθους: Φωτογραφία 2" width="300" height="100"></a> <BR>Φωτογραφία 2</P> </TD> </TR> <TR> <TD rowspan="3" valign="top"> <P align="center"><a href="3.html"> <IMG src="images/3.jpg" alt="εµφάνιση πλήρους µεγέθους: Φωτογραφία 3" width="100" height="300"></a> <BR>Φωτογραφία 3</P> </TD> <TD colspan="2" rowspan="2" valign="top"> <P align="center"><a href="4.html"> <IMG src="images/4.jpg" alt="εµφάνιση πλήρους µεγέθους: Φωτογραφία 4" width=200 height=200></a> <BR>Φωτογραφία 4</P> </TD> <TD valign="top" width="105"> <P align="center"><a href="5.html"> <IMG src="images/5.jpg" alt="εµφάνιση πλήρους µεγέθους: Φωτογραφία 5" width="100" height="100"></a> <BR>Φωτογραφία 5</P> </TD> </TR> <TR> <TD valign="top"> <P align="center"><a href="6.html"> <IMG src="images/6.jpg" alt="εµφάνιση πλήρους µεγέθους: Φωτογραφία 6" width="100" height="100"></a> <BR>Φωτογραφία 6 </p> </td> </TR> 63 ηµήτριος Σάµψων

64 <TR> </TR> <TR> </TR> </TABLE> </BODY> </HTML> <TD valign="top" width ="105"> <P align="center"><a href="7.html"> <IMG src="images/7.jpg" alt="εµφάνιση πλήρους µεγέθους: Φωτογραφία 7" width=100 height=100></a> <BR>Φωτογραφία 7</P> </TD> <TD valign="top" width ="105"> <P align="center"><a href="8.html"> <IMG src="images/8.jpg" alt="εµφάνιση πλήρους µεγέθους: Φωτογραφία 8" width=100 height=100></a> <BR>Φωτογραφία 8</P> </TD> <TD rowspan="2" valign="top"> <P align="center"><a href="9.html"> <IMG src="images/9.jpg" alt="εµφάνιση πλήρους µεγέθους: Φωτογραφία 9" width="100" height="200"></a> <BR>Φωτογραφία 9</P> </TD> <TD colspan="3" valign="top"> <P align="center"><a href="10.html"> <IMG src="images/10.jpg" alt="εµφάνιση πλήρους µεγέθους: Φωτογραφία 10" width="300" height="100"></a> <BR>Φωτογραφία 10</P> </TD> εύτερη ιστοσελίδα <HTML> <HEAD> <TITLE>Φωτογραφία 7</TITLE> </HEAD> <BODY bgcolor=#fbebc5> <H1>Φωτογραφία 7</H1> <P>Η φωτογραφία είναι από...<br> 64 ηµήτριος Σάµψων

65 </HTML> </BODY> <IMG src="images/7full.jpg" width="400" height="240"> </P> <A href="6.html"> Προηγούµενη φωτογραφία </A> <A href="photo_album1.html"> Πίσω </A> <A href="8.html"> Επόµενη φωτογραφία </a> Άσκηση 8 Θέµα Εξετάσεων Σεπτεµβρίου 2002 Έστω ότι για κάποιο µάθηµα του Πανεπιστηµίου έχει αποφασιστεί να πραγµατοποιηθούν οι εξετάσεις on-line, µέσω του ιαδικτύου. Για το σκοπό αυτό καλείστε να φτιάξετε δύο ιστοσελίδες: α) Μία ιστοσελίδα σύνδεσης χρηστών µε το σύστηµα των on-line εξετάσεων, η οποία θα παρέχει δυνατότητα συµπλήρωσης και υποβολής του ονόµατος χρήστη και του κωδικού πρόσβασης. Η ιστοσελίδα θα πρέπει να έχει κάποιο σχετικό τίτλο και επικεφαλίδα και κάποιες οδηγίες. Το αποτέλεσµα του HTML κώδικα που θα γράψετε, θα πρέπει να είναι όσο πιο κοντά γίνεται στην παρακάτω εικόνα: β) Μία ιστοσελίδα που περιέχει τις παρακάτω ερωτήσεις: Α/Α Ερώτηση Απάντηση 1 Αντιστοιχίστε σε κάθε µία από τις παρακάτω HTML ετικέτες την ετικέτα "πατέρα" της: 2 Στη γλώσσα προγραµµατισµού Java δεν χρησιµοποιούνται δείκτες. 3 Ποιες από τις παρακάτω γλώσσες προγραµµατισµού κάνουν µεταγλώττιση; 4 Συµπληρώστε ότι γνωρίζετε για τους τρόπους κλήσεις συναρτήσεων στη γλώσσα προγραµµατισµού Pascal: 1. Ετικέτα <TD>, επιλογή από (dropdown) λίστα ενός εκ των, «<TABLE>», «<TR>», «<P>» 2. Ετικέτα <LI>, επιλογή από (dropdown) λίστα ενός εκ των, «<TABLE>», «<UL>», «<P>» Σωστό / Λάθος Επιλογή µίας ή περισσοτέρων απαντήσεων από: (α) Java (β) C/C++ (γ) Basic και (δ) Fortran Ελεύθερο κείµενο µε 8 σειρές και 64 στήλες. 65 ηµήτριος Σάµψων

66 Η ιστοσελίδα θα πρέπει να έχει κάποιο σχετικό τίτλο, επικεφαλίδα και οδηγίες. Το αποτέλεσµα του HTML κώδικα που θα γράψετε, θα πρέπει να είναι όσο πιο κοντά γίνεται στην παρακάτω εικόνα (παρακαλώ δώστε προσοχή στη µορφοποίηση των οδηγιών). Λύση: Πρώτη ιστοσελίδα <HTML> <HEAD> </HEAD> <TITLE>Σύνδεση µε το σύστηµα on-line εξετάσεων</title> <BODY bgcolor=#fbebc5> <Η1>Σύνδεση µε το σύστηµα on-line εξετάσεων</η1> <P>Παρακαλώ συµπληρώστε το όνοµα χρήστη και τον κωδικό πρόσβασης.</p> <FORM action="login.php" method="post"> <TABLE width=400px border="0"> <TR> </TR> <TR> <TD>Όνοµα χρήστη </TD> <TD> <INPUT type="text" name="text1"> </TD> <TD>Κωδικός πρόσβασης </TD> 66 ηµήτριος Σάµψων

67 </HTML> </BODY> </FORM> εύτερη ιστοσελίδα <HTML> <HEAD> </HEAD> </TABLE> </TR> <TR> </TR> <TD> <INPUT type="password" name="password1"></td> <TD> <INPUT type="submit" value="σύνδεση"> </TD> <TITLE>Αξιολόγηση γνώσεων</title> <BODY bgcolor=#fbebc5> <H2>Ερωτήσεις:</H2> <HR> <FORM METHOD="POST" ACTION="testanswers.php"> <H4>1. Αντιστοιχίστε σε κάθε µία από τις παρακάτω HTML ετικέτες την ετικέτα "πατέρα" της:</h4> <P><TD> </P> <SELECT NAME="tdparent"> </SELECT> <P><LI> </P> <OPTION> <OPTION> <TABLE> <OPTION> <TR> <OPTION> <TBODY> <SELECT NAME="li"> </SELECT> <OPTION> <OPTION> <P> <OPTION> <TD> <OPTION> <UL> 67 ηµήτριος Σάµψων

68 </HTML> <H4>2. Στη γλώσσα προγραµµατισµού Java δεν χρησιµοποιούνται δείκτες.</h4> <INPUT NAME="first" TYPE="radio">Σωστό <INPUT NAME="first" TYPE="radio">Λάθος<BR> <H4>3. Ποιες από τις παρακάτω γλώσσες προγραµµατισµού κάνουν µεταγλώττιση;</h4> <INPUT NAME="java" TYPE="checkbox">Java <INPUT NAME="c" TYPE="checkbox">C/C++ <INPUT NAME="basic" TYPE="checkbox">Basic <INPUT NAME="fortran" TYPE="checkbox">Fortran <H4>4. Συµπληρώστε ότι γνωρίζετε για τους τρόπους κλήσεις συναρτήσεων στη γλώσσα προγραµµατισµού Pascal:</H4> </BODY> </FORM> <HR> <TEXTAREA rows="8" cols="64" name="textarea1"></textarea> <BR><BR> <INPUT type="submit" value="υποβολή απαντήσεων" name="submit1"> <P><I><B>Σηµείωση:</I></B>Έχετε συνολικά <U>30 λεπτά</u> στη διάθεσή σας για να απαντήσετε στα παραπάνω ερωτήµατα. Μετά την υποβολή των απαντήσεων <U>δεν</U> µπορείτε να τις αλλάξετε.</p> Άσκηση 9 Πλοήγηση στα πλαίσια Να υλοποιηθεί HTML κώδικας που χωρίζει τη σελίδα σε δύο στήλες. Στο πλαίσιο της αριστερής στήλης θα εµφανίζεται ιστοσελίδα που θα περιέχει δύο υπερσυνδέσµους. Ο πρώτος υπερσύνδεσµος θα εµφανίζει µια νέα σελίδα στο πλαίσιο της δεξιάς στήλης και ο δεύτερος υπερσύνδεσµος θα εµφανίζει µια άλλη σελίδα σε καινούργιο παράθυρο O HTML κώδικας που χωρίζει το παράθυρο σε δύο στήλες είναι ο εξής <HTML> <HEAD> <TITLE>Άσκηση 9</TITLE> </HEAD> <FRAMESET COLS="35%,65%"> <FRAME NAME="l_frame" SRC="main.html"> <FRAME NAME="r_frame"> </FRAMESET> </HTML> 68 ηµήτριος Σάµψων

69 Στο πλαίσιο µε όνοµα l_frame αρχικά εµφανίζεται η σελίδα main.html της οποίας ο κώδικας είναι ο εξής: <HTML> </HTML> <HEAD> </HEAD> <BODY> </BODY> <TITLE>Αριστερό Πλαίσιο</TITLE> <UL> <LI><A HREF="sel1.html" TARGET="r_frame">Σελίδα 1</A> στο δεξιό πλαίσιο</li> <LI><A HREF="sel2.html" TARGET="_blank">Σελίδα 2</A> σε νέο παράθυρο</li> </UL> Ο πρώτος σύνδεσµος της σελίδας καθορίζει η ιστοσελίδα sel1.html να εµφανιστεί στο δεξί πλαίσιο, ενώ ο δεύτερος σύνδεσµος καθορίζει η ιστοσελίδα sel2.html να εµφανιστεί σε ένα καινούργιο παράθυρο. Εικόνα 4-31 Πλοήγηση στα πλαίσια µέσω της παραµέτρου TARGET Η παράµετρος TARGET της ετικέτας Α καθορίζει σε ποιο παράθυρο θα εµφανίζεται η παραποµπή που περιγράφεται από την παράµετρο HREF. Η γενική της σύνταξη είναι ΤΑRGET= Όνοµα_Παραθύρου Μερικές από προκαθορισµένες τιµές της είναι _new, εµφάνιση παραποµπής σε νέο παράθυρο _self, εµφάνιση παραποµπής στο ίδιο παράθυρο ή πλαίσιο που περιέχει την ετικέτα <Α> 69 ηµήτριος Σάµψων