Δομή του XHTML 1: Χρήση του XHTML για την Ανασχεδιασμό Ιστοσελίδων

Ένα από τα τίτλοι που έχουμε γράψει για αυτή την ενότητα είναι: "XHTML: Απλοί κανόνες, εύκολες οδηγίες." Μια από τις αιτίες είναι ότι οι κανόνες και οι οδηγίες που συζητούνται σε αυτή την ενότητα είναι απλοί και εύκολοι. Η δεύτερη αιτία είναι ότι ένα βιβλίο για τη σχεδίαση ιστοσελίδων που είναι απλό και εύκολο, όπως ένα δωρεάν προϊόν του σουπερμάρκετ, μπορεί να προσελκύσει την προσοχή και να ενθαρρύνει τους ανθρώπους να δοκιμάσουν.

Ελπίζω το περιεχόμενο αυτού του κεφαλαίου να σας ενθαρρύνει και να σας παρακινήσει να δοκιμάσετε. Γιατί να το κάνω αυτό; Γιατί όταν μάθετε τις απλές και εύκολες ιδέες που περιλαμβάνονται σε αυτό το κεφάλαιο, θα ξανασκεφτείτε τον τρόπο λειτουργίας των ιστοσελίδων και θα ξεκινήσετε να τις δημιουργείτε με νέους τρόπους. Ωστόσο, δεν θέλω να κάνετε απλώς αναθεώρηση του κώδικα. Θέλω να σκέφτεστε και να εργάζεστε με μια νέα μέθοδο.

Από την άλλη πλευρά, η αναδιαρθρώτηση είναι η πραγματική σημασία του XHTML.

Σε αυτή την ενότητα, θα εξετάσουμε τη λειτουργία και τη σημασία των δομικών σημειώσεων. Αν προσπαθείτε να ενσωματώσετε πρότυπα ιστοσελίδων στο έργο σας ανάπτυξης, μπορεί να βρείτε ότι το περιεχόμενο αυτής της ενότητας σας είναι γνωστό. Ωστόσο, حتى οι έμπειροι επαγγελματίες θα βρουν έκπληξη από αυτή την ενότητα.

Σύνοψη κανόνων XHTML

Η μετατροπή του παραδοσιακού HTML σε XHTML 1.0 είναι γρήγορη και εύκολη, αρκεί να ακολουθήσετε μερικές απλές κανόνες και οδηγίες. Είτε έχετε χρησιμοποιήσει HTML είτε όχι, δεν θα σας εμποδίσει να χρησιμοποιήσετε το XHTML.

  • Χρησιμοποιήστε κατάλληλο τύπο κειμένου και διάσταση για τη δήλωση.
  • Χρησιμοποιήστε το στοιχείο meta για να δηλώσετε τον τύπο περιεχομένου σας.
  • Γράψτε όλα τα στοιχεία και τις ιδιότητες με μικρά γράμματα.
  • Χρησιμοποιήστε εισαγωγικά για τις τιμές των ιδιοτήτων.
  • Δ分配τε τιμές σε όλες τις ιδιότητες.
  • Κλείστε όλα τα σημειώματα.
  • Χρησιμοποιήστε κενά και κλίματα για να κλείσετε τα κενά σημειώματα.
  • Μην γράφετε διπλά κάτω χαρακτήρες στα σχόλια.
  • Βεβαιώστε ότι τα σύμβολα < και & χρησιμοποιούνται σωστά.

Unicode και άλλες γλωσσικές ομάδες

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

Αν και το Unicode είναι η προεπιλεγμένη γλωσσική ομάδα για τα έγγραφα web, οι προγραμματιστές μπορούν ελεύθερα να επιλέξουν άλλες γλωσσικές ομάδες που ταιριάζουν καλύτερα στις ανάγκες τους. Για παράδειγμα, οι ιστοσελίδες των Ηνωμένων Πολιτειών και της Ευρώπης συχνά χρησιμοποιούν την κωδικοποίηση ISO-8859-1 (Latin-1), ενώ η εθνική πρότυπο της Κίνας είναι το gb2312.

Μαρκαρίστε τα έγγραφα για την σημασιολογία τους, όχι για το στυλ

Μην ξεχνάτε: χρησιμοποιήστε το CSS όσο το δυνατόν περισσότερο για τη διάταξη. Στο κόσμο των web standard, η μορφοποίηση των XHTML σημάτων δεν έχει να κάνει με την αφήγηση, αλλά με τη δομή του εγγράφου.

Έγγραφα με καλή δομή μπορούν να μεταφέρουν στον περιηγητή όσο το δυνατόν περισσότερη σημασιολογία, ανεξάρτητα από το αν ο περιηγητής βρίσκεται σε ένα palmtop ή σε ένα μοντέρνο γραφικό περιηγητή επιφάνειας εργασίας. Έγγραφα με καλή δομή μπορούν να μεταφέρουν στον χρήστη οπτική σημασιολογία, ακόμη και σε παλιούς περιηγητές ή σε σύγχρονους περιηγητές με το CSS απενεργοποιημένο.

Δεν κάθε ιστοσελίδα μπορεί να απορρίψει αμέσως τη διάταξη πινάκων HTML. Ο δημιουργός του CSS, το W3C, δεν μετέφερε το επίσημο του ιστότοπο σε διάταξη CSS μέχρι τον Νοέμβριο του 2002. Ωστόσο, حتى οι επιμονή σε κανονισμούς δεν είναι πάντα αποφασιστικά να αποσπάσουν την αφήγηση από τη δομή, τουλάχιστον όχι στο XHTML 1. Αλλά τώρα, μπορούμε να κάνουμε σημαντικό βήμα προς αυτόν τον ιδεατό στόχο, αποσπώντας την αφήγηση από τη δομή (ή τα δεδομένα από το σχεδιασμό), ακόμη και οι παραδοσιακές διατάξεις μπορούν να επωφεληθούν.

Ακολουθούν μερικές συμβουλές που θα σας βοηθήσουν να σκέφτεστε με πιο δομημένο τρόπο:

Χρώματα εντός του κεφαλαία

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

Πράγματι, σύμφωνα με το HTML, θα πρέπει να δομήσουμε το περιεχόμενο σε οργανωμένα επίπεδα. Σε εποχές όπου οι περιηγητές δεν υποστηρίζουν το CSS, δεν μπορούμε να διασφαλίσουμε τη παράδοση μιας πωλησιμότητας σχεδίασης. Αλλά σήμερα, με την πλήρη εφαρμογή του σχεδιασμού μας, έχουμε τη δυνατότητα να παράγουμε έγγραφα με καλή εσωτερική δομή.

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

<h1>Το θέμα μου</h1>
<p>Εισαγωγικό κείμενο</p>
<h2>Προσθέτητες γνώσεις</h2>
<p>Σχετικά κείμενο</p>

Επίσης, αποφύγετε τη χρήση απορριφθέντων στοιχείων HTML όπως το <font>, ή μη σημασιολογικών στοιχείων όπως το <br />, για να μιμηθούν μη υπαρχουσες λογικές δομές.

Για παράδειγμα, μην το κάνετε αυτό:

<font size="7">Το θέμα μου</font><br />
Εισαγωγικό κείμενο<br /><br />
<font size="6">Προσθέτητες γνώσεις</font><br />
Σχετικά κείμενο<br />

Χρησιμοποιήστε τα στοιχεία σύμφωνα με τη σημασία τους και όχι σύμφωνα με την εμφάνισή τους

Μερικοί από εμάς έχουν πέσει σε μια κακή συνήθεια, χρησιμοποιούμε το h1 όταν χρειαζόμαστε απλά ένα μεγάλο κείμενο, ή το li όταν χρειαζόμαστε μια σημείωση στην αρχή. Όπως συζητήσαμε στο προηγούμενο κεφάλαιο, οι περιηγητές πάντα προτιμούν να επιβάλλουν τις σχεδιαστικές ιδιότητες στους HTML στοιχείους. Όλοι μας έχουμε συνηθίσει να πιστεύουμε ότι το h1 σημαίνει μεγάλο κείμενο, και το li σημαίνει σημεία, ή το blockquote σημαίνει ενσωματωμένο κείμενο. Οι περισσότεροι από εμάς συνεχίζουμε να χρησιμοποιούμε τα στοιχεία δομής για να μιμηθούν τις απεικονιστικές ιδιότητες και να γράψουμε άγριο HTML.

Όπως και έτσι, αν ο σχεδιαστής θέλει να χρησιμοποιούνται όλοι οι τίτλοι με την ίδια κλίμακα, θα τους ρυθμίζει όλους ως h1, ακόμα και αν αυτό δεν έχει καμία σημασιολογική δομή.

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

Πρέπει να αποθέσουμε τα μικρά μας τρικ και να αρχίσουμε να τα χρησιμοποιούμε σύμφωνα με τη σημασία τους, και όχι με το πώς φαίνονται. Δεδομένου ότι, το h1 μπορεί να γίνει οποιαδήποτε μορφή θέλετε. Με το CSS, το h1 μπορεί να γίνει μικρός, μη κουραστικός ρωμαϊκός χαρακτήρας, ενώ το κείμενο p μπορεί να γίνει μεγάλο και粗体, και οι li μπορεί να μην έχουν σημεία (μπορείτε να χρησιμοποιήσετε εικόνες μικρών γάτες ή σκύλων ή εικονίδια εταιρείας σε μορφή PNG, GIF ή JPEG).

Από σήμερα και μετά, θα χρησιμοποιήσουμε το CSS για να καθορίσουμε την εμφάνιση των στοιχείων. Μπορούμε حتى να αλλάξουμε την εμφάνισή τους ανάλογα με τη θέση τους στην σελίδα ή στον ιστότοπο. Το CSS μπορεί να αποσπάσει πλήρως την απεικόνιση από τη δομή και να σας επιτρέψει να μορφοποιήσετε οποιοδήποτε στοιχείο με το στυλ που σας αρέσει.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

Γιατί το κάνεις αυτό; Ο στόχος είναι να αποκτήσεις μια μορφή και αίσθηση που είναι μάρκετινγκ στο γραφικό περιηγητή, ενώ η δομή του κειμένου διατηρείται σε κείμενους περιηγητές, σε ασύρματα συσκευές, και σε email με μορφή HTML.

Δεν θέλουμε να μιλήσουμε περισσότερο για την τεχνολογία του CSS στο κεφάλαιο για το XHTML. Απλά θέλουμε να δείξουμε ότι η δομή του κειμένου και η οπτική έκφραση είναι δύο εντελώς διαφορετικά πράγματα και ότι τα στοιχεία δομής πρέπει να χρησιμοποιούνται για την μετατροπή κειμένου, όχι για την επιβολή εμφάνισης.

Χρησιμοποίησε στοιχεία δομής, όχι άχρηστο χάος

Επειδή έχουμε ξεχάσει ή δεν γνωρίζουμε ποτέ την χρήση του HTML και του XHTML για την αποστολή δομικών σημασιών, πολλοί διαφωνούντες του HTML χρησιμοποιούν τα ετικέτες για να εισάγουν λίστας:

Τμήμα ένα<br />
Τμήμα δύο<br />
Τμήμα τριών<br />

Περιέλεξε να χρησιμοποιήσεις σειριακή ή μη σειριακή λίστα αντί για αυτήν.

<ul>
<li>Τμήμα ένα</li>
<li>Τμήμα δύο</li>
<li>Τμήμα τριών</li>
</ul>

"Αλλά το li μου δίνει ένα κύκλο, και δεν χρειάζομαι κύκλο!" Μπορείς να πεις. Σύμφωνα με τον παραπάνω κεφαλαίο, το CSS δεν κάνει καμία υποθέτηση για την αναμενόμενη εμφάνιση των στοιχείων. Προσμένει να σου πεις τι αναμένεις από την εμφάνιση των στοιχείων. Η απλή αφαίρεση του κύκλου είναι η πιο βασική ικανότητα του CSS. Έχει τη δυνατότητα να κάνει τη λίστα να μοιάζει με κοινό κείμενο, αλλά και να κάνει τη λίστα να μοιάζει με γραφική γραμμή導航, με πλήρη αντίστροφη επίδραση.

Άρα, χρησιμοποίησε στοιχεία λίστας για να σημειώσεις λίστας. Αντίστοιχα, χρησιμοποίησε το strong αντί για το b, το em αντί για το i, κ.λπ. Στα περισσότερα περιηγητές桌面, η εμφάνιση του strong είναι ίδια με το b, και το em με το i, και μπορείς επίσης να δημιουργήσεις την αναμενόμενη εμφάνιση χωρίς να καταστρέψεις τη δομή του κειμένου.

Αν και το CSS δεν κάνει καμία υποθέτηση για την εμφάνιση οποιουδήποτε στοιχείου, οι περιηγητές κάνουν πολλές υποθέσεις και δεν έχουμε συναντήσει έναν περιηγητή που να εμφανίζει το strong σε άλλη από την κατηγορία bold (εκτός αν ο σχεδιαστής έχει ορίσει άλλη εμφάνιση με CSS). Αν ανησυχείς ότι ένας άγνωστος περιηγητής δεν θα εμφανίσει το strong σε bold, μπορείς να γράψεις αυτή τη γραμμή CSS:

strong {
	font-weight: bold;
	font-style: normal;
	{}

Οπτικά στοιχεία και δομή

Οι web standards απαιτούν όχι μόνο το είδος της τεχνολογίας που χρησιμοποιούμε, αλλά και τον τρόπο χρήσης αυτών των τεχνολογιών. Η χρήση του XHTML για τη γραφή των σημάτων και του CSS για τη διαχείριση ενός μέρους ή όλου του στυλ δεν κάνει απαραίτητα το site πιο εύχρηστο και ελαφρύτερο, και δεν εξοικονομεί απαραίτητα τόσο宽带. Ωστόσο, όπως στις αρχές της χρήσης μας των τεχνολογιών, και το XHTML και το CSS μπορούν να χρησιμοποιηθούν λάθος και υπερβολικά. Η μακρά XHTML και η μακρά HTML θα χαραμίζουν το μπαντς και το χρόνο του χρήστη. Η μακρά και υπερβολική χρήση του CSS δεν μπορεί να αντικαταστήσει πλήρως το HTML που χρησιμοποιείται για την παρουσίαση; Αυτό είναι απλώς ένα κακό πράγμα που αντικαθιστά ένα άλλο κακό πράγμα.