AI

Σειρές Μαθημάτων

Σχετικά με το WLearn.gr

Μαθήματα XHTML

HOME

Γενικά για την XHTML

Η XHTML είναι συνδυασμός της HTML και της XML. Πιο συγκεκριμένα η XHTML είναι μια παραλλαγή της HTML γραμμένη με κανόνες σύνταξης της XML, δηλαδή ο κώδικας ενός XHTML αρχείου μπορεί να περιέχει σχεδόν όλες τις ετικέτες που περιέχει και η HTML, με διαφορά την αυστηρότερη σύνταξη του κώδικα.

Τα αρχικά της XHTML είναι από το EXtensible HyperText Markup Language το οποίο σημαίνει εκτεταμένη γλώσσα σήμανσης υπερκειμένου. Είναι μια πιο αυστηρή και πιο καθαρή έκδοση της HTML και μοιάζει πολύ με την HTML 4.01, η οποία είναι η τελευταία αναθεώρηση του προτύπου HTML το οποίο διαχειρίζεται το W3 Consortium. Ο ίδιος οργανισμός ανέπτυξε και διαχειρίζεται το πρότυπο της XHTML. Η τελευταία αναθεώρηση της XHTML είναι η XHTML 1.0 και ελευθερώθηκε στην αγορά (released) 26 Ιανουαρίου 2000. Σήμερα όλοι οι browsers είναι συμβατοί και μπορούν να "διαβάσουν" XHTML κώδικα, ενώ όλο και περισσότερες ιστοσελίδες χρησιμοποιούν το πρότυπο της XHTML αντί αυτό της HTML.

Για να μπορέσετε να συνεχίσετε στις ενότητες της XHTML θα πρέπει να γνωρίζετε HTML και CSS

Ο Κώδικας XHTML

Μέσα στις ενότητες των μαθημάτων XHTML θα συναντήσετε πολλές φορές ένα γαλάζιο πλαίσιο στο οποίο είναι γραμμένο το παράδειγμα του κώδικα XHTML στο οποίο αναφέρεται η θεωρία. Το πλαίσιο είναι κάπως έτσι:
Τίτλος παραδείγματος
<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>
περισσότερα για το παράδειγμα
Δοκίμασε το

Ο κώδικας που βρίσκεται μέσα στα πλαίσια αυτά, δεν αποτελεί τον κώδικα μιας ολοκληρωμένης ιστοσελίδας, αλλά ένα μέρος του κώδικα μιας ολοκληρωμένης ιστοσελίδας. Από τις πρώτες ενότητες θα μάθετε την μορφή του κώδικα (δηλαδή πως αρχίζει και πως τελειώνει ένας XHTML κώδικας) που έχει μια ιστοσελίδα

Η εφαρμογή 'Δοκίμασε το'


Το Δοκίμασε το είναι μια απλή εφαρμογή στην οποία μπορείτε να γράψετε XHTML κώδικα σε ένα πεδίο κειμένου και αφού πατήσετε το κουμπί να δείτε το αποτέλεσμα του κώδικα αυτού στην δεξιά οθόνη. Στις σελίδες των Μαθημάτων θα δείτε αρκετές φορές τον σύνδεσμο (link) Δοκίμασε το όπου πατώντας τον μπορείτε να μεταβαίνετε στην εφαρμογή και να δοκιμάζετε στην πράξη τις γνώσεις που μαθαίνετε στην Θεωρία.

Σύνοψη

Σε αυτή την σειρά μαθημάτων μάθαμε πώς να γράφουμε καθαρό κώδικα HTML σύμφωνα με το πρότυπο της XHTML 1.0 το οποίο περιλαμβάνει μια σειρά από κανόνες σύνταξης. Μάθαμε επίσης την χρήση της ετικέτας <!DOCTYPE> και πώς να την προσαρμόζουμε στις σελίδες μας ανάλογα με τον τρόπο που θέλουμε να συντάξουμε τον κώδικα.

Ο συνδυασμός της XHTML και της CSS μπορούμε να δημιουργήσουμε πραγματικά τόσο όμορφες όσο και καλογραμμένες ιστοσελίδες. Αν δεν γνωρίζετε CSS, το WLearn σας δίνει την ευκαιρία να μάθετε γρήγορα και εύκολα. Μάθετε CSS.

Και μην ξεχνάτε τους τρόπους επικοινωνίας για οποιαδήποτε ερώτηση ή απορία έχετε.

Modules

Με την διαίρεση της XHTML σε κομμάτια, η W3C δημιούργησε πολλά μικρά και καλά-ορισμένα σετ στοιχείων της XHTML τα οποία μπορούν να χρησιμοποιηθούν ξεχωριστά στις μικροσυσκευές.

Με την χρήση αυτών των υποδιαιρέσεων (modules) της XHTML, μπορούμε να φορτώσουμε στο υπολογιστικό σύστημα (υπολογιστή, palmtop, κινητό κτλ) που ανοίγει η ιστοσελίδα, μόνο αυτά τα κομμάτια της XHTML που χρειάζονται για να δουλέψει η ιστοσελίδα αυτή. Με αυτόν τον τρόπο πετυχαίνουμε μικρότερη επεξεργαστική ισχύ του palmtop, του κινητού κτλ. Βέβαια η χρήση των modules σε ιστοσελίδες που ξέρουμε ότι οι χρήστες θα την επισκέπτονται μόνο από υπολογιστές, είναι εντελώς αχρείαστες, καθώς η επεξεργαστική ισχύ ενός desktop ή ενός laptop είναι απείρως μεγαλύτερες από εκείνες ενός palmtop ή κινητού.

Παρακάτω θα δείτε τις 28 υποδιαιρέσεις της XTHML:
Module name Description
Applet Module Oρίζεται η ετικέτα <applet>
Base Module Ορίζεται η ετικέτα <base>
Basic Forms Module Ορίζονται όλες οι βσικές ετικέτες μιας HTML φόρμας
Basic Tables Module Ορίζονται όλες οι βσικές ετικέτες ενός πίνακα
Bi-directional Text Module Ορίζεται η ετικέτα <bdo>
Client Image Map Module Ορίζονται οι βασικές ετικέτες για το map μιας εικόνας
Edit Module Ορίζονται οι ετικέτες <del> και <ins>
Forms Module Ορίζονται όλες οι ετικέτες μιας HTML φόρμας
Frames Module Ορίζονται όλες οι ετικέτες για τα frames
Hypertext Module Ορίζεται η ετικέτα <a>
Iframe Module Ορίζεται η ετικέτα <iframe>
Image Module Ορίζεται η ετικέτα <img>
Intrinsic Events Module Ορίζονται γεγονότα (event attributes) όπως onblur, onchange κτλ.
Legacy Module Ορίζονται ετικέτες και ιδιότητες που είναι αποκλεισμένες απο την HTML 4.01
Link Module Ορίζεται η ετικέτα <img>
List Module Ορίζεται οι ετικέτες <ol>, <li>, <ul>, <dd>, <dt>, and <dl>
Metainformation Module Ορίζεται η ετικέτα <meta>
Name Identification Module Ορίζεται η ιδιότητα name η οποία είναι αποκλεισμένη απο την HTML 4.01
Object Module Ορίζεται τις ετικέτες <object> και <param>
Presentation Module Ορίζεται τις ετικέτες <b> και <i>
Scripting Module Ορίζεται τις ετικέτες <script> και <noscript>
Server Image Map Module Ορίζεται η ετικέτα <map>
Structure Module Ορίζεται τις ετικέτες <html>, <head>, <title>, και <body>
Style Attribute Module Ορίζεται η ιδιότητα style
Style Sheet Module Ορίζονταί όλοι οι κανόνες της CSS
Tables Module Ορίζονται όλες λοι ετικέτες που χρησιμοποιούνται μέσα σε ένα πίνακα
Target Module Ορίζεται η ιδιότητα target
Text Module Ορίζονται όλες οι ετικέτες που μορφοποιούν ή ομαδοποιούν κείμενο, όπως οι ετικέτες <p> and <h1>

Validation

Μπορούμε να ελέγξουμε αν οι ιστοσελίδες μας είναι γραμμένες σύμφωνα με το πρότυπο της XHTML 1.0. H W3C έχει αναπτύξει μια web εφαρμογή στην οποία πληκτρολογούμε το url της ιστοσελίδας μας και μας βγάζει μια λίστα με τα σημεία στον κώδικα μας που δεν είναι σύμφωνα με το πρότυπο, ανάλογα βέβαια και το DTD που έχουμε επιλέξει. Δηλαδή σε ένα XHTML έγγραφο με strict DTD, η εφαρμογή θα περιμένει να μην "δει" στον κώδικα ετικέτες που αποκλείστηκαν από την HTML 4.01 και να τηρούνται οι κανόνες σύνταξης της XHTML 1.0. Επίσης θα "δει" λάθος στην χρήση frames. Σε ένα έγγραφο με transitional DTD, η εφαρμογή δεν θα "δει" λάθος στις ετικέτες που έχουν αποκλειστεί από την HTML 4.01. Ενώ σε ένα XHTML έγγραφο με frameset DTD δεν θα "δει" λάθος στην χρήση frames.

Για να ελέγξετε την δική σας ιστοσελίδα, επισκέπτεται την σελίδα http://validator.w3.org/

Μετάβαση στην XHTML

Σήμερα το μεγαλύτερο ποσοστό των ιστοσελίδων είναι γραμμένο σύμφωνα με το πρότυπο XHTML. Είναι πολλοί web designers όμως, ανάμεσα τους και εγώ, που ξεκίνησαν να δημιουργούν τις ιστοσελίδες τους χωρίς να ακολουθούν τους κανόνες της XHTML με αποτέλεσμα, όταν κατανοούν τα θετικά της XHTML, να πρέπει να τις εναρμονίσουν σύμφωνα με το πρότυπο της. Όταν μιλάμε για λίγες σελίδες, τότε το εγχείρημα είναι εύκολο. Αν όμως μιλάμε για εκατοντάδες σελίδες, όπως ήταν αυτές του wlearn.gr, η μετατροπή τους σε XHTML γίνεται μια αρκετά χρονοβόρα διαδικασία. Σε κάθε περίπτωση όμως, αξίζει να γίνει η μετάβαση στο πρότυπο της XHTML 1.0

Χρειάζεται μεθοδική μετάβαση

Η μετάβαση απαιτεί την εφαρμογή των κανόνων XHTML. Σε καμία περίπτωση δεν θα χρειαστεί να γράψουμε από την αρχή τον κώδικα μιας σελίδας. Η εφαρμογή των κανόνων του προτύπου γίνεται διορθώνοντας τον κώδικα των σελίδων που απαρτίζουν το site μας. Όλες οι αλλαγές πρέπει να γίνουν προσεκτικά και μεθοδικά ώστε να μην υπάρχουν αλλοιώσεις ή προβλήματα στην εμφάνιση του site. Αν το εγχείρημα της μετάβασης γίνει μεθοδικά, τότε δεν θα υπάρχει κανένα πρόβλημα και στο τέλος θα έχουν μετατραπεί σωστά όλες οι σελίδες του site σύμφωνα με το πρότυπο της XHTML. Παρακάτω προτείνω την σειρά των βημάτων που πρέπει να ακολουθήσει κάποιος για μια πετυχημένη μετάβαση.

1. Προσθήκη της ετικέτας <!DOCTYPE>
Το πρώτο και εύκολο βήμα, είναι να προσθέσουμε την ετικέτα <!DOCTYPE> στην πρώτη γραμμή κάθε σελίδας, επιλέγοντας το σωστό DTD όπως περιγράψαμε αναλυτικά στην προηγούμενη ενότητα.

2. Όλα με πεζούς χαρακτήρες
Έπειτα ότι είναι γραμμένο με κεφαλαίους χαρακτήρες, είτε είναι ετικέτες είτε ιδιότητες είτε τιμές, πρέπει να τα μετατρέψουμε σε πεζούς χαρακτήρες. Στο βήμα αυτό πρέπει να προσέχουμε να μην παραλείψουμε κάποιον χαρακτήρα, καθώς ο κώδικας συνήθως είναι μεγάλος και η προσοχή που καταβάλουμε δεν μπορεί να παραμείνει στο μέγιστο βαθμό όσο περνάει η ώρα. Προτιμότερο είναι να αφιερώσετε μια ή και δύο μέρες παραπάνω, παρά να τελειώσετε την μετάβαση γρήγορα αλλά με πολλά λάθη, για τα οποία θα καταναλώσετε ακόμη περισσότερο χρόνο για να τα εντοπίζετε.

3. Οι τιμές των ιδιοτήτων σε εισαγωγικά
Το επόμενο βήμα είναι να βάλουμε σε εισαγωγικά όλες τις τιμές των ιδιοτήτων.

4. Ετικέτες τέλους και σωστό φώλιασμα
Τελευταίο βήμα είναι να προσθέσουμε ετικέτες τέλους όπου δεν υπάρχουν και να ελέγξουμε αν είναι σωστά φωλιασμένες. Προσοχή στις ετικέτες που δεν παίρνουν ετικέτες τέλους όπως <br />, <hr />, <input> κτλ. η οποίες πρέπει να βάζουμε πλάγια κάθετο πριν την δεξια αγκύλη, δηλαδή: <br />, <hr /> κτλ.

Find and Replace

Στα πλαίσια της μετάβασης του wlearn.gr στο πρότυπο της XHTML 1.0, για να αποφύγω την σάρωση με το μάτι όλων των γραμμών του κώδικα κάθε σελίδας, χρησιμοποίησα το εργαλείο Find and Replace του Dreamweaver 2008, η χρήση του οποίου μείωσε αρκετά τον συνολικό χρόνο που χρειάστηκα για να ολοκληρώσω την μετάβαση.

Με το εργαλείο αυτό μπορούμε να αντικαταστήσουμε μια λέξη ή μια πρόταση με μια άλλη και να εφαρμόσουμε αυτήν την αντικατάσταση στο σύνολο των αρχείων ενός φακέλου. Με αυτόν τον τρόπο πέτυχα την αλλαγή πολλών γραμμών κώδικα μόνο με το πάτημα ενός κουμπιού.

Για παράδειγμα, η προσθήκη της ετικέτας <!DOCTYPE> στην πρώτη γραμμή του κώδικα κάθε σελίδας, έγινε με τον εξής τρόπο:

Macromedia Dreamweaver Find and Replace

Αν έχετε κάποιο τέτοιο εργαλείο που γνωρίζετε καλά τον χειρισμό του, χρησιμοποιήστε το για να γλιτώσετε χρόνο και κόπο. Αλλά θέλει πολύ προσοχή στην εφαρμογή των αντικαταστάσεων, γιατί οι αλλαγές που γίνονται δεν επιδέχονται αναίρεση (undo). Οπότε καλό είναι πριν από οποιαδήποτε εφαρμογή αντικατάστασης να αντιγράφεται όλο τον φάκελο με τα αρχεία του site κάπου αλλού, ώστε να έχετε την δυνατότητα αποκατάστασης αρχείων σε περίπτωση που κάτι δεν πάει καλά.

DOCTYPE

Όπως είπαμε, η ετικέτα <DOCTYPE> είναι απαραίτητη σε κάθε XHTML έγγραφο, αν και δεν είναι μέρος της XHTML. Η ετικέτα αυτή ορίζει τον τύπο του εγγράφου, το DTD δηλαδή, όπως εμφανίζεται στην επίσημη αγγλική ορολογία και σημαίνει Document Type Definition.

Τα τρία Document Type Definitions (DTD) της XHTML

Ένα DTD ορίζει τον τρόπο σύνταξης μιας ιστοσελίδας μέσα στο χάος των εντολών και των τρόπων σύνταξης της SGML. Τα DTDs χρησιμοποιούνται από τα υποσύνολα της SGML, όπως είναι η XHTML, η HTML και η XML, για να ορίσουν και να ομαδοποιήσουν κανόνες συγκεκριμένου τύπου για το έγγραφο που δημιουργούμε. Τέτοιοι κανόνες είναι το σύνολο των ετικετών που μπορούμε να χρησιμοποιήσουμε μέσα στο κάθε έγγραφο καθώς και ο τρόπος σύνταξης αυτών των ετικετών. Με λίγα λόγια ένα XHTML DTD ορίζει την επιτρεπτή σύνταξη των XHTML στοιχείων μέσα σε ένα έγγραφο. Υπάρχουν τρία XHTML DTDs :
  • - STRICT
  • - TRANSITIONAL
  • - FRAMESET

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Χρησιμοποιούμε το strict DOCTYPE όταν θέλουμε να τηρήσουμε πραγματικά τους κανόνες του προτύπου της XHTML 1.0. Σε αυτού του τύπου εγγράφων μπορούμε να χρησιμοποιήσουμε ετικέτες XHTML αλλά και κώδικα CSS σύμφωνα με το πρότυπο της XHTML 1.0. Επίσης σε αυτό το DTD δεν θα πρέπει να έχουμε ετικέτες οι οποίες έχουν αποκλειστεί από το πρότυπο της HTML 4.01

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Χρησιμοποιούμε το transitional DOCTYPE όταν θέλουμε να χρησιμοποιήσουμε στο έγγραφο μας και ετικέτες που έχουν αποκλειστεί από το πρότυπο της HTML 4.01, όπως οι <font>, <cite> κτλ.

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Χρησιμοποιούμε το transitional DOCTYPE όταν θέλουμε να χρησιμοποιήσουμε frames (πλαίσια) τα οποία δεν τα συνιστά το πρότυπο της XHTML 1.0