Αστέρια ΑνενεργάΑστέρια ΑνενεργάΑστέρια ΑνενεργάΑστέρια ΑνενεργάΑστέρια Ανενεργά
 

συνταξη και διαφορες

 

Για να μπορέσει όμως να είναι τόσο ευέλικτη θα πρέπει μερικά πράγματα στο συντακτικό της HTML να αλλάξουν.

Ονόματα ετικετών και ιδιοτήτων

Όλα τα ονόματα των ετικετών και των ιδιοτήτων τους θα πρέπει να είναι γραμμένα με πεζά γράμματα.

view sourceprint?
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 μπορεί να ξεχάσετε να βάλετε μια ετικέτα τερματισμού όπως είναι τα παρακάτω :

view sourceprint?
1 < p> ...... το κείμενο της παραγράφου
2 < p> ...... και ακόμα μια παράγραφος

Με την XHTML θα πρέπει πάντα να βάζετε την ετικέτα τερματισμού. Έτσι το προηγούμενο παράδειγμα θα πρέπει να γραφτεί ως :

view sourceprint?
1 <p> ...... το κείμενο της παραγράφου ....... </p>
2 <p> ...... και ακόμα μια παράγραφος ....... </p>

Παράμετροι

Οι παράμετροι θα πρέπει πάντα να έχουν τιμή. Στην HTML μπορείτε να αφήσετε μερικές παραμέτρους χωρίς τιμή όπως είναι για παράδειγμα το :

view sourceprint?
1 < hr size="2" noshade>

Στην XHTML θα πρέπει να γραφτεί ως:

view sourceprint?
1 < hr size="2" noshade="noshade" />

Τιμές παραμέτρων

Οι τιμές των παραμέτρων στις ετικέτες θα πρέπει να είναι πάντα μέσα σε εισαγωγικά. Στην HTML μπορείτε να βάλετε μια τιμή χωρίς εισαγωγικά όπως εδώ :

view sourceprint?
1 < hr size=2>

Στην XHTML θα πρέπει να το γράψετε έτσι:

view sourceprint?
1 < hr size="2" />

Η Σύνταξη της XHTML

Η συγγραφή κώδικα 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 Τι να κάνουμε όταν ελευθερώνεται ο δείκτης του ποντικιού
 

 

Προσθήκη νέου σχολίου


Κωδικός ασφαλείας
Ανανέωση