Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized Markup Language), ένα πολύ μεγαλύτερο σύστημα επεξεργασίας εγγράφων. Ένα στοιχείο είναι ο βασικός παράγων μιας δομής ενός εγγράφου HTML. Μερικά παραδείγματα στοιχείων είναι οι επικεφαλίδες (headings), οι παράγραφοι κειμένου (paragraphs), οι λίστες (lists) και οι πίνακες (tables). Η HTML ορίζει επίσης στυλ χαρακτήρων όπως η έντονη γραφή (bold) και τα αποσπάσματα κώδικα (code). Τα στοιχεία μπορούν να περιλαμβάνουν απλό κείμενο, άλλα στοιχεία ή και τα δυο. Για να δηλώσει κανείς τα διάφορα στοιχεία σ ένα HTML έγγραφο χρησιμοποιεί τις ετικέτες (tags). Τα tags της HTML δηλαδή υποδεικνύουν τα στοιχεία, την δομή και την μορφοποίηση των σελίδων, καθώς επίσης και τις συνδέσεις υπερκειμένου προς άλλες σελίδες, ή προς αρχεία άλλων μορφών (πολυμέσα). Οι ετικέτες αποτελούνται από μια αριστερή γωνιακή παρένθεση (<), όνομα ετικέτας και από την αντίστοιχη δεξιά παρένθεση (>). Οι ετικέτες συνήθως απαντώνται ως ζεύγη (π.χ. <H1> και </H1>) για την επισήμανση της αρχής και του τέλους της εντολής που υποδηλώνει την ετικέτα. Ένα ζεύγος ετικετών αρχής / τέλους αποκαλείται επίσης στοιχείο της HTML (HTML element). Το tag αρχής ενεργοποιεί ένα χαρακτηριστικό και το tag τέλους, το οποίο έχει σαν πρόθεμα έναν χαρακτήρα /, το απενεργοποιεί. Κάποια στοιχεία μπορεί να περιλαμβάνουν και κάποιο χαρακτηριστικό (attribute) που παρέχει επιπλέον πληροφορία και περιλαμβάνεται στην ετικέτα της αρχής. Για παράδειγμα, μπορεί να προσδιορίσει κανείς την ευθυγράμμιση των εικόνων (πάνω, κάτω ή μέσον) περιλαμβάνοντας κατάλληλο χαρακτηριστικό στον πηγαίο HTML κώδικα για την εικόνα. Η HTML δεν είναι ευαίσθητη στα μικρά ή τα κεφαλαία. Το <TITLE> είναι ισοδύναμο με το <title>. Υπάρχουν όμως και κάποιες εξαιρέσεις. Όλες οι ετικέτες δεν υποστηρίζονται από όλους τους πλοηγούς στο internet. Όταν ένας πλοηγός συναντήσει ετικέτα που δεν την υποστηρίζει, απλά την αγνοεί. Το κείμενο που βρίσκεται ανάμεσα σε άγνωστες ετικέτες θα συνεχίσει να εμφανίζεται. Η HTML και η δομή μιας σελίδας Κάθε html έγγραφο θα πρέπει να περιλαμβάνει κάποιες καθορισμένες HTML ετικέτες (tags). Κάθε έγγραφο αποτελείται από το κείμενο της κεφαλίδας και του σώματος. Η κεφαλίδα περιλαμβάνει τον τίτλο και το σώμα περιλαμβάνει το κυρίως κείμενο που αποτελείται από παραγράφους, καταλόγους και άλλα στοιχεία. Οι πλοηγοί αναμένουν ειδική πληροφορία επειδή είναι προγραμματισμένοι σύμφωνα με τις προδιαγραφές της HTML και της SGML. Τα απαιτούμενα στοιχεία παρουσιάζονται στο παρακάτω δείγμα εγγράφου : <html> <head> <TITLE> A Simple HTML Example </TITLE> </head> <body> <H1> Learn HTML </H1>
<P> Welcome to the world of HTML. This is the first paragraph. </P> <P> This is the second paragraph </P> </body> </html> Μπορούμε σίγουρα να πούμε ότι το παραπάνω παράδειγμα μας δείχνει την γενική δομή ενός html εγγράφου. Εδώ ίσως παρατηρήσετε ότι κάθε tag της HTML είναι ένθετο. Δηλαδή αμφότερα τα tags αρχής και τέλους, <body> και </body>, είναι ένθετα μέσα στο ζεύγος των tags <html>. Το ίδιο ισχύει και για το ζεύγος των tags <head>. Όλα τα tags της HTML λειτουργούν κατά αυτόν τον τρόπο, σχηματίζοντας ξεχωριστές ένθετες ενότητες κειμένου. Θα πρέπει να είστε ιδιαίτερα προσεκτικοί, φροντίζοντας να μην υπάρχει επικάλυψη μεταξύ των ετικετών. Τα απαιτούμενα στοιχεία είναι οι ετικέτες <html>, <head>, <title> και <body> καθώς και οι αντίστοιχες ετικέτες τέλους. Για να μπορέσει κανείς να εκτελέσει αυτό το html πρόγραμμα κατά τον απλούστερο τρόπο πρέπει να κάνει τα εξής : 1 ) Γράφει το παραπάνω κείμενο σε έναν επεξεργαστή κειμένου (π.χ. Notepad). 2 ) Αποθηκεύει το κείμενο με κατάληξη.html ή.htm (ASCII μορφή). 3 ) Καλεί τοπικά έναν WWW πλοηγό (π.χ. Microsoft Explorer). 4 ) Από το μενού FILE εντοπίζει και επιλέγει το αρχείο.htm ή.html 5 ) Το ανοίγει και το αρχείο εκτελείται αμέσως. Για να δει κανείς ένα αντίγραφο του html αρχείου που ο πλοηγός έχει διαβάσει και δημιουργεί πληροφορία στο τρέχον παράθυρο του χρήστη, από το μενού View του πλοηγού μπορεί να κάνει την επιλογή Document Source για τον Navigator ή View Source για τον Explorer. Τα περιεχόμενα του αρχείου με όλες τις html ετικέτες, εμφανίζονται σε ένα νέο παράθυρο. Κατά αυτόν τον τρόπο μπορεί να έχει την εποπτεία έτοιμων html προγραμμάτων και να μάθει πράγματα που χρησιμοποιούν οι προχωρημένοι html χρήστες. Παρακάτω θα αναφέρουμε ορισμένες από τις html ετικέτες και ορισμένα παραδείγματα για να γνωρίσουμε την γλώσσα. Οι Ετικέτες Της HTML (Markup Tags) <HTML> </HTML> Το πρώτο tag που ελέγχει την δομή κάθε ιστοσελίδας. Το tag αυτό υποδεικνύει ότι το περιεχόμενο του συγκεκριμένου αρχείου περιέχει κώδικα γραμμένο με την γλώσσα HTML. Επίσης και η επέκταση του αρχείου (.html) δηλώνει το ίδιο. Όλο το κείμενο και οι εντολές της ιστοσελίδας θα πρέπει να τοποθετούνται μεταξύ του ζεύγους <html> </html>. <HEAD> </HEAD> Η ετικέτα της κεφαλίδας προσδιορίζει ότι οι γραμμές που περικλείονται ανάμεσα στην αρχή και στο τέλος της είναι ο «πρόλογος» για το υπόλοιπο του αρχείου. Το tag <head> αναγνωρίζει το πρώτο μέρος του HTML κωδικοποιημένου εγγράφου που περιέχει τον τίτλο (ο τίτλος αυτός εμφανίζεται ως μέρος του παραθύρου του πλοηγού). Γενικά υπάρχουν λίγα tags τα οποία τοποθετούνται στο τμήμα <head> μιας σελίδας. Τέλος δεν θα πρέπει να τοποθετείτε ποτέ κείμενο των σελίδων σας στο στοιχείο της κεφαλίδας.
<TITLE> </TITLE> Το στοιχείο του τίτλου περιλαμβάνει τον τίτλο του εγγράφου και αναγνωρίζει το περιεχόμενό του, συνολικά για όλο το έγγραφο. Ο τίτλος εμφανίζει στο πάνω μέρος του παραθύρου του πλοηγού στην μπάρα των τίτλων και όχι μέσα στο παράθυρο. Αυτός ο τίτλος είναι επίσης αυτό που εμφανίζεται σε κάποιου τον κατάλογο hotlist ή bookmark, για αυτό θα πρέπει να επιλέγεται κάτι το μοναδικό, το περιγραφικό και το σχετικά σύντομο. Επίσης ο τίτλος χρησιμοποιείται για να αναγνωρίζεται η σελίδα από τις μηχανές αναζήτησης. Γενικά ο τίτλος δεν μπορεί να ξεπερνά τους 64 χαρακτήρες. <BODY> </BODY> Το υπόλοιπο της σελίδας σας, συμπεριλαμβανομένου όλου του κειμένου και οποιουδήποτε άλλου περιεχομένου (συνδέσεις, εικόνες, κ.λ.π.), περικλείεται μέσα σε αυτό το tag (<body>). Η ετικέτα <body> μπορεί να πάρει τα παρακάτω χαρακτηριστικά / γνωρίσματα (body attributes) : BGCOLOR Καθορίζει το χρώμα του υπόβαθρου, χρησιμοποιώντας ένα όνομα ή μια δεκαεξαδική τιμή. BACKGROUND Καθορίζει μια εικόνα ως υπόβαθρο (wallpaper). TEXT Καθορίζει το χρώμα του κειμένου της σελίδας, χρησιμοποιώντας ένα όνομα ή μια δεκαεξαδική τιμή. LINK Καθορίζει το χρώμα των συνδέσμων της σελίδας, χρησιμοποιώντας ένα όνομα ή μια δεκαεξαδική τιμή. ALINK Καθορίζει το χρώμα των συνδέσμων της σελίδας όταν αυτοί επιλέγονται, χρησιμοποιώντας ένα όνομα ή μια δεκαεξαδική τιμή. Παράδειγμα :< BODY BGCOLOR = #000000 TEXT = #FFFFFF LINK = #9690CC > <H1>-<H6> </H1>-</H6> Η HTML έχει έξι επίπεδα κεφαλίδων, αριθμούμενων από το 1 μέχρι το 6, με το 1 να είναι μεγαλύτερο. Οι κεφαλίδες τυπικά εμφανίζονται με μεγαλύτερα ή και πιο έντονες γραμματοσειρές από ότι το κανονικό κείμενο. Η πρώτη κεφαλίδα σε κάθε κείμενο θα πρέπει να έχει το σημάδι <H1>. Η σύνταξη του στοιχείου της κεφαλίδας είναι : <Hz> Κείμενο Επικεφαλίδας </Hz>, για z από 1 έως και 6. Δεν θα πρέπει να ξεπερνιέται η σειρά των κεφαλίδων στο κείμενο. Δεν θα πρέπει να ξεκινήσει κανείς με κεφαλίδα πρώτου επιπέδου και μετά να χρησιμοποιήσει κεφαλίδα τρίτου επιπέδου. <BR> Αυτή η ετικέτα εξαναγκάζει μια γραμμή χωρίς καθόλου κενά διαστήματα μεταξύ των γραμμών. Δηλαδή τοποθετείτε το υπόλοιπο κείμενο σε μια νέα γραμμή. Δημιουργείται μια αλλαγή γραμμής. (enter). <P> </P> Η ένδειξη έναρξης παραγράφου γίνεται με την ετικέτα <P> και η ένδειξη τέλους με την ετικέτα </P>. Στην ετικέτα αρχής παραγράφου είναι δυνατόν να περιληφθεί και το χαρακτηριστικό ALIGN = alignment όπου το alignment μπορεί να λάβει τις τιμές CENTER, LEFT και RIGHT. Σε αντίθεση με πολλούς επεξεργαστές κειμένου, οι χαρακτήρες αλλαγής γραμμής (carriage returns) στην HTML δεν είναι σημαντικοί και έτσι δεν έχει σημασία πόσο μεγάλες είναι οι γραμμές κειμένου. Πολλαπλά διαστήματα καταγράφονται ως ένα από το πρόγραμμα πλοήγησης. Δηλαδή ακόμα και αν υπάρχουν δυο χαρακτήρες αλλαγής γραμμής πριν το τέλος της παραγράφου στο πηγαίο αρχείο, το πρόγραμμα πλοήγησης τους αγνοεί και ξεκινά μια καινούρια παράγραφο μόνο όταν συναντά μια άλλη ετικέτα <P>. Για να διατηρηθεί η αναγνωσιμότητα στα αρχεία HTML, συνίσταται η τοποθέτηση επικεφαλίδων σε ξεχωριστές γραμμές καθώς και χρήση κενών γραμμών για τον διαχωρισμό τμημάτων και παραγράφων κειμένου. Αυτά τα επιπλέον κενά υποβοηθούν στην διόρθωση και τυχών τροποποίηση των αρχείων. Το πρόγραμμα
πλοήγησης θα αγνοήσει τα επιπλέον διαστήματα επειδή έχει δικούς του κανόνες για τα διαστήματα που δεν βασίζονται στα διαστήματα που υπάρχουν στο πηγαίο αρχείο. Η ετικέτα του τέλους </P> μπορεί να παραληφθεί. Το πρόγραμμα πλοήγησης αντιλαμβάνεται ότι υπάρχει πάντα ένα τέλος στην ετικέτα <P>. <ADDRESS> </ADDRESS> Μια «υπογραφή» για μια ιστοσελίδα. Εμφανίζετε συνήθως προς το τέλος κάθε εγγράφου και περιέχει πληροφορίες επαφής ή σημείωσης περί πνευματικών δικαιωμάτων και copyright. <CENTER> </CENTER> Κεντράρει όλο το περιεχόμενο μεταξύ των tags αρχής και τέλους. <BIG> </BIG> Κείμενο με μεγαλύτερη γραμματοσειρά από το περιβάλλον κείμενο. <SMALL> </SMALL> Κείμενο με μικρότερη γραμματοσειρά από το περιβάλλον κείμενο. <EM> </EM> Κείμενο με έμφαση. <STRONG> </STRONG> Κείμενο με εντονότερη έμφαση. <SUB> </SUB> Κείμενο σε μορφή δείκτη. <SUP> </SUP> Κείμενο σε μορφή εκθέτη. <TT> </TT> Κείμενο με γραμματοσειρά γραφομηχανής (μη-αναλογική γραμματοσειρά, όπως η courier). <S> </S> Κείμενο με διακριτή διαγραφή. <BLOCKQUOTE> </ BLOCKQUOTE > Ένα απόσπασμα κειμένου μεγαλύτερο από λίγες λέξεις. <DFN> </DFN> Ένας ορισμός, ή ένας όρος ο οποίος πρόκειται να εξηγηθεί στην συνέχεια. <KBD> </KBD> Κείμενο το οποίο θα πληκτρολογηθεί από τον χρήστη. <VAR> </VAR> Όνομα μεταβλητής. <NOBR> </NOBR> Το κείμενο που περικλείεται σε αυτό το ζεύγος tags δεν μπορεί να διαχωριστεί σε δυο γραμμές. <FONT> </FONT> Ιδιότητα SIZE : Το νέο μέγεθος γραμματοσειράς στο οποίο θέλετε να αλλάξετε το κείμενο, είτε από 1 έως 7. Ιδιότητα FACE : Το όνομα της νέας γραμματοσειράς στην οποία θέλετε να αλλάξετε το κείμενο. Μπορείτε να αναφέρεστε στην λίστα γραμματοσειρών. <BLINK> </BLINK> Αναγκάζει το κείμενο που περικλείει να αναβοσβήνει.
<B> </B> Έντονη γραφή κειμένου. <I> </I> Πλάγια γραφή κειμένου. <U> </U> Κείμενο με υπογράμμιση. <PRE> </PRE> Με αυτή την ετικέτα μπορείτε να μορφοποιείτε το κείμενο με την επιθυμητή εμφάνιση που εσείς θέλετε και αυτό θα παρουσιάζεται ακριβώς έτσι στο παράθυρο της εφαρμογής browser. Οποιοδήποτε στοιχείο δημιουργίας κενού χώρου τοποθετείτε μέσα στο κείμενο το οποίο περικλείεται μέσα στα tags <pre> και </pre>, διατηρείται στο τελικό αποτέλεσμα. Το προ-μορφοποιημένο κείμενο είναι ιδανικό για πράγματα όπως τα αποσπάσματα κώδικα, όπου θέλετε να τοποθετείτε σε εσοχή και να μορφοποιείτε τις γραμμές του κώδικα κατάλληλα. Επειδή μπορείτε επίσης να χρησιμοποιήσετε αυτό το tag για να στοιχίζετε το κείμενο χρησιμοποιώντας κενά διαστήματα, μπορείτε να το εκμεταλλεύεστε για την δημιουργία απλών πινάκων. Όταν δημιουργείτε κείμενο για το tag <pre>, μπορείτε να χρησιμοποιείτε tags δημιουργίας συνδέσεων και tags αλλαγής του στυλ χαρακτήρων, αλλά όχι tags χαρακτηρισμού ολόκληρων στοιχείων, όπως τα tags για τις κεφαλίδες ή τις παραγράφους του κυρίως κειμένου. Θα πρέπει να χωρίζετε τις γραμμές σας χρησιμοποιώντας τον χαρακτήρα αλλαγής γραμμής (enter, return), και να προσπαθείτε να κρατάτε τις γραμμές σας σε μήκος 60 ή λιγότερων χαρακτήρων (Δεδομένου ότι οι εφαρμογές browser δεν μπορούν να αναδιαμορφώσουν το προ-μορφοποιημένο κείμενο ώστε να χωρά μέσα στον διαθέσιμο χώρο, θα πρέπει να διασφαλίζετε ότι παραμένετε μέσα στα όρια). Το tag <pre> είναι επίσης θαυμάσιο για την γρήγορη και εύκολη ενσωμάτωση αρχείων απλού κειμένου, όπως τα μηνύματα ηλεκτρονικού ταχυδρομείου. Περικλείετε απλώς ολόκληρο το περιεχόμενο του μηνύματος μέσα στο ζεύγος των tags <pre> κι έχετε άμεσα το σωστό αποτέλεσμα στο html αρχείο. <HR SIZE = x WIDTH = y NOSHADE> Αυτή η ετικέτα εισάγει στο html έγγραφο έναν οριζόντιο χάρακα. Παράγει μια οριζόντια γραμμή το μήκος της οποίας καλύπτει το πλάτος του παραθύρου του προγράμματος πλοήγησης. Ο χάρακας είναι πολύ χρήσιμος για να διαχωρίζει τμήματα του εγγράφου. Αυτό το tag έχει τρία χαρακτηριστικά. Η πρώτη ιδιότητα είναι το size. Αυτή η ιδιότητα, το μέγεθος (size), καθορίζει το πάχος σε pixels της γραμμής. Η προεπιλεγμένη τιμή της είναι 2 και αυτό είναι επίσης το μικρότερο πάχος που μπορεί να έχει μια τέτοια γραμμή. Η ιδιότητα width (πλάτος) καθορίζει το πλάτος της γραμμής στην οριζόντια διεύθυνση. Μπορείτε να καθορίσετε είτε το ακριβές πλάτος σε pixels, είτε μια τιμή σαν ποσοστό επί του πλάτους της οθόνης, η οποία θα αλλάζει όταν αλλάζετε το μέγεθος του παραθύρου. Εάν χρησιμοποιήσετε τιμή πλάτους (width) μικρότερη από το πραγματικό πλάτος της οθόνης, μπορείτε επίσης να προσδιορίσετε την θέση αυτής της γραμμής με τη ιδιότητα align, στοιχίζοντας την αριστερά (align = left), δεξιά (align = right), ή στο κέντρο (align = center). Εξ ορισμού, οι γραμμές κεντράρονται στο παράθυρο. Τέλος, η ιδιότητα noshade λέει στην εφαρμογή browser να σχεδιάσει την γραμμή σαν απλή μαύρη γραμμή, χωρίς τρισδιάστατη σκίαση. <A> </A> Η ετικέτα που δείχνει το υπερκείμενο είναι το <a> από την λέξη anchor. Για την δημιουργία μιας σύνδεσης σε μία ιστοσελίδα, θα χρησιμοποιείτε το ζεύγος των tags <a>.</a>. Το tag αρχής <a>, περιλαμβάνει το όνομα του (a) και επιπλέον πληροφορίες σχετικές με την σύνδεση. Για να δοθούν αυτές οι επιπλέον πληροφορίες για την σύνδεση θα πρέπει να χρησιμοποιήσουμε κάποια γνωρίσματα-χαρακτηριστικά αυτής της ετικέτας.
Δυο είναι τα βασικά γνωρίσματα (attributes) αυτής της ετικέτας. Το χαρακτηριστικό HREF και το χαρακτηριστικό NAME. Δίνεται ένα παράδειγμα μιας διασύνδεσης υπερκειμένου με την χρήση αυτών των attributes : <A name= Up href= menu.html title= First Link > Link </A>. Το tag <a> έχει αρκετές ιδιότητες, συμπεριλαμβανομένων των rel, rev, shape, accesskey και title. Ωστόσο, οι περισσότερες από αυτές χρησιμοποιούνται μόνο από εργαλεία τα οποία παράγουν αυτόματα συνδέσεις μεταξύ των σελίδων, ή από εφαρμογές browser οι οποίες μπορούν να διαχειρίζονται τις συνδέσεις καλύτερα από τις περισσότερες άλλες εφαρμογές browser που κυκλοφορούν αυτή τη στιγμή. Τα πιο χρήσιμα attributes όμως είναι σίγουρα το href και το name. Η ιδιότητα HREF (Hypertext REFerence αναφορά υπερ-κειμένου) χρησιμοποιείται για τον καθορισμό του ονόματος ή της διεύθυνσης URL του αρχείου στο οποίο «δείχνει» η σύνδεση. Όμοια με τα περισσότερα tags της HTML, το tag δημιουργίας συνδέσεων έχει αντίστοιχο tag τέλους, το </a>. Το κείμενο που υπάρχει μεταξύ των tags αρχής και τέλους γίνεται η πραγματική σύνδεση, η οποία εμφανίζεται με κάποιο είδος τονισμού στην οθόνη. Αυτό είναι το κείμενο πάνω στο οποίο εσείς ή οι αναγνώστες σας μπορείτε να κάνετε κλικ (ή να το επιλέξετε σε εφαρμογές browser που δεν χρησιμοποιούν ποντίκι) για να μεταβείτε στο σημείο το οποίο προσδιορίζεται στην ιδιότητα href (στον προορισμό της σύνδεσης). Αντί να χρησιμοποιήσουμε κείμενο για να μεταβούμε στον προορισμό της σύνδεσης μπορούμε να χρησιμοποιήσουμε και εικόνα. Το tag <a> αποκαλείται συχνά και tag δεσμού (anchor tag), δεδομένου ότι μπορεί επίσης να χρησιμοποιείται για την δημιουργία δεσμών (συνδέσεων προς σημεία που βρίσκονται στην ίδια σελίδα). Οι δεσμοί (anchors) ή σελιδοδείκτες, είναι ειδικά σημεία μέσα σε έγγραφα, στα οποία μπορείτε να μεταβαίνετε με τη βοήθεια των συνδέσεων. Οι συνδέσεις μπορούν να σας μεταφέρουν σ αυτά τα ειδικά σημεία μέσα σε μια σελίδα, αντί να σας μεταφέρουν απλώς στην κορυφή της σελίδας. Για να καταλάβουμε τους συνδέσμους σε συγκεκριμένα τμήματα στο τρέχον έγγραφο θα δώσουμε το παρακάτω παράδειγμα : Για διασύνδεση στη διεύθυνση Part2 από κάποιο σημείο ενός εγγράφου σε ένα άλλο σημείο εντός του ίδιου εγγράφου θα πρέπει να γράψουμε τα εξής : <H2> <A HREF= #Part2 > Go to Link </A></H2>. Ακριβώς μετά θα πρέπει να εισαχθεί το σημάδι <H2> <A Name= Part2 > Link </A> <H2> στο σημείο του εγγράφου μας στο οποίο επιθυμούμε να μας μεταφέρει ο σύνδεσμός μας. Ωστόσο, η πιο κοινή χρήση του tag αυτού είναι για την δημιουργία συνδέσεων προς άλλες σελίδες. <IMG SRC = "x"> Οι εξωτερικές εικόνες (external images) είναι αποθηκευμένες ξεχωριστά από την ιστοσελίδα και φορτώνονται μόνο κατ απαίτηση, π.χ. σαν αποτέλεσμα της επιλογής μιας σύνδεσης. Οι ένθετες εικόνες εμφανίζονται σε μια ιστοσελίδα μαζί με το κείμενο και τις συνδέσεις, και φορτώνονται αυτόματα όταν φορτώνεται η ίδια η σελίδα. Τα περισσότερα προγράμματα πλοήγησης στο Web μπορούν να εμφανίζουν εικόνες δίπλα σε κείμενο (inline images ένθετες εικόνες) που βρίσκονται σε μορφή X bitmap (.xbm),.gif ή.jpeg. Και άλλες μορφές εικόνας μπορούν να ενσωματώνονται σε προγράμματα πλοήγησης π.χ. μορφή Portable Network Graphic (.PNG). Για κάθε εικόνα απαιτείται χρόνος για να επεξεργαστεί και επιβραδύνει την αρχική εμφάνιση ενός εγγράφου. Θα πρέπει κανείς με πολύ προσοχή να επιλέγει τις εικόνες σε ένα έγγραφο. Για να περιληφθεί μια εικόνα σε ένα έγγραφο θα χρησιμοποιήσουμε την ετικέτα <img> (το tag <img> δεν έχει tag τέλους). Τo tag <img> έχει πολλές ιδιότητες οι οποίες σας επιτρέπουν να εμφανίζετε και να χειρίζεστε με πολλούς τρόπους τις ένθετες εικόνες. Η πιο σημαντική ιδιότητα του tag <img> είναι η SRC. Η ιδιότητα SRC υποδεικνύει το όνομα αρχείου ή την διεύθυνση URL της εικόνας που θέλετε να συμπεριλάβετε, περικλειόμενη μέσα σε εισαγωγικά. Το όνομα
διαδρομής του αρχείου χρησιμοποιεί τους ίδιους κανόνες για την αναγραφή διαδρομών καταλόγων (pathnames) που ισχύουν και στην ιδιότητα HREF των συνδέσεων. Χρησιμοποιώντας την ιδιότητα ALT του tag <img> μπορείτε να καθορίσετε κείμενο το οποίο θα εμφανίζεται στην θέση της εικόνας στις εφαρμογές browser που δεν έχουν δυνατότητα εμφάνισης γραφικών. Αυτή η ιδιότητα περιέχει ένα αλφαριθμητικό με το κείμενο που θέλετε να εμφανίζεται στην θέση της εικόνας. π.χ. <img src= image.gif alt= [a flower] > <! > Σχόλια Οι Ετικέτες Της HTML Για Την Δημιουργία Λιστών (Lists) <UL> </UL> Μια μη-αριθμημένη λίστα, ή λίστα κουκίδων. Κάθε στοιχείο μιας τέτοιας λίστας ξεκινά με το tag <LI>. <OL> </OL> Μια αριθμημένη λίστα. Κάθε στοιχείο της λίστας ξεκινά με το tag <LI>. Σε αυτό το tag μπορούμε να έχουμε και δυο χαρακτηριστικά. Το attribute TYPE και το attribute START. Με το attribute TYPE καθορίζετε το είδος της αρίθμησης της λίστας. Με το attribute START καθορίζετε ο αριθμός με τον οποίον ξεκινά η αρίθμηση. <LI> </LI> Το tag για μεμονωμένα στοιχεία σε πολλά είδη λιστών : αριθμημένες λίστες, λίστες κουκίδων, λίστες μενού ή λίστες καταλόγων. Είναι υποχρεωτικό να κλείνει με το tag τέλους </LI> στην HTML. <DL> </DL> Μια λίστα γλωσσάριου ή ορισμών. Τα στοιχεία της λίστας αποτελούνται από ζεύγη : έναν όρο και τον ορισμό του. <DT> </DT> Το τμήμα ενός στοιχείου μιας λίστας γλωσσάριου που αναγράφει τον όρο. Είναι υποχρεωτικό να κλείνει με το tag τέλους </DT> στην HTML. <DD> </DD> Το τμήμα ενός στοιχείου μιας λίστας γλωσσάριου που αναγράφει τον ορισμό. Οι Ετικέτες Της HTML Για Την Δημιουργία Πινάκων (TABLES) Οι πίνακες είναι πολύ χρήσιμο εργαλείο για την παρουσίαση πληροφορίας. Ακόμη και η παρουσίαση κανονικών σελίδων Web μπορεί να ωφεληθεί από τους πίνακες. Ένας πίνακας έχει κεφαλές όπου γίνεται η επεξήγηση της πληροφορίας των γραμμών και στηλών καθώς και του κάθε κελιού. Για τους πίνακες έχουμε τις εξής ετικέτες : <TABLE> </TABLE> Αυτή η ετικέτα προσδιορίζει ένα πίνακα σε μορφή HTML. Εάν το χαρακτηριστικό BORDER είναι παρόν, τότε το πρόγραμμα πλοήγησης εμφανίζει τον πίνακα με πλαίσιο. <CAPTION> </CAPTION> Ορίζει τον τίτλο που παρατίθεται στον πίνακα. Η εξ ορισμού θέση του τίτλου είναι το κέντρο στην κορυφή του πίνακα. Το χαρακτηριστικό ALIGN = BOTTOM μπορεί να χρησιμοποιηθεί για να τοποθετηθεί ο τίτλος του πίνακα στο κάτω μέρος του.
<TR> </TR> Προσδιορίζει μια γραμμή πίνακα σε ένα πίνακα. Μπορεί να οριστούν εξ ορισμού χαρακτηριστικά για όλη τη γραμμή. ALIGN (LEFT, CENTER, RIGHT) και VALIGN (TOP, MIDDLE, BOTTOM). <TH> </TH> Ορίζει ένα κελί σαν κεφαλίδα. Εξ ορισμού το κείμενο σε αυτό το κελί τοποθετείται στο κέντρο με έντονα γράμματα. Τα κελιά επικεφαλίδας πίνακα μπορούν να περιλαμβάνουν άλλα χαρακτηριστικά για να αποφασίζουν τις ιδιότητες του κελιού ή τα περιεχόμενα του. <TD> </TD> Παρόμοια με την παραπάνω ετικέτα (<TH>) μόνο που εδώ δεν γράφουμε επικεφαλίδα μιας γραμμής ή μιας στήλης αλλά απλά περιεχόμενα ενός κελιού του πίνακα. Σε μία γραμμή του πίνακα (<TR>) μπορούμε να έχουμε πολλά κελιά που ορίζονται με τις ετικέτες (<TH>) και (<TD>). Χαρακτηριστικά ενός πίνακα Σημείωση : Τα χαρακτηριστικά που ορίζονται εντός των κελιών <TH> </TH> ή <TD> </TD> υπερβαίνουν την εξ ορισμού ευθυγράμμιση που ορίζεται με μια εντολή <TR> </TR>. Μπορούμε να έχουμε τα εξής χαρακτηριστικά : ALIGN (LEFT, CENTER, RIGHT) : Οριζόντια ευθυγράμμιση ενός κελιού. VALIGN (TOP, MIDDLE, BOTTOM) : Κάθετη ευθυγράμμιση ενός κελιού. COLSPAN = n : Ο αριθμός των στηλών που διαχωρίζεται ένα κελί. ROWSPAN = n : Ο αριθμός των γραμμών που χωρίζεται ένα κελί. NOWRAP : Περάτωση της περιβολής εντός ενός κελιού. Για να καταλάβουμε όμως όλα τα παραπάνω θα δώσουμε το παράδειγμα του παρακάτω πίνακα στον οποίον επεξηγείτε η χρήση των εντολών του : <TABLE> <TR> <TH> Περιεχόμενα κελιού </TH>.. <TH> Περιεχόμενα κελιού </TH> </TR> <TR> <TD> Περιεχόμενα κελιού </TD>. <TD> Περιεχόμενα κελιού </TD> </TR> : Αρχή ορισμού του πίνακα. : Πρώτη γραμμή : Πρώτο κελί στην πρώτη γραμμή (head). : Τελευταίο κελί στην πρώτη γραμμή (head). : Τέλος ορισμού της πρώτης γραμμής. : Αρχή ορισμού της δεύτερης γραμμής. : Πρώτο κελί στην δεύτερη γραμμή. : Τελευταίο κελί στην δεύτερη γραμμή. : Τέλος ορισμού της δεύτερης γραμμής.
<TR> <TD> Περιεχόμενα κελιού </TD>. <TD> Περιεχόμενα κελιού </TD> </TR> </TABLE> : Αρχή ορισμού της τελευταίας γραμμής. : Πρώτο κελί στην τελευταία γραμμή. : Τελευταίο κελί στην τελευταία γραμμή. : Τέλος ορισμού της τελευταίας γραμμής. : Τέλος ορισμού του πίνακα. Οι ετικέτες <TABLE> και </TABLE> θα πρέπει να περιβάλουν τον ορισμό όλου του πίνακα. Το πρώτο στοιχείο εντός το πίνακα είναι το σημάδι CAPTION το οποίο είναι κατ επιλογήν. Κατόπιν με την βοήθεια των <TR> και </TR> μπορεί να οριστούν τόσες σειρές όσες απαιτούνται. Εντός μιας γραμμής μπορεί να οριστεί οιαδήποτε αριθμός κελιών που ορίζονται με τις ετικέτες <TD>...</TD> και <TH> </TH>. Κάθε γραμμή ενός πίνακα, μορφοποιείται ξεχωριστά και ανεξάρτητα από τις προηγούμενες και επόμενες γραμμές. Πίνακες για μη πινακοποιημένη πληροφορία Ορισμένοι HTML συγγραφείς χρησιμοποιούν πίνακες για να παραστήσουν μη πινακοποιημένη πληροφορία. Για παράδειγμα, μπορούν να περιληφθούν και σύνδεσμοι στα κελιά του πίνακα, ορισμένοι συγγραφείς χρησιμοποιούν πίνακα χωρίς πλαίσιο για να δημιουργήσουν μια εικόνα από πολλές ξεχωριστές εικόνες. Τα προγράμματα πλοήγησης (browsers) που έχουν τη δυνατότητα εμφάνισης διαφορετικών εικόνων αποκρύπτοντας τις ενώσεις, μπορούν να εμφανίζουν την δημιουργούμενη εικόνα να φαίνεται ως ένα χάρτη από εικόνες (image map, δηλαδή μια εικόνα με διασυνδεδεμένα τεταρτημόρια). Ακόμα, και όταν χρησιμοποιούνται πλαίσια πινάκων είναι δυνατόν να δημιουργηθούν εντυπωσιακές εικόνες. Οι Ετικέτες Της HTML Για Την Συμπλήρωση Εντύπων (FILL OUT FORMS) Έντυπα στον παγκόσμιο ιστό επιτρέπουν στον αναγνώστη να αποστέλλει πληροφορία σ έναν εξυπηρετητή Web για κάποια δράση. Για παράδειγμα, υποθέστε ότι συγκεντρώνετε ονόματα και ηλεκτρονικές διευθύνσεις για να μπορείτε να αποστέλλετε πληροφορίες σε χρήστες που το επιθυμούν. Για κάθε άτομο που εισάγει το όνομα του και τη διεύθυνση του, απαιτείται να αποσταλεί κάποια πληροφορία και τα στοιχεία του αποκρινόμενου να προστεθούν σε μια βάση δεδομένων. Η επεξεργασία της εισερχόμενης πληροφορίας συνήθως γίνεται με ένα πρόγραμμα (script) γραμμένο σε perl ή σε άλλη γλώσσα που διαχειρίζεται κείμενο, αρχεία και γενικά πληροφορία. Εμείς πιο κάτω θα δώσουμε παράδειγμα και θα αναλύσουμε την visual basic script (VBScript). Ο προγραμματισμός εντύπου ακολουθεί τους ίδιους κανόνες όπως και όλες οι άλλες δομές της HTML. Η δυσκολία έγκειται στο πρόγραμμα που παραλαμβάνει την πληροφορία που υποβλήθηκε δια του εντύπου και εκτελεί την περαιτέρω επεξεργασία της πληροφορίας. Όταν η πληροφορία συλλέγεται με την βοήθεια ενός προγράμματος πλοήγησης, αποστέλλεται σ έναν HTTP εξυπηρετητή που είναι εξειδικευμένος στην HTML μορφή. Ο εξυπηρετητής ξεκινά ένα πρόγραμμα και αυτό σε HTML μορφή, που μπορεί να επεξεργαστεί την πληροφορία. Ένα απλό έντυπο Δίνεται ως παράδειγμα ο κώδικας για ένα απλό έντυπο :
< FORM ACTION = example.asp METHOD = POST > < INPUT TYPE = SUBMIT value = Submit Form > < /FORM > Ο κώδικας αυτός παράγει το στοιχειώδες έντυπο : Submit Form Τα στοιχεία και τα χαρακτηριστικά του κώδικα σε συντομία σημαίνουν τα παρακάτω : ACTION : Ποιο πρόγραμμα από τον εξυπηρετητή να κληθεί. METHOD : Πως θα γίνει η επικοινωνία με τον εξυπηρετητή. INPUT : Μια είσοδος στο έντυπο. TYPE = SUBMIT : Καθορίζει τον τύπο της εισόδου. value = Submit Form : Εμφανίζει το περιεχόμενο του κομβίου. Πατώντας το κουμπί (button) θα εμφανιστεί τι θα μεταδοθεί στον εξυπηρετητή. Κάθε στοιχείο ενός εντύπου έχει ένα NAME και μια VALUE. Το NAME παραμένει πάντα το ίδιο και το VALUE αλλάζει για να λαμβάνει την είσοδο του χρήστη. Όταν γίνεται η υποβολή του εντύπου (δηλαδή on Submit) όλα τα ζεύγη name / value αποστέλλονται στον εξυπηρετητή. Είναι δυνατόν πολλές είσοδοι να έχουν το ίδιο όνομα. Τότε πολλαπλές τιμές θα αποσταλούν στον εξυπηρετητή. ΕΤΙΚΕΤΕΣ ΠΟΥ ΧΡΗΣΙΜΟΠΟΙΟΥΝΤΑΙ ΓΙΑ ΤΗΝ ΔΗΜΙΟΥΡΓΙΑ ΕΝΤΥΠΩΝ <FORM> </FORM> Αυτή η ετικέτα περιβάλει ένα τμήμα ενός HTML εγγράφου το οποίο περιλαμβάνει στοιχεία τύπου HTML. Άλλες ετικέτες τύπου BODY μπορεί να υπάρχουν εντός ενός εντύπου και πολλαπλά έντυπα μπορεί να υπάρχουν σ ένα έγγραφο, αλλά όμως τα έντυπα δεν μπορούν να φωλιάζουν το ένα εντός του άλλου. Υπάρχουν δυο σημαντικά χαρακτηριστικά στα έντυπα. Το χαρακτηριστικό ACTION φανερώνει το URL της πύλης της διεργασίας, δηλαδή την θέση του προγράμματος που θα επεξεργαστεί το έντυπο. Το πρόγραμμα αυτό θα δεχτεί τα περιεχόμενα από το έντυπο με ένα από δύο διαθέσιμους τρόπους ανάλογα με την τιμή που έχει προσδιοριστεί στο χαρακτηριστικό METHOD. Το χαρακτηριστικό METHOD μπορεί να λάβει δυο τιμές : GET ή POST. Οι πύλες επικοινωνίας μπορούν να λάβουν τα δεδομένα απ ευθείας όταν η τιμή GET έχει δοθεί στο χαρακτηριστικό METHOD ή να ψάξουν για αυτά σε μια ειδική μεταβλητή εάν χρησιμοποιείται η τιμή POST. Παραδείγματα : <FORM METHOD=GET ACTION= http://edu.lib/cgi-bin/gate > Τα περιεχόμενα του εντύπου αποστέλλονται απ ευθείας στη θύρα gate. <FORM ACTION= http://www.education/cgi-bin/register METHOD=POST> Τα περιεχόμενα του εντύπου τα παραλαμβάνει το πρόγραμμα register. <INPUT> (Χωρίς ετικέτα τέλους). Ορίζει ένα πεδίο εισόδου από όπου ο χρήστης μπορεί να εισάγει πληροφορία στο έντυπο. Κάθε πεδίο εισόδου προσδίδει μια τιμή σε μια μεταβλητή που έχει ένα καθορισμένο όνομα name και ένα καθορισμένο τύπο δεδομένων type. Παρατίθενται τα χαρακτηριστικά και οι πιθανές τιμές τους : 1 ) type = variable type. Το type μπορεί να πάρει εξής τις τιμές (variable types) : text (πεδίο που δέχεται δεδομένα χαρακτήρων), password (πεδίο που δέχεται δεδομένα χαρακτήρων αλλά αυτά δεν εμφανίζονται στην οθόνη επειδή το πεδίο είναι password),
checkbox (είναι πεδίο που είτε επιλέγεται είτε όχι), radio (είναι πεδίο που επιτρέπει επιλογή μόνο μιας από τις σχετιζόμενες τιμές), submit (είναι πεδίο που προσδιορίζει ένα κουμπί (button) που όταν ενεργοποιείται αποστέλλει το συμπληρωμένο έντυπο στον εξυπηρετητή), reset (ορίζει ένα κουμπί (button) που επαναφέρει τις μεταβλητές του εντύπου στις αρχικές τους τιμές), hidden (ορίζει ένα αόρατο πεδίο εισόδου του οποίου η τιμή αποστέλλεται μαζί με τις άλλες τιμές του εντύπου όταν αυτό υποβάλλεται. Χρησιμοποιείται για να μεταβιβαστεί πληροφορία από το ένα έντυπο στο άλλο), image (Ορίζει μια εικόνα εντός ενός εντύπου και επιστρέφει τις συντεταγμένες ενός κλικ του ποντικιού εντός της εικόνας). 2 ) name = textstring. Όπου textstring είναι ένα συμβολικό όνομα (που δεν εμφανίζεται) που αναγνωρίζει την μεταβλητή εισόδου όπως στο παράδειγμα : <input type= checkbox name= box >. 3 ) value = textstring. Όπου η σημασία του textstring εξαρτάται από την τιμή που λαμβάνει το type. Εάν type= text ή type= password, τότε το textstring είναι η αρχική τιμή για την μεταβλητή input. Τιμές για τα συνθηματικά δεν εμφανίζονται στην οθόνη του χρήστη. Οτιδήποτε εισάγεται από τον χρήστη θα αντικαταστήσει την αρχική τιμή που ορίζεται με αυτό το χαρακτηριστικό. Εάν type= checkbox ή type= radio, τότε το textstring είναι η τιμή που θα αποσταλεί στον εξυπηρετητή εάν οι τύποι έχουν επιλεγεί. Εάν type= reset ή type= submit, τότε το textstring είναι ένα όνομα που εμφανίζεται στο αντίστοιχο κουμπί (button) στη θέση των λέξεων submit ή reset. 4 ) checked. Δεν λαμβάνει καμία τιμή. Για τους τύπους type= checkbox και type= radio εάν το checked είναι παρόν τότε το πεδίο εισόδου έχει αρχική τιμή checked. 5 ) size = display_width. Όπου display_width είναι μια ακέραια τιμή που αναπαριστά τον αριθμό των χαρακτήρων στο πεδίο εισόδου των τύπων type= text ή type= password. 6 ) Maxlength = string_length. Είναι ο μέγιστος αριθμός χαρακτήρων που επιτρέπεται στους τύπους type= text ή type= password για τις τιμές των μεταβλητών. Αυτό το χαρακτηριστικό είναι επιτρεπτό για πεδία μιας γραμμής. <SELECT> </SELECT> Ορίζει και παρουσιάζει ένα σύνολο από επιλέξιμα στοιχεία ενός καταλόγου από τα οποία ο χρήστης μπορεί να επιλέξει ένα ή περισσότερα στοιχεία. Για κάθε στοιχείο του καταλόγου απαιτείται η ετικέτα <OPTION>. Δίνονται τα χαρακτηριστικά και οι τιμές τους για την ετικέτα <SELECT>. Name = textstring Όπου textstring είναι το συμβολικό όνομα για το πεδίο της μεταβλητής SELECT. Size = list_length Όπου το list_length είναι μια ακέραια τιμή που παριστάνει τον αριθμό των στοιχείων που διατίθενται για επιλογή και εμφανίζονται σε μια στιγμή. Multiple Εάν είναι παρόν, επιτρέπει την επιλογή περισσοτέρων από μιας τιμές. <OPTION> Εντός της δομής <SELECT> η ετικέτα <option> χρησιμοποιείται για να ορίσει τις πιθανές τιμές για το πεδίο <select>. Εάν το χαρακτηριστικό selected επιλεγεί τότε η τιμή option επιλέγεται εξ αρχής. Στο παρακάτω παράδειγμα και οι τρεις επιλογές είναι επιλέξιμες, όμως η επιλογή Bananas ισχύει εξ αρχής. <select name= catalog multiple> <option> Apples <option selected> Bananas <option> cherries </select>
<TEXTAREA> </TEXTAREA> Ορίζει ένα ορθογώνιο πεδίο όπου ο χρήστης μπορεί να εισάγει δεδομένα κειμένου. Μερικά χαρακτηριστικά και οι τιμές τους δίνονται παρακάτω: Name = textstring textstring είναι ένα συμβολικό όνομα που προσδιορίζει τη δομή <textarea> Rows = num_rows και Cols = num_cols Παριστάνουν τον αριθμό των γραμμών και τον αριθμό των χαρακτήρων που μπορούν να τεθούν και να εμφανίζονται σε κάθε γραμμή.