Σαν HTML Γεγονός εννοούμε μια ενέργεια που κάνει ο χρήστης κατά την διάρκεια της παραμονής του στην ιστοσελίδα μας. Τέτοιες ενέργειες είναι όπως το άνοιγμα (on load) και το κλείσιμο (on unload) ενός εγγράφου, η μετακίνηση του δείκτη του ποντικιού πάνω από (on mouse over) μια εικόνα ή ένα κελί ενός πίνακα, το πάτημα του αριστερού κουμπιού του ποντικιού (on click) επάνω σε ένα στοιχείο της σελίδας μας, η επιλογή ενός στοιχείου μιας Φόρμας (on blur) κτλ.
Χειριστές Γεγονότων
Χειριστές Γεγονότων είναι ιδιότητες των ετικετών που ελέγχουν αν γίνεται κάποια συγκεκριμένη κίνηση πάνω στα στοιχεία που ορίζουν αυτές οι ιδιότητες. Μια τέτοια ιδιότητα είναι η onmouseover (on mouse over) η οποία ελέγχει αν ο δείκτης του ποντικιού του χρήστη περάσει επάνω από το στοιχείο της σελίδας μας.
Όταν πραγματοποιείτε ένα τέτοιο Γεγονός, τότε ενεργοποιείται μια λειτουργία από ένα script γραμμένο σε JavaScript ή σε VBScript ή σε κάποια άλλη γλώσσα script. Το όνομα αυτής της λειτουργίας μπαίνει σαν τιμή στον χειριστή Γεγονότος. Για παράδειγμα αν θέλω κάθε φορά που ο δείκτης του ποντικιού του χρήστη να περνάει πάνω από μια συγκεκριμένη εικόνα να εκτελείτε η JavaScript λειτουργία με όνομα leitourgia1(), τότε θα έγραφα:
Χειριστές γεγονότων μπορούμε να πρόσθέσουμε σχεδόν σε όλα τα HTML στοιχεία (πίνακας, γραμμή ενός πίνακα, κελί ενός πίνακα, σύνδεσμος, στοιχείο φόρμας, παράγραφο κτλ.)
Τα script συνήθως γράφονται στην ενότητα HEAD της σελίδας μέσα στις ετικέτες: <script > ... </script >
//
Ένα παράδειγμα script γραμμένο σε Javascript είναι το παρακάτω:
<script language="Javascript" > < !-- function leitourgia1 () { var temp = 0 document.form1.pedio.value = 10 } //-- > </script>
Φυσικά δεν μπορούμε να παρουσιάσουμε την γλώσσα JavaScript σε αυτό το σημείο. Αυτό που θα παρουσιάσουμε είναι οι χειριστές Γεγονότων της HTML :
<!--> Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη του browser. Μερικοί λόγοι για να χρησιμοποιήσουμε σχόλια μέσα σε ένα html αρχείο είναι να γράψουμε την ημερομηνία που δημιουργήσαμε το αρχείο, ή να γράψουμε το id μιας ετικέτας κάτω απο την ετικέτα τέλους ώστε να βλέπουμε με μια ματιά αν κλείνουν σωστά οι ετικέτες. Ένα σχόλιο αρχίζει με το <!-- και τελειώνει με το -->
<!DOCTYPE> Η ετικέτα <!DOCTYPE> είναι η πρώτη ετικέτα που μπορούμε να χρησιμοποιήσουμε στο έγγραφο μας και γράφεται πριν την ετικέτα <HTML>. Η <!DOCTYPE> λέει στον browser ποιο πρότυπο της HTML ή της XHTML θα χρησιμοποιήσετε στο έγγραφο
<a> Με την ετικέτα <a> δημιουργούμε εναν σύνδεσμο (link) προς μια άλλη σελίδα χρησιμοποιώντας την ιδιότητα href. Οι ιδιότητες hreflang, media, ping, rel, target και type, δεν μπορούν να χρησιμοποιηθούν όταν υπάρχει η ιδιότητα href. Οι πιο σημαντικές ιδιότητες της ετικέτας είναι η href η οποία ορίζει το URL του συνδέσμου και η target η οποία ορίζει που θα ανοίξει το URL (στο ίδιο tab ή σε νέο tab). Ετικέτα τέλους: </a>
<abbr> Η ετικέτα αυτή υποδεικνύει μια συντόμευση, όπως "etc.", "GR", "St.". Χρησιμοποιώντας την ετικέτα <abbr> για να χαρακτηρίσουμε μια λέξη σαν συντόμευση, δίνουμε χρήσιμες πληροφορίες στον browser, στις μηχανές αναζήτησης, σε προγράμματα ελέγχου ορθογραφίας, ή σε κάποιο πρόγραμμα μετάφρασης. Στους περισσότερους browsers, όταν αφήνουμε για λίγο τον δείκτη του ποντικιού μας επάνω στην συντόμευση, εμφανίζεται το περιεχόμενο της ιδιότητας title. Ετικέτα τέλους: </abbr>
<acronym>ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτα <acronym> οριζει ένα ακρώνυμο, όπως "Ο.Τ.Ε.", "Δ.Ε.Η.". Χρησιμοποιώντας την ετικέτα <acronym> για να χαρακτηρίσουμε μια λέξη σαν ένα ακρώνυμο, δίνουμε χρήσιμες πληροφορίες στον browser, στις μηχανές αναζήτησης, σε κάποιο πρόγραμμα ελέγχου ορθογραφίας, ή σε ένα πρόγραμμα μετάφρασης. Στους περισσότερους browsers, όταν αφήνουμε για λίγο τον δείκτη του ποντικιού μας επάνω στο ακρώνυμο εμφανίζεται το περιεχόμενο της ιδιότητας title. Ετικέτα τέλους: </acronym>
<address> Με την ετικέτα <address> ορίζουμε μια ειδική μορφή εμφάνισης. Συνήθως την χρησιμοποιούμε όταν θέλουμε να γράψουμε διευθύνσεις, υπογραφές, πληροφορίες σχετικά με τον συγγραφέα. Συνήθως το κείμενο που είναι γραμμένο μέσα στις ετικέτες <address> και </address> , εμφανίζεται με πλάγιους χαρακτήρες (italics). Οι περισσότεροι browsers αφήνουν κενή γραμμή πριν και μετά το κείμενο που βρίσκεται ανάμεσα στην ετικέτα αρχής και την ετικέτα τέλους. Ετικέτα τέλους: </address>
<applet> ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτα <applet> εισάγει μια εφαρμογή Java. Ετικέτα τέλους: </applet>
<area> Η ετικέτα <area> ορίζει μια περιοχή μέσα σε μια εικόνα ως link. Η ετικέτα <area> τοποθετείται πάντα μέσα στις ετικέτες <map> και </map>
Για να ορίσουμε μια περιοχή μέσα σε μια εικόνα ως link, χρησιμοποιούμε την ιδιότητα usemap της ετικέτας <img> , η οποία αναφέρεται στην ιδιότητα id ή name της ετικέτας <map> .
<article>(HTML5) Η ετικέτα <article> ορίζει ένα εξωτερικό περιεχόμενο. Αυτό μπορεί να είναι ένα κείμενο από ένα blog ή από ένα φόρουμ, ή από μια άλλη ιστοσελίδα. Ετικέτα τέλους: </article>
<aside> (HTML5) Η ετικέτα <aside> εμφανίζει το κείμενο ξεχωριστά του γειτονικού κειμένου. Το περιεχόμενο μέσα στην ετικέτα <aside> πρέπει να είναι σχετικό με το περιεχόμενο στο οποίο βρίσκεται. Το περιεχόμενο του μπορεί να τοποθετηθεί σαν πλάγια μπάρα μέσα σε ένα άρθρο σαν επεξηγηματικό κείμενο Ετικέτα τέλους: </aside>
<audio> (HTML5) Η ετικέτα <audio> ορίζει ήχο, όπως ένα τραγούδι ή ένα audio stream. Μπορούμε να γράψουμε κείμενο μέσα στις ετικέτες αρχής και τέλους, το οποίο εμφανίζεται στους browsers που δεν υποστηρίζουν την ετικέτα αυτή. Ετικέτα τέλους: </audio>
<b> <b> εμφανίζει το κείμενο με έντονη μορφή. Το b είναι το πρώτο γράμμα από την λέξη bold Ετικέτα τέλους: </b>
<base> Με την ετικέτα <base> ορίζουμε το url ενός φακέλου αρχείων ο οποίος αποτελεί την βάση για όλα τα url μέσα στην σελίδα. Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD> του HTML εγγράφου.
<basefont> ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτα <basefont> ορίζει έναν αριθμό βάση του οποίου θα καθορίζουμε το μέγεθος του κείμενου μέσα στο HTML έγγραφο με την ετικέτα <font> . Μπορούμε να την τοποθετούμε είτε στην ενότητα <HEAD> είτε στην ενότητα <BODY> .
<bdo> Η ετικέτα <bdo> χρησιμοποιείται για να αλλάξουμε την κατεύθυνση του κειμένου. Δύο είναι οι κατευθύνσεις του κειμένου. Η default κατεύθυνση είναι η Left-To-Right, οπότε προσθέτουμε αυτήν την ετικέτα μόνο αν θέλουμε να χρησιμοποιήσουμε την κατεύθυνση Right-To-Left. Ετικέτα τέλους: </bdo>
<big> ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτα <big> εμφανίζει το κείμενο με ελαφρώς μεγαλύτερα γράμματα. Ετικέτα τέλους: </big>
<blockquote> Η ετικέτα <blockquote> εμφανίζει το κείμενο αρχίζοντας από δεξιότερη εσοχή απ ότι το υπόλοιπο κείμενο Ετικέτα τέλους: </blockquote>
<body> Η ετικέτα <body> ορίζει το κυρίως περιεχόμενο της HTML σελίδας μέσα στο οποίο γράφουμε το κείμενο που θέλουμε να εμφανιστεί μαζί με τις HTML ετικέτες που το μορφοποιούν. Στην ενότητα αυτή τοποθετούμε επίσης εικόνες, video και ότι άλλο θέλουμε να εμφανιστεί στην σελίδα Ετικέτα τέλους: </body>
<br /> Χρησιμοποιούμε την ετικέτα <br /> όταν θέλουμε να τελειώσουμε μια γραμμή κειμένου και να αρχίσουμε μια καινούργια.
<button> Με την ετικέτα αυτή εισάγουμε ένα κουμπί στην σελίδα μας. Μέσα στις ετικέτες <button> και </button> μπορούμε να προσθέσουμε περιεχόμενο, όπως κείμενο ή εικόνες. Αυτή είναι η διαφορά με το κουμπί που δημιουργείται με την ετικέτα <input> Ετικέτα τέλους: </button>
<canvas> (HTML5) Η ετικέτα <canvas> ορίζει μια ορθογώνια περιοχή στην οποία μπορούμε να σχεδιάσουμε γραφικά, όπως ορθογώνια, κύκλους, χαρακτήρες, αλλά και εξωτερικές εικόνες. Μπορούμε επίσης να εφαρμόσουμε διάφορα εφέ και μεταμορφώσεις στα γραφικά που σχεδιάζουμε. Καλό είναι μεταξύ των ετικετών αρχής και τέλους να γράφουμε ένα περιγραφικό κείμενο, όπως 'Ο browser σας δεν υποστηρίζει την ετικέτα canvas της HTML5', το οποίο θα εμφανίζεται στους browsers που δεν υποστηρίζουν την δυνατότητα αυτή Ετικέτα τέλους: </canvas>
<caption> Με την ετικέτα αυτή τοποθετούμε λεζάντα στον πίνακα μας. Η ετικέτα <caption> τοποθετείται αμέσως μετά την ετικέτα <table> . Μπορούμε να ορίσουμε μόνο μια λεζάντα σε κάθε πίνακα Η λεζάντα τοποθετείται επάνω από τον πίνακα με στοίχιση στο κέντρο Ετικέτα τέλους: </caption>
<center> ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτα <center> εμφανίζει το κείμενο με στοίχιση στο κέντρο της οθόνης Ετικέτα τέλους: </center>
<code> <code> εμφανίζει το κείμενο έτσι ώστε να μοιάζει με κώδικα μιας γλώσσας προγραμματισμού. Ετικέτα τέλους: </code>
<col> Η ετικέτα <col> ορίζει της ιδιότητες μιας στήλης ενός πίνακα. Μπορούμε να χρησιμοποιήσουμε αυτήν την ετικέτα μόνο μέσα στην ετικέτα <table> ...</table> . Η ετικέτα <col> περιέχει μόνο ιδιότητες (ανάμεσα στην ετικέτα αρχής και την ετικέτα τέλους δεν γράφεται τίποτα) Ετικέτα τέλους: </col>
<colgroup> Η ετικέτα <colgroup> ορίζει μια ομάδα στηλών του πίνακα που έχουν τις ίδιες τιμές στις ιδιότητες τους. Μπορούμε να χρησιμοποιήσουμε αυτήν την ετικέτα μόνο μέσα στην ετικέτα <table> ...</table> . Ετικέτα τέλους: </colgroup>
<command> (HTML5) Η ετικέτα <command> ορίζει ένα κουμπί ελέγχου, όπως radio button, checkbox ή κουμπί (button). Το κουμπί ελέγχου πρέπει να είναι μέσα στην ετικέτα <menu> Ετικέτα τέλους: </command>
<datalist> (HTML5) Η ετικέτα <datalist> ορίζει μια λίστα από επιλογές που μπορεί να πάρει ένα πεδίο. Οι επιλογές καθορίζονται με την ετικέτα <option> μέσα στο στοιχείο datalist. Η σύνδεση του στοιχείου datalist με το πεδίο, επιτυγχάνεται έχοντας την ίδια τιμή στην ιδιότητα id της ετικέτας <datalist> και στην ιδιότητα list του πεδίου. Ετικέτα τέλους: </datalist>
<del> Η ετικέτα <del> εμφανίζει το κείμενο διαγραμμένο, δηλαδή με μια γραμμή επάνω από το κείμενο Ετικέτα τέλους: </del>
<details> (HTML5) Με την ετικέτα <details> ορίζουμε επιπλέον πληροφορίες για μια σελίδα ή για τμήματα μιας σελίδας, τις οποίες ο επισκέπτης μπορεί να τις εμφανίζει ή να τις αποκρύπτει. Η ετικέτα <summary> ορίζει επικεφαλίδα για το περιεχόμενο της ετικέτας <details>. Η επικεφαλίδα είναι πάντα ορατή, ενώ το κείμενο που βρίσκεται μέσα στην <details> εμφανίζεται μόνο όταν ο χρήστης πατήσει επάνω στην επικεφαλίδα Ετικέτα τέλους: </details>
<dfn> <dfn> υποδηλώνει έναν όρο Ετικέτα τέλους: </dfn>
<dir>ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Με την ετικέτα <dir> δημιουργούμε λίστα Ετικέτα τέλους: </dir>
<div> Η ετικέτα <div> ορίζει ένα τμήμα στο HTML έγγραφο. Ένα τμήμα ομαδοποιεί τα περιεχόμενα που είναι μέσα στις ετικέτες <div> ...</div> ώστε να μπορούμε να ορίζουμε ένα ενιαίο στυλ (χρώμα, γραμματοσειρά, στοίχιση) με την ιδιότητα style. Συνήθως πριν και μετά το τμήμα div ο browser αφήνει μια γραμμή κενή Ετικέτα τέλους: </div>
<dl> Η ετικέτα <dl> εισάγει μια λίστα ορισμών στην σελίδα μας, Το dl είναι τα δύο πρώτα γράμματα από το Definition List. Ετικέτα τέλους: </dl>
<dt> Η ετικέτα <dt> ορίζει την γραμμή που περιέχει τον όρο σε μια λίστα ορισμών Ετικέτα τέλους: </dt>
<em> <em> εμφανίζει το κείμενο με πλάγιους και κάπως αχνά γραμμένους χαρακτήρες Ετικέτα τέλους: </em>
<embed> (HTML5) Με την ετικέτα <embed> προσθέτει στην σελίδα μια εξωτερική εφαρμογή, όπως ένα plug-in. Ετικέτα τέλους: </embed>
<fieldset> Η ετικέτα <fieldset> δημιουργεί ένα πλαίσιο γύρο από τα περιεχόμενα που βρίσκονται μεταξύ της ετικέτας αρχής και τέλους Ετικέτα τέλους: </fieldset>
<figcaption> (HTML5) Με την ετικέτα <figcaption> ορίζουμε την επικεφαλίδα ενός στοιχείου <figure> και τοποθετείται μέσα σε αυτήν. Ετικέτα τέλους: </figcaption>
<figure> (HTML5) Η ετικέτα <figure> χρησιμοποιείται για να ομαδοποιεί στοιχεία. Το περιεχόμενο μέσα στην ετικέτα αυτή είναι ανεξάρτητο και περιέχει κυρίως περισσότερες πληροφορίες για ένα τμήμα της σελίδας. Με την ετικέτα <figcaption> ορίζουμε επικεφαλίδα για το περιεχόμενο της <figure>
Ετικέτα τέλους: </figure>
<font>ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτα <font> ορίζει το μέγεθος, την γραμματοσειρά και το χρώμα του κειμένου. Eίναι καλό να αποφεύγουμε την χρήση της, σύμφωνα με το πρωτότυπο της HTML. Είναι προτιμότερο να χρησιμοποιούμε στυλ (styles) αντί για την ετικέτα <font> Ετικέτα τέλους: </font>
<form> Με την ετικέτα <form> εισάγουμε φόρμες στην σελίδα μας. Μια φόρμα δίνει την δυνατότητα στον χρήστη να στείλει δεδομένα στον server Ετικέτα τέλους: </form>
<footer> (HTML5) Με την ετικέτα <footer> ορίζουμε το υποσέλιδο μιας σελίδα ή ενός τμήματος της σελίδας. Συνήθως στο υποσέλιδο γράφουμε την copyright πρόταση, το όνομα του συντάκτη ή τα στοιχεία επικοινωνίας Ετικέτα τέλους: </footer>
<frame>ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Με την ετικέτα <frame> εισάγουμε Πλαίσια (frames) στο έγγραφο μας. Η ετικέτα τοποθετείται μέσα στις ετικέτες <frameset> ...</frameset> Ετικέτα τέλους: </frame>
<frameset>ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτα <frameset> εισάγει στην σελίδα μας ένα σετ Πλαισίων. Χρησιμοποιείται για να οργανώνει πολλαπλά Πλαίσια τα οποία κάθε ένα από αυτά είναι ένα ξεχωριστό HTML έγγραφο Ετικέτα τέλους: </frameset>
<h1 ... h6> Οι HTML επικεφαλίδες είναι κείμενο που εμφανίζετε με μεγάλα γράμματα. Οι επικεφαλίδες ορίζονται από τις ετικέτες <h1> , <h2> , <h3> , <h4> , <h5> και <h6> . Με την <h1> ορίζουμε την μεγαλύτερη ετικέτα ενώ με την <h6> την μικρότερη. Ετικέτες τέλους: </h1> , </h2> , </h3> , </h4> , </h5> , </h6>
<head> H ετικέτα <head> ορίζει την κεφαλή της σελίδας. Μέσα στην κεφαλή μπορούμε να προσθέσουμε ετικέτες που παρέχουν πληροφορίες στον browser για την HTML σελίδα, όπως τίτλος σελίδας, συγγραφέας, ημερομηνία δημιουργίας κ.α. Οι παρακάτω ετικέτες τοποθετούνται στην κεφαλή: <base> , <link> , <meta> , <script> , <style> , and <title> . Ο browser δεν εμφανίζει στην οθόνη ότι είναι γραμμένο μέσα στην κεφαλή Ετικέτα τέλους: </head>
<header> (HTML5) Με την ετικέτα <header> ορίζουμε την επικεφαλίδα μιας σελίδας. Το περιεχόμενο μιας επικεφαλίδας είναι συνήθως ένα εισαγωγικό κείμενο Ετικέτα τέλους: </header>
<hgroup> (HTML5) Η ετικέτα <hgroup> ομαδοποιεί ένα σύνολο από επικεφαλίδες για μια σελίδα ή ένα τμήμα. Συχνά βλέπουμε μια επικεφαλίδα και από κάτω από αυτήν μια άλλη επικεφαλίδα με μικρότερα γράμματα για να δηλώσει ότι είναι υποσύνολο ή παιδί της πρώτης. Ετικέτα τέλους: </hgroup>
<hr> Με την ετικέτα <hr> τοποθετούμε μια οριζόντια γραμμή στην σελίδα μας. Η οριζόντια γραμμή είναι ένα απλό γραφικό που μπορούμε να χρησιμοποιήσουμε στην σελίδα μας (κυρίως σαν διαχωριστικό).
<html> Ένα αρχείο HTML αρχίζει πάντα με την ετικέτα <html> Ετικέτες τέλους: </html>
<i> <i> εμφανίζει το κείμενο με πλάγιους χαρακτήρες. Το i είναι το πρώτο γράμμα από την λέξη italics Ετικέτες τέλους: </i>
<iframe> Με την ετικέτα <iframe> εισάγουμε στο έγγραφο μας ένα ένθετο παράθυρο στο οποίο παρουσιάζεται ένα άλλο HTML έγγραφο Ετικέτες τέλους: </iframe>
<img> Με την ετικέτα <img> εισάγουμε μια εικόνα στην σελίδα μας
<input> Με την ετικέτα <input> εισάγουμε ένα πεδίο φόρμας στο οποίο ο χρήστης μπορεί να πληκτρολογήσει δεδομένα
<ins> Η ετικέτα <ins> ορίζει ένα κείμενο σαν προστιθέμενο και το εμφανίζει υπογραμμισμένο Ετικέτα τέλους: </ins>
<hgroup> (HTML5) Η ετικέτα <keygen> τοποθετείται μέσα στην ετικέτα <form>. Σκοπός του της ετικέτας <keygen> είναι να παρέχει ασφαλή τρόπο για να ταυτοποιεί (authenticate) τους χρήστες όταν αυτοί κάνουν login ή signup. Κάθε φορά που γίνεται submit η φόρμα, το keygen δημιουργεί ενός ζευγάρι κλειδιών, ένα ιδιωτικό κλειδί (private) και ένα δημόσιο (public). Το ιδιωτικό κλειδί αποθηκεύεται στον client, ενώ το δημόσιο στέλνεται στον server. Το δημόσιο κλειδί χρησιμοποιείται από τον server σαν χαρακτηριστικό ταυτοποίησης ενός χρήστη.Βέβαια αυτος ο τρόπος ασφάλειας από μόνος του δεν είναι ικανός να αποτρέψει κάποιους hackers να συνδεθούν με έναν λογαριασμό που δεν τους ανήκει, αλλά τουλάχιστον παρέχεται μια ικανοποιητική ασφάλεια, αποφεύγοντας τους νέους hackers. Ετικέτα τέλους: </keygen>
<kbd> Η ετικέτα <kbd> υποδυκνύει το κείμενο που πρέπει να πληκτρολογήσει ο χρήστης Ετικέτα τέλους: </kbd>
<label> Η ετικέτα <label> ορίζει ένα κείμενο για έναν μηχανισμό μιας φόρμας (πχ. ένα κουμπί επιλογής). Αν πατήσουμε μέσα σε αυτό το κείμενο θα ενεργοποιηθεί αυτός ο μηχανισμός. Η ιδιότητα for της ετικέτας αναφέρεται στο id του μηχανισμού Ετικέτα τέλους: </label>
<legend> Η ετικέτα <legend> ορίζει μια λεζάντα για ένα στοιχείο fieldset Ετικέτα τέλους: </legend>
<li> Με την ετικέτα <li> προσθέτουμε γραμμές σε μια λίστα Ετικέτα τέλους: </li>
<link> Με την ετικέτα <link> ορίζουμε την σχέση μεταξύ του τρέχον εγγράφου με ένα εξωτερικό αρχείο φύλλου στυλ. Με αυτόν τον τρόπο μπορούμε να καθορίσουμε ένα ενιαίο στυλ για πολλαπλά HTML έγγραφα. Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD>
<map> Η ετικέτα <map> ορίζει τις περιοχές επάνω σε μια εικόνα που θα είναι σύνδεσμοι (links) Ετικέτα τέλους: </map>
<mark> (HTML5) Η ετικέτα <mark> ορίζει ένα τονισμένο (highlighted) κείμενο Ετικέτα τέλους: </mark>
<menu> Με την ετικέτα <menu> προσθέτουμε μενού στην σελίδα μας. Η χρήση της ετικέτας αυτής δεν συνιστάται από το πρότυπο της HTML. Γι αυτό καλύτερα να την αποφεύγουμε στις σελίδες που σχεδιάζουμε. Μάθε πώς να εισάγεις Λίστες στην σελίδα σου Ετικέτα τέλους: </menu>
<meta> Η ετικέτα <meta> περιέχει μετα-πληροφορίες (meta-information) για το HTML έγγραφο όπως ο συγγραφέας, η περιγραφή του εγγράφου, λέξεις κλειδιά που διαβάζονται από τις μηχανές αναζήτησης κτλ. Η ύπαρξη των meta-information είναι μια πρακτική απο μια σειρά πρακτικών για να γίνει μια ιστοσελίδα περισσότερο φιλική στις μηχανές αναζήτησης, δηλαδή βοηθάει να βρίσκεται μια ιστοσελίδα όσο πιο ψηλά γίνεται στα αποτελέσματα των μηχανών αναζήτησης.Η ετικέτα <meta> γράφεται μέσα στην ενότητα <HEAD>
<meter> (HTML5) Η ετικέτα <meter> χρησιμοποιείται για να δείξουμε την κλίμακα μέτρησης ενός μεγέθους που αναφερόμαστε. Χρησιμοποιείται μόνο όταν γνωρίζουμε την μικρότερη και την μεγαλύτερη τιμή που μπορεί να πάρει το μέγεθος στο οποίο αναφερόμαστε Ετικέτα τέλους: </meter>
<nav> (HTML5) Η ετικέτα <nav> ορίζει μια περιοχή που περιέχει μενού πλοήγησης (navigation menu). Σηνύθως τοποθετούμε τα κουμπιά Προηγούμενο και Επόμενο μέσα στην ετικέτα αυτή Ετικέτα τέλους: </nav>
<noframes>ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Με την ετικέτα <noframes> εμφανίζουμε κείμενο όταν ο browser του χρήστη δεν υποστηρίζει πλαίσια (frames). Συνήθως τα περιεχόμενα που γράφονται μέσα στις ετικέτες <noframes> ...</noframes> είναι η σελίδα μας χωρίς την χρήση πλαισίων. Μερικοί άλλοι web designers απλά τοποθετούν ένα απλό κείμενο που ενημερώνει τον χρήστη ότι ο browser που χρησιμοποιεί δεν υποστηρίζει πλαίσια και γι αυτό δεν μπορεί να δει την σελίδα. Ετικέτα τέλους: </noframes>
<noscript> Με την ετικέτα <noscript> εμφανίζουμε κείμενο όταν ο browser του χρήστη δεν υποστηρίζει scripts (Javascripts, VBscripts κτλ.). Ετικέτα τέλους: </noscript>
<object> Η ετικέτα <object> ορίζει αντικείμενα, όπως εικόνες, audio, βίντεο, Java applets, ActiveX, PDF και Flash. Μπορούμε να προσθέσουμε audio και βίντεο πιο εύκολα με τις νέες ετικέτες <audio> και <video> αντίστοιχα. Το κείμενο μεταξύ της ετικέτας αρχής και τέλους εμφανίζεται όταν o browser του χρήστη δεν υποστηρίζει την ετικέτα <object> Ετικέτα τέλους: </object>
<ol> Η ετικέτα <ol> εισάγει μια αριθμημένη λίστα στην σελίδα μας. Το ol είναι τα δύο πρώτα γράμματα από το Ordered List. Ετικέτα τέλους: </ol>
<optgroup> Η ετικέτα <optgroup> ομαδοποιεί επιλογές στις λίστες επιλογών Ετικέτα τέλους: </optgroup>
<option> Η ετικέτα <option> τοποθετείται μέσα στις ετικέτες <select> και </select> και αντιστοιχεί σε μια επιλογή της λίστας. Ετικέτα τέλους: </option>
<output> (HTML5) Η ετικέτα <output> γράφεται μέσα στην <form> και χρησιμοποιείται για να εμφανίζει διάφορων τύπων αποτελέσματα όπως αποτελέσματα από scripts. Ετικέτα τέλους: </output>
<p> Η ετικέτα <p> ομαδοποιεί το κείμενο σε μια παράγραφο, αφήνοντας αυτόματα μια κενή γραμμή πριν την αρχή της παραγράφου και μια μετα το τέλος αυτής. Καλό είναι να αποφεύγουμε να χρησιμοποιούμε την ετικέτα αυτή όταν μπορούμε να ομαδοποιείσουμε το κείμενο με άλλες ετικέτες Ετικέτα τέλους: </p>
<param> Με την ετικέτα <param> θέτουμε παραμέτρους για ένα αντικείμενο (object). Η ετικέτα αυτή γράφεται πάντα μεσα στην ετικέτα <object>
<pre> Η ετικέτα <pre> εμφανίζει το κείμενο σαν προ-μορφοποιημένο. Δηλαδή το κείμενο μαζί με τις κενές γραμμές τα κενά μεταξύ των λέξεων που γράφουμε μέσα στις ετικέτες <pre> και </pre> θα εμφανιστούν ακριβώς όπως τα γράψαμε Ετικέτα τέλους: </pre>
<progress> (HTML5) Μέσα στην ετικέτα <progress> γράφουμε το ποσοστο προόδου μιας διαδικασίας (όπως η ολοκλήρωση της φόρτωσης της σελίδας στον browser). Ετικέτα τέλους: </progress>
<q> Η ετικέτα <q> ορίζει ένα κείμενο σαν σύντομο απόσπασμα (quote) χωρίς όμως να αλλάζει παράγραφό όπως γίνεται με την ετικέτα <blockquote>. Το κείμενο γράφεται μέσα σε εισαγωγικά Ετικέτα τέλους: </q>
<rp> (HTML5) Η ετικέτα <rp> αυτή χρησιμοποιείται όταν ορίζουμε μια επεξήγηση η οποία εμφανίζεται στους browsers που δεν υποστηρίζουν τους Κινέζικους χαρακτήρες. Τοποθετείται μέσα στην ετικέτα <ruby> και συνεργάζεται με την ετικέτα <rt> η οποία περιέχει την επεξήγηση Ετικέτα τέλους: </rp>
<rt> (HTML5) Η ετικέτα <rp> χρησιμοποιείται όταν ορίζουμε μια επεξήγηση η οποία εμφανίζεται στους browsers που δεν υποστηρίζουν τους Κινέζικους χαρακτήρες. Τοποθετείται μέσα στην ετικέτα <ruby> και συνεργάζεται με την ετικέτα <rp>. Ετικέτα τέλους: </rt>
<ruby> (HTML5) Η ετικέτα <ruby> χρησιμοποιείται όταν ορίζουμε μια επεξήγηση η οποία εμφανίζεται στους browsers που δεν υποστηρίζουν τους Κινέζικους χαρακτήρες. Συνεργάζεται με τις ετικέτες <rp> και <rt> Ετικέτα τέλους: </ruby>
<s>ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτες <s> εμφανίζουν το κείμενο σαν διαγραμμένο. Σύμφωνα με το πρότυπο της HTML την ετικέτα αυτή είναι καλό να την αποφεύγουμε Ετικέτες τέλους: </s>
<samp> Η ετικέτα <samp> Προσδιορίζει το αποτέλεσμα ενός κώδικα Ετικέτες τέλους: </samp>
<script> Με την ετικέτα <script> εισάγουμε κώδικα script στις σελίδες, όπως η JavaScript. Έχουμε επίσης την δυνατότητα να εισάγουμε κώδικα script απο εξωτερικό αρχείο, με την χρήση της ιδιότητας src της ετικετας Ετικέτα τέλους: </script>
<section> (HTML5) Η ετικέτα <section> ορίζει ένα τμήμα μέσα σε μια σελίδα, όπως επικεφαλίδες, υποσέλιδα, ενότητες ή οποιοδήποτε άλλο τμήμα μέσα σε μια σελίδα. Ετικέτα τέλους: </section>
<select> Με την ετικέτα <select> εισάγουμε Λίστες Επιλογών στην σελίδα μας Ετικέτα τέλους: </select>
<small> Η ετικέτα <small> εμφανίζει το κείμενο με μικρούς χαρακτήρες Ετικέτα τέλους: </small>
<source> (HTML5) Η ετικέτα <source> προσθέσει πολλαπλά media, είτε βίντεο, είτε ήχους. Τοποθετείται μέσα στις ετικέτες <audio> και <video> Ετικέτα τέλους: </source>
<span> Με την ετικέτα <span> ομαδοποιούμε κείμενο για να ορίσουμε κοινό στυλ Ετικέτα τέλους: </span>
<strike>ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτες <strike> εμφανίζουν το κείμενο σαν διαγραμμένο. Σύμφωνα με το πρότυπο της HTML την ετικέτα αυτή είναι καλό να την αποφεύγουμε Ετικέτες τέλους: </strike>
<strong> Η ετικέτα <strong> εμφανίζει το κείμενο με έντονη μορφή. Ετικέτες τέλους: </strong>
<style> Η ετικέτα <style> ορίζει ένα στυλ για την σελίδα μας. Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD> Ετικέτα τέλους: </style>
<sub> Η ετικέτα <sub> τοποθετεί το κείμενο σαν μαθηματική βάση, δηλαδή σε χαμηλότερο σημείο απ ότι βρίσκεται το υπόλοιπο κείμενο. Ετικέτες τέλους: </sub>
<summary> (HTML5) Η ετικέτα <summary> ορίζει μια επικεφαλίδα για το περιεχόμενο της ετικέτας <details>. Η επικεφαλίδα είναι πάντα ορατή, ενώ το περιεχόμενο της ετικέτας <details> εμφανίζεται όταν ο χρήστης πατάει στην επικεφαλίδα. Η ετικέτα <summary> τοποθετείται ΠΑΝΤΑ ΠΡΩΤΗ μέσα στην <details>. Ετικέτα τέλους: </summary>
<sup> Η ετικέτα <sup> τοποθετεί το κείμενο σαν μαθηματικό εκθέτη, δηλαδή σε ψηλότερο σημείο απ ότι βρίσκεται το υπόλοιπο κείμενο. Ετικέτες τέλους: </sup>
<table> Με την ετικέτα <table> εισάγουμε έναν πίνακα στην σελίδα μας. Ετικέτα τέλους: </table>
<tbody> Με την ετικέτα <tbody> ορίζουμε τις γραμμές που βρίσκονται μέσα στις ετικέτες <tbody> και </tbody> ως το κυρίως περιεχόμενο του πίνακα. Ετικέτα τέλους: </tbody>
<td> Με την ετικέτα <td> ορίζουμε ένα κελί στην γραμμή ενός πίνακα. Με την ετικέτα <th> ορίζουμε κελιά-επικεφαλίδες σε έναν πίνακα Ετικέτα τέλους: </td>
<textarea> Με την ετικέτα <textarea> εισάγουμε Περιοχή Κειμένου στην Φόρμα μας. Στην Περιοχή Κειμένου ο επισκέπτης μπορεί να γράψει κείμενο χωρίς περιορισμό στον αριθμό των χαρακτήρων Ετικέτα τέλους: </textarea>
<tfoot> Με την ετικέτα <tfoot> ορίζουμε τις γραμμές που βρίσκονται μέσα στις ετικέτες <tfoot> και </tfoot> ως το υποσέλιδο του πίνακα. Ετικέτα τέλους: </tfoot>
<th> Με την ετικέτα <th> ορίζουμε επικεφαλίδες στον πίνακα σε ένα πίνακα. Το κείμενο που βρίσκετε μέσα στις ετικέτες <th> και </th> εμφανίζεται με bold χαρακτήρες Ετικέτα τέλους: </th>
<thead> Με την ετικέτα <thead> ορίζουμε τις γραμμές που βρίσκονται μέσα στις ετικέτες <thead> και </thead> ως επικεφαλίδες του πίνακα. Ετικέτα τέλους: </thead>
<time>(HTML5) Η ετικέτα <time> ορίζει μια ημερομηνία ή μια ώρα ή και τα δύο. Ετικέτα τέλους: </time>
<title> Η ετικέτα <title> ορίζει τον τίτλο μιας HTML Σελίδας. Η ετικέτα αυτή τοποθετείται στην ενότητα HEAD Ετικέτα τέλους: </title>
<tr> Με την ετικέτα <tr> ορίζουμε μια γραμμή του πίνακα. Μια γραμμή του πίνακα περιέχει πολλά κελιά Ετικέτα τέλους: </tr>
<tt>ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτα <tt> εμφανίζει το κείμενο σαν κείμενο από τηλέτυπο Ετικέτα τέλους: </tt>
<u>ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Η ετικέτα <u> εμφανίζει το κείμενο υπογραμμισμένο. Eίναι προτιμότερο να αποφεύγουμε την χρήση της, σύμφωνα με το πρωτότυπο της HTML Ετικέτα τέλους: </u>
<ul> Η ετικέτα <ul> εισάγει μια μη αριθμημένη Λίστα στην σελίδα μας Ετικέτα τέλους: </ul>
<var> Η ετικέτα <var> μια μεταβλητή του κώδικα μιας γλώσσας προγραμματισμού Ετικέτα τέλους: </var>
<video>(HTML5) Η ετικέτα <video> εισάγει στην σελίδα ένα βίντεο. Ετικέτα τέλους: </video>
<wbr>(HTML5) Η ετικέτα <wbr> δείχνει στον browser σε ποια σημεία μπορεί να συνεχίσει στην επόμενη γραμμή, όταν η λέξη δεν χωράει στο σημείο που εμφανίζεται. Χρησιμοποιείται για μεγάλες λέξεις. Ετικέτα τέλους: </wbr>
Πληκτρολογώντας ένα URL (ή αλλιώς Διεύθυνση) στον browser μπορούμε να έχουμε πρόσβαση στο αρχείο που αυτό "δείχνει" στο Internet. Στο παράδειγμα της παραπάνω εικόνας, πατώντας το enter, θα έχουμε πρόσβαση στο αρχείο index.html το οποίο βρίσκεται στην διαδρομή mathimata/html/ του server ο οποίος φιλοξενεί τα αρχεία του Domain Name wlearn.gr
Στον κώδικα HTML, χρησιμοποιούμε URLs για να "δείξουμε", μέσα από ένα html έγγραφο, ένα άλλο html έγγραφο ή άλλη μορφή αρχείου, όπως εικόνες, ήχους, αρχεία pdf κτλ. που βρίσκονται μέσα στο Internet. Σε έναν σύνδεσμο <a>, για παράδειγμα, τοποθετούμε στην ιδιότητα href το URL που θέλουμε να δείχνει ο σύνδεσμος : <a href="http://www.wlearn.gr/index.php">WLearn home page</a> Διαβάστε περισσότερα για τους Συνδέσμους
Σε μια εικόνα <img>, τοποθετούμε στην ιδιότητα src το URL το οποίο δείχνει την τοποθεσία που βρίσκεται η εικόνα: <img xsrc="http://www.wlearn.gr/images/logo.jpg" /> Διαβάστε περισσότερα για τις Εικόνες
Τα μέρη ενός URL
Μια πλήρη Διεύθυνση έχει την παρακάτω σύνταξη: πρωτόκολλο://host.domain:port/διαδρομή/όνομα αρχείου
Πρωτόκολλο: ορίζει το πρωτόκολλο μεταφοράς του αρχείου. Το πιο συνηθισμένο είναι το http (Hyper Text Transfer Protocol ).
Host: το καθορισμένο host για το πρωτόκολλο http είναι το www.
Domain: ορίζει το όνομα του Domain Name, πχ. wlearn.gr, in.gr, disabled.gr
Port: ορίζει τον αριθμό της πόρτας του server από τον οποίον διαβάζουμε το αρχείο. Συνήθως παραλείπεται από το URL. Η προκαθορισμένη πόρτα για το πρωτόκολλο http είναι η 80.
Διαδρομή: ορίζει την διαδρομή που βρίσκεται το αρχείο στον server. Όταν παραλείπουμε την διαδρομή, τότε το αρχείο πρέπει να είναι στο root directory του website (πχ. http://www.wlearn.gr/index.html, το αρχείο index.html βρίσκεται στο root directory του server).
Όνομα αρχείου: ορίζει το όνομα αρχείου. Σε περίπτωση που αυτό λείπει (πχ. http://www.wlearn.gr), τότε ο browser ψάχνει για τα αρχεία index.asp ή index.php ή index.html (ανάλογα με τις ρυθμίσεις του server).
Στην διευθύνση http://www.wlearn.gr:80/mathimata/html/urls.html, το http είναι το πρωτόκολλο μεταφοράς του αρχείου urls.html στον client, το www είναι το host, το wlearn.gr είναι το Domain Name, το :80 είναι η πόρτα του server από όπου θα συνδεθεί ο client ώστε να διαβάσει το αρχείο urls.html, το mathimata/html/ είναι η διαδρομή του αρχείου στον server και το urls.html είναι το αρχείο που θα διαβάσει ο browser του client
Πρωτόκολλα μεταφοράς αρχείων
Πρωτόκολλα
Περιγραφή
gopher
όταν πρόκειται για αρχείο απο έναν gopher server
file
όταν πρόκειται για αρχείο στον τοπικό δίσκο του υπολογιστή μας
ftp
όταν πρόκειται για αρχείο από έναν ftp server
http
όταν πρόκειται για αρχείο από έναν World Wide Web server
news
όταν πρόκειται για newsgroup
telnet
όταν πρόκειται σύνδεση telnet
WAIS
όταν πρόκειται για αρχείο από έναν WAIS server
Παραδείγματα συνδέσμων για διάφορα πρωτόκολλα επικοινωνίας
Η ετικέτα <base> του τμήματος head μιας σελίδας HTML, ορίζει ένα URL βάση του οποίου σχηματίζονται όλα τα υπόλοιπα URLs μέσα στην σελίδα αυτή. Πχ. αν σε μια σελίδα html ορίσουμε την ετικέτα <base> όπως παρακάτω:
Η ετικέτα base
<base href="http://www.wlearn.gr/index.php" />
τότε όλες οι διευθύνσεις που ορίζονται στους συνδέσμους, τις εικόνες, τα scripts κτλ. της σελίδας αυτής, θα σχηματηστούν με το πρόθεμα http://www.wlearn.gr/. Έτσι, για παράδειγμα, ο σύνδεσμος <a xhref="mathimata/index.html"> θα μας πηγαίνει στην διεύθυνση http://www.wlearn.gr/mathimata/index.html
Παράδειγμα χρήσης της ετικέτας <base>
<html> <head> <title>Η χρήση της ετικέτας base</title> <base href="http://www.wlearn.gr/index.php" /> <meta content="text/html; charset=iso-8859-7" />
Στο τμήμα HEAD του παραπάνω HTML κώδικα έχουμε προσθέσει την ετικέτα <base> ορίζοντας το URL http://www.wlearn.gr/index.php βάση του οποίου θα σχηματιστούν όλα τα URLs του κώδικα αυτού.
Έτσι στην ετικέτα : <link xhref="css/wlearn.css" rel="stylesheet" type="text/css" /> το URL από το οποίο θα "διαβάζει" τα στυλ που βρίσκονται στο αρχείο wlearn.css , είναι το http://www.wlearn.gr/css/wlearn.css
Στην ετικέτα: <script src="http://www.wlearn.gr/scripts/myscript.js"> το URL θα παραμείνει ως έχει γιατί η διεύθυνση είναι απόλυτη και όχι σχετική καθώς περιέχει το "http://"
Στην ετικέτα : <img src="images/papagalos.jpg" /> το URL από το οποίο ο browser θα "διαβάσει" και θα εμφανίσει την εικόνα papagalos.jpg είναι το http://www.wlearn.gr/images/papagalos.jpg
Στην ετικέτα: <a href="index.html">Link προς την Κεντρική Σελίδα</a> το URL στο οποίο θα δείχνει ο link αυτός είναι το http://www.wlearn.gr/index.html
Στην ετικέτα : <a href="downloads/index.html">Downloads</a> το URL στο οποίο θα δείχνει ο link αυτός είναι το http://www.wlearn.gr/downloads/index.html
Στην ετικέτα : <form action="form_action.asp" method="get"> το URL του script form _ action.asp από το οποίο θα "διαβάσει" η φόρμα μετά την υποβολή της είναι το http://www.wlearn.gr/form_action.asp
Συμβουλή: Είναι καλό να χρησιμοποιούμε σε κάθε μας σελίδα την ετικέτα <base> γιατί αν θελήσουμε να αλλάξουμε domain name ή το όνομα του φακέλου που βρίσκονται τα αρχεία του site μας, δεν θα είμαστε αναγκασμένοι να αλλάξουμε όλα τα url μέσα στις σελίδες μας, αλλά μόνο το url της ιδιότητας href της ετικέτας <base> που βρίσκεται στην ενότητα <head> κάθε HTML σελίδας μας
Απόλυτες και Σχετικές Διευθύνσεις
Μια Απόλυτη Διεύθυνση (Absolute URL) χρησιμοποιούμε όταν θέλουμε να δείξουμε ένα έγγραφο το οποίο δεν είναι σχετικό με το τρέχον έγγραφο (δηλαδή με το έγγραφο στο οποίο βρίσκεται η Διεύθυνση). Απόλυτες διευθύνσεις χρησιμοποιούμε κυρίως όταν θέλουμε να προσθέσουμε στο html έγγραφο μας έναν σύνδεσμο προς ένα άλλο Web Site.
Αν και ο κύριος σκοπός μιας ιστοσελίδας είναι η δημοσίευση πληροφοριών στο Internet, δεν είναι ο μοναδικός. Όλο και περισσότερα sites χρησιμοποιούν την αμφίδρομη επικοινωνία, δηλαδή δεν παρέχουν απλά πληροφορίες προς τους επισκέπτες, αλλά ζητούν από αυτούς να επιλέγουν ή να πληκτρολογούν στοιχεία. Για παράδειγμα, πολλά sites περιέχουν polls τα οποία παρουσιάζουν μια ερώτηση και ζητούν από τον επισκέπτη να επιλέξει μια από τις απαντήσεις. Στην περίπτωση αυτή έχουμε αμφίδρομη επικοινωνία, καθώς η ροή της πληροφορίας δεν γίνετε μόνο από τον Server που φιλοξενεί την ιστοσελίδα προς τον επισκέπτη αλλά και το αντίθετο.
Οι Φόρμες μας δίνουν την δυνατότητα να μετασχηματίσουμε την ιστοσελίδα μας από μια μάζα πληροφοριών που ο επισκέπτης διαβάζει παθητικά σε μια αμφίδρομη επικοινωνία όπου έχει έναν πιο ενεργητικό ρόλο πληκτρολογώντας στοιχεία ή κάνοντας κλικ με το ποντίκι του σε διάφορες επιλογές.
Στην παραπάνω Φόρμα ο επισκέπτης, αφού συμπληρώσει τα πεδία πατάει το κουμπί Με το πάτημα του κουμπιού τα δεδομένα που συμπλήρωσε ο επισκέπτης στέλνονται στον Server μέσω του πρωτοκόλλου HTTP. Έπειτα ο Server επεξεργάζεται με κάποιο πρόγραμμα script τις τιμές των πεδίων και επιστρέφει στον browser του επισκέπτη μια HTML σελίδα. Τα περιεχόμενα της σελίδας αυτής μπορεί να είναι οτιδήποτε, από μια απλή απάντηση μέχρι επιστροφή αποτελέσματος σε ερώτηση προς μια περίπλοκη Βάση Δεδομένων.
Δοκιμάστε να συμπληρώσετε τα στοιχεία που ζητάει η Φόρμα και έπειτα να πατήσετε το κουμπί Αποστολή Στοιχείων. Με το πάτημα του κουμπιού τα δεδομένα που πληκτρολογήσατε στέλνονται στον Server όπου εισάγονται μέσα σε ένα αρχείο script. Το script αυτό (serverSideScript.php, το οποίο είναι γραμμένο σε γλώσσα PHP) παίρνει αυτά τα δεδομένα και τα εμφανίζει μέσα σε έναν πίνακα. Στην περίπτωση αυτή δεν γίνεται καμια επεξεργασία των δεδομένων. Το μόνο που κάνει το script εδώ είναι να παίρνει τα δεδομένα από τον browser σας και τα εμφανίζει μέσα σε έναν πίνακα
Τα στοιχεία μιας Φόρμας
Παρακάτω παρουσιάζονται τα στοιχεία μιας Φόρμας
Λεζάντα των στοιχείων μιας Φόρμας
Όλα τα στοιχεία μιας Φόρμας, είτε αυτά είναι πεδία κειμένου, είτε είναι περιοχές κειμένου, είτε είναι κουμπιά επιλογών κ.ο.κ., έχουν σχεδιαστεί να δέχονται με συγκεκριμένο τρόπο (είτε με πληκτρολόγηση, είτε με επιλογή με το ποντίκι) συγκεκριμένες (σημασιολογικά) τιμές οι οποίες θα επεξεργαστούν από κάποιο script αρχείο.
Για τον λόγο αυτόν κάθε στοιχείο μιας φόρμας θα πρέπει να έχει ένα κείμενο (δίπλα του ή σε οποιοδήποτε άλλο σημείο ώστε να είναι εμφανή η αντιστοιχία του με το στοιχείο της Φόρμας) το οποίο κείμενο να προσδίδει έναν χαρακτηρισμό στο στοιχείο της Φόρμας (π.χ.: όνομα, επώνυμο, τηλέφωνο κ.ο.κ.) ώστε ο επισκέπτης της σελίδας να ξέρει ποια πληροφορία ζητά το στοιχείο αυτό. Για παράδειγμα στην Φόρμα που παρουσιάζεται στην αρχή αυτής της σελίδας, το πεδίο κειμένου το οποίο δέχεται το επώνυμο χαρακτηρίζεται από το κείμενο Επώνυμο. Το κείμενο αυτό ονομάζεται Λεζάντα του πεδίου κειμένου που δέχεται το επώνυμο.
Με λίγα λόγια η Λεζάντα ενός στοιχείου της Φόρμας είναι το κείμενο που χαρακτηρίζει το περιεχόμενο του πεδίου που πρέπει να πληκτρολογήσει ή να επιλέξει ο επισκέπτης. Το κείμενο αυτό μπορούμε βέβαια να το μορφοποιήσουμε με HTML ετικέτες.
Η ετικέτα <form>
Για να δημιουργήσουμε μια φόρμα χρησιμοποιούμε τις ετικέτες <form> και </form>. Οι κυριότερες ιδιότητες της ετικέτας είναι οι name, method και action.
Με την ιδιότητα name δίνουμε ένα όνομα στην φόρμα ώστε να μπορούμε να αναφερόμαστε σε αυτή μέσα από τον κώδικα ενός script. Καλό είναι πάντα να δίνουμε όνομα στις Φόρμες που κατασκευάζουμε, ιδιαίτερα στις περιπτώσεις που έχουμε περισσότερες από μια Φόρμες στην ίδια σελίδα.
Η ιδιότητα action περιέχει το URL του αρχείου script στον Server το οποίο θα επεξεργαστεί τα στοιχεία της Φόρμας. Το script είναι ένα πρόγραμμα το οποίο τρέχει στον Server και το οποίο μεταξύ των άλλων μπορεί να δέχεται σαν είσοδο δεδομένα τα οποία λαμβάνει ο Server από τον browser του επισκέπτη (συνήθως από μια Φόρμα). Το script , χρησιμοποιώντας μια script γλώσσα προγραμματισμού (π.χ. asp , php κτλ.) , επεξεργάζεται τα δεδομένα αυτά και έπειτα επιστρέφει στον browser μια HTML σελίδα. Η επεξεργασία αυτή μπορεί να είναι από απλές πράξεις μεταξύ των δεδομένων έως και αναζήτηση σε μια περίπλοκη Βάση Δεδομένων με βάση τα δεδομένα αυτά (ένα τέτοιο script περιέχει κατάλληλες εντολές ώστε να συνδεθεί σε μια Βάση Δεδομένων και να προσπελάσει αλλα και να προσθέσει και να διαγράψει εγγραφές)
Η method καθορίζει τον τρόπο με τον οποίο στέλνονται τα δεδομένα της Φόρμας στον Server που βρίσκεται το πρόγραμμα script που θα τα επεξεργαστεί και μπορεί να πάρει τις τιμές get ή post. Με την μέθοδο get τα δεδομένα προσθέτονται στο τέλος του URL που "δείχνει" η ιδιότητα action και χωρίζονται από το σύμβολο &. Με την μέθοδο post τα δεδομένα στέλνονται ξεχωριστά από το URL . Στην περίπτωση post το αρχείο script παίρνει τα δεδομένα της Φόρμας μέσω της στάνταρ εισόδου. Παρακάτω η ιδιότητα method αναφέρεται πιο αναλυτικά.
Μέσα στα όρια των ετικετών <form> και </form> εκτός απο τα στοιχεία της Φόρμας μπορούμε επίσης να προσθέσουμε κείμενο (συνήθως Λεζάντες των στοιχείων) μαζί με ετικέτες μορφοποίησης
Με την ετικέτα <input> εισάγουμε τα περισσότερα στοιχεία της φόρμας. Οι κυριότερες ιδιότητες της ετικέτας είναι η type η οποία καθορίζει τον τύπο του στοιχείου της Φόρμας (Πεδίο Κειμένου ή Περιοχή Κειμένου ή Κουμπί Επιλογών ή Κουτί Πολλαπλών Επιλογών ή Κουμπί), η name με την οποία δίνουμε ένα μοναδικό όνομα στο στοιχείο της φόρμας (δεν πρέπει να υπάρχουν στοιχεία φόρμας με τα ίδια ονόματα) και η value με την οποία δίνουμε μια αρχική τιμή στο στοιχείο της φόρμας. Η ετικέτα <input> δεν έχει ετικέτα τέλους
Για να εισάγουμε ένα Πεδίο Κειμένου χρησιμοποιούμε την ετικέτα <input> ορίζοντας την τιμή text στην ιδιότητα type.
Η χρήση της ιδιότητας value σε αυτήν την περίπτωση εμφανίζει μέσα στο πλαίσιο κειμένου την τιμή της ιδιότητας. Μια άλλη ιδιότητα που μπορεί να πάρει η ετικέτα <input> είναι η size η οποία καθορίζει τον αριθμό των ορατών χαρακτήρων που μπορεί να χωρέσει το Πεδίο Κειμένου. Η ιδιότητα maxlength καθορίζει τον αριθμό χαρακτήρων που μπορεί να πληκτρολογήσει ο επισκέπτης.
Την λεζάντα του πεδίου κειμένου (Όνομα) μπορούμε να την διαμορφώσουμε όπως εμείς θέλουμε προσθέτοντας HTML ετικέτες. Για παράδειγμα :
Εισαγωγή πεδίου κειμένου σε μια φόρμα
<form name="form1" method="post" action="example1.php"> <em>Όνομα:</em> <input type="text" name="pedio_keimenou" value="Πληκτρολογήστε το όνομα σας εδώ" size="35" maxlength="30" />
Πολλές φορές κατά την πλοήγηση μας στο Internet χρειάζεται να πληκτρολογήσουμε ένα Username και κάποιον κωδικό μέσα σε ένα πεδίο κειμένου για να εισέλθουμε σε κάποια ελεγχόμενη περιοχή, όπως Forums , Chats , Web emails κτλ. Όταν γράφουμε μέσα στην περιοχή κειμένου του Password εμφανίζονται ή αστεράκια ή βουλίτσες, ανάλογα τον browser που χρησιμοποιούμε. Για να εισάγουμε στην δική μας Φόρμα ένα τέτοιο πεδίο στο οποίο όταν ο επισκέπτης της σελίδας μας πληκτρολογεί μέσα σε αυτό, να εμφανίζονται βουλίτσες ή αστεράκια απλά βάζουμε την τιμή password στην ιδιότητα type της ετικέτας <input>. Η ιδιότητες size και maxlength μπορούν να χρησιμοποιηθούν όπως και στην περίπτωση του απλού Πεδίου Κειμένου
Πώς εισάγουμε Κουμπιά Επιλογών (radio buttons) στην Φόρμα μας ;
Για να εισάγουμε κουμπιά επιλογής χρησιμοποιούμε την ετικέτα <input> ορίζοντας την τιμή radio στην ιδιότητα type.
Η ιδιότητα name εκτός από το να δίνει ένα όνομα στα κουμπιά επιλογής, εδώ παίζει και τον ρόλο της ομαδοποίησης. Δηλαδή ομαδοποιεί τα κουμπιά επιλογής (ορίζοντας στην ιδιότητα name την ίδια τιμή) έτσι ώστε μόνο ένα από αυτά να μπορεί να επιλέγεται από τον χρήστη. Στο παράδειγμα της φόρμας συμπλήρωσης στοιχείων που βρίσκεται στην αρχή της ενότητας, αν στο Φύλο επιλέξουμε Γυναίκα τότε παύει να είναι επιλεγμένο το κουμπί που αναφέρετε στην επιλογή Ανδρας. Αν τα δύο αυτά κουμπιά επιλογής είχαν διαφορετική τιμή στην ιδιότητα name τότε η Φόρμα θα μας επέτρεπε να είχαμε και τις δύο επιλογές επιλεγμένες (Ανδρας, Γυναίκα).
Η διότητα value ορίζει την τιμή που θα στείλει η φόρμα στον Server αφού πατήσουμε το κουμπί αποστολής. Σύμφωνα με τον κώδικα HTML που βρίσκεται πιο πάνω, εάν ο επισκέπτης επιλέξει την επιλογή Ανδρας τότε στον Server θα σταλεί η τιμή "male" , ενώ αν επιλέξει Γυναίκα θα σταλεί η τιμή "female".
Η ιδιότητα checked της ετικέτας <input> χρησιμοποιείται για να ορίσουμε ποια από τα ομαδοποιημένα κουμπιά θα είναι εξορισμού επιλεγμένο όταν φορτώνεται η σελίδα. Η ιδιότητα αυτή δεν παίρνει τιμή.
Πώς εισάγουμε Κουτιά Πολλαπλών Επιλογών (checkbox) στην Φόρμα μας ;
Για να εισάγουμε Κουτιά Πολλαπλών Επιλογών χρησιμοποιούμε την ετικέτα <input> ορίζοντας την τιμή checkbox στην ιδιότητα type.
Όταν ένα κουτί επιλογής είναι τσεκαρισμένο τότε η τιμή του πεδίου που θα σταλεί στον Server ορίζεται από την ιδιότητα value. Σύμφωνα με τον πιο πάνω κώδικα, αν επιλέξουμε το κουτί επιλογών Ταξίδια τότε η τιμή του πεδίου με όνομα travel θα πάρει την τιμή 1. Όταν κάποιο από τα κουτιά δεν είναι τσεκαρισμένο τότε η τιμή του πεδίου θα είναι κενή, δηλαδή δεν θα περιέχει τίποτα.
Η ιδιότητα checked της ετικέτας <input> χρησιμοποιείται για να ορίσουμε ποια από τα κουμπιά πολλαπλών επιλογών θα είναι εξορισμού επιλεγμένο όταν φορτώνεται η σελίδα. Η ιδιότητα αυτή δεν παίρνει τιμή
Για να εισάγουμε Περιοχή Κειμένου στην Φόρμα μας χρησιμοποιούμε την ετικέτα <textarea>.
Η ιδιότητα cols ορίζει τον αριθμό των ορατών χαρακτήρων (αυτοί δηλαδή που φαίνονται χωρίς οριζόντιο scrolling) που θα χωράει κάθε γραμμή στην Περιοχή Κειμένου, ενώ η ιδιότητα rows ορίζει τον αριθμό των ορατών γραμμών (αυτές δηλαδή που φαίνονται χωρίς κάθετο scrolling) που θα έχει η Περιοχή Κειμένου. Η χρήση και των δύο αυτών ιδιοτήτων είναι απαραίτητη. Όταν ο επισκέπτης πατάει το Κουμπί Υποβολής της Φόρμας αυτό που θα σταλεί στον Server είναι ολόκληρο το κείμενο που πληκτρολόγησε στη Περιοχή κειμένου
Για να εισάγουμε Λίστα Επιλογών στην Φόρμα μας χρησιμοποιούμε την ετικέτα <select>.
Η ετικέτα <option> τοποθετείται μέσα στις ετικέτες <SELECT> και </select> και αντιστοιχεί σε μια επιλογή της λίστας. Όσες επιλογές επιθυμούμε να περιλαμβάνει η Λίστα Επιλογών τόσες ετικέτες <option> πρέπει να προσθέσουμε. Μεταξύ των ετικετών <option> και </option> γράφουμε το κείμενο που θέλουμε να εμφανίζεται στην λίστα (σύμφωνα με τον παραπάνω κώδικα το κείμενο της πρώτης επιλογής της Λίστας Επιλογών είναι Ελλάδα, το κείμενο της δεύτερης επιλογής είναι Γαλλία κ.ο.κ.).
Με την ιδιότητα value της <option> ορίζουμε την τιμή που θα σταλεί στον Server (σύμφωνα με τον παραπάνω κώδικα αν ο επισκέπτης επιλέξει την επιλογή Ελλάδα και πατήσει το κουμπί αποστολής της φόρμας, τότε θα σταλεί στον Server η τιμή GR, ενώ αν επιλέξει την επιλογή Γαλλία θα σταλεί στον Server η τιμή FR κ.ο.κ.).
Η χρήση της ιδιότητας size της ετικέτας <select> εμφανίζει την Λίστα Επιλογών σαν ένα πλαίσιο επιλογών με οριζόντια μπάρα ολίσθησης. Η ιδιότητα size παίρνει σαν τιμή της έναν αριθμό ο οποίος ορίζει τον αριθμό γραμμών που θα εμφανίζονται στο πλαίσιο επιλογών. Για παράδειγμα αν γράφαμε τον παραπάνω κώδικα με τον παρακάτω τρόπο:
Όπως βλέπετε η άλλοτε Λίστα επιλογών εμφανίζεται τώρα σαν ένα πλαίσιο επιλογών στο οποίο φαίνονται οι τρεις πρώτες επιλογές, ενώ τις υπόλοιπες μπορούμε να τις δούμε πατώντας το κάτω βελάκι της μπάρας ολίσθησης. Αν θέλαμε να εμφανίσουμε όλες τις επιλογές χωρίς ο επισκέπτης να χρειάζεται να χρησιμοποιεί την μπάρα ολίσθησης για να τις δει τότε θα ορίζαμε ως τιμή στην ιδιότητα size τον αριθμό επιλογών που στην περίπτωση μας είναι 8
Σε ορισμένες περιπτώσεις επιθυμούμε ο επισκέπτης να έχει την δυνατότητα να επιλέξει παραπάνω από μια επιλογή. Για παράδειγμα στην παρακάτω λίστα έχοντας πατημένο το κουμπί Ctrl (Control) του πληκτρολογίου μας μπορούμε να επιλέξουμε με τον δείκτη του ποντικιού μας περισσότερες από μια επιλογές.
Για να έχουμε το παραπάνω πλαίσιο πολλαπλών επιλογών απλά προσθέτουμε την ιδιότητα multiple στην ετικέτα <select>. Η ιδιότητα multiple δεν παίρνει τιμές.
Στην περίπτωση αυτή, πρέπει να προσέξουμε πως θα γράψουμε τον κώδικα του script ώστε να μπορεί να δεχτεί πολλαπλές τιμές σε μια μεταβλητή. Δηλαδή όταν χρησιμοποιούμε πολλαπλές τιμές για ένα στοιχείο θα πρέπει μέσα στο script να διαχωρίσουμε τις τιμές αυτές μεταξύ τους με τον κατάλληλο κάθε φορά κώδικα ανάλογα την γλώσσα προγραμματισμού
Για να εισάγουμε Κρυφά Πεδία στην φόρμα μας χρησιμοποιούμε την ετικέτα <input> ορίζοντας την τιμή hidden στην ιδιότητα type.
Τα κρυφά πεδία δεν εμφανίζονται στον browser. Χρησιμοποιούμε κρυφά πεδία όταν θέλουμε να περάσουμε στο αρχείο script μια τιμή μαζί με τις υπόλοιπες τιμές που πληκτρολογεί ή επιλέγει ο επισκέπτης.
Για παράδειγμα ας φανταστούμε ότι έχουμε μια σελίδα η οποία περιέχει δύο Φόρμες η κάθε μια από τις οποίες ζητάει από τον επισκέπτη όνομα, επώνυμο και ηλικία. Την πρώτη Φόρμα την συμπληρώνουν όσοι είναι παντρεμένοι, ενώ την δεύτερη όσοι δεν είναι. Δείτε την σελίδα με τις δύο φόρμες
Παρακάτω παρουσιάζεται ο κώδικας της πρώτης Φόρμας:
Οι τιμές που θα πληκτρολογήσει ο επισκέπτης, αφού πατήσει το κουμπί αποστολής οποιασδήποτε από τις δύο Φόρμες, πηγαίνουν στο ίδιο script αφού και οι δύο φόρμες έχουν στην ιδιότητα action το ίδιο URL. Το script με την σειρά του παίρνει αυτές τις τιμές και κάνει κάποια ενέργεια ανάλογα αν τα στοιχεία προήλθαν από την πρώτη φόρμα οπότε έχουμε να κάνουμε με έναν παντρεμένο ή μια παντρεμένη, ή από την δεύτερη φόρμα οπότε έχουμε να κάνουμε με έναν ανύπαντρο ή μια ανύπαντρη. Τα τρία πεδία κειμένου και στις δύο φόρμες χρησιμοποιούν τα ίδια ονόματα στα πεδία τους (onoma, eponimo, ilikia).
Πως το script καταλαβαίνει από ποια από τις δύο Φόρμες προέρχονται τα δεδομένα; Με την χρήση ενός κρυφού πεδίου με όνομα married. Στην πρώτη Φόρμα το κρυφό πεδίο married έχει τιμή 0, οπότε αν ο επισκέπτης πατήσει το κουμπί αποστολής της πρώτης Φόρμας τότε θα σταλούν στο script τα στοιχεία που πληκτρολόγησε ο επισκέπτης μαζί με το κρυφό πεδίο married το οποίο θα έχει την τιμή 0. Ενώ αν ο επισκέπτης πατήσει το κουμπί της δεύτερης Φόρμας τότε θα σταλούν στο script τα στοιχεία που πληκτρολόγησε ο χρήστης μαζί με το κρυφό πεδίο married το οποίο έχει την τιμή 1. Με λίγα λόγια δηλαδή, το πεδίο married της Φόρμας, ανάλογα αν είναι 0 ή ένα, "λέει" στο script αν ο επισκέπτης που πληκτρολόγησε τα στοιχεία του είναι παντρεμένος ή όχι. Φυσικά αντί για 0 και 1 θα μπορούσαμε να είχαμε οποιαδήποτε τιμή αρκεί βέβαια να συμφωνεί με τον κώδικα του script.
Βέβαια είναι πλεονασμός και καθόλου λειτουργική λύση να χρησιμοποιούμε δύο Φόρμες για να στείλουμε στο script την πληροφορία της οικογενειακής κατάστασης του επισκέπτη. Αντί αυτό θα μπορούσαμε κάλλιστα να προσθέταμε στην πρώτη Φόρμα μια Λίστα Επιλογής με δύο επιλογές: Αγγαμος, Έγγαμος και με αυτό τον τρόπο πολύ απλά θα περνούσαμε την πληροφορία που θέλαμε στο Script. Ή ακόμα θα μπορούσαμε αντί της Λίστας Επιλογών να είχαμε Κουμπιά Επιλογών. Ο λόγος που γράφτηκε το παράδειγμα αυτό είναι μόνο για διδακτικό σκοπό ώστε να κατανοηθεί η χρήση των κρυφών πεδίων σε μια Φόρμα.
Το πάτημα του Κουμπιού Υποβολής της Φόρμας στέλνει στον Server τα δεδομένα που πληκτρολόγησε ο χρήστης. Για να εισάγουμε στην Φόρμα μας Κουμπί Υποβολής χρησιμοποιούμε την ετικέτα <input> ορίζοντας την τιμή Submit στην ιδιότητα type. Η ιδιότητα value ορίζει το κείμενο στο Κουμπί Υποβολής.
Η τοποθέτηση του Κουμπιού Υποβολής στην Φόρμα μας είναι προαιρετική. Σχεδόν όλες οι φόρμες έχουν Κουμπί Υποβολής. Αυτές που δεν έχουν η υποβολή της Φόρμας γίνετε με κώδικα script (συνήθως γραμμένο σε Javascript) που ενεργοποιείται μετά από ένα HTML γεγονός
Αποστολή στοιχείων στον Server (Μέθοδος GET και POST)
Η αποστολή των τιμών από την φόρμα του browser προς το αρχείο script του Server που θα τα επεξεργαστεί, γίνεται με βάση την ιδιότητα method (μέθοδος) της ετικέτας <form> η οποία μπορεί να πάρει τις τιμές get και post.
Στην περίπτωση χρήσης της μεθόδου GET κάθε όνομα ενός στοιχείου συνοδεύεται με την τιμή που πληκτρολόγησε ή επέλεξε ο επισκέπτης και αυτό το "πακέτο" (όνομα στοιχείου-τιμή στοιχείου) προστίθεται στο τέλος του URL που δείχνει η ιδιότητα action της ετικέτας <form>. Για παράδειγμα αν έχουμε τον παρακάτω κώδικα:
και ο επισκέπτης πληκτρολογήσει το όνομα Akis στο πεδίο κειμένου με όνομα onoma και έπειτα πατήσει το κουμπί Submit, τότε το URL που θα ανοίξει ο browser θα είναι το: http://www.wlearn.gr/doityourself/get_example.php?onoma=Akis&Submit=Submit Στο τέλος του URL μπαίνει ένα λατινικό ερωτηματικό και στην συνέχεια ακολουθεί το όνομα του στοιχείου την φόρμας, που στην προκειμένη περίπτωση είναι onoma , ακολουθεί το σύμβολο = (ίσον) και αμέσως μετά η τιμή που πληκτρολόγησε ο επισκέπτης. Στην περίπτωση αυτή η Φόρμα στέλνει δύο ονόματα στοιχείων ( onoma και Submit ) μαζί με τις τιμές τους (value) στον Server. Όταν υπάρχουν περισσότερα από ένα πεδία στην Φόρμα, όπως στην περίπτωση αυτή, τότε τα "πακέτα" τιμών στο URL χωρίζονται με το σύμβολο &.
Στο παρακάτω παράδειγμα η Φόρμα θα στείλει 3 "πακέτα" τιμών (onoma, eponimo και Submit).
Αν ο επισκέπτης πληκτρολογήσει όνομα και επίθετο και έπειτα πατήσει το Submit Button , τότε το URL που θα ανοίξει ο browser θα είναι το: http://www.wlearn.gr/doityourself/get_example.php?onoma=Akis&eponimo=Kargiofyllis&Submit=Submit
Ο Server αποθηκεύει όλη την συμβολοσειρά του URL μετά το λατινικό ερωτηματικό ( ? ) στην μεταβλητή περιβάλλοντος QUERY_STRING . Έπειτα η συμβολοσειρά αυτή περνάει μέσα στο script το οποίο με προγραμματιστικό κώδικα διαχωρίζει τα πακέτα τιμών (όνομα_στοιχείο=τιμή) μεταξύ τους.
Στην Φόρμα αυτή συμπληρώστε τα στοιχεία που ζητάει και πατήστε το Submit Button. Προσέξτε το URL της σελίδας που θα ανοίξει. Δοκίμασε το
Η μέθοδο post κάνει το ίδιο πράγμα με την μέθοδο get , με την διαφορά ότι στέλνει τα δεδομένα της φόρμας σε ξεχωριστή ροή δεδομένων (data stream) και όχι μαζί με το URL όπως με την μέθοδο GET. Ο Server δέχεται τα δεδομένα αυτά και τα αποθηκεύει σε ένα προσωρινό αρχείο και έπειτα τα περνάει μέσα στο script για να τα επεξεργαστεί. Ορισμένοι Server αντί να αποθηκεύουν τα δεδομένα σε κάποιο αρχείο χρησιμοποιούν για την είσοδο των δεδομένων την standard είσοδο (standard input).
Η Φόρμα αυτή χρησιμοποιεί την μέθοδο post. Συμπληρώστε τα στοιχεία που ζητάει και πατήστε το Submit Button. Έπειτα παρατηρήστε το URL της σελίδας που ανοίγει ο browser μετά το πάτημα του κουμπιού. Στην περίπτωση αυτή δεν υπάρχει το λατινικό ερωτηματικό ακολουθούμενο από τα δεδομένα της Φόρμας όπως γίνεται με την μέθοδο get. Δοκίμασε το
Αν έχουμε στην Φόρμα μας πολλά στοιχεία τότε η καταλληλότερη μέθοδος για να χρησιμοποιήσουμε είναι η post , καθώς με την μέθοδο get όλα τα δεδομένα αποθηκεύονται στην μεταβλητή περιβάλλοντος QUERY_STRING η οποία μπορεί σε μερικούς Servers να έχει όριο όσον αφορά στον όγκο αποθήκευσης (συνήθως οι πληροφορίες που μας δίνουν οι εταιρίες οι οποίες φιλοξενούν το site μας στον Server τους, δεν φτάνουν σε τέτοιο βάθος, έτσι σπάνια γνωρίζουμε τον όγκο της πληροφορίας που μπορούν να αποθηκευτούν στις μεταβλητές περιβάλλοντος του Server ) . Αντίθετα με την μέθοδο post μπορούμε να έχουμε οσαδήποτε στοιχεία στην Φόρμα μας χωρίς να ανησυχούμε για το όριο της χωρητικότητας αποθήκευσης της μεταβλητής περιβάλλοντος QUERY_STRING.
Ένας άλλος λόγος (και πολύ πιο σημαντικός) για να χρησιμοποιούμε την μέθοδο post αντί της get είναι το γεγονός ότι η μέθοδος get δεν συνιστάται από το τελευταίο επίσημο πρότυπο της HTML
Το πάτημα του Κουμπιού Καθαρισμού της Φόρμας καθαρίζεί όλα τα πεδία της Φόρμας από τα δεδομένα που πληκτρολόγησε ή επέλεξε ο επισκέπτης. Για να εισάγουμε στην Φόρμα μας Κουμπί Υποβολής χρησιμοποιούμε την ετικέτα <input> ορίζοντας την τιμή Reset στην ιδιότητα type.
Στο παράδειγμα της φόρμας συμπλήρωσης στοιχείων στην αρχή της σελίδας, συμπληρώστε την φόρμα και έπειτα πατήστε το κουμπί καθαρισμού και δείτε το αποτέλεσμα.
Εκτός από τα δύο ειδικά κουμπιά της Φόρμας (κουμπί Υποβολής και κουμπί Καθαρισμού Φόρμας), έχουμε την δυνατότητα να εισάγουμε απλά κουμπιά χρησιμοποιώντας την ετικέτα <input> και ορίζοντας την τιμή button στην ιδιότητα type. Η ιδιότητα value ορίζει το κείμενο του κουμπιού.
Ο μόνος λόγος χρήσης απλών κουμπιών είναι η εκτέλεση ενός script (συνήθως σε Javascript). Στην ετικέτα <input> προσθέτουμε ένα HTML γεγονός (onclick, ondblclick, onkeypress, onkeydown, onkeyup), για να εκτελέσεί μια λειτουργία ενός script
Στην HTML5 άλλαξαν αρκετά πράγρματα στις φόρμες. Μπορείτε να δείτε τα νέα πεδία (input types) αλλά και τις νέες ιδιότητες των στοιχείων μιας φόρμας.
Οι πίνακες είναι μια δομή της HTML η οποία μας επιτρέπει να εμφανίσουμε κείμενα και γραφικά στοιχισμένα μέσα σε γραμμές και στήλες. Όταν μάθετε περισσότερα για τους πίνακες, θα καταλάβετε πόσο μεγάλη σημασία έχουν σε μια σελίδα.
Με την ετικέτα <table> ορίζουμε έναν πίνακα. Το ζεύγος των ετικετών <tr>...</tr> ορίζει μια γραμμή του πίνακα, ενώ το ζεύγος των ετικετών <td>...</td> ορίζουν ένα κελί στην γραμμή του πίνακα. Η ιδιότητα border της ετικέτας <table> ορίζει το πάχος του περιγράμματος του πίνακα. Στο παραπάνω παράδειγμα δημιουργήσαμε πίνακα με δύο γραμμές που η κάθε μια από αυτές έχει δύο στήλες (2X2)
Με την ετικέτα <th> ορίζουμε μια επικεφαλίδα σε μια στήλη του πίνακα. Το κείμενο που βρίσκετε μέσα στις ετικέτες <th> και </th> εμφανίζεται με bold χαρακτήρες. Η ετικέτες <th>...</th> τοποθετούνται μέσα στις ετικέτες <tr>...</tr> όπως οι ετικέτες <td>...</td>
Με την ιδιότητα width ορίζουμε το μήκος του πίνακα. Η ιδιότητα αυτή μπορεί να μπει επίσης στις ετικέτες <td> και <th>. Το παρακάτω παράδειγμα έχει το ίδιο αποτέλεσμα με το προηγούμενο όσο αφορά το σύνολο του μήκους του πίνακα. Στο επόμενο παράδειγμα ορίζουμε το μήκος για κάθε ένα κελί των γραμμών του πίνακα.
Πως ορίζουμε μήκος (width) και ύψος (height) ενός πίνακα
Στο παραπάνω παράδειγμα τοποθετήσαμε την ιδιότητα width στην ετικέτα <td> αντί στην ετικέτα <table>. Το πρώτο κελί κάθε γραμμής του πίνακα έχει μήκος 150 pixels, ενώ το δεύτερο κελί κάθε γραμμής του πίνακα έχει μήκος 250 pixels, οπότε το συνολικό μήκος της κάθε γραμμής, άρα και του πίνακα, είναι 400 pixels. Η ιδιότητα width τοποθετείται μόνο στα κελιά (<td> ή <th>) της πρώτης γραμμής και εφαρμόζετε για όλα τα κελιά του πίνακα. Με αυτόν τον τρόπο όταν θέλουμε να αλλάξουμε το μήκος των κελιών ενός πίνακα, αλλάζουμε μόνο το μήκος των κελιών της πρώτης γραμμής του. Δεν είναι λάθος να τοποθετούμε την ιδιότητα width σε όλα τα κελιά (<td>) όλων των γραμμών του πίνακα. Φανταστείτε όμως έναν πίνακα με 100 γραμμές και κάθε μια από αυτές να έχει 8 κελιά. Αν ποτέ θελήσουμε να αλλάξουμε διαστάσεις στα κελιά του πίνακα αυτού θα χρειαζόταν να κάνουμε 100*8=800 αλλαγές τιμών! Ενώ αν τοποθετήσουμε την ιδιότητα width μόνο στα 8 κελιά της πρώτης γραμμής, τότε θα χρειαζόταν να κάνουμε μόνο 8 αλλαγές τιμών οι οποίες θα παρασύρουν όλα τα κελιά των επόμενων γραμμών του πίνακα.
Είναι προτιμότερο και συνηθέστερο να ορίζουμε το μήκος των κελιών (η ιδιότητα width στις ετικέτες <td> ή <th>) και όχι του συνολικού πίνακα (η ιδιότητα width στην ετικέτα <table>).
Με την ιδιότητα height ορίζουμε το ύψος των κελιών των γραμμών ενός πίνακα. Η ιδιότητα αυτή μπαίνει και στην ετικέτα <th>. Αν στον παραπάνω πίνακα θέλουμε να ορίσουμε ύψος 100 pixels στην πρώτη γραμμή του πίνακα, ύψος 200 pixels στην δεύτερη γραμμή του πίνακα και ύψος 150 pixels στην τρίτη γραμμή του πίνακα, τότε θα γράφαμε :
Πως ορίζουμε μήκος (width) και ύψος (height) ενός πίνακα
Η ιδιότητα height τοποθετείτε μόνο στο πρώτο κελί μιας γραμμής του πίνακα και εφαρμόζετε για όλα τα κελιά της γραμμής αυτής, κάτι ανάλογο δηλαδή με την ιδιότητα width η οποία την τοποθετούμε μόνο στα κελιά της πρώτης γραμμής του πίνακα και αυτή εφαρμόζεται για όλα τα κελιά των επόμενων γραμμών του πίνακα.
Η ιδιότητα align της ετικέτας <table> ορίζει την στοίχιση του πίνακα μέσα στην σελίδα. Οι τιμές που μπορεί να πάρει η ιδιότητα align είναι: left, center και right
Με την ιδιότητα align των ετικετών <td> και <tr> καθορίζουμε την στοίχιση του κειμένου μέσα στα κελιά. Αν η ιδιότητα είναι στην ετικέτα <td> τότε η στοίχιση που καθορίσαμε θα ισχύει μόνο για το συγκεκριμένο κελί, ενώ αν είναι στην ετικέτα <tr> τότε η στοίχιση θα ισχύσει για όλα τα κελιά της γραμμής
Μπορούμε να βάλουμε χρώμα σε όλο τον πίνακα ή σε μια γραμμή του πίνακα ή σε ένα κελί του πίνακα, ανάλογα που θα τοποθετήσουμε την ιδιότητα bgcolor ( δηλαδή ή στην ετικέτα <table> ή στην <tr> ή στην <td> ).
Με την ιδιότητα background των ετικετών <table>, <tr> και <td> ορίζουμε μια εικόνα για φόντο σε ολόκληρο τον πίνακα ή σε μια γραμμή ή σε ένα κελί, ανάλογα σε ποια από τις τρεις ετικέτες θα το τοποθετήσουμε
Οι ιδιότητες cellspacing και cellpadding της ετικέτας <table>
Με την ιδιότητα cellspacing της ετικέτας <table> ορίζουμε το πάχος των σκιασμένων γραμμών που διαχωρίζουν τα κελιά, ενώ με την ιδιότητα cellpadding της ετικέτας ορίζουμε τον κενό χώρο μεταξύ του πλαισίου των κελιών και του περιεχομένου αυτών
Με την μπλε γραμμή παρουσιάζεται το κενό που ορίζει η ιδιότητα cellspacing, ενώ με την κόκκινη γραμμή παρουσιάζεται το κενό που ορίζει η ιδιότητα cellpadding
Οριζόντια συγχώνευση κελιών : Όταν θέλουμε ένα κελί να επεκτείνεται σε πολλές κολόνες, χρησιμοποιούμε την ιδιότητα colspan η οποία ορίζει τον αριθμό των κολόνων που επεκτείνεται. Η ιδιότητα αυτή χρησιμοποιείται και στην ετικέτα <th>
Κάθετη συγχώνευση κελιών : Πολλές φορές θέλουμε ορισμένα κελιά στον πίνακα να επεκτείνονται σε πολλές γραμμές. Αυτό γίνετε με την ιδιότητα rowspan της ετικέτας <td>. Η ιδιότητα rowspan ορίζει τον αριθμό των γραμμών που θα επεκτείνεται το κελί. Η ιδιότητα αυτή χρησιμοποιείται και στην ετικέτα <th>
Με την HTML μπορούμε να εισάγουμε εικόνες στην σελίδα μας
Η ετικέτα <img>
Με την ετικέτα αυτή εισάγουμε μια εικόνα στην σελίδα μας. Η ετικέτα <img> δεν έχει ετικέτα τέλους, οπότε βάζουμε τον χαρακτήρα / πριν τον χαρακτήρα >. Έχει τις εξής ιδιότητες:
Ιδιότητα
Τιμή
Περιγραφή
align
baseline, top, middle, bottom, absmiddle, absbottom, left, right
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την στοίχιση της εικόνας με το κείμενο που βρίσκετε δίπλα της
alt
Κείμενο
Ορίζει εναλλακτικό κείμενο (χρησιμοποιείται για τους browsers που δεν υποστηρίζουν την εμφάνιση γραφικών)
border
αριθμός pixels
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το πάχος του περιγράμματος της εικόνας
height
αριθμός pixels %
Ορίζει το ύψος της εικόνας
hspase
αριθμός pixels
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει τον κενό χώρο μεταξύ της εικόνας και των υπόλοιπων περιεχομένων της σελίδας που βρίσκονται αριστερά και δεξιά του
ismap
URL
Ορίζει την εικόνα σαν "χάρτη"
src
URL
Ορίζει το URL του αρχείου της εικόνας
usemap
URL
Ορίζει έναν χάρτη επάνω στην εικόνα με τον οποίον μπορούμε να έχουμε links σε διάφορα σημεία μέσα στην εικόνα
Με τον παραπάνω κώδικα προσθέτουμε στην σελίδα μας την εικόνα με όνομα bird.jpg, η οποία έχει μήκος 100 pixels και ύψος 30 pixels και το περίγραμμα της έχει πάχος 2 pixel
Υπάρχουν ορισμένοι browsers που δεν υποστηρίζουν την εμφάνιση γραφικών με αποτέλεσμα να μην εμφανίζονται οι εικόνες που τοποθετούμε στις σελίδες μας. Η χρήση της ιδιότητας alt έχει σαν αποτέλεσμα σε έναν τέτοιο browser να εμφανίζετε αντί της εικόνας, το κείμενο το οποίο ορίζεται με την ιδιότητα. Συνήθως το κείμενο αυτό περιγράφει την εικόνα έτσι ώστε ο χρήστης που δεν μπορεί να την δει, να πάρει μια ιδέα για το τι απεικονίζετε σε αυτήν. Το alt είναι τα τρια πρώτα γράμματα από την λέξη alternative
Οι ετικέτες width και height ορίζουν τις διαστάσεις της εικόνας σε pixels. Το συνηθέστερο είναι να γράφουμε τις πραγματικές διαστάσεις της εικόνας. Ορισμένες φορές όμως θέλουμε να εμφανίσουμε την εικόνα με μικρότερες ή μεγαλύτερες από τις κανονικές διαστάσεις προσαρμόζοντας ανάλογα τις ιδιότητες width και height. Βέβαια αν οι διαστάσεις που ορίζουμε απέχουν πολύ από τις πραγματικές διαστάσεις της εικόνας, τότε αυτή εμφανίζεται αλλοιωμένη. Γι' αυτό είναι προτιμότερο να μικραίνετε ή να μεγαλώνετε την εικόνα μέσα σε κάποιο πρόγραμμα επεξεργασίας γραφικών (όπως το GIMP το οποίο είναι δωρεάν) γιατί εκεί χρησιμοποιούνται ειδικές συναρτήσεις που αλλάζουν το μέγεθος της εικόνας χωρίς να την αλλοιώνουν.
Καθορίζει την στοίχιση της εικόνας με το κείμενο που είναι δίπλα σε αυτήν. Οι τιμές που μπορεί να πάρει είναι οι εξής: baseline, top, middle, bottom, absmiddle, absbottom, left, right
Η ιδιότητα border δεν συμπεριελαμβάνεται στην HTML5. Χρησιοποιούμε CSS για να ορίσουμε περίγραμμα στα στοιχεία μιας σελίδας
Οι εικόνες σαν φόντο
Εικόνες μπορούμε να βάλουμε και σαν φόντο σε διάφορα στοιχεία της σελίδας μας, όπως σε ολόκληρο πίνακα, σε μια γραμμή ενός πίνακα, σε ένα κελί ενός πίνακα, αλλά και σε ολόκληρη την σελίδα μας. Όταν μια εικόνα τοποθετείται σαν φόντο σε οποιοδήποτε στοιχείο, τότε αυτή επαναλαμβάνεται για όλο το μέγεθος του στοιχείου.
Για παράδειγμα έχω την παρακάτω εικόνα η οποία έχει μέγεθος 180Χ100 :
Αν αυτήν την εικόνα την τοποθετήσω σαν φόνο σε ένα κελί ενός πίνακα το οποίο έχει μήκος 400 και ύψος 250, τότε η εικόνα αυτή θα επαναληφθεί για όλο το μήκος του κελιού
Βέβαια η εικόνα αυτή δεν προσφέρεται για φόντο. Συνήθως για φόντο χρησιμοποιούμε πολύ μικρά εικονίδια τα οποία όταν επαναλαμβάνονται δείχνουν σαν μια μεγάλη και ενιαία εικόνα, όπως το παρακάτω εικονίδιο το οποίο έχει μέγεθος 15Χ15:
Δείτε την εικόνα αυτή σαν φόντο στο κελί ενός πίνακα:
Αυτά τα εικονίδια λέγονται textures και υπάρχουν άπειρα και πολύ όμορφα στο Internet τα οποία μπορείτε να κατεβάσετε και να χρησιμοποιήσετε στις δικές σας σελίδες
