Σταδία Στατιστικής της XHTML: Επίδειξη Περιπτώσεων: Μαρτυρίες της Στατιστικής του W3school

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

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

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

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

Πρέπει να δομιστούν όλα τα στοιχεία;

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

Το 2006, δημιουργήσαμε την πρώτη ελληνική δοκιμαστική έκδοση του CodeW3C.com, χρησιμοποιώντας CSS για τη διάταξη και XHTML για τη δομική του έγγραφου. Κάθε στοιχείο είναι δομικό, από τους τίτλους μέχρι τις λίστας και τα παράγραφα. Μπορείτε να δείτε τον κουμπί της αρχικής σελίδας με αντιστροφή και τα κουμπιά του δεύτερου επιπέδου στο CodeW3C. Ακολουθεί το XHTML κώδικα για αυτά τα δύο στοιχεία:

<div id="header"><h1><a href="/">codew3c在线教程</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="Σκрипτς για Server">Σκрипτς για Server</a></li>
<li id="d"><a href="/d.asp" title="Εκπαιδευτικό υλικό για dot net">Εκπαιδευτικό υλικό για dot net</a></li>
<li id="m"><a href="/m.asp" title="Εκπαιδευτικό υλικό για Multimedia">Εκπαιδευτικό υλικό για Multimedia</a></li>
<li id="w"><a href="/w.asp" title="Εγχειρίδιο Δημιουργίας Ιστοσελίδων">Εγχειρίδιο Δημιουργίας Ιστοσελίδων</a></li>
</ul>
</div>

div, id και άλλοι βοηθοί

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

Το W3C ορίζει τον div στο μοντέλο δομής του XHTML2 έτσι:

Ο στοιχείο div, σε συνδυασμό με τις ιδιότητες id, class και role, παρέχει ένα γενικό μηχανισμό για την προσθήκη επιπλέον δομής στο έγγραφο. Το στοιχείο αυτό δεν ορίζει την αισθητική του στυλ στο περιεχόμενο. Επομένως, ο δημιουργός μπορεί να χρησιμοποιήσει αυτό το στοιχείο με συνδυασμό με στυλ, xml:lang, ιδιότητες κ.λπ., ώστε το XHTML να προσαρμόζεται στις ανάγκες και τις προτιμήσεις του.

Το div είναι το συντομευμένο όνομα για division. Division σημαίνει διάσπαση, περιοχή, ομάδα. Για παράδειγμα, όταν συνδυάζετε μια σειρά από σύνδεσμους, δημιουργείτε μια division του έγγραφου.

Το γενικό σύστημα προσθήκης δομής

Όλοι οι συγγραφείς HTML είναι εξοικειωμένοι με τα συνηθισμένα στοιχεία όπως τα παραθέματα και οι τίτλοι, αλλά μερικοί μπορεί να μην είναι εξοικειωμένοι με το div. Στο περιγραφή του W3C μπορούμε να βρούμε την κλειδιά για την κατανόηση του στοιχείου div, "ένα γενικό σύστημα προσθήκης δομής."

Στην αρχική σελίδα του ιστοτόπου μας, το κατάλογο των εκμάθησης ενσωματώνουμε σε έναν div, επειδή ο κατάλογος εκμάθησης δεν είναι μέρος οποιουδήποτε στοιχείου του κειμένου. Ο h2 στοιχείο σηματοδοτεί τον τίτλο κάθε εκμάθησης, ενώ η λίστα ul σηματοδοτεί την λεπτομερή λίστα κάθε εκμάθησης. Ωστόσο, σε μεγαλύτερο και πιο συγκεκριμένο νόημα, αυτός ο κατάλογος εκμάθησης παίζει έναν ρόλο δομής, δηλαδή το στοιχείο δεύτερης πλοήγησης. Για να τονιστεί αυτός ο ρόλος, χρησιμοποιούμε το id navsecond για να σηματοδοτήσουμε αυτόν τον div.

<div id="navsecond">
<h2>Εκμάθηση HTML</h2>
<ul>
<li><a href="/html/index.asp" title="Εκμάθηση HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="Εκμάθηση XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="Εκμάθηση CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="Εκμάθηση TCP/IP">TCP/IP</a></li>
</ul>
<h2>Εκμάθηση XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Εκμάθηση XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL γλώσσα">XSL</a></li>
... ...
... ...
</div>

Μπορείτε να χρησιμοποιήσετε οποιοδήποτε όνομα. "Gladys" και "orangebox" είναι πλήρως σύμφωνα με τους κανόνες ονοματοδοσίας του XHTML. Ωστόσο, τα ονόματα που έχουν σημασιολογικό (semantic) ή μετα-σtrucтурικό (meta-structural) χαρακτήρα είναι τα καλύτερα (δηλαδή αυτά που μπορούν να εξηγήσουν τη λειτουργία των στοιχείων που περιέχουν).

当客户决定使用蓝色时，你会觉得将网站的一部分命名为 orangebox（橙色框）非常愚蠢。在以下情况下，你会觉得自己更愚蠢，当只剩下六个月交付时，你开始调整样式表，却怎么也想不起来 "Gladys"（格拉迪斯，女性名）到底代表导航区、侧栏还是搜索框。

因此，将 id 标记为 "menu"、"content" 或 "searchform" 会帮助你回忆。进一步讲，标记不等同于设计，结构良好的页面可以被格式化为任何你希望的样子。这样做的结果是，无论你使用纯 CSS 布局还是混合布局，你都会彻底改变使用表现标记进行思考和创作的习惯。

id 与 class

id 属性对 XHTML 来说并不陌生；class 属性或者 div 元素也是如此。它们都可以追溯到 HTML 时代。id 属性为一个元素分配一个唯一的名称。每个名称只能在被赋予的页面中使用一次。（例如，如果你的页面包含 id 为 content 的 div，那么另一个 div 或其他元素都不能使用这个名字。相反，class 属性可以在页面中多次使用（例如，页面中的五个段落都可以使用名为 "small" 或 "footnote" 的 class 名称）。下面的标记将有助于说明 id 和 class 的区别：

<div id="searchform">搜索表单组件放在这里。这个
页面的某个部分是唯一的。</div>
<div class="blogentry">
   <h2>今天的博客文章</h2>
   <p>博客内容在这里。</p>
   <p>这是博客内容的另一个段落。</p>
   <p>就像一个页面可以有多个段落一样，同样
   一个博客中可能有多个条目。一个博客页面可能使用
   存在多个 "blogentry" 类（或任何其他
   class).</p>
</div>
<div class="blogentry">
   <h2>Yesterday's blog post</h2>
   In fact, here we are inside another div of class
   "blogentry."
   They reproduce like rabbits.
   If there are ten blog posts on this page, there might
   be ten divs of class "blogentry" as well.
</div>

在这个例子中，名为 searchform 的 div 被用来封装包含搜索表单的页面区域，而 div class="blogentry" 则用来封装 blog 中的每个文章入口。在页面中只有一个搜索表单，所以我们选择 id 标注这个唯一的组件。但是 blog 则拥有许多的（文章）入口，所以 class 属性被应用于这种情况。同样地，新闻站点通常拥有多个 div，这些 div 的 class 可以命名为 "newsitem" 或者别的什么。

然而不是所有的站点都需要 div。blog 站点可以仅仅使用 h1, H2, 和 h2 标题和 <p> 段落，新闻站点也一样。我们在这里展示 class 为 blogentry 的 div，并不是鼓励你在站点中塞满 div，而仅仅是为了向你展示这个原则：在同一个 HTML 文档中，使用多次 class，但只能使用一次 id。

粘性贴纸理论

把 id 属性比作粘性贴纸来进行思考应该是有帮助的。我会在冰箱上拍一张贴纸来提醒自己去买牛奶，电话上面也会贴一张，提醒我给一位逾期缴纳的客户打电话。还有一个，被贴在账本夹上面，来提醒我这个月 15 号之前必须缴纳的账单。

id同样会标注文档中的特殊区域，以便提醒你哪个区域需要特殊的处理，在这点上，id属性与粘性贴纸是相似的。为了实现所谓的特殊处理，你需要使用这个特殊的id在样式表中编写若干规则，或者在JavaScript文件中添加几行代码。比方说，你的CSS文件中有一些特定的规则，这些规则只应用于id名为searchform的div内的元素。

When an id attribute is used as a magnetic thing (magnet) for a series of specific CSS rules, it is called a CSS selector. There are manyCreating selectorsmethod, but id is easy to use and has many uses.

The power of id

The id attribute is incredibly powerful. It has the following capabilities:

  • As a stylesheet selector, allowing us to create compact and minimized XHTML.
  • As the target anchor of hyper text, replacing the outdated name attribute.
  • As a method to locate specific elements from scripts based on DOM.
  • As the name of an object element.
  • As a tool for general purpose processing (in the examples of W3C, 'used as a domain identification tool when extracting data from HTML pages to databases, or converting HTML documents to other formats, etc.).

Rules for id

The id value must start with a letter or underscore; it cannot start with a number. Although W3C validation will not catch this error, an XML parser will. At the same time, if you use id with JavaScript in a form, the id name and value must be valid JavaScript variables. Spaces and hyphens, especially hyphens, are not allowed. Moreover, using underscores for class or id names is not a good idea, due to the limitations in CSS2.0 (and some browsers).

Semantic markup and accessibility

Now, we have discussed the widely used XHTML elements (especially div and id), let's look at some examples related to the homepage of this site. First, let's review the menu located at the header position:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="Σκрипτς για Server">Σκрипτς για Server</a></li>
<li id="d"><a href="/d.asp" title="Εκπαιδευτικό υλικό για dot net">Εκπαιδευτικό υλικό για dot net</a></li>
<li id="m"><a href="/m.asp" title="Εκπαιδευτικό υλικό για Multimedia">Εκπαιδευτικό υλικό για Multimedia</a></li>
<li id="w"><a href="/w.asp" title="Εγχειρίδιο Δημιουργίας Ιστοσελίδων">Εγχειρίδιο Δημιουργίας Ιστοσελίδων</a></li>
</ul>
</div>

Πολλαπλάς σύνδεσμοι, κάθε ένας από τους οποίους έχει分配εί ένα 'id' για να αντιστοιχεί στο αντίστοιχο περιεχόμενο: για παράδειγμα, το 'id' 'h' αντιστοιχεί στην οδηγία HTML, και ούτω καθεξής. Επιπλέον, αυτοί οι σύνδεσμοι περιλαμβάνονται σε ένα στοιχείο λίστας με το όνομα 'menu', το 'id' 'menu' σημειώνει τη λειτουργία αυτής της λίστας - μια λίστα μενού, ενώ το εξωτερικό στοιχείο 'div' με το όνομα 'navfirst' σημειώνει το συγκεκριμένο κεφάλαιο της σελίδας, διακρίνοντας το από στοιχεία όπως το κύριο περιεχόμενο (maincontent), την πλευρική στήλη (sidebar) και το πίσω μέρος της σελίδας (footer).

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

Παρακαλώ σημειώστε ότι αυτές οι σήμανσεις δεν περιέχουν ετικέτες 'img', οπότε δεν περιλαμβάνουν ιδιότητες όπως το width, height, background ή border κ.λπ. Επιπλέον, δεν χρησιμοποιούν κελιά τάβλων, οπότε δεν περιλαμβάνουν και τις σχετικές ιδιότητες. Είναι πολύ καθαρά και μικρά, προσφέροντας όλες τις πληροφορίες που χρειάζονται για την κατανόησή τους.

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

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

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