Η Γλώσσα Σήμανσης ΥπερΚειμένου HTML 14η Συνάντηση Εκπ/κών Πληροφορικής στη Δυτική Μακεδονία – Αμύνταιο, 16 Μαρτίου 2008 Στυλιάδης Κων/νος, Υπ. ΚΕ ΠΛΗ.ΝΕ.Τ. Ν. Φλώρινας
Τι Είναι η HTML – 1/2 Η Γλώσσα Σήμανσης ΥπερΚειμένου HTML (HyperText Markup Language) ορίζει ένα σύνολο από κοινά στυλ (πρότυπα) για τις ιστοσελίδες, όπως είναι οι τίτλοι (titles), οι επικεφαλίδες (headings), οι παράγραφοι (paragraphs), οι λίστες (lists), οι πίνακες (tables) κ.ά. Κάθε στοιχείο έχει ένα όνομα και περιέχεται μέσα στα σύμβολα < >, που αποκαλούνται tags (ετικέτα, χαρακτηρισμός). Όταν δημιουργούμε μια ιστοσελίδα με την HTML, στην ουσία δίνουμε τίτλους στα διάφορα στοιχεία της ιστοσελίδας μ’ αυτά τα tags.
Τι Είναι η HTML – 2/2 Όταν διαβάζουμε σ’ έναν φυλλομετρητή μια σελίδα που είναι γραμμένη με HTML κώδικα, ο φυλλομετρητής διαβάζει (διερμηνεύει) τα tags της HTML και μορφοποιεί αανάλογα το κείμενο και τις εικόνες στην οθόνη. Οι σελίδες που δημιουργούμε με την HTML μπορεί να δείχνουν εντελώς διαφορετικές από σύστημα σε σύστημα και από φυλλομετρητή σε φυλλομετρητή. Αυτό σημαίνει ότι οι πραγματικές πληροφορίες και οι σύνδεσμοι που περιέχουν οι σελίδες θα είναι πάντα στη θέση τους, αλλά η εμφάνιση των σελίδων στην οθόνη θα είναι διαφορετική.
Δημιουργία μιας HTML Σελίδας Οι σελίδες που γράφουμε με την HTML είναι απλά αρχεία κειμένου σε μορφή ASCII και με επέκταση .html ή .htm. Τα αρχεία της HTML μπορούμε να τα γράψουμε σε συντάκτες κειμένων, δηλ. προγράμματα που μπορούν να αποθηκεύσουν αρχεία κειμένου σε μορφή ASCII, όπως είναι το Notepad (Σημειωματάριο) των Windows. Πρέπει να γράψουμε πρώτα το αρχείο της HTML σε μορφή ASCII, να το αποθηκεύσουμε με την επέκταση .html και μετά να το ανοίξουμε για να το δούμε από τον Internet Explorer ή από άλλον φυλλομετρητή. Μπορούμε να κάνουμε αλλαγές στο αρχείο της HTML και να δούμε το αποτέλεσμα κάνοντας Refresh (ανανέωση).
Τα Tags της HTML – 1/3 Τα περισσότερα tags της HTML έχουν την εξής μορφή : <ΌνομαTag> επηρεαζόμενο κείμενο </ΌνομαTag> Τα tags της HTML έχουν γενικά ένα tag αρχής και ένα tag τέλους ή ένα tag ανοίγματος και ένα tag κλεισίματος, τα οποία περικλείουν το κείμενο που επηρεάζουν. Το tag αρχής ενεργοποιεί μια λειτουργία ή ένα χαρακτηριστικό, όπως είναι για παράδειγμα η έντονη γραφή, ενώ το tag τέλους την απενεργοποιεί. Τα tags τέλους έχουν το ίδιο όνομα με τα tags αρχής, αλλά με πρόθεμα τον χαρακτήρα /.
Τα Tags της HTML – 2/3 Δεν αποτελούν ζευγάρι όλα τα tags της HTML, καθώς ορισμένα είναι «μονομελή», όπως το <br>, ενώ άλλα περιέχουν επιπλέον πληροφορίες και κείμενο μέσα στα σύμβολα < >, τις γνωστές ως ιδιότητες ή χαρακτηριστικά (attributes). Ακόμη, όλα τα tags της HTML δεν κάνουν διάκριση μεταξύ κεφαλαίων και πεζών γραμμάτων, δηλ. μπορούμε να τα γράφουμε είτε με κεφαλαίους είτε με πεζούς χαρακτήρες είτε με οποιονδήποτε συνδυασμό τους. Πάντως, πρέπει να τα γράφουμε με πεζά γράμματα, για να μπορούμε να ξεχωρίζουμε ευκολότερα τους ελληνικούς από τους αγγλικούς χαρακτήρες και αυτό προβλέπουν και οι νέοι κανονισμοί του W3C.
Τα Tags της HTML – 3/3 Όλα τα tags της HTML σχηματίζουν ξεχωριστές, ένθετες ενότητες κειμένου και θα πρέπει να είμαστε πολύ προσεκτικοί ώστε να μην υπάρχει επικάλυψη μεταξύ των tags. Αυτό σημαίνει ότι πρέπει να κλείνουμε αμέσως κάθε tag που ανοίγουμε, εκτός κι αν είναι μονομερές, και ακόμη όταν κλείνουμε ένα tag, κλείνουμε το πιο πρόσφατο tag που ανοίξαμε.
Το Tag <html> Το πρώτο tag που ελέγχει τη δομή μιας σελίδας που είναι γραμμένη σε κώδικα HTML είναι το <html>, που υποδεικνύει ότι το περιεχόμενο του αρχείου περιέχει κώδικα γραμμένο στη γλώσσα HTML. Το tag <html> περιέχει δύο κύριες ενότητες που ξεχωρίζουν με τα tags <head> και <body>. Όλο το κείμενο και οι εντολές μέσα σε μια HTML σελίδα θα πρέπει να τοποθετούνται ανάμεσα στα tags αρχής και τέλους <html>, ως εξής : <html> ... κείμενο ιστοσελίδας ... </html>
Το Tag <head> Το tag <head> προσδιορίζει ότι οι γραμμές που περιέχονται ανάμεσα στην αρχή και στο τέλος του είναι ο πρόλογος για το υπόλοιπο του αρχείου. Στην ενότητα αυτή δεν τοποθετούμε συχνά κείμενο, αλλά συνήθως μόνο τον τίτλο της σελίδας μέσα στο tag <title>, ως εξής : <html> <head> <title> Εδώ γράφεται ο τίτλος της σελίδας </title> </head> … </html>
Το Tag <body> Το υπόλοιπο της HTML σελίδας, δηλ. όλο το κείμενο και οποιοδήποτε άλλο περιεχόμενο, όπως σύνδεσμοι, εικόνες κ.ά., περικλείεται μέσα σ’ ένα tag <body>. Η δομή της ιστοσελίδας δείχνει τώρα ως εξής : <html> <head> <title> Εδώ είναι ο τίτλος της σελίδας </title> </head> <body> ... Εδώ είναι το κυρίως κείμενο της σελίδας ... </body> </html>
Οι Επικεφαλίδες (Headings) Οι επικεφαλίδες (headings) χρησιμοποιούνται για τον διαχωρισμό των ενοτήτων κειμένου και η HTML ορίζει 6 επίπεδα επικεφαλίδων, που τα tags τους έχουν την εξής μορφή : <h1> Η Ιστορία της Φλώρινας </h1> Οι αριθμοί υποδεικνύουν το επίπεδο επικεφαλίδας (h1 έως h6). Οι επικεφαλίδες δεν αριθμούνται όταν εμφανίζονται στην οθόνη, αλλά έχουν ένα χαρακτηριστικό που τις ξεχωρίζει από το κανονικό κείμενο, όπως μεγαλύτερο μέγεθος ή εντονότερο κείμενο ή υπογράμμιση. Καθώς πηγαίνουμε από το h1 στο h6, ελαττώνεται το μέγεθος του κειμένου της επικεφαλίδας στην οθόνη.
Οι Επικεφαλίδες – Παράδειγμα Οι επικεφαλίδες είναι σαν τα στοιχεία μιας διάρθρωσης και ένα καλό παράδειγμα χρήσης επικεφαλίδων είναι το εξής : <h1> Η Πόλη της Φλώρινας </h1> <h2> Γενικά για τη Φλώρινα </h2> <h2> Η Ιστορία της Φλώρινας </h2> <h3> Η Φλώρινα στην Προϊστορική Περίοδο </h3> <h3> Από την Αρχαιότητα ως την Απελευθέρωση </h3> <h4> Η Νεώτερη Ιστορία της Φλώρινας </h4> <h5> Ο Μακεδονικός Αγώνας </h5> <h6> Ο Καπετάν Κώττας </h6>
Οι Παράγραφοι Τα tags δημιουργίας παραγράφων είναι τα <p> και </p> και η αλλαγή παραγράφου σημαίνει το ξεκίνημα μιας νέας γραμμής και μια επιπλέον κατακόρυφη απόσταση από παράγραφο σε παράγραφο. Το tag </p> είναι προαιρετικό αλλά καλό είναι να το χρησιμοποιούμε. Ακολουθούν παραδείγματα : <p> Αυτή είναι μια παράγραφος </p> <p> Τα στοιχεία της παραγράφου ορίζονται με το tag p </p>
Οι Αριθμημένες Λίστες Οι αριθμημένες λίστες είναι λίστες στις οποίες το κάθε στοιχείο είναι αριθμημένο. Περικλείονται μέσα στα tags <ol> και </ol>, δηλ. Ordered List, και κάθε στοιχείο μέσα στη λίστα ξεκινά με το tag <li>, δηλ. List Item. Το tag <li> έχει το προαιρετικό tag τέλους </li> και η εμφάνιση ενός άλλου tag <li> ή του tag τέλους </ol> υποδεικνύει το τέλος ενός στοιχείου της λίστας.
Οι Αριθμημένες Λίστες – Παράδειγμα <p> Πολιτιστικοί Σύλλογοι της Φλώρινας : </p> <ol> <li> Λέσχη Πολιτισμού Φλώρινας <li> Αριστοτέλης <li> Στέγη Φιλοτέχνων Φλώρινας <li> Εύξεινος Λέσχη Φλώρινας <li> Σύλλογος Μικρασιατών Φλώρινας </ol>
Οι Αριθμημένες Λίστες – Ιδιότητες Με την ιδιότητα (attribute) type αλλάζουμε τον τύπο της αρίθμησης των στοιχείων της λίστας : <ol type = "a"> Με την ιδιότητα start καθορίζουμε την τιμή του πρώτου αριθμού της λίστας, που είναι το 1 εξ ορισμού : <ol start = 4> <ol type = "a" start = 3> Στο πρώτο tag η λίστα θα ξεκινά με τον αριθμό 4, ενώ στο δεύτερο tag η λίστα θα ξεκινά με το γράμμα c.
Οι Λίστες Κουκκίδων Στις μη αριθμημένες λίστες χρησιμοποιούμε τα tags <ul> και </ul>, δηλ. Unordered List, και τα στοιχεία της λίστας διαχωρίζονται με το tag <li>. Οι λίστες αυτές μορφοποιούνται συνήθως με κουκκίδες ή κάποιο άλλο σύμβολο. <p> Οι τρεις Ερινύες ήταν : </p> <ul> <li> Τισιφόνη <li> Μέγαιρα <li> Αληκτώ </ul>
Τα Σχόλια στην HTML Στον κώδικα μιας HTML σελίδας μπορούμε να τοποθετήσουμε σχόλια (comments), ανάμεσα στα σύμβολα <!-- και -->,τα οποία θα περιγράφουν την ίδια τη σελίδα ή θα περιέχουν κάποιες ενδείξεις ή υπενθυμίσεις ή πληροφορίες γι’ αυτήν. Το κείμενο που βρίσκεται μέσα στα σχόλια αγνοείται από τον φυλλομετρητή και έτσι τα σχόλια δεν εμφανίζονται καθόλου στην οθόνη. Η μορφή ενός σχολίου είναι η εξής : <!- - Αυτό είναι ένα σχόλιο - -> <!- - Πρέπει να αλλάξω αυτή τη σελίδα - ->
Οι Σύνδεσμοι (Links) Για να δημιουργήσουμε έναν σύνδεσμο (link) στην HTML, χρειαζόμαστε τα εξής δύο πράγματα : Το όνομα του αρχείου στον δίσκο ή το URL του αρχείου, για το οποίο θέλουμε να δημιουργήσουμε τον σύνδεσμο. Το κείμενο που θα λειτουργεί ως το «ενεργό σημείο επιλογής», δηλ. θα εμφανίζεται υπογραμμισμένο ή και με διαφορετικό χρώμα στο παράθυρο του φυλλομετρητή και στο οποίο θα μπορούμε να κάνουμε κλικ για να ακολουθήσουμε τον σύνδεσμο. Στη σελίδα είναι ορατό μόνο το δεύτερο μέρος και όταν κάνουμε κλικ στο κείμενο που δείχνει σ’ έναν σύνδεσμο, ο φυλλομετρητής χρησιμοποιεί το πρώτο μέρος ως το σημείο προορισμού.
Οι Σύνδεσμοι (Links) – Παράδειγμα Παράδειγμα δημιουργίας συνδέσμου : Πηγαίνετε στην <a href=".../index.html">Αρχή</a> Γράφουμε το κείμενο που θα χρησιμοποιηθεί ως σύνδεσμος ανάμεσα στα tags <a> και </a> και προσθέτουμε στην ιδιότητα href του tag </a> το όνομα του αρχείου στο οποίο θέλουμε να οδηγεί ο σύνδεσμος. Περικλείουμε το όνομα του αρχείου σε διπλά εισαγωγικά και χρησιμοποιούμε το σύμβολο = μεταξύ του href και του ονόματος.
Οι Δεσμοί (Anchors) Οι δεσμοί (anchors) είναι ειδικά σημεία μέσα σε μια ιστοσελίδα, στα οποία μπορούμε να μεταβούμε με τη βοήθεια των συνδέσμων. Οι δεσμοί δημιουργούνται με τον ίδιο τρόπο όπως και οι σύνδεσμοι, αλλά αντί για την ιδιότητα href, χρησιμοποιούμε την ιδιότητα name, η οποία έχει ως τιμή ένα string, που χρησιμοποιείται για την ονομασία του δεσμού, ως εξής : <a name="Part4"> Part Four : Learning Italian </a>
Οι Δεσμοί (Anchors) – Συνέχεια Για να δείξουμε σ’ έναν δεσμό μέσα από έναν σύνδεσμο, χρησιμοποιούμε την ίδια μορφή με τη δημιουργία συνδέσμων, αλλά μετά από το όνομα της σελίδας γράφουμε το σύμβολο # και το όνομα του δεσμού, ακριβώς όπως εμφανίζεται στην ιδιότητα name, ως εξής : <a href="myfile.html#Part4">Πηγαίνετε στο 4ο Μέρος</a> Στο παραπάνω παράδειγμα, αφού κάνουμε κλικ στον σύνδεσμο, ο φυλλομετρητής θα φορτώσει τη σελίδα myfile.html και μετά θα πάει στον δεσμό που έχει το όνομα Part4. Το κείμενο που υπάρχει στον ορισμό του δεσμού θα εμφανισθεί στην κορυφή της οθόνης.
Τα Tags Μορφοποίησης Κάθε tag μορφοποίησης έχει ξεχωριστό μέλος αρχής και τέλους και επηρεάζει το ενδιάμεσο κείμενο. <b>, έντονη γραφή (bold), ίδιο με το <strong>. <i>, πλάγια γραφή (italic), ίδιο με το <em>. <u>, υπογράμμιση. <tt>, μη αναλογική γραμματοσειρά σε στυλ γραφομηχανής. <pre>, διατηρεί τα κενά ανάμεσα στο κείμενο. <s>, διακριτή διαγραφή. <big>, μεγαλύτερο μέγεθος από το περιβάλλον κείμενο. <small>, μικρότερο μέγεθος από το περιβάλλον κείμενο. <sub>, δείκτης. <sup>, εκθέτης.
Τα Tags Μορφοποίησης – Παραδείγματα <b> Αυτό το κείμενο είναι έντονο (bold) </b> <i> Αυτό το κείμενο είναι πλάγιο (italic) </i> <u> Αυτό το κείμενο είναι υπογραμμισμένο (underline) </u> Μπορούμε να χρησιμοποιήσουμε περισσότερα από ένα tag ταυτόχρονα, ως εξής : <b><i> Οι Νηρηίδες ήταν θεότητες της θάλασσας </i></b>
Το Tag <hr> Το tag <hr>, που δεν έχει αντίστοιχο tag τέλους και δεν χρησιμοποιεί κείμενο, δημιουργεί μια οριζόντια γραμμή μέσα στη σελίδα, η οποία χρησιμοποιείται για τον οπτικό διαχωρισμό των ενοτήτων μιας Web σελίδας. Έχει τις ιδιότητες size, width και align. <hr> <hr size=5 width=200 align=left>
Το Tag <br> <br clear = left> Το tag <br> προσθέτει μια αλλαγή γραμμής στο κείμενο εκεί που εμφανίζεται και δεν έχει αντίστοιχο tag τέλους. Μια ιδιότητα που διαθέτει η HTML για το tag <br> είναι η clear, η οποία χρησιμοποιείται με εικόνες στις οποίες θέλουμε το κείμενο να ρέει γύρω τους, και μπορεί να πάρει μια από τις τιμές left, right και all. <br clear = left>