XHTML-rakenteellisuus 2: Analyysi: W3schoolin rakenteelliset merkinnät

Missään tapauksessa älä ohita tätä lukuja. Tämän luvun lukeminen parantaa taitojasi, laihduttaa sivustoasi ja tekee sinusta selkeämmin merkki- ja suunnittelun välisistä eroista. Tämä luku on helppo oppia, mutta se voi parantaa merkittävästi verkkosivuston suorituskykyä sekä suunnittelun, valmistelun ja päivittämisen helppoutta.

Tässä luvussa opit, miten kirjoittaa loogisia ja tiiviitä merkkejä, jotta voit vähentää kaistavirran noin 50%, vähentää samalla palvelimen kuormitusta ja painetta ja lyhentää verkkosivuston latausaikaa. Poistamalla ne elementit, jotka eivät tuo mukanaan mitään hyötyä, ja muuttamalla pois huonoista tavoista, voimme saavuttaa edellä mainitut tavoitteet.

Nämä huonot tavat vaivaavat monia verkkosivustoja, erityisesti niitä, jotka sekoittavat CSS-koodia ja pöytärakenteisiin perustuvaa asettelua. Tämä tapa on kömpelö ja kallista, ja se vaikuttaa myös niiden suunnittelijoihin, jotka ovat kokeneita muilla aloilla. Ongelman ilmenemisaste on sama, riippumatta siitä, kirjoitatko koodia käsin vai käytät näkyviä muokkaustyökaluja, kuten Dreamweaveria ja GoLivea.

Tämä luku esittelee näitä yleisiä virheitä, jotta voit tunnistaa ja ennaltaehkäistä ne sekä oppia, miten korjata niitä. Tarkastelemme yksityiskohtaisesti ainutlaatuisia tunnisteominaisuuksia (id) - ja näytämme, miten se mahdollistaa erittäin tiukkaa XHTML:ää kirjoittamisen, riippumatta siitä, luotko sekasivustoa vai puhtaata CSS-sivustoa.

Tarkoittaako jokaisen elementin rakenteellistaminen?

Kuten edellisessä luvussa mainittiin, jokainen elementti voidaan rakenteellistaa, CSS:llä voidaan tehdä järjestetyistä tai epäjärjestetyistä luetteloista täysin navigaatiovalikon näköisiä, joissa on myös käänteinen painikevaikutus. Dokumentin sisältö voidaan merkinnöidä tavallisilla elementeillä, jotka ilmaisevat niiden merkityksen verkkosivuston suunnittelussa tiettyjen rakenteellisten ominaisuuksien avulla.

Laitimme CodeW3C.com:n ensimmäisen kiinalaisen testiversiosta vuonna 2006, ja käytimme CSS:ää asetteluun ja XHTML:ää dokumentin rakenteellistamiseen alusta alkaen. Jokainen elementti on rakenteellinen, aina otsikoista luetteloihin ja lukuun ottamatta kappaleita. Voit nähdä CodeW3C:n jokaisessa sivulla käänteisen vaikutuksen sisäänkäyntipainikkeessa ja toissijaisessa valikossa. Tässä on näiden kahden komponentin XHTML-koodi:

<div id="header"><h1><a href="/">codew3c-verkkokurssi</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html-opas">html-opas</a></li>
<li id="x"><a href="/x.asp" title="XML-opas">XML-opas</a></li>
<li id="b"><a href="/b.asp" title="selain-skriptit">selain-skriptit</a></li>
<li id="s"><a href="/s.asp" title="Palvelinohjelmointi">Palvelinohjelmointi</a></li>
<li id="d"><a href="/d.asp" title="dot net-opastus">dot net-opastus</a></li>
<li id="m"><a href="/m.asp" title="Multimedia-opastus">Multimedia-opastus</a></li>
<li id="w"><a href="/w.asp" title="Verkkosivuston luontiopas">Verkkosivuston luontiopas</a></li>
</ul>
</div>

div, id ja muut avustajat

Jos käytetään oikein, div voi olla erinomainen apuväline rakenteellisessa merkinnässä, ja id on yllättävän tehokas työkalu, joka antaa sinulle kyvyn kirjoittaa erittäin tiukkaa XHTML:ää, hyödyntää CSS:ää hienovaraisesti ja lisätä verkkosivustolle monimutkaisia ja taitavia käyttäytymisiä standardeilla dokumenttiodjektimallilla (DOM).

W3C määrittelee div:n XHTML2-skeemassaan seuraavasti:

div-elementi, yhdistettynä id-, class- ja role-ominaisuuksiin, tarjoaa yleisen mekanismin dokumenttiin lisätä lisärakennetta. Tämä elementti ei määrittele ilmetystä sisällölle. Siksi, luoja voi käyttää tätä elementtiä yhdessä tyylilistojen, xml:lang-, ominaisuuksien ja muiden kanssa, jotta XHTML sopeutuu heidän omiin tarpeisiinsa ja makuihinsa.

div on divisionin lyhenne. Division tarkoittaa erottamista, aluetta, ryhmää. Esimerkiksi, kun yhdistät yhdistelmän linkkejä, se muodostaa asiakirjan divisionin.

Määritä rakenteen yleinen mekanismi

Kaikki HTML:n kirjoittajat ovat tuttuja yleisimmistä elementeistä, kuten luvuista ja otsikoista, mutta jotkut saattavat olla vähemmän tuttuja div-elementistä. W3C:n kuvauksesta voimme löytää avainasemassa olevan ymmärryksen div-elementistä, "yksi yleinen rakenteen lisäämismekanismi."

Sivuston etusivulla asetamme opastehtaan luettelon div-elementtiin, koska opastehtaan luettelo ei ole osa tekstin minkään elementin osaa. Siinä h2-elementti merkitsee jokaisen opaan otsikkoa, ja ul-listaelementti merkitsee jokaisen opaan yksityiskohtaisen luettelon. Mutta laajemmassa ja tarkemmassa merkityksessä tämä opastehtaan luettelo toimii rakenteellisena komponenttina, eli toisena navigointikomponenttina. Korostaaksemme tätä roolia, käytämme navsecond-id:tä tämän div:n merkinnässä.

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

Voit käyttää mitä tahansa nimeä. "Gladys" ja "orangebox" ovat täysin XHTML:n nimeämisperiaatteiden mukaisia. Mutta semanttinen (semantic) tai meta-strukturoidu (meta-structural) nimeäminen on parasta (eli nimeäminen, joka selittää elementin suorittaman toiminnon).

kun asiakas päättää käyttää sinistä, sinusta tuntuu, että sivun osan nimeäminen

Siksi id:n merkintä "menu", "content" tai "searchform" auttaa sinua muistamaan. Lisäksi merkinnät eivät ole

id vs. class

id-ominaisuus ei ole uusi asia XHTML:lle; class-ominaisuus tai div-elementti

<div id="searchform">Etsintämuodossa olevat komponentit menevät tähän. Tämä
sivun osa on ainutlaatuinen.</div>
<div class="blogentry">
   <h2>Tänääninen blogipostaus</h2>
   <p>Blogin sisältö menee tähän.</p>
   <p>Tässä on toinen kappale blogisisällöstä.</p>
   <p>Samaan tapaan kuin sivulla voi olla monia kappaleita, niin
   blogeissa voi olla monia julkaisuja. Blogisivu voi käyttää
   monia luokan "blogentry" (tai muu luokka)
   class).</p>
</div>
<div class="blogentry">
   <h2>Eilinen blogipostaus</h2>
   <p>Todellisuudessa olemme toisen div:n sisällä, jolla on class
   "blogentry."</p>
   <p>Ne lisääntyvät kuten hiiret.</p>
   <p>Jos tällä sivulla on kymmenen blogipostia, saattaa
   On olemassa kymmenen div:tä, joiden class on "blogentry".</p>
</div>

Tässä esimerkissä div:n nimeltä searchform käytetään sulkemaan sisään sisältöalue, joka sisältää hakulomakkeen, ja div class="blogentry" käytetään sulkemaan jokainen blogiartikkeli. Sivulla on vain yksi hakulomake, joten valitsimme ID-merkin tälle yksilölliselle komponentille. Blogissa on kuitenkin useita (artikkeli)kohtia, joten tälle käytetään class-ominaisuutta. Samoin uutissivustoilla on usein useita div-elementtejä, joiden class voi olla "newsitem" tai jotain muuta.

Ei kaikki sivustot tarvitse div-elementtejä. Blogisivustot voivat käyttää vain h1, H2 ja h2-otsikoita sekä <p>-kappaleita, samoin uutissivustot. Näytämme tässä div:n, jolla on class blogentry, ei siksi, että kannustamme sinua täyttämään sivustosi div-elementeillä, vaan vain näyttääksesi tämän periaatteen: samassa HTML-dokumentissa voidaan käyttää useita klassisia, mutta vain yhden ID:n.

Liimalehtiteoria

On apua ajatella ID-ominaisuutta liimalehtenä. Minä laittaisin liimalehden jääkaapin oveen muistuttaakseni itseni ostaa maitoa, toinen liimalehti puhelimen oveen muistuttaakseni itseni soittamaan eräälle eräpäivään ylittäneelle asiakkaalle. Lisäksi yksi liimalehti kirjanpitojäännöspussin päälle muistuttaakseni itseni maksamaan laskuja ennen kuun 15. päivää.

ID myös merkittää dokumentin erityisalueita, jotta voit muistaa, mikä alue tarvitsee erityiskäsittelyn. Tässä mielessä ID-ominaisuus on samanlainen kuin liimalehdet. Erityiskäsittelyn toteuttamiseksi sinun täytyy kirjoittaa muutamia sääntöjä tyyliarkistoon käyttämällä tätä erityistä ID:tä tai lisätä muutamia rivejä JavaScript-tiedostoon. Esimerkiksi, jos CSS-tiedostossasi on joitakin tiettyjä sääntöjä, jotka koskevat vain id:nä searchform olevaa div-elementtiä.

Kun jokin id-ominaisuus toimii magneettina (magneetti) ja käytetään sarjan tiettyjen CSS-sääntöjen valitsimena, sitä kutsutaan CSS-valitsijaksi. On olemassa moniaLuo valitsinmenetelmänä, mutta id on helppokäyttöinen ja monipuolinen.

id:n voima

id-ominaisuus on uskomattoman voimakas. Se tarjoaa seuraavat kyvyt:

  • Tyyliarkkujen valitsimena, mahdollistaen tiiviin ja minimoidun XHTML:n luomisen.
  • Hyperlinkin kohteena, korvaamassa vanhentuneen name-ominaisuuden.
  • DOM-pohjaisen skriptin avulla tiettyjen elementtien sijainnin hakemiseksi.
  • Objekti-elementin nimenä.
  • Yleiskäyttöisen käsittelyn (yleiskäyttöinen käsittely) työkaluna (W3C:n esimerkissä 'Kun dataa otetaan HTML-sivulta tietokantaan tai kun HTML-dokumentti muunnetaan toiseen muotoon' käyttää sen alueen tunnistustoolina).

id-säännöt

id-arvon on aloitettava kirjaimella tai alaviivalla; se ei voi aloittaa numeroa. Vaikka W3C-todennus ei ehkä siepy tästä virheestä, XML-tulkki seuraa sitä. Lisäksi, jos käytät id:ää lomakkeen JavaScript-yhdessä, id-nimen ja arvon on oltava laillinen JavaScript-muuttuja. Tyhjät välilyönnit ja lyhyet viivat, erityisesti lyhyet viivat, eivät ole sallittuja. Lisäksi ei ole hyvä idea käyttää alaviivaa class- tai id-nimessä, koska CSS2.0:ssa (ja joissakin selaimissa) on rajoituksia.

Sisäsynteettiset merkit ja käyttöystävällisyys

Nyt olemme käsitelleet laajasti käytettyjä XHTML-elementtejä (erityisesti div ja id), joten tarkastellaanpa esimerkkiä tämän verkkosivuston etusivulta. Ensin käydään läpi tätä sijaitsevaa päävalikkoa:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html-opas">html-opas</a></li>
<li id="x"><a href="/x.asp" title="XML-opas">XML-opas</a></li>
<li id="b"><a href="/b.asp" title="selain-skriptit">selain-skriptit</a></li>
<li id="s"><a href="/s.asp" title="Palvelinohjelmointi">Palvelinohjelmointi</a></li>
<li id="d"><a href="/d.asp" title="dot net-opastus">dot net-opastus</a></li>
<li id="m"><a href="/m.asp" title="Multimedia-opastus">Multimedia-opastus</a></li>
<li id="w"><a href="/w.asp" title="Verkkosivuston luontiopas">Verkkosivuston luontiopas</a></li>
</ul>
</div>

Meillä on seitsemän linkkiä, jokaiselle linkille on annettu id, joka vastaa vastaavaa sisältöä: esimerkiksi id h vastaa HTML-opastusta, ja niin edelleen. Nämä linkit sisältyvät nimeltään menu olevaan luetteloelementtiin, jolla on id menu, joka määrittelee luettelon tehtävän - valikko-lista, ja ulompi nimeltään navfirst oleva div määrittelee sivulla olevan tämän osan (section), erottaa sen esimerkiksi sisällön (maincontent), sivupalkin (sidebar) ja alatunniste (footer) -elementeistä.

Div- ja ul-elementit tarjoavat todellisen rakenteen, joka määrittelee sisällön tehtävän (navigointirivi) ja sen sijainnin asiakirjassa (sivun otsikkopaikka). Vastaavasti perinteinen taulukkolAYOUT ei voi tarjota minkäänlaisia semanttisia tietoja tietoja, ja se vie helposti kolme kertaa enemmän leveyskaistaa.

Huomaa, että nämä merkinnät eivät sisällä img-merkintöjä, joten ne eivät sisällä mukana width, height, background tai border -ominaisuuksia. Ne eivät myöskään käytä taulukkolukuja, joten ne eivät sisällä mukana siihen liittyviä ominaisuuksia. Ne ovat erittäin puhdaita ja pienikokoisia, ja ne tarjoavat kaikki tarvittavat tiedot niiden ymmärtämiseksi.

Yhdessä CSS:n kanssa käytettynä nämä merkinnät tarjoavat verkkosivuston vieraalle luotettavan ja nopeasti ladattavan asettelun. Ne tarjoavat myös mahdollisuuden luoda vieraalle entistä joustavampia ja monipuolisempia ulkoasuja. Ilman CSS:ää meidän hyvin rakennetut merkinnät voivat edelleen tarjota kaikki sisällön ilman sekasortoa.

Tarkkaavainen lukija on ehkä huomannut, että a-elementissä oleva teksti ei näy selaimessa, mikä johtuu rakenteellisten merkintöjen ja CSS:n täydellisestä yhteistyöstä, joka mahdollistaa useiden CSS-sääntöjen avulla määrittää aktivaatiomekanismin. Kun käyttäjä käyttää graafista selainta, he näkevät kauniit navigointipainikkeet, ja kun käyttäjä käyttää pelkkää tekstitulkintausta, he saavat myös kaikki tekstin. Tällä tavalla sisältö on sama kaikille käyttäjille.

Ja, koska merkinnässä ei ole sisällytetty kuvia ja taulukkolappuja, tämä navigointikomponentti voidaan käyttää verkkosivuston mihin tahansa sivulle ilman rakenteen muuttamista, samalla antaen sille erilaisia visuaalisia vaikutuksia. Yksinkertaisesti sanottuna koodin modulaarisuuden avulla parannamme koodin uudelleenkäytettävyyttä.