συνταξη και διαφορες
Για να μπορέσει όμως να είναι τόσο ευέλικτη θα πρέπει μερικά πράγματα στο συντακτικό της HTML να αλλάξουν.
Ονόματα ετικετών και ιδιοτήτων
Όλα τα ονόματα των ετικετών και των ιδιοτήτων τους θα πρέπει να είναι γραμμένα με πεζά γράμματα.
1 |
Λάθος |
2 |
< A HREF="http://www.somesite.com/somepage.html">Σύνδεσμος</a> |
3 |
4 |
Σωστό |
5 |
< a href="http://www.somesite.com/somepage.html">Σύνδεσμος</a> |
Κενές ετικέτες
Οι κενές ετικέτες θα πρέπει να γράφονται με ένα / στο τέλος τους. Κενές ετικέτες είναι για παράδειγμα το <br> ή το <img src=»/images/my-image.jpg»> οι οποίες δεν έχουν την αντίστοιχη ετικέτα τερματισμού </br> ή </img>. Σε αυτές τις περιπτώσεις, αυτές οι ετικέτες θα πρέπει να γράφονται ως </br> και <img src=»/images/my-image.jpg» /> αντίστοιχα.
Ετικέτες τερματισμού
Δεν θα πρέπει ποτέ να ξεχάσετε μια ετικέτα τερματισμού. Σε ορισμένες περιπτώσεις στην HTML μπορεί να ξεχάσετε να βάλετε μια ετικέτα τερματισμού όπως είναι τα παρακάτω :
1 |
< p> ...... το κείμενο της παραγράφου |
2 |
< p> ...... και ακόμα μια παράγραφος |
Με την XHTML θα πρέπει πάντα να βάζετε την ετικέτα τερματισμού. Έτσι το προηγούμενο παράδειγμα θα πρέπει να γραφτεί ως :
1 |
<p> ...... το κείμενο της παραγράφου ....... </p> |
2 |
<p> ...... και ακόμα μια παράγραφος ....... </p> |
Παράμετροι
Οι παράμετροι θα πρέπει πάντα να έχουν τιμή. Στην HTML μπορείτε να αφήσετε μερικές παραμέτρους χωρίς τιμή όπως είναι για παράδειγμα το :
1 |
< hr size="2" noshade> |
Στην XHTML θα πρέπει να γραφτεί ως:
1 |
< hr size="2" noshade="noshade" /> |
Τιμές παραμέτρων
Οι τιμές των παραμέτρων στις ετικέτες θα πρέπει να είναι πάντα μέσα σε εισαγωγικά. Στην HTML μπορείτε να βάλετε μια τιμή χωρίς εισαγωγικά όπως εδώ :
1 |
< hr size=2> |
Στην XHTML θα πρέπει να το γράψετε έτσι:
1 |
< hr size="2" /> |
Η συγγραφή κώδικα XHTML απαιτεί μια καθαρή σύνταξη HTML.
Μερικοί ακόμα συντακτικοί κανόνες της XHTML :
- Τα ονόματα των χαρακτηριστικών (attribute names) πρέπει να γράφονται με πεζά γράμματα.
- Οι τιμές των χαρακτηριστικών πρέπει να περικλείονται από εισαγωγικά (quoted).
- Δεν επιτρέπεται η ελαχιστοποίηση των χαρακτηριστικών.
- Το χαρακτηριστικό id αντικαθιστά το χαρακτηριστικό name.
- Το XHTML DTD ορίζει τα υποχρεωτικά στοιχεία.
Τα ονόματα των χαρακτηριστικών πρέπει να είναι με πεζά γράμματα
Αυτό είναι λάθος :
< table WIDTH="100%"></strong></span></p> <p align="justify">Αυτό είναι σωστό :</strong></span></p> <p align="justify"><span style="color: #0000ff;" color="#0000ff"><strong><table width="100%"></strong></span></p> <p><span style="color: #ff0000;" color="#ff0000"><span style="text-decoration: underline;"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
Οι τιμές των χαρακτηριστικών πρέπει να είναι μέσα σε εισαγωγικά
Αυτό είναι λάθος :
< table width=100%>
Αυτό είναι σωστό :
< table width="100%"></strong></span></p> <p><span style="color: #ff0000;" color="#ff0000"><span style="text-decoration: underline;"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
Δεν επιτρέπεται η ελαχιστοποίηση των χαρακτηριστικών
Αυτό είναι λάθος :
< dl compact>
< input checked>
< input readonly>
< input disabled>
< option selected>
< frame noresize>
Αυτό είναι σωστό :
< dl compact="compact"></strong></span></p> <p align="justify"><span style="color: #0000ff;" color="#0000ff"><strong><input checked="checked"></strong></span></p> <p align="justify"><span style="color: #0000ff;" color="#0000ff"><strong><input readonly="readonly"></strong></span></p> <p align="justify"><span style="color: #0000ff;" color="#0000ff"><strong><input disabled="disabled"></strong></span></p> <p align="justify"><span style="color: #0000ff;" color="#0000ff"><strong><option selected="selected"></strong></span></p> <p align="justify"><span style="color: #0000ff;" color="#0000ff"><strong><frame noresize="noresize"></strong></span></p> <p align="justify">Ακολουθεί μια λίστα των ελαχιστοποιημένων χαρακτηριστικών στην HTML και πώς πρέπει αυτά να γράφονται στην XHTML :</strong></span></strong></span></strong></span></strong></span></strong></span></strong></span></p> <table style="width: 336px;" border="1" cellspacing="1" cellpadding="7"> <td width="36%" valign="top"></strong></span></p> <p align="center">HTML</strong></span></p> <p> </p> <p align="center">XHTML
compact
compact="compact"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
checked
checked="checked"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
declare
declare="declare"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
readonly
readonly="readonly"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
disabled
disabled="disabled"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
selected
selected="selected"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
defer
defer="defer"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
ismap
ismap="ismap"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
nohref
nohref="nohref"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
noshade
noshade="noshade"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
nowrap
nowrap="nowrap"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
multiple
multiple="multiple"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
noresize
noresize="noresize"</p> <span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5"><span style="font-size: large;" size="5">
Το χαρακτηριστικό id αντικαθιστά το χαρακτηριστικό name
Η HTML 4.01 ορίζει το χαρακτηριστικό (attribute) name για τα στοιχεία a, applet, frame, iframe, img και map. Στην XHTML το χαρακτηριστικό name δεν χρησιμοποιείται και χρησιμοποιούμε αντ’ αυτού το id.
Αυτό είναι λάθος :
< img src="/kgiannaras/picture.gif" name="picture1" />
Αυτό είναι σωστό :
< img src="/kgiannaras/picture.gif" id="picture1" />
Για να υπάρχει συμβατότητα με τους παλαιότερους φυλλομετρητές, πρέπει να χρησιμοποιούμε και το name και το id, με τις ίδιες τιμές χαρακτηριστικών, ως εξής :
<img src="/kgiannaras/picture.gif" id="picture1" name="picture1" />
Το χαρακτηριστικό Lang
Το χαρακτηριστικό lang εφαρμόζεται σχεδόν σε κάθε στοιχείο της XHTML και καθορίζει τη γλώσσα του περιεχομένου (content) μέσα σ’ ένα στοιχείο.
Αν χρησιμοποιούμε το χαρακτηριστικό lang σ’ ένα στοιχείο, πρέπει να προσθέσουμε το χαρακτηριστικό xml:lang, ως εξής :
<div lang="en" xml:lang="no"> Hallo from Florina </div></strong></span></p>"</p>"</p> <p align="justify"></p> <p><strong><span style="text-decoration: underline;">Core Attributes</p> <p align="justify">
XHTML Event Attributes
Window Events
Ισχύουν μόνο στα body και frameset.
Χαρακτηριστικά Τιμές Περιγραφή
onload script Script που εκτελείται όταν φορτώνεται ένα έγγραφο
onunload script Script που εκτελείται όταν κλείνει ένα έγγραφο
Form Element Events
Ισχύουν μόνο στα στοιχεία φόρμας (form elements).
Χαρακτηριστικά Τιμές Περιγραφή
onchange script Script που εκτελείται όταν αλλάζει το στοιχείο
onsubmit script Script που εκτελείται όταν υποβάλλεται η φόρμα
onreset script Script που εκτελείται όταν μηδενίζεται (reset) η φόρμα
onselect script Script που εκτελείται όταν επιλέγεται το στοιχείο
onblur script Script που εκτελείται όταν το στοιχείο χάνει την εστίαση
onfocus script Script που εκτελείται όταν το στοιχείο αποκτά εστίαση
Keyboard Events
Δεν ισχύουν στα εξής : base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title.
Χαρακτηριστικά Τιμές Περιγραφή
onkeydown script Τι να κάνουμε όταν πατιέται ένα πλήκτρο
onkeypress script Τι να κάνουμε όταν πατιέται και αφήνεται ένα πλήκτρο
Onkeyup script Τι να κάνουμε όταν αφήνεται ένα πλήκτρο
Mouse Events
Δεν ισχύουν στα εξής : base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title.
Χαρακτηριστικά Τιμές Περιγραφή
onclick script Τι να κάνουμε όταν γίνεται κλικ με το ποντίκι
ondblclick script Τι να κάνουμε όταν γίνεται διπλό κλικ με το ποντίκι
onmousedown script Τι να κάνουμε όταν πατιέται το πλήκτρο του ποντικιού
onmousemove script Τι να κάνουμε όταν μετακινείται ο δείκτης του ποντικιού
onmouseover script Τι να κάνουμε όταν ο δείκτης του ποντικιού μετακινείται πάνω από ένα στοιχείο
onmouseup script Τι να κάνουμε όταν ελευθερώνεται ο δείκτης του ποντικιού
