(a)        ΕΙΣΑΓΩΓΗ

Ως γνωστόν , στον κόσμο των υπολογιστών διακρίνουμε δύο είδη γλωσσών υψηλού επιπέδου:

·        Τις γλώσσες προγραμματισμού, όπως τις γνωρίζουμε με τον αυστηρό ορισμό του όρου, όπως για παράδειγμα οι γλώσσες Basic και Java.

·        Οι γλώσσες σήμανσης , οι οποίες δεν διαθέτουν την αυστηρή δομή και την δυνατότητα εκτέλεσης σύνθετων υπολογισμών που διαθέτουν οι γλώσσες της προηγούμενης κατηγορίας. Οι γλώσσες αυτές αντιμετωπίζονται με διαφορετικό τρόπο από τον υπολογιστή ( για παράδειγμα για την μετατροπή τους σε εκτελέσιμο κώδικα , τα προγράμματα σε γλώσσες σήμανσης δεν απαιτούν χρήση compilers ) και γενικά αυτό που κάνουν είναι να περιγράφουν το πώς θα γίνει μια εργασία , παρά να εκτελούν την εργασία αυτή καθ’αυτή.

Μια από τις γνωστότερες και ευρύτερα διαδεδομένες γλώσσες σήμανσης είναι και η γλώσσα HTML. Η HTML, που αποτελεί την συνένωση των αρχικών HyperText Markup Language=Γλώσσα σήμανσης υπερκειμένου αποτελεί εξέλιξη της γλώσσας SGML=Standard Generalized Markup Language.  Τη στιγμή αυτή οι προδιαγραφές της έχουν εξελιχθεί ούτως ώστε αυτή να έχει φτάσει αισίως την έκδοση 4 ή HTML++.

Η γλώσσα HTML , όπως φανερώνει άλλωστε και το όνομά της σχετίζεται με την έννοια του υπερκειμένου (hypertext) του κειμένου , δηλ. εκείνου το οποίο τοποθετούμενο μέσα σε ένα έγγραφο μπορεί να γίνει ενεργό , δηλ. με ένα κλικ του ποντικιού πάνω σε αυτό από τον χρήστη να πραγματοποιηθεί μετάβαση σε κάποιον άλλο αντικείμενο-πόρο ενός συστήματος , όπως είναι μια σελίδα στο Ίντερνετ. Η γλώσσα HTML έχει γνωρίσει τα τελευταία χρόνια εκρηκτική ανάπτυξη λόγω του γεγονότος ότι η ύπαρξή της είναι άμεσα συνδεδεμένη με τη λειτουργία της υπηρεσίας του Ίντερνετ που λέγεται WWW(World Wide Web). Μιας υπηρεσίας που λόγω της ραγδαίας ανάπτυξής της έχει κάνει πολύ κόσμο να την ταυτίζει με το Ίντερνετ σαν σύνολο.

Συγκεκριμένα η ίδια η οργάνωση , δομή και λειτουργία του όλου λογικού και υλικού συστήματος που υποστηρίζει τον Παγκόσμιο Ιστό βασίζεται στην ιδέα του υπερκειμένου και κατ’επέκταση στους υπερσυνδέσμους ( hyperlinks ). Στο Ίντερνετ ως γνωστόν η πληροφορία κυκλοφορεί υπό μορφήν αρχείων. Η περιήγηση στην πλούσια από πλευράς πληροφορίας βιτρίνα του Παγκόσμιου Ιστού γίνεται με την ύπαρξη ειδικών αρχείων , τα οποία διαθέτουν βασικά την κατάληξη .htm ή .html  . Το περιεχόμενο των αρχείων αυτών είναι κατά βάση ο κώδικας της γλώσσας HTML , δηλ. απλό ASCII κείμενο (και κατ’επέκταση κείμενο κατά το πρότυπο UNICODE ) σύμφωνα με το οποίο καθορίζεται ο τρόπος παρουσίασης κάποιων δεδομένων στην οθόνη του υπολογιστή.

Η μετάφραση του κώδικα αυτού με τέτοιο τρόπο ώστε να εμφανίζεται η ορισμένη πληροφορία με την προκαθορισμένη επίσης μορφή γίνεται από ειδικά προγράμματα , τους λεγόμενους φυλλομετρητές ή browsers. Παράδειγμα προγράμματος browser είναι ο Netscape Navigator καθώς και ο NCSA Mosaic (που εξελίχθηκε από το National Center for Supercomputing Applications του Illinois) , προϊόν εξέλιξης του οποίου  είναι και ο περίφημος Internet Explorer της Microsoft.

Επανερχόμενοι λοιπόν στα αρχεία τύπου .html να πούμε ότι αυτά είναι τα αρχεία που εμφανίζονται στην οθόνη του υπολογιστή μας όταν κάνουμε περιήγηση σε κάποιον δικτυακό τόπο. Π.χ. όταν πληκτρολογούμε στον browser τη διεύθυνση www.ntua.gr ουσιαστικά ζητάμε από το πρόγραμμα να μας εμφανίσει τα περιεχόμενα κάποια ιστοσελίδας που λειτουργεί ως κύρια σελίδα (homepage) για τον συγκεκριμένο δικτυακό τόπο. Ένας δικτυακός τόπος δεν είναι τίποτα περισσότερο από ένα σύνολο .htm αρχείων οργανωμένων με ιεραρχικό τρόπο. Σε ένα αρχείο .htm μπορεί να ενσωματωθεί μόνο κείμενο. Οι συνδέσεις στις οποίες αναφέρονται οι διάφοροι δεσμοί υπάρχουν ως ξεχωριστά αρχεία σε τοπικούς ή δικτυακούς δίσκους .

(b)        ΠΕΡΙΓΡΑΦΗ ΤΗΣ ΔΟΜΗΣ ΤΗΣ ΓΛΩΣΣΑΣ

Όλη η γλώσσα HTML αποτελείται από κείμενο και ετικέτες(tags) , οι οποίες περικλείονται μεταξύ των συμβόλων < και > . Οι ίδιοι οι χαρακτήρες < και > συμβολίζονται ως &lt και &gt . Τα tags μπορεί να είναι διπλά ( με αρχή και τέλος, π.χ. <TITLE></TITLE> ) ή απλά ( π.χ. <BR>) . Tα οποιαδήποτε σχόλια περικλείονται μεταξύ των tags <!- - και - ->  . Επίσης να σημειωθεί ότι στην HTML δεν γίνεται διάκριση μεταξύ πεζών και κεφαλαίων γραμμάτων. Επίσης αγνοούνται οσαδήποτε κενά αφήνονται μεταξύ γραμμών του κώδικα.

Ένα πρόγραμμα σε HTML αρχίζει πάντοτε με το διπλό tag <HTML></HTML>. Μέσα σε αυτό το tag βρίσκεται πάντα η κεφαλή του προγράμματος <HEAD></HEAD> και το κυρίως σώμα ,<BODY></BODY> . Μέσα στο tag HEAD μπορούν να ενσωματωθούν αρκετές πληροφορίες που σχετίζονται με την εμφάνιση και την συμπεριφορά του αρχείου – ιστοσελίδας, όπως για παράδειγμα ο τίτλος που θα εμφανίζεται στην κορυφή του παραθύρου του προγράμματος περιήγησης και ο οποίος μπορεί να καθοριστεί με τη χρήση του διπλού tag <TITLE></TITLE>.

TAGS ΜΟΡΦΟΠΟΙΗΣΗΣ

Τα tags μορφοποίησης διακρίνονται σε δύο βασικές κατηγορίες:

·        Σε αυτά που δίνουν ιδιότητες στους χαρακτήρες και

·        σε αυτά που οργανώνουν τη δομή του κειμένου

ΠΑΡΑΔΕΙΓΜΑΤΑ TAGS ΜΟΡΦΟΠΟΙΗΣΗΣ ΚΕΙΜΕΝΟΥ

·        <BR> = αλλαγή γραμμής

·        <P> = αλλαγή παραγράφου

·        <P></P> = αρχή και τέλος παραγράφου

·        <B> = Bold Letters

·        <I> = Italics

·        <U> = Underlined

·        <TT> = Χαρακτήρες γραφομηχανής

·        <EM> = Emphasized

Μπορεί επίσης να υπάρξει οποιοσδήποτε συνδυασμός των παραπάνω με χρήση φωλιάσματος (nesting)

·        <Hn> , όπου n=1,2,…,6 = μέγεθος γραμματοσειράς ( αυτομάτως αφήνεται κενή μια γραμμή πριν και μετά το επηρεαζόμενο κείμενο )

·        <PRE></PRE> = Preformatted Text (Για ένα τμήμα κειμένου που είναι ήδη μορφοποιημένο ή αν δεν θέλουμε να αλλοιωθεί η στοίχιση σε πίνακες. Διατηρούνται έτσι οι χαρακτήρες σε μορφοποίηση Courier και όχι Proportional, δηλ. δεν καταλαμβάνουν μήκος ανάλογα με τη μορφή τους a,b,c,d αλλά το ίδιο μήκος όλοι.

·        <HR> = Τοποθετείται πριν από το κείμενο που έχει οριζόντιες γραμμές (π.χ. πίνακες) .Έτσι στο output του προγράμματος έχω αυτομάτως μια κενή γραμμή πριν και μετά την οριζόντια ( Αυτό το χαρακτηριστικό βοηθά γενικότερα στην στοίχιση τυποποιημένου εγγράφου, π.χ. ενός καταλόγου, ενός πίνακα)

·        <CODE></CODE> = Χρήσιμο tag για ενσωμάτωση ενός τμήματος κώδικα προγράμματος στην ιστοσελίδα.

ΕΙΔΗ ΚΑΤΑΛΟΓΩΝ (LISTS) ΚΑΙ ΛΕΙΤΟΥΡΓΙΑ ΤΟΥΣ (Το είδος του καταλόγου καθορίζεται από το διπλό tag που χρησιμοποιείται)

·        Αριθμητικοί

Με χρήση του διπλού tag <OL></OL> (ordered list). Όλες οι εγγραφές γράφονται μέσα στο OL και πριν από κάθε εγγραφή υπάρχει το απλό tag <LI> (list item)

·        Μη αριθμητικοί ( χωρίς αριθμούς – απλή αναφορά )

Με το διπλό <UL></UL> (Unordered List) και αντίστοιχα το <LI>

·        Επιλογών (είναι ελάχιστα χρησιμοποιούμενη και σκοπεύεται να καταργηθεί)

Με τη χρήση του διπλού <MENU></MENU> και το <LI>

·        Αρχείων (και αυτή η κατηγορία πρόκειται να καταργηθεί)

Με τη χρήση του διπλού <DIR></DIR> και το <LI>

·        Ερμηνευτικοί (Glossary Lists)

Με τη χρήση του διπλού tag <DL></DL> ( Definition List) και επίσης για κάθε επεξήγηση που δίνεται τα tag <<DT>(Definition Term) και <<DD>(Definition Description)

Παρατηρήσεις:

·        Να σημειωθεί ότι σε μια ιστοσελίδα μπορούμε να συνδυάσουμε αριθμητικούς και μη καταλόγους.

·        Πάντα και πριν από κάθε κατάλογο πρέπει να τοποθετείται για καλύτερο αποτέλεσμα το tag <HR>

·        Μπορούμε αντί για καταλόγους να βάζουμε στην αρχή καθενός εκ των στοιχείων μια μικρή εικόνα , εναλλάσσοντας εικόνα και κείμενο και κάνοντας χρήση του <BR>

·        Στην ιστοσελίδα μπορεί να ενσωματωθεί απόσπασμα κάποιου άλλου κειμένου με το διπλό tag <BLOCKQUOTE></BLOCKQUOTE> ή η ηλεκτρονική μας διεύθυνση(υπογραφή) με το διπλό tag <ADDRESS></ADDRESS>

ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΩΝ ΚΑΙ HYPERLINKS

Η εισαγωγή των εικόνων γίνεται με χρήση του tag <IMG SRC=”file pathname.gif”>.  Η πιο συνηθισμένη παράμετρος στην τοποθέτηση εικόνων είναι η ALIGN που δηλώνει τη θέση που λαμβάνει η εικόνα ως προς κάποιο κείμενο. Οι τιμές που μπορεί να πάρει είναι : Left , Right , Top , Middle, Bottom. Η σύνταξη της παραμέτρου είναι  <IMG SRC=”      “ ALIGN X > , όπου Χ είναι η τιμή της παραμέτρου.

Στην περίπτωση browser που δεν υποστηρίζει frames τότε πρέπει να προσθέσω στο tag <IMG> την παράμετρο ALT ως εξής: <IMG SRC=”    “  ALT=”[όνομα εικόνας]”> . Αν δεν γίνει χρήση της παραμέτρου ALT , τότε στην θέση κάθε εικόνας γίνεται αυτομάτως τοποθέτηση της λέξης [IMAGE].

Στις εικόνες τύπου .gif που είναι από τις πιο δημοφιλείς στο Ίντερνετ υπάρχουν τρία διαφορετικά format από τα οποία το πιο συνηθισμένο είναι το GIF89 ( το οποίο επιτρέπει η εικόνα να έχει διαφανές φόντο για να προσαρμόζεται ομαλά παντού σε κάθε σελίδα που διαβάζει ο browser ) .

Οι υπερσύνδεσμοι τώρα (Hyperlinks) διακρίνονται σε 2 κατηγορίες : αυτούς που οδηγούν σε εξωτερικά πάσης φύσεως αρχεία ( π.χ. διαφόρων ειδών multimedia files) και σε αυτούς που οδηγούν σε κάποιο σημείο ενός κειμένου HTML , είτε του παρόντος είτε άλλου.  Να μην ξεχνάμε ότι τα html αρχεία είναι καθαρά αρχεία κειμένου. Η εισαγωγή hyperlinks γίνεται με το διπλό tag <Α ……   > </Α> , όπου στον κενό χώρο τοποθετούνται οι απαραίτητες παράμετροι.

Διακρίνουμε τις εξής περιπτώσεις:

1.     Σύνδεση με εξωτερικό αρχείο , οπότε αν ABC.DEF είναι το τυχαίο αυτό αρχείο τότε η σύνδεση γίνεται ως  <A HREF=”ABC.DEF”> GO TO THAT FILE </A>, όπου “GO TO THAT FILE” είναι το όνομα του συνδέσμου που βλέπει ο χρήστης . Πολύ χρήσιμα εδώ είναι και τα tags <OL></OL> και <UL></UL> με το <LI>

2.     Σύνδεση με συγκεκριμένα σημεία είτε του παρόντος είτε άλλου εγγράφου HTML. Αυτό γίνεται με τη χρήση labels . Συγκεκριμένα η δημιουργία labels σε ένα html αρχείο γίνεται  συχνά σε ένα directory list με τα <DL></DL> με <DT>(directory term) <A NAME=”label”></A> και <DD> ως γνωστόν είναι το directory definition.  Η αναφορά τώρα σε ένα από αυτά τα labels γίνεται από το αρχικό αρχείο ως <Α HREF”όνομα αρχείου”#label>όνομα δεσμού</Α>

Παρατήρηση: Ο δεσμός που κάθε φορά εμφανίζεται στο tag <Α></Α> πρέπει να είναι υπό μορφή URL=Uniform Resource Locator. Έχουμε για παράδειγμα τα http:// , ftp:// , gopher:// , telnet:// , news://, mailto:// , ftp://userid:password@URL , file:/// = URL στον ίδιο τοπικό δίσκο . Επίσης να σημειωθεί ότι στην θέση του κειμένου μπορεί σε ένα hyperlink να υπάρχει μια εικόνα ( GIF ή JPEG ) ως εξής : <A HREF=”URL”><IMG SRC=”όνομα εικόνας”></A>