XHTML struktureret 2: Casestudie: W3school's strukturerede mærker

Under alle omstændigheder skal du ikke springe denne sektion over. Læsning af dette kapitel vil forbedre dine færdigheder, give din webside en slankere krop og gøre dig mere klar over forskellen mellem mærkning og design. Ideerne i dette kapitel er lette at lære, men kan meget godt forbedre websidens ydeevne samt bekvemmeligheden ved at designe, skabe og opdatere websider.

I denne sektion lærer du, hvordan du skriver logiske og kompakte mærker, så du kan reducere båndbreddeforbruget med omkring 50%, samtidig med at du reducerer serverens belastning og pres og forkorter websidens indlæstid. Ved at fjerne de uønskede elementer og ændre de dårlige vaner, der ikke har nogen fordel, kan vi opnå de nævnte mål.

Disse dårlige vaner plager mange websteder på internettet, især dem, der blander CSS-kode med hovedsageligt tabellenbaseret layout. Dette er en klods og uproduktiv praksis, selv for designere, der har erfaring i andre områder. Samtidig er sandsynligheden for at støde på dette problem lig, uanset om det er for websteder, der skriver kode manuelt, eller dem, der bruger synlige redigeringsværktøjer som Dreamweaver og GoLive til at oprette websteder.

Dette afsnit vil præsentere disse almindelige fejl, så du kan genkende og forhindre dem, og lære, hvordan du retter dem. Vi beskriver detaljeret unik identifikator egenskab (id) og viser, hvordan det gør det muligt for dig at skrive meget kompakt XHTML, uanset om du skaber en blanding af layout eller ren CSS-layout.

Måste hver element struktureres?

Som vi nævnte i det forrige afsnit, kan hver element struktureres, og CSS kan gøre en ordnet eller uordnet liste til en fuldstændig navigationslinje med omvendt knapseffekt. Dokumentets indhold kan markeres med almindelige elementer, som indikeres ved specifikke strukturerede egenskaber, der viser deres semantiske rolle i webstedets design.

Vi oprettede den første kinesiske testversion af CodeW3C.com i 2006, og vi brugte CSS til layout fra starten og XHTML til at strukturere dokumentet. Enhver af disse elementer er strukturerede, fra titler til lister og endda afsnit. Du kan se hjemmesideknapper med omvendt effekt og sekundære menuknapper på hver side af CodeW3C. Her er XHTML-koden til disse to komponenter:

<div id="header"><h1><a href="/">codew3c online undervisning</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 scripting">Server scripting</a></li>
<li id="d"><a href="/d.asp" title="dot netundervisning">dot netundervisning</a></li>
<li id="m"><a href="/m.asp" title="Multimedieundervisning">Multimedieundervisning</a></li>
<li id="w"><a href="/w.asp" title="Byggevejledning">Byggevejledning</a></li>
</ul>
</div>

div, id og andre hjælpere

Når brugt korrekt, kan div blive en god hjælper til strukturerede mærker, og id er et overraskende lille værktøj, der giver dig mulighed for at skrive meget kompakt XHTML, samt at bruge CSS klogt og tilføje komplekse og præcise adfærd til webstedet gennem standarddokumentobjektmodellen (DOM).

W3C definerer div på denne måde i deres nyeste XHTML2-udkast til XHTML-strukturmodellen:

div-elementet, i sammenhæng med egenskaberne id, class og role, tilbyder en almindelig mekanisme til at tilføje ekstra struktur til dokumentet. Denne element tilføjer ikke stildefinitioner til indholdet. Derfor kan skabere bruge denne element sammen med stilblade, xml:lang og egenskaber for at gøre XHTML tilpas til deres egne behov og smag.

Div er en forkortelse for division. Division betyder opdeling, område, gruppe. For eksempel, når du kombinerer en række links, opstår der en division i dokumentet.

Bestem en almindelig mekanisme til struktur

Alle, der skriver HTML, er meget bekendte med almindelige elementer som afsnit og titler, men nogle kan måske ikke være så bekendte med div. I W3C's beskrivelse kan vi finde nøglen til forståelse af div-elementet, "en almindelig mekanisme til at tilføje struktur."

På hjemmesiden af dette website, har vi indlejret en liste over læringsguider i en div, fordi læringsguiden ikke er en del af teksten. Dermed markerer h2-elementet hver læringsguides titel, og ul-listeelementet markerer detaljlisten for hver læringsguide. Men i en større og mere specifik betydning spiller denne læringsguide en struktureret rolle, nemlig en anden navigationskomponent. For at fremhæve denne rolle bruger vi id'en navsecond til at annotere denne div.

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

Du kan bruge ethvert navn. "Gladys" og "orangebox" opfylder fuldt ud XHTML's navngivningsregler. Men de semantiske eller meta-strukturerede navne er de bedste (dvs. navne, der kan forklare elementernes funktion).

Når kunden beslutter at bruge blå farve, vil du finde det meget dumt at navngive en del af sitet "orangebox" (orange boks). I det følgende tilfælde vil du føle dig endnu dummere, når der kun er seks måneder til levering, og du begynder at justere stilarkene, men ikke kan huske, hvad "Gladys" (en kvindes navn) repræsenterer, om det er navigationsområdet, sidepanelet eller søgefeltet.

Derfor vil det hjælpe med at navngive id "menu", "content" eller "searchform". Yderligere, betyder mærkning ikke design, en velstruktureret side kan formatteres som ønsket. Resultatet er, at uanset om du bruger ren CSS-layout eller en blanding af layout, vil du helt ændre din vane med at tænke og skrive med præsentationsmærkning.

id mod class

id-attributten er ikke noget nyt for XHTML; class-attributten eller div-elementet er også det. De kan begge spores tilbage til HTML-æraen. Id-attributten tildeler et unikt navn til et element. Hvert navn kan kun bruges én gang på den side, det er tildelt til. (For eksempel, hvis din side indeholder en div med id "content", kan ingen anden div eller anden element bruge dette navn. I stedet kan class-attributten bruges igen og igen på siden (for eksempel kan fem afsnit alle bruge class-navnet "small" eller "footnote"). Følgende markeringer vil hjælpe med at belyse forskellen mellem id og class:

<div id="searchform">Søgeformularkomponenter kommer her. Dette
en del af siden er unik.</div>
<div class="blogentry">
   <h2>Dagens blogindlæg</h2>
   <p>Blogindhold kommer her.</p>
   <p>Her er endnu et afsnit af blogindhold.</p>
   <p>Ligesom der kan være mange afsnit på en side, så også
   der kan være mange indlæg i en blog. En blogside kan bruge
   flere instanser af klassen "blogentry" (eller enhver anden
   class).</p>
</div>
<div class="blogentry">
   <h2>Igår's blogindlæg</h2>
   Faktisk er vi inde i en anden div med class
   "blogentry."
   De formerer sig som kaniner.
   Hvis der er ti blogindlæg på denne side, kan der
   Der er også ti divs af class "blogentry".
</div>

I dette eksempel bruges en div med navnet 'searchform' til at indpakke websiderområdet, der indeholder søgefeltet, og en div med class='blogentry' bruges til at indpakke hver artikelindgang i bloggen. Der er kun én søgeformular på siden, så vi har valgt at bruge id til at mærke denne unikke komponent. Bloggen har dog mange (artikler) indgange, så class-attributten anvendes i dette tilfælde. På samme måde har news-websteder ofte flere div, og disse divs class kan kaldes 'newsitem' eller noget andet.

Ikke alle websteder har brug for div. Blog-websteder kan bruge h1, H2 og H2-titler samt <p>-afsnit. News-websteder gør det samme. Vi viser her en div med class 'blogentry', ikke for at opmuntre dig til at fylde dit websted med div, men kun for at vise dig denne princip: I samme HTML-dokument kan du bruge klasser flere gange, men kun én gang id.

Teorien om klistermærker

At tænke på id-attributten som et klistermærke kan være nyttigt. Jeg vil sætte et klistermærke på køleskabet for at minde mig om at købe mælk, og der vil også være et klistermærke på telefonen for at minde mig om at ringe til en kunde, der har forfaldet betaling. Der er også et klistermærke på regnskabsbogen for at minde mig om, at jeg skal betale regningen inden den 15. i måneden.

id også vil mærke dokumentets specielle områder, så du kan blive mindet om, hvilket område, der kræver speciel behandling. På dette punkt er id-attributten ligner et klistermærke. For at opnå det såkaldte specielle behandling skal du bruge dette specielle id til at skrive flere regler i stilmappen eller tilføje nogle linjer kode i JavaScript-filen. For eksempel har din CSS-fil nogle specifikke regler, der kun anvendes på elementer inden for en div med id 'searchform'.

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 selectorsmethods, 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 hyper text, 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 W3C's example, '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 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 scripting">Server scripting</a></li>
<li id="d"><a href="/d.asp" title="dot netundervisning">dot netundervisning</a></li>
<li id="m"><a href="/m.asp" title="Multimedieundervisning">Multimedieundervisning</a></li>
<li id="w"><a href="/w.asp" title="Byggevejledning">Byggevejledning</a></li>
</ul>
</div>

Vi har syv links, hvor hvert link tildeles en id for at korresponderer med det tilsvarende indhold: f.eks. id'en 'h' svarer til HTML-undervisning, osv. Disse links er indlejret i en listeelement med navnet 'menu', som id'en 'menu' angiver funktionen - en menuoversigt, og den yderligere 'navfirst'-div bruges til at markere denne sektion på siden, adskiller den fra elementer som hovedindhold (maincontent), sidekolonne (sidebar) og sidefod (footer).

Elementerne 'div' og 'ul' giver en virkelig struktur, der angiver funktionen af indholdet (navigationsfelt) og dens placering i dokumentet (sideoverskriftsposition). Til gengæld kan den traditionelle tabellayout ikke give nogen semantisk information om dataene og kan nemt spise tre gange så meget båndbredde.

Bemærk, at disse markører ikke indeholder 'img'-etiketter, så de ikke påvirker egenskaber som width, height, background eller border osv. De bruger heller ikke tabelceller og berører derfor ikke en række relaterede egenskaber. De er meget rene og små, samtidig med at de giver alle oplysninger, der er nødvendige for at forstå dem.

Ved at bruge CSS sammen, giver disse markører besøgende på webstedet en pålidelig og hurtigt indlæsbar layout. Samtidig giver det mulighed for at skabe en mere fleksibel og varieret udseende for besøgende. Og uden CSS kan vores velstrukturerede markører stadig uden rod præsentere alle indholdene.

Agile læsere har måske allerede bemærket, at teksten indeholdt i elementet 'a' ikke vises i browseren, hvilket også skyldes den perfekte kombination af strukturerede markører og CSS, der gør det muligt for os at definere en udløsermekanisme med kun nogle få CSS-regler. Når brugere bruger en grafisk browser, ser de pæne navigationsknapper, og når brugere bruger en ren tekstlæser, får de også hele teksten. På denne måde er indholdet det samme for alle brugere.

Og på grund af, at mærkerne ikke inkluderer billeder og tabelceller, kan denne navigationskomponent bruges af ethvert side inden for webstedet uden at ændre strukturen, samtidig med at den gives forskellige visuelle effekter. Kort sagt, ved at modulere koden, har vi øget kodes gentagelighed.