HTML
Όταν βλέπουμε κάποια σελίδα στο διαδίκτυο, συνήθως επικεντρώνουμε την προσοχή μας στο λεκτικό ή οπτικό της περιεχόμενο. Σπάνια αναρωτιόμαστε πώς γίνεται και εμφανίζεται το υλικό αυτό στην οθόνη μας.
H κοινά διαδεδομένη άποψη είναι πως το internet είναι μια τεράστια βιβλιοθήκη και η εικόνα που έχουν οι περισσότεροι ταυτίζεται με αυτήν του πραγματικού βιβλίου. Υποθέτουμε ίσως πως η σελίδα που βλέπουμε έρχεται στον υπολογιστή μας πάνω-κάτω όπως και η τηλεοπτική εικόνα.
Στην πράξη, υπεύθυνος για την εμφάνισή της είναι ο browser μας (φυλλομετρητής: internet explorer, netscape, opera κλπ). Όταν πληκτρολογούμε σε αυτόν κάποιο url (διαδικτυακή διεύθυνση) ή κάνουμε κλικ σε κάποιο Link (υπερσύνδεσμο) τότε συμβαίνουν (περιληπτικά) τα εξής:
- Η ονομαστική διεύθυνση που δώσαμε μεταφέρεται ως αίτημα στους servers (διακομιστές) της εταιρίας που μας προσφέρει σύνδεση στο Internet και αυτοί εντοπίζουν σε δικές τους ή άλλες βάσεις δεδομένων την αριθμητική διεύθυνση (IP) που αντιστοιχεί στο όνομα αυτό.
- O υπολογιστής μας διασυνδέεται με αυτόν τον server και αρχίζουν να μεταφέρονται προς εμάς τα αναγκαία δεδομένα.
- Τα δεδομένα αυτά περιλαμβάνουν: Την περιγραφή δομής της σελίδας, τα περιεχόμενα κείμενα και τις τυχόν εικόνες.
- O browser μας συγκεντρώνει τα πιο πάνω στοιχεία και στήνει τη σελίδα στην οθόνη μας,
H πρώτη και πιο διαδεδομένη γλώσσα περιγραφής της δομής μια ιστοσελίδας είναι η HTML (HyperText Markup Language). Η γλώσσα αυτή διαφέρει από τις προγραμματιστικές μια που απλά περιγράφει πού βρίσκεται τι και τίποτε παραπάνω. Νεώτερες γλώσσες είτε αυτόνομες είτε εξαρτώμενες από την HTML (όπως η java, η XML, το php ή το Asp) προχωρούν παραπέρα και επιτρέπουν πιο σύνθετη δομή, διαχείριση βάσεων δεδομένων και πολλά άλλα.
Σε αυτές τις σελίδες θα προσπαθήσουμε να σας μυήσουμε στον τρόπο δημιουργίας ιστοσελίδων με τη χρήση κώδικα HTML. Υπάρχουν βέβαια πολλά προγράμματα που δημιουργούν σελίδες με απλό και παραστατικό τρόπο. Παρ' όλ' αυτά, η εμβάθυνση στον κώδικα επιτρέπει τη μεγαλύτερη κατανόηση του τί συμβαίνει κι επιτρέπει τη βελτίωση των δημιουργιών μας. To μόνο που θα χρειαστείτε είναι ένας απλός text editor όπως το σημειωματάριο των windows ή το Arachnophilia που χρησιμοποιώ πάντα.
Ξεκινάμε με το πρώτο μας μάθημα. Τα υπόλοιπα θα προστίθενται σιγά-σιγά. Καλή δύναμη! ;-)
1. Tags λέμε τις μικρές 'εντολές' που ορίζουν την αρχή και το τέλος μιας λειτουργίας. Περικλείονται σε σύμβολα μικρότερου-μεγαλύτερου: <εντολή>. Όταν το tag κλείνει, περιλαμβάνει επιπλέον και μια κάθετο: </εντολή>. Αυτό είναι όλο... Για παράδειγμα, η παρακάτω σειρά λέει στον φυλλομετρητή να εμφανίζει με έντονα γράμματα (b=bold) τη λέξη 'έντονα' και με πλάγια (i=italics) τη λέξη 'πλάγια':
Η γραφή αυτή είναι με κανονικά γράμματα.
Μπορώ να έχω <b>έντονα</b> ή και <i>πλάγια</i>.
Το αποτέλεσμα θα είναι το εξής: Η γραφή αυτή είναι με κανονικά γράμματα. Μπορώ να έχω έντονα ή και πλάγια.
2. Τα tags μπορούν να περικλείουν άλλα, δεν πρέπει όμως να μπαίνουν διασταυρωμένα.
Π.χ. Η δομή τύπου 3 2 1 1 2 3 όπου τα τριάρια περικλείουν τα δυάρια και αυτά με τη σειρά τους τούς άσσους είναι σωστή, όχι όμως και η αυτή: 3 2 1 2 3 1 όπου τα ζεύγη μπερδεύονται.
Χρησιμοποιώντας τα πιο πάνω tags μαζί με αυτό που ορίζει την υπογράμμιση (u=underlined) μπορούμε να έχουμε συνδυασμούς όπως:
Μπορώ να έχω <i><b>έντονα και πλάγια μαζί</b></i>
ή <u><i>πλάγια και υπογραμμισμένα</i></u>.
Μας δίνει: Μπορώ να έχω έντονα και πλάγια μαζί ή πλάγια και υπογραμμισμένα.
3. Άλλα βασικά tags, απαραίτητα για τη σελίδα σας είναι τα:
- <html> και </html> που ορίζουν την αρχή και το τέλος του κώδικα (της σελίδας)
- <head> και </head> που ορίζουν την αρχή και το τέλος της κεφαλίδας όπου ορίζονται δεδομένα που θα δούμε αργότερα.
- <title> και </title> που ορίζουν την αρχή και το τέλος του τίτλου της σελίδας (εμφανίζεται στη μπλε μπάρα του φυλλομετρητή). Το ποθετείται μέσα στα tags της κεφαλίδας.
- <body> και </body> που ορίζουν την αρχή και το τέλος του 'σώματος' της σελίδας, του χώρου δηλαδή όπου θα υπάρχουν το κείμενο και οι εικόνες σας.
3. Τελειώνοντας, ας δούμε τη δομή μιας απλής σελίδας. Πιστεύω πως δε θα έχετε πρόβλημα να την κατανοήσετε. Σημειώνω πως τα tags παρουσιάζονται με τις κατάλληλες εσοχές γραμμής ώστε να φαίνεται που ανοίγει και που κλείνει το καθένα. Γράψτε τον κώδικα στο σημειωματάριο, αποθηκεύστε τον κάπου στο δίσκο σας με όνομα test.html και κάντε διπλό κλικ στο αρχείο ώστε να το δείτε με τον φυλλομετρητή σας:
<html>
<head>
<title>Η πρώτη μου σελίδα</title>
</head>
<body>
Μπορώ να έχω <i><b>έντονα και πλάγια μαζί</b></i>
ή <u><i>πλάγια και υπογραμμισμένα</i></u>.
</body>
</html>
Στη σελίδα αυτή έχω συγκεντρώσει τα περισσότερα από τα διαθέσιμα tags. Σε κάθε γραμμή θα βρείτε τα εξής:
- Στην πρώτη στήλη (όπου υπάρχει) αναγράφεται το πεδίο εφαρμογής της εντολής. Το 4.0 σημαίνει πως το tag λειτουργεί σε φυλλομετρητές έκδοσης 4 και μετά. Το NS και τα Ν1 κλπ σημαίνουν πως λειτουργεί μόνον σε NetScape. To ΜS σημαίνει πως λειτουργεί μόνον σε Microsoft Internet Explorer. Όπου δεν αναγράφεται τίποτε, το tag έχει γενική εφαρμογή.
- Στη δεύτερη στήλη και με έντονη γραφή, υπάρχει η περιγραφή του tag,
- Στην τρίτη, η σύνταξή του.
- Στην τέταρτη εμφανίζονται τυχόν σχόλια και διευκρινήσεις.
Κάποιες αναγκαίες επεξηγήσεις:
- Το σύμβολο ? δηλώνει αριθμό
- Τα σύμβολα $ και * δηλώνουν κάποιον αλφαριθμητικό χαρακτήρα (γράμμα)
| ΒΑΣΙΚΑ ΣΤΟΙΧΕΙΑ | |||
|---|---|---|---|
| Τύπος εγγράφου | <HTML></HTML> | Ορίζει την αρχή και το τέλος | |
| Τίτλος | <TITLE></TITLE> | Εμφανίζεται στη μπλε μπάρα του φυλλομετρητή. Πρέπει να βρίσκεται στην επιφυλλίδα | |
| Επιφυλλίδα | <HEAD></HEAD> | Εδώ μπαίνει ο τίτλος, περιγραφή της σελίδας, τα styles και η java | |
| Bασικός Κορμός | <BODY></BODY> | το κύριο υλικό της σελίδας | |
| ΟΡΙΣΜΟΣ ΔΟΜΗΣ | |||
|---|---|---|---|
| Επικεφαλλίδα | <H?></H?> | Δέχεται 6 ορισμούς: H1 ως και H6 | |
| Στοίχιση επικεφαλλίδας | <H? ALIGN=LEFT|CENTER|RIGHT></H?> | ||
| Yποδιαίρεση κειμένου | <DIV></DIV> | ||
| Στοίχιση υποδιαίρεσης | <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV> | ||
| 4.0 | Καθορισμένο περιεχόμενο | <SPAN></SPAN> | |
| Παράθεση σημείωσης | <BLOCKQUOTE></BLOCKQUOTE> | Συνήθως με εσοχή παραγράφου | |
| 4.0 | Σημείωση | <Q></Q> | Για σύντομες σημειώσεις |
| Έμφαση | <EM></EM> | Συνήθως εμφανίζει πλάγια (italics) γράμματα | |
| Έντονη έμφαση | <STRONG></STRONG> | Συνήθως εμφανίζει έντονα (bold) γράμματα | |
| Κώδικας | <CODE></CODE> | Για παράθεση γραμμών κώδικα | |
| Δείγμα | <SAMP></SAMP> | ||
| Είσοδος από πληκτρολόγιο | <KBD></KBD> | ||
| Μεταβλητή | <VAR></VAR> | ||
| Ορισμός | <DFN></DFN> | Δε χρησιμοποιείται ευρέως | |
| Διεύθυνση συγγραφέα | <ADDRESS></ADDRESS> | ||
| Μεγάλα γράμματα | <BIG></BIG> | ||
| Μικρά γράμματα | <SMALL></SMALL> | ||
| 4.0 | Παρεμβολή | <INS></INS> | Σημειώνει τις προσθήκες σε νέα έκδοση |
| 4.0 | Ώρα αλλαγής | <INS DATETIME=":::"></INS> | |
| 4.0 | Σχόλια | <INS CITE="URL"></INS> | |
| 4.0 | Διαγραφή | <DEL></DEL> | Σημειώνει τις διαγραφές σε νέα έκδοση |
| 4.0 | Ώρα διαγραφής | <DEL DATETIME=":::"></DEL> | |
| 4.0 | Σχόλια διαγραφής | <DEL CITE="URL"></DEL> | |
| 4.0 | Αρκτικόλεξο | <ACRONYM></ACRONYM> | |
| 4.0 | Σύντμηση | <ABBR></ABBR> | |
| ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ | |||
|---|---|---|---|
| Έντονη γραφή | <B></B> | Δοκιμή | |
| Πλάγια γραφή | <I></I> | Δοκιμή | |
| 4.0 | Υπογράμμιση | <U></U> | Δοκιμή |
| Διαγραφή | <STRIKE></STRIKE> | ||
| 4.0 | Διαγραφή | <S></S> | |
| Εκθέτης | <SUP></SUP> | ΒάσηΔοκιμή | |
| Δείκτης | <SUB></SUB> | ΒάσηΔοκιμή | |
| Γραφομηχανή | <TT></TT> | Δοκιμή | |
| Προμορφοποιημένο | <PRE></PRE> | Εμφανίζει τα κενά διαστήματα όπως έχουν γραφεί | |
| Πλάτος προμορφοποιημένου | <PRE WIDTH=?></PRE> | Σε χαρακτήρες | |
| Στοίχιση στο κέντρο | <CENTER></CENTER> | Στη θέση του χρησιμοποιείται πλέον το <DIV ALIGN="CENTER"></DIV> | |
| N1 | Αναβοσβήσιμο | <BLINK></BLINK> | |
| Μέγεθος γραμμάτων | <FONT SIZE=?></FONT> | Με τιμές από 1 ως και 7 | |
| Αλλαγή μεγέθους γραμμάτων | <FONT SIZE="+|-?"></FONT> | ||
| Χρώμα γραμμάτων | <FONT COLOR="#$$$$$$"></FONT> | Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς | |
| 4.0 | Επιλογή γραμματοσειράς | <FONT FACE="***"></FONT> | |
| N4 | Επιλογή μεγέθους | <FONT POINT-SIZE=?></FONT> | |
| N4 | Βάρος γραμμάτων | <FONT WEIGHT=?></FONT> | |
| 4.0 | Βασικό μέγεθος γραμμάτων | <BASEFONT SIZE=?> | Με τιμές από 1 ως και 7 και προεπιλογή το 3. Ισχύει για όλη τη σελίδα. |
| MS | Κινούμενο κείμενο | <MARQUEE></MARQUEE> | |
| ΤΟΠΟΘΕΤΗΣΗ ΣΤΟΙΧΕΙΩΝ ΣΤΗ ΣΕΛΙΔΑ | |||
|---|---|---|---|
| N3 | Πολλές στήλες | <MULTICOL COLS=?></MULTICOL> | |
| N3 | Απόσταση (διάκενο) στηλών | <MULTICOL GUTTER=?></MULTICOL> | |
| N3 | Πλάτος στήλης | <MULTICOL WIDTH=?></MULTICOL> | |
| N3 | Διαχωριστής | <SPACER> | |
| N3 | Είδος διαχωριστή | <SPACER TYPE=HORIZONTAL|VERTICAL|BLOCK> | |
| N3 | Μέγεθος διαχωριστή | <SPACER SIZE=?> | |
| N3 | Διαστάσεις διαχωριστή | <SPACER WIDTH=? HEIGHT=?> | |
| N3 | Στοίχιση διαχωριστή | <SPACER ALIGN=LEFT|RIGHT|CENTER> | |
| N4 | Επίπεδο (layer) | <LAYER></LAYER> | |
| N4 | Όνομα επιπέδου | <LAYER ID="***"></LAYER> | |
| N4 | Θέση επιπέδου | <LAYER LEFT=? TOP=?></LAYER> | |
| N4 | Σχετική θέση επιπέδου | <LAYER PAGEX=? PAGEY=?></LAYER> | |
| N4 | Αρχείο προέλευσης επιπέδου | <LAYER SRC="***"></LAYER> | |
| N4 | Σειρά επικάλλυψης | <LAYER Z-INDEX=?></LAYER> | |
| N4 | Θέση επικάλλυψης | <LAYER ABOVE="***" BELOW="***"></LAYER> | |
| N4 | Διαστάσεις επιπέδου | <LAYER HEIGHT=? WIDTH=?></LAYER> | |
| N4 | Διαδρομή επιπέδου | <LAYER CLIP=,,,></LAYER> | |
| N4 | Εμφάνιση ή μη του επιπέδου | <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER> | |
| N4 | Φόντο επιπέδου | <LAYER BACKGROUND="$$$$$$"></LAYER> | |
| N4 | Χρώμα επιπέδου | <LAYER BGCOLOR="$$$$$$"></LAYER> | |
| N4 | Εσωτερικό επίπεδο | <ILAYER></ILAYER> | Δέχεται τις ίδιες παραμέτρους με το LAYER |
| N4 | Εναλακτικό περιεχόμενο | <NOLAYER></NOLAYER> | |
| ΣΥΝΔΕΣΜΟΙ, ΓΡΑΦΙΚΑ ΚΑΙ ΗΧΟΣ | |||
|---|---|---|---|
| Συνδεσμος-παραπομπή σε διεύθυνση | <A HREF="URL"></A> | ||
| Παραπομπή σε σημείο εγγράφου | <A HREF="URL#***"></A> | Αν πρόκειται για άλλο έγγραφο | |
| <A HREF="#***"></A> | Αν πρόκειται για το τρέχον έγγραφο | ||
| 4.0 | Παράθυρο όπου θα ανοίξει ο σύνδεσμος | <A HREF="URL" TARGET="***"></A> | |
| 4.0 | Ενέργεια με το κλικ | <A HREF="URL" ONCLICK="***"></A> | Javascript |
| 4.0 | Ενέργεια όταν περάσει το ποντίκι από πάνω | <A HREF="URL" ONMOUSEOVER="***"></A> | Javascript |
| 4.0 | Ενέργεια όταν φύγει το ποντίκι από πάνω | <A HREF="URL" ONMOUSEOUT="***"></A> | Javascript |
| Σύνδεσμος για αποστολή email | <A HREF="mailto:@"></A> | ||
| N, MS | Καθορισμός τίτλου για email | <A HREF="mailto:@?SUBJECT=***"></A> | Πρέπει να μπει ? πρίν από τη λέξη SUBJECT |
| Ορισμός θέσης για σύνδεσμο | <A NAME="***"></A> | Για χρήση με την Παραπομπή (βλέπε παραπάνω) | |
| Εμφάνιση εικόνας | <IMG SRC="URL"> | ||
| Στοίχιση εικόνας | <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> | ||
| N1 | Στοίχιση εικόνας σε σχέση με το κείμενο | <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> | |
| Εναλλακτικό κείμενο αντί της εικόνας | <IMG SRC="URL" ALT="***"> | Αν η εικόνα δεν εμφανιστεί | |
| Διαστάσεις εικόνας | <IMG SRC="URL" WIDTH=? HEIGHT=?> | Σε pixels | |
| <IMG SRC="URL" WIDTH=% HEIGHT=%> | Ως ποσοστό των διαστάσεων της σελίδας | ||
| Πλαίσιο εικόνας | <IMG SRC="URL" BORDER=?> | Σε pixels | |
| Κενός χώρος γύρω από την εικόνα | <IMG SRC="URL" HSPACE=? VSPACE=?> | Σε pixels | |
| N1 | Εναλλακτική εικόνα χαμηλής ανάλυσης | <IMG SRC="URL" LOWSRC="URL"> | Συνήθως ασπρόμαυρη. Εμφανίζεται πρώτη και επικαλλύπτεται από την κανονική. |
| Χάρτης εικόνας με συνδέσμους | <IMG SRC="URL" ISMAP> | Απαιτεί script | |
| <IMG SRC="URL" USEMAP="URL"> | |||
| MS | Video Clip | <IMG DYNSRC="***" START="***" LOOP=?> | |
| MS | Ήχος | <BGSOUND SRC="***" LOOP=?|INFINITE> | |
| Χάρτης εικόνας χρήστη | <MAP NAME="***"></MAP> | Περιγραφή χάρτη | |
| Τμήμα χάρτη | <AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF> | ||
| N1 | Ανανέωση περιεχομένου ή μεταπήδηση σε άλλη σελίδα | <META HTTP-EQUIV="Refresh" CONTENT="χρόνος σε δευτερόλεπτα; URL=ονομασία σελίδας"> Μπαίνει μεταξύ <head> και </head>. Π.χ. <meta http-equiv="refresh" content="10;URL=index.html"> | |
| N2 | Ενσωματωμένο αντικείμενο | <EMBED SRC="URL"> | Π.χ. κάποιο flash animation |
| N2 | Μέγεθος αντικειμένου | <EMBED SRC="URL" WIDTH=? HEIGHT=?> | |
| 4.0 | Αντικείμενο | <OBJECT></OBJECT> | |
| 4.0 | Παράμετροι | <PARAM> | |
| ΔΙΑΧΩΡΙΣΤΕΣ | |||
|---|---|---|---|
| Παράγραφος | <P></P> | Δεν είναι απαραίτητο το κλείσιμο του tag | |
| Στοίχιση παραγράφου | <P ALIGN=LEFT|CENTER|RIGHT></P> | ||
| N | Πλήρης στοίχιση παραγράφου | <P ALIGN=JUSTIFY></P> | |
| Αλλαγή σειράς | <BR> | ||
| Χωρίς αναδίπλωση | <BR CLEAR=LEFT|RIGHT|ALL> | ||
| Οριζόντια γραμμή | <HR> | ||
| Στοίχιση γραμμής | <HR ALIGN=LEFT|RIGHT|CENTER> | ||
| Πάχος γραμμής | <HR SIZE=?> | Σε pixels | |
| Πλάτος γραμμής | <HR WIDTH=?> | Σε pixels | |
| Πλάτος γραμμής | <HR WIDTH="%"> | Ως ποσοστό του πλάτους σελίδας | |
| Συμπαγής γραμμή | <HR NOSHADE> | Δίχως την τριδιάστατη όψη | |
| N1 | Χωρίς αλλαγές σειράς | <NOBR></NOBR> | |
| N1 | Αλλαγή γραμμής | <WBR> | |
| ΛΙΣΤΕΣ | |||
|---|---|---|---|
| Απλή λίστα | <UL><LI></UL> | To <LI> μπαίνει μπροστά από κάθε σειρά | |
| Συμπαγής λίστα | <UL COMPACT></UL> | ||
| Τύπος κουκίδας | <UL TYPE=DISC|CIRCLE|SQUARE> | Για όλη τη λίστα | |
| Τύπος κουκίδας | <LI TYPE=DISC|CIRCLE|SQUARE> | Για τη σειρά και τις επόμενες | |
| Αριθμημένη λίστα | <OL><LI></OL> | To <LI> μπαίνει μπροστά από κάθε σειρά | |
| Συμπαγής αριθμημένη λίστα | <OL COMPACT></OL> | ||
| Μορφή αρίθμησης | <OL TYPE=A|a|I|i|1> | Για όλη τη λίστα | |
| Μορφή αρίθμησης | <LI TYPE=A|a|I|i|1> | Για τη σειρά και τις επόμενες | |
| Αριθμός έναρξης αρίθμησης | <OL START=?> | Για όλη τη λίστα | |
| Αριθμός έναρξης αρίθμησης | <LI VALUE=?> | Για τη σειρά και τις επόμενες | |
| Λίστα επεξηγήσεων | <DL><DT><DD></DL> | (<DT>=όρος, <DD>=επεξήγηση) | |
| Συμπαγής λίστα επεξηγήσεων | <DL COMPACT></DL> | ||
| Λίστα επιλογών | <MENU><LI></MENU> | Πριν από κάθε σειρά | |
| Συμπαγής λίστα επιλογών | <MENU COMPACT></MENU> | ||
| Λίστα περιεχομένων | <DIR><LI></DIR> | Πριν από κάθε σειρά | |
| Συμπαγής λίστα περιεχομένων | <DIR COMPACT></DIR> | ||
| ΦΟΝΤΟ ΚΑΙ ΧΡΩΜΑΤΑ | |||
|---|---|---|---|
| Επαναλαμβανόμενη εικόνα φόντου | <BODY BACKGROUND="URL"> | ||
| MS | Υδατογράφημα | <BODY BGPROPERTIES="FIXED"> | |
| Χρώμα φόντου | <BODY BGCOLOR="#$$$$$$"> | (order is red/green/blue) | |
| Βασικό χρώμα κειμένου | <BODY TEXT="#$$$$$$"> | ||
| Χρώμα συνδέσμων | <BODY LINK="#$$$$$$"> | ||
| Χρώμα συνδέσμων που έχουμε επισκεφτεί | <BODY VLINK="#$$$$$$"> | ||
| Ενεργός σύνδεσμος | <BODY ALINK="#$$$$$$"> | ||
| ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ | |||
|---|---|---|---|
| ειδικοί χαρακτήρες | &#?; | όπου ? είναι o κωδικός ISO 8859-1 | |
| < | < | ||
| > | > | ||
| & | & | ||
| " | " | ||
| Registered TM | ® | ® | |
| Registered TM | ® | ® | |
| Copyright | © | © | |
| Copyright | © | © | |
| Κενό διάστημα (δεν επιτρέπει αναδίπλωση) | | ||
| ΦΟΡΜΕΣ | |||
|---|---|---|---|
| Ορισμός φόρμας | <FORM ACTION="URL" METHOD=GET|POST></FORM> | ||
| 4.0 | 'Ανέβασμα' αρχείου | <FORM ENCTYPE="multipart/form-data"></FORM> | |
| Πεδίο εισαγωγής δεδομένων | <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET"> | ||
| Όνομα πεδίου | <INPUT NAME="***"> | ||
| Τιμή πεδίου | <INPUT VALUE="***"> | ||
| Τσεκαρισμα | <INPUT CHECKED> | Για τετράγωνα και κυκλικά πεδία τσεκαρίσματος | |
| Μέγεθος πεδίου | <INPUT SIZE=?> | Σε χαρακτήρες | |
| Μέγιστο μέγεθος | <INPUT MAXLENGTH=?> | Σε χαρακτήρες | |
| 4.0 | Κουμπί | <BUTTON></BUTTON> | |
| 4.0 | Όνομα κουμπιού | <BUTTON NAME="***"></BUTTON> | |
| 4.0 | Τύπος κουμπιού | <BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON> | |
| 4.0 | Προεπιλεγμένη τιμή | <BUTTON VALUE="***"></BUTTON> | |
| 4.0 | Ετικέτα | <LABEL></LABEL> | |
| 4.0 | Ετικέτα επιλοής | <LABEL FOR="***"></LABEL> | |
| Λίστα επιλογής | <SELECT></SELECT> | ||
| Όνομα λίστας | <SELECT NAME="***"></SELECT> | ||
| Αριθμός επιλογών | <SELECT SIZE=?></SELECT> | ||
| Πολλαπλή επιλογή | <SELECT MULTIPLE> | Για περισσότερες από μία επιλογές | |
| Επιλογή | <OPTION> | Διαθέσιμα στοιχεία προς επιλογή | |
| Προεπιλογή | <OPTION SELECTED> | ||
| Τιμή επιλογής | <OPTION VALUE="***"> | ||
| 4.0 | Ομαδοποίηση επιλογών | <OPTGROUP LABEL="***"></OPTGROUP> | |
| Μέγεθος πεδίου εισαγωγής κειμένου | <TEXTAREA ROWS=? COLS=?></TEXTAREA> | ||
| Ονομασία πεδίου εισαγωγής κειμένου | <TEXTAREA NAME="***"></TEXTAREA> | ||
| N2 | Αναδίπλωση κειμένου | <TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA> | |
| 4.0 | Μέλη ομάδας | <FIELDSET></FIELDSET> | |
| 4.0 | Υπόμνημα | <LEGEND></LEGEND> | |
| 4.0 | Στοίχιση υπομνήματος | <LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND> | |
| ΠΙΝΑΚΕΣ | |||
|---|---|---|---|
| Ορισμός πίνακα | <TABLE></TABLE> | ||
| 4.0 | Στοίχιση πίνακα | <TABLE ALIGN=LEFT|RIGHT|CENTER> | |
| Περίγραμμα πίνακα | <TABLE BORDER></TABLE> | Υπαρκτό ή μη | |
| Περίγραμμα πίνακα | <TABLE BORDER=?></TABLE> | Oρισμός πάχους | |
| Απόσταση (διάκενο) κελιών | <TABLE CELLSPACING=?> | ||
| Εσωτερικό περιθώριο κελιών | <TABLE CELLPADDING=?> | ||
| Επιθυμητό πλάτος | <TABLE WIDTH=?> | Σε pixels | |
| Ποσοστό πλάτους | <TABLE WIDTH=%> | Ποσοστό επί του πλάτους της σελίδας | |
| 4.0 | Χρώμα πίνακα | <TABLE BGCOLOR="$$$$$$"></TABLE> | |
| 4.0 | Πλαίσιο πίνακα | <TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS| VSIDES|BOX|BORDER></TABLE> | |
| 4.0 | Χάρακας πίνακα | <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE> | |
| MS | Χρώμα περιγράμματος | <TABLE BORDERCOLOR="$$$$$$"></TABLE> | |
| MS | Σκούρο περίγραμμα | <TABLE BORDERCOLORDARK="$$$$$$"></TABLE> | |
| MS | Ανοιχτόχρωμο περίγραμμα | <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE> | |
| Σειρά πίνακα | <TR></TR> | ||
| Στοίχιση σειράς πίνακα | <TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> | ||
| Κελί πίνακα | <TD></TD> | Πρέπει να εμπεριέχεται σε ορισμό σειράς | |
| Στοίχιση κελιού | <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> | ||
| Κείμενο κελιού χωρίς αναδίπλωση | <TD NOWRAP> | ||
| Επέκταση σε στήλες | <TD COLSPAN=?> | ||
| Επέκταση σε σειρές | <TD ROWSPAN=?> | ||
| 4.0 | Επιθυμητό πλάτος κελιού | <TD WIDTH=?> | Σε pixels |
| N3 | Πλάτος κελιού σε ποσοστό | <TD WIDTH="%"> | Επί του πλάτους του πίνακα |
| 4.0 | Χρώμα κελιού | <TD BGCOLOR="#$$$$$$"> | |
| Επικεφαλλίδα στήλης | <TH></TH> | Έντονα και με στοίχιση στο κέντρο | |
| Στοίχιση επικεφαλλίδας | <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> | ||
| Επικεφαλίδα δίχως αναδίπλωση | <TH NOWRAP> | ||
| Επέκταση επικεφαλλίδας σε στήλες | <TH COLSPAN=?> | ||
| Επέκταση επικεφαλλίδας σε σειρές | <TH ROWSPAN=?> | ||
| 4.0 | Επιθυμητό πλάτος επικεφαλλίδας | <TH WIDTH=?> | Σε pixels |
| N3 | Πλάτος σε ποσοστό | <TH WIDTH="%"> | Επί του πλάτους του πίνακα |
| 4.0 | Χρώμα κελιού επικεφαλλίδας | <TH BGCOLOR="#$$$$$$"> | |
| 4.0 | Σώμα πίνακα | <TBODY> | |
| 4.0 | Υποφυλλίδα πίνακα | <TFOOT></TFOOT> | Προηγείται του THEAD> |
| 4.0 | Επιφυλλίδα πίνακα | <THEAD></THEAD> | |
| Επεξήγηση πίνακα | <CAPTION></CAPTION> | ||
| Στοίχιση επεξήγησης | <CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT> | ||
| 4.0 | Στήλη | <COL></COL> | |
| 4.0 | Επέκταση στηλών | <COL SPAN=?></COL> | |
| 4.0 | Πλάτος στήλης | <COL WIDTH=?></COL> | |
| 4.0 | Πλάτος στήλης σε ποσοστό | <COL WIDTH="%"></COL> | |
| 4.0 | Ομάδα στηλών | <COLGROUP></COLGROUP> | |
| 4.0 | Επέκταση ομάδας στηλών | <COLGROUP SPAN=?></COLGROUP> | |
| 4.0 | Πλάτος ομάδας | <COLGROUP WIDTH=?></COLGROUP> | |
| 4.0 | Πλάτος ομάδας σε ποσοστό | <COLGROUP WIDTH="%"></COLGROUP> | |
| ΠΛΑΙΣΙΑ (Frames) | |||
|---|---|---|---|
| 4.0 | Σελίδα με πλαίσια | <FRAMESET></FRAMESET> | Αντί του <BODY> |
| 4.0 | Ύψος σειρών | <FRAMESET ROWS=,,,></FRAMESET> | Σε pixels ή %) |
| 4.0 | Ύψος σειρών | <FRAMESET ROWS=*></FRAMESET> | * = Σχετικό μέγεθος. Συνήθως όσο περισσεύει. |
| 4.0 | Πλάτος στηλών | <FRAMESET COLS=,,,></FRAMESET> | (pixels or %) |
| 4.0 | Πλάτος στηλών | <FRAMESET COLS=*></FRAMESET> | * = Σχετικό μέγεθος. Συνήθως όσο περισσεύει. |
| 4.0 | Περίγραμμα | <FRAMESET FRAMEBORDER="yes|no"></FRAMESET> | |
| 4.0 | Πλάτος περιγράμματος | <FRAMESET BORDER=?></FRAMESET> | |
| 4.0 | Χρώμα περιγράμματος | <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET> | |
| N3 | Απόσταση (διάκενο) πλαισίων | <FRAMESET FRAMESPACING=?></FRAMESET> | |
| 4.0 | Ορισμός πλαισίου | <FRAME> | Περιεχόμενα μεμονωμένου πλαισίου |
| 4.0 | Έγγραφο που θα εμφανιστεί | <FRAME SRC="URL"> | |
| 4.0 | Όνομα πλαισίου | <FRAME NAME="***"|_blank|_self|_parent|_top> | |
| 4.0 | Πλάτος περιθωρίου | <FRAME MARGINWIDTH=?> | Αριτερά και δεξιά |
| 4.0 | Ύψος περιθωρίου | <FRAME MARGINHEIGHT=?> | Πάνω και κάτω |
| 4.0 | Εμφάνιση μπάρας κύλισης | <FRAME SCROLLING="YES|NO|AUTO"> | |
| 4.0 | Σταθερό μέγεθος | <FRAME NORESIZE> | |
| 4.0 | Περίγραμμα πλαισίου | <FRAME FRAMEBORDER="yes|no"> | |
| 4.0 | Χρώμα περιγράμματος | <FRAME BORDERCOLOR="#$$$$$$"> | |
| 4.0 | Περιεχόμενο εκτός πλαισίων | <NOFRAMES></NOFRAMES> | για φυλλομετρητές που δεν υποστηρίζουν πλαίσια |
| 4.0 | Εσωτερικό πλαίσιο | <IFRAME></IFRAME> | Όμοιες παράμετροι με το FRAME |
| 4.0 | Διαστάσεις | <IFRAME WIDTH=? HEIGHT=?></IFRAME> | |
| 4.0 | Διαστάσεις | <IFRAME WIDTH="%" HEIGHT="%"></IFRAME> | |
| ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ ΚΑΙ JAVA | |||
|---|---|---|---|
| Πρόγραμμα | <SCRIPT></SCRIPT> | ||
| <SCRIPT SRC="URL"></SCRIPT> | |||
| Είδος προγράμματος | <SCRIPT TYPE="***"></SCRIPT> | ||
| Γλώσσα προγράμματος | <SCRIPT LANGUAGE="***"></SCRIPT> | ||
| 4.0 | Άλλο περιεχόμενο | <NOSCRIPT></NOSCRIPT> | Αν δεν υποστηρίζονται scripts |
| Applet | <APPLET></APPLET> | ||
| Όνομα Applet | <APPLET CODE="***"> | ||
| Παράμετροι Applet | <APPLET PARAM NAME="***"> | ||
| Θέση Applet | <APPLET CODEBASE="URL"> | ||
| Ταυτότητα Applet | <APPLET NAME="***"> | Για αναφορά-παραπομπές | |
| Εναλλακτικό κείμενο | <APPLET ALT="***"> | Αν δεν υποστηρίζεται java | |
| Στοίχιση Applet | <APPLET ALIGN="LEFT|RIGHT|CENTER"> | ||
| Μέγεθος Applet | <APPLET WIDTH=? HEIGHT=?> | Σε pixels | |
| Απόσταση Applet από άλλα στοιχεία | <APPLET HSPACE=? VSPACE=?> | Σε pixels | |
| N4 | Server Script | <SERVER></SERVER> | |
| ΔΙΑΦΟΡΑ | |||
|---|---|---|---|
| Σχόλιο | <!-- *** --> | Δεν εμφανίζεται. | |
| Πρόλογος | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> | ||
| Κατάλογος αναζήτησης | <ISINDEX> | ||
| Αποστολή αναζήτησης | <A HREF="URL?***"></a> | Με κανονικό ? | |
| URL του αρχείου | <BASE HREF="URL"> | Πρέπει να βρίσκεται στην επικεφαλλίδα | |
| 4.0 | Παράθυρο όπου θα κατευθύνονται οι σύνδεσμοι | <BASE TARGET="***"> | Πρέπει να βρίσκεται στην επικεφαλλίδα |
| Σχετική σελίδα | <LINK REV="***" REL="***" HREF="URL"> | Πρέπει να βρίσκεται στην επικεφαλλίδα | |
| N4 | Συνδεδεμένο αρχείο | <LINK TYPE="***" SRC="***"></LINK> | |
| Meta Πληροφορίες | <META> | Πρέπει να βρίσκεται στην επικεφαλλίδα | |
| Ορισμός στυλ | <STYLE></STYLE> | ||
