XHTML Structuring 2: Case Study: W3school's Structured Tags

Anuman ang mangyari, huwag manghulog sa Seksyon na ito. Ang pagbabasa ng Chapter na ito ay magpapakalat ng iyong kakayahan, nagpapahinog sa iyong web page, at nagbibigay sa iyo ng mas malinaw na kaalaman sa pagitan ng markasyon at disenyo. Ang mga ideya sa Chapter na ito ay madaling matututo, ngunit makakatulong nang lubha sa pagpapaunlad ng pagkakayang ng website, at ang kagamitan sa disenyo, paggawa at pag-update ng website.

Sa Seksyon na ito, malalaman mo kung paano gumawa ng logikal at mahigit sa markasyon, na nagbibigay sa iyo ng kakayahan na bawasan ang bandwith traffic ng halos 50%, habang nagbawas din ng presyon at pagpapatrabaho ng server, at bawasan din ang oras ng pagkakarga ng website. Sa pamamagitan ng pagtanggal ng mga elemento na mahina at pagbabago ng mga masamang kumikilos na walang kapakinabangan, mapapabuti natin ang mga ito.

Ang mga masamang gawain na ito ay nakakalungkot sa maraming site sa web, lalo na sa mga site na nagkakasamang gamit ang CSS code at table-based layout. Ang gawaing ito ay mahirap at hindi makakabuti, kahit na ang mga tagapagdisenyo na may mahusay na karanasan sa iba pang larangan. Gayundin, ang probabilidad ng pagkakaroon ng problema ay pare-pareho, kahit na ang mga site na nagsusulat ng code nang kamay, o gumagamit ng mga makikitang tagapagwasto tulad ng Dreamweaver at GoLive.

Ito ay magtuturo sa mga pangkaraniwang pagkakamali, upang matuklasan at mapigil sila, at matututugan kung paano maayosin ang mga pagkakamali. Tinutuklasan namin ang unique identifier attribute (id) - at ipinapakita kung paano ito ay nagbibigay sa iyo ng kakayahan na isulat ang napakakababa at mahusay na gumamit ng XHTML, kahit na ito ay mixed layout o purong CSS layout.

Dapat bang i-structure ang bawat elemento?

Tulad ng binabanggit namin sa nakaraang section, ang bawat elemento ay maaaring i-structure, ang CSS ay maaaring gumawa ng isang nagtatanong o walang oras na listahan bilang isang navigation bar, na may kapansin-pansing na effect ng pagbaliktad. Ang nilalaman ng dokumento ay maaaring magpakita sa pamamagitan ng mga pangkaraniwang elemento, na pinaglalarawan ng mga partikular na structural na attribute ang kanilang papel sa disenyo ng website.

Nakapagtayo kami ng unang bersyon ng CodeW3C.com sa Chinese noong taong 2006, at gumamit kami ng CSS para sa layout mula sa simula, at gumamit ng XHTML upang i-structure ang dokumento. Ang bawat elemento sa loob nito ay结构性, mula sa pamagat hanggang sa listahan, hanggang sa paragrapo. Makikita mo sa bawat pahina ng CodeW3C ang button ng homepage na may kapansin-pansin at ang button ng secondary menu. Narito ang XHTML code ng mga komponente na ito:

<div id="header"><h1><a href="/">codew3c online tutorial</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 Script">Server Script</a></li>
<li id="d"><a href="/d.asp" title="Tutorials ng dot net">Tutorials ng dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutorials ng Multimedia">Tutorials ng Multimedia</a></li>
<li id="w"><a href="/w.asp" title="Mga Manwal ng Pagtatayo ng Website">Mga Manwal ng Pagtatayo ng Website</a></li>
</ul>
</div>

Div, id at iba pang mga tagasangga

Kung maayos na gamitin, ang div ay maaaring maging isang mahusay na tagasangga sa markahen ng estraktura, habang ang id ay isang kamangha-mangha na kasangga na nagbibigay sa iyo ng kakayahan na isulat ang napakakababa at mahusay na gumamit ng CSS, at sa pamamagitan ng standard na Document Object Model (DOM) magdagdag ng kompleks at mahusay na pagkilos sa site.

Tinukoy ng W3C ang div sa kanilang pinakabagong XHTML2 draft sa modelo ng estraktura ng XHTML:

Ang div na elemento, sa pamamagitan ng paggamit ng mga attribute ng id, class at role, ay nagbibigay ng pangkalahatang mekanismo upang magdagdag ng karagdagang estraktura sa dokumento. Ang elemento na ito ay hindi nagpapadala ng estilo ng paglalarawan sa nilalaman. Kaya, ang mga tagapaglikha ay maaaring gamitin ang elemento na ito kasama ang stylesheet, xml:lang, at iba pang mga attribute upang palakasin at palakain ang XHTML ayon sa kanilang sariling pangangailangan at lasa.

Ang div ay isang pangalawang salin ng division. Ang division ay nangangahulugan ng paghahati, lugar, o pagbubuo ng grupo. Halimbawa, kapag pinagsasama-sama ng isang serye ng mga link, nabubuo na ito bilang isang division ng dokumento.

Pagtutukoy ng pangkalahatang mekanismo ng estraktura

Lahat ng gumagawa ng HTML ay pamilyar sa mga karaniwang elemento tulad ng mga paragrafo at mga titulo, ngunit maaaring hindi gaanong pamilyar ang div. Sa paglalarawan ng W3C, maaari naming hanapin ang susi sa pag-unawa ng elemento na div, "isang pangkalahatang mekanismo ng pagdugtung-dugtung ng estraktura."

Sa pahina ng tahanan ng aming site, inilalagay namin ang listahan ng tutorial sa loob ng isang div, dahil ang listahan ng tutorial ay hindi bahagi ng anumang elemento ng teksto. Ang h2 na elemento ay markahin ang bawat titulong tutorial, habang ang ul na elemento ng listahan ay markahin ang detalyadong listahan ng bawat tutorial. Subalit sa mas malalaking at mas tiyak na kahulugan, ang tutorial listahan na ito ay gumaganap bilang isang结构性 na papel, o isang pangalawang komponente ng paglalakad. Upang palakasin ang papel na ito, gumagamit kami ng id na navsecond upang mapangalanan ang div na ito.

<div id="navsecond">
<h2>HTML Tutorial</h2>
<ul>
<li><a href="/html/index.asp" title="HTML Tutorial">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML Tutorial">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS Tutorial">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP Tutorial">TCP/IP</a></li>
</ul>
<h2>XML Tutorial</h2>
<ul>
<li><a href="/xml/index.asp" title="XML Tutorial">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL Wika">XSL</a></li>
... ...
... ...
</div>

Maaaring gamitin ang anumang pangalan. "Gladys" at "orangebox" ay ganap na sumusunod sa patakaran ng pangalan sa XHTML. Subalit ang pangalan na may kahulugan (semantic) o meta-structural ang pinakamahusay (na nagpapaliwanag ng tungkulin ng mga elemento nito).

kapag pinili ng kliyente ang kulay ng asul, ay maaaring magkaroon ka ng

Kaya, kung isinasagawa mo ang id bilang "menu", "content" o "searchform",

id laban sa class

ang atributo ng id ay hindi bagong bagay sa XHTML; ang atributo ng class o ang

<div id="searchform">Gumagana ang mga komponen ng porma ng paghahanap dito. Ito
isang bahagi ng pahina ay natatanging.</div>
<div class="blogentry">
   <h2>Ang mga blog post ngayon</h2>
   <p> Ang nilalaman ng blog ay naroon.</p>
   <p> Narito ang isa pang paragrapo ng nilalaman ng blog.</p>
   <p> Tulad ng maraming paragrapo na maaaring magkaroon ng
   maaaring maraming mga entry sa isang blog. Maaaring gamitin ng
   maraming istansya ng klase "blogentry" (o anumang iba pang
   klase).</p>
</div>
<div class="blogentry">
   <h2>Blog post kahapon</h2>
   <p>Ang katunayan, narito kami sa loob ng isa pang div ng klase
   "blogentry."</p>
   <p>magpaparami tulad ng papag-usbong na kambing.</p>
   <p>kung mayroong sampung blog post sa pahina na ito, maaring
   mayroon lamang sampung div ng klase "blogentry".</p>
</div>

Sa halimbawa na ito, ang div na may pangalan na searchform ay ginagamit upang i-wrap ang pook ng pahina na naglalaman ng porma ng paghahanap, habang ang div class="blogentry" ay ginagamit upang i-wrap ang bawat entry ng blog. May isa lamang porma ng paghahanap sa pahina, kaya't pinili namin ang id upang i-tatak ang komponenteng ito. Subalit ang blog ay may maraming entry ng (artikulo), kaya't ginagamit ang atributo ng class sa ganitong sitwasyon. Gayundin, ang site ng balita ay karaniwang may maraming div, ang klase ng mga ito ay maaaring maging "newsitem" o anuman.

Hindi lahat ng site ay nangangailangan ng div. Ang blog site ay maaaring gamitin lamang ang h1, H2, at h2 na mga title at <p> na talata. Ang site ng balita din. Inihahayag namin dito ang div na may klase na blogentry, hindi upang hikayatin ka na maglaman ng maraming div sa iyong site, kundi upang ipakita ang prinsipyo: Sa parehong HTML dokumento, gamitin ang class nang marami, ngunit gamitin lamang ang id nang isang beses.

Teorya ng Sticky Note

Sa tingin ng id property bilang sticky note ay makakatulong. Gustong maglagay ng sticker sa yelo upang ipaalaala kong bumili ng gatas, at maglagay ng sticker sa telepono upang ipaalaala kong tumawag sa isang customer na nagbabayad ng huli. May isa pang, nakapaskil sa folder ng kasalanan, upang ipaalaala kong dapat bayaran ang mga utang bago mag-15 ng buwan.

id ay magtatatak sa mga espesyal na lugar ng dokumento, upang ipaalaala sa iyo kung anong lugar ang nangangailangan ng espesyal na pagproseso, sa ganitong punto, ang atributo ng id ay katulad ng sticky note. Upang makuha ang tinatawag na espesyal na pagproseso, kailangan mong gamitin ang espesyal na id upang isulat ang ilang alituntunin sa estilo sheet, o magdagdag ng ilang linya ng kodigo sa JavaScript file. Halimbawa, mayroon kang ilang espesyal na alituntunin sa iyong CSS file, ang alituntunin na ito ay ginagamit lamang sa mga elemento sa loob ng div na may pangalan na searchform.

When an id attribute is used as a magnetic thing (magnet) in 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 selector in style sheets, enabling us to create compact and minimized XHTML.
  • As the target anchor of hyperlinks, replacing the outdated name attribute.
  • As a method to locate specific elements from script 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 of id

The id value must start with a letter or underscore; it cannot start with a number. Although W3C validation will not capture this error, XML parsers will. At the same time, if you use id with JavaScript in a form, the id name and value must be a valid JavaScript variable. Spaces and hyphens, especially hyphens, are not allowed. Moreover, using an underscore in class or id names is not a good idea, due to restrictions 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 take a look at an example about 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 Script">Server Script</a></li>
<li id="d"><a href="/d.asp" title="Tutorials ng dot net">Tutorials ng dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutorials ng Multimedia">Tutorials ng Multimedia</a></li>
<li id="w"><a href="/w.asp" title="Mga Manwal ng Pagtatayo ng Website">Mga Manwal ng Pagtatayo ng Website</a></li>
</ul>
</div>

Mayroon kaming pitong link, ang bawat isa ay may id na nakatalaga upang tumugma sa katulad na nilalaman: halimbawa, ang id na h ay tumutugma sa HTML tutorial, at ganoon pa rin. Gayundin, ang mga link na ito ay nabubuo sa loob ng elemento na may pangalan na menu, ang pangalan ng id na menu ay nagmamarka ng tungkulin ng listahan - isang listahan ng menu, at ang mas malalaking div na may pangalan na navfirst ay ginagamit upang markahin ang section na ito sa pahina, at maghihiwalay ito sa mga elemento tulad ng main content, sidebar, at footer.

Ang dalawang elemento na div at ul ay nagbibigay ng tunay na estraktura, na nagmamarka ng tungkulin ng nilalaman nito (navigasyon na panel) at ang kanyang posisyon sa dokumento (sa posisyon ng header ng pahina). Sa kabilang banda, ang tradisyonal na layout ng table ay walang kahulugang semantiko sa datos, at madaling kumain ng tatlong beses ng bandwidth.

Huwag mangyaring pansinin na ang mga marka na ito ay walang img tag, kaya hindi ito kasangkot sa mga katangian tulad ng width, height, background, o border at iba pa. Hindi rin ito gumagamit ng table cell, kaya hindi ito kasangkot sa serye ng katangian na may kaugnayan nito. Napakaliwanag at maliit ito, sa kabila ng lahat ng impormasyon na kailangan nang maunawaan nito.

Sa pamamagitan ng paggamit kasama ang CSS, ang mga marka na ito ay nagbibigay ng tapat at mabilis na ma-load na layout sa mga bisita ng website. Gayundin, nagbibigay ito ng posibilidad na gumawa ng mas malaya at iba't ibang panlabas na hitsura para sa mga bisita. At sa kawalan ng CSS, ang aming magandang marka ay maaring magbigay ng lahat ng nilalaman nang walang kaguluhang kahit saan.

Mataas ang pag-iisip na mga mambabasa ay nakita na ang teksto na nasa 'a' elemento ay hindi na ipinapakita ng browser, kaya ito ay dapat ituring na pinagpalaan ng magandang pagkakasundo ng structural marking at CSS, na nagbibigay ng kapabilidad namin na gamitin ang ilang linya ng CSS rule upang tanggapin ang isang trigger mechanism, kapag gumagamit ng graphic browser ang mga user, sila ay makakakita ng magandang navigation button, at kapag gumagamit ng plain text reader, sila ay makakakuha ng buong teksto din, kaya, para sa lahat ng mga user, ang nilalaman ay magkapareho pa rin.

At dahil walang kasama ang imahe at table cell ang tag, ang komponente ng navigation bar na ito ay maaaring maging kilala ng anumang pahina sa loob ng site na walang pagbabago sa estraktura, habang nagbibigay ng iba't ibang visual effects. Sa madaling sabi, sa pamamagitan ng pagmodular ng code, tumaas ang pagkakatabang ng code.