XHTML-rakenteellisuus yksi: Käytä XHTML:ää sivuston rakentamiseen

Olemme kirjoittaneet tämän luvun otsikoksi: 'XHTML: Yksinkertaiset säännöt, helppokäyttöiset ohjeet.' Yksi syy tähän on, että tässä luvussa käsitellyt säännöt ja ohjeet ovat yksinkertaisia ja helppokäyttöisiä. Toinen syy on, että yksinkertainen ja helppokäyttöinen WEB-suunnittelukirja, kuten uudenlaiset ilmaiset tuotteet supermarkkinoissa, on vaikka kuinka yleinen, mutta voi tehokkaasti houkutella huomiota, mikä voi herättää kiinnostusta ja kannustaa ihmisiä kokeilemaan.

Toivon todella, että tämän luvun sisältö herättää kiinnostuksesi ja kannustaa sinua kokeilemaan. Miksi niin? Koska kun olet oppinut tässä luvussa esitellyt yksinkertaiset ja helppokäyttöiset ideat, alkatit uudelleen harkita verkkosivujen toimintaa ja aloitat niiden rakentamisen uudella tavalla. En kuitenkaan halua, että vain muutat koodia. Haluan, että ajattelet ja työskentelet todella toisin.

Toisaalta, rakenneuudistus on XHTML:n todellinen merkitys.

Tässä luvussa tutkimme rakenteellisten merkkien mekanismeja ja merkitystä. Jos olet yhdistämässä verkkosivustostandardia kehityshankkeeseesi, saatat tunnistaa jotain tuttua. Mutta jopa kokeneet ammattilaiset löytävät tästä yllättäviä oivalluksia.

XHTML-sääntöjen tiivistelmä

Perinteisen HTML:n muuntaminen XHTML 1.0:ksi on nopeaa ja kivutonta, kunhan noudatat joitakin yksinkertaisia sääntöjä ja ohjeita. Sekä HTML:n että XHTML:n käyttäjät voivat käyttää XHTML:ää ilman ongelmia.

  • Käytä sopivaa dokumenttipyyntöä ja nimeä alueita.
  • Käytä meta-elementtiä sisällön tyyppilauseen määrittämiseen.
  • Kirjoita kaikki elementit ja ominaisuudet pienillä kirjaimilla.
  • Lisää lainausmerkit kaikille ominaisuusarvoille.
  • Määritä arvot kaikille ominaisuuksille.
  • Sulje kaikki tagit.
  • Käytä välilyöntejä ja vinovaihetta sulkeaksesi tyhjät tagit.
  • Älä kirjoita kommentteihin kaksikerroksisia alaviivoja.
  • Varmista, että pieni ympyrö ja jaetun merkin merkki ovat < ja &

Unicode ja muut kirjansetit

XML-, XHTML- ja HTML 4.0 -dokumenttien oletuskirjansetti on Unicode, joka on Unicode-unionin määrittämä standardi. Unicode on kattava kirjansetti, joka antaa jokaiselle merille erityisen yksilöllisen numeron riippumatta alustasta, ohjelmasta ja kielestä. Unicode on myös lähellä yleistä aakkostoa, vaikka se ei olekaan aakkosto, vaan numeromappausjärjestelmä.

Vaikka Unicode on web-dokumenttien oletuskirjansetti, kehittäjät voivat vapaasti valita muita heille sopivia kirjansettejä. Esimerkiksi Yhdysvaltojen ja Euroopan sivustot käyttävät usein ISO-8859-1 (Latin-1) -koodausmuotoa, ja Kiinan kansallinen standardi on gb2312.

Merkitse dokumentteja esityksen semantiikasta, ei ulkoasusta

Muista: käytä CSS:ää mahdollisimman paljon asettelun suunnitteluun. Web-standardien maailmassa XHTML-merkinnät ovat riippumattomia esityksestä, ne liittyvät vain dokumentin rakenteeseen.

Hyvin rakennetut dokumentit voivat välittää selaimille mahdollisimman paljon semantiikkaa, riippumatta siitä, onko selain käsinäytöllä oleva tietokone tai muodikas työpöytägrafiikkaselain. Hyvin rakennetut dokumentit voivat välittää käyttäjille visuaalista semantiikkaa, jopa vanhoissa selaimissa tai käyttäjien CSS:n poistaneissa modernissa selaimessa.

Ei jokainen sivusto voi heti hylätä HTML-taulukkolAYOUTin. CSS:n keksijä, W3C, muutti virallisen verkkosivustonsa CSS-sijoitukseksi vasta marraskuussa 2002. Mutta jopa kovimmat standardien kannattajat eivät aina eristä esityksen täysin rakenteesta, ainakaan XHTML 1:ssä. Nyt voimme kuitenkin ottaa merkittävän askeleen kohti tätä ideaalia, eristämällä esityksen rakenteesta (tai sanalla sanoen eristämällä tiedon suunnittelusta), jopa sekavalta perinteiseltä asettelulta voi olla hyötyä.

Tässä on joitakin vinkkejä, jotka auttavat sinua ajattelemaan järjestelmällisemmin:

Värit esitysluettelossa

Grammatiikassa suurin osa meistä joutui käyttämään standardeja esitysluettelomalleja kirjoittaessaan artikkeleita. Nyt, kun olemme suunnittelijoita, voimme olla paljon vapaampia päästä eroon esitysluettelon rajoituksista ja rohkeasti syventyä ainutlaatuisen henkilökohtaisen ilmaisun vapaa-alueeseen (vaikka mainostusmateriaalimme ja liiketoimintasivustomme eivät ehkä ole niin ainutlaatuisia ja henkilökohtaisia). Mutta ainakin emme enää joutuisi kamppailemaan esitysluettelon kanssa.

Itse asiassa HTML:n mukaan meidän tulisi rakentaa sisältö järjestelmälliseen hierarkiaan. Aikoina, jolloin selaimet eivät tukeneet CSS:ää, emme voineet toimittaa myytävää asetteluun samalla tavalla. Mutta tänään, kun toteutamme suunnittelumme täysin, meillä on kyky toimittaa sisäisesti hyvin rakennettuja dokumentteja.

Kun merkataan tekstejä, joita käytetään verkkoon, tai kun olemassa oleva tekstitiedosto muunnetaan verkkosivuksi, harkitse perinteisten esitysluetteloon sisältyviä kohtia.

<h1>Oma aihe</h1>
<p>Esittelyteksti</p>
<h2>Lisäys</h2>
<p>Liittyvä teksti</p>

Vältä myös vanhentuneiden HTML-elementtien käyttöä, kuten <font>, tai merkityksettömiä elementtejä, kuten <br>, simuloidaksesi todellisuudessa olemattomia loogisia rakenteita.

Esimerkiksi, vältä tätä:

Oma aihe<br />
Esittelyteksti<br /><br />
Lisäys<br />
Liittyvä teksti<br />

Käytä elementtejä niiden merkityksen mukaan, ei niiden ulkoasun mukaan

Jotkut meistä ovat jääneet huonoon tapaan, kun käytämme h1:ää vain suuren tekstin tarpeeseen tai li:ää etukäteen olevan pisteen tarpeeseen. Kuten olemme keskustelleet edellisessä luvussa, selaimet ovat aina tottuneet asettamaan suunnittelumäärittelyt HTML-elementeille. Olemme kaikki tottuneet ajattelemaan, että h1 tarkoittaa suurta kirjasinta, li tarkoittaa pisteitä tai blockquote tarkoittaa tekstiä, joka on sisennetty. Suurin osa meistä käyttää rakenteellisia elementtejä esityseffektien simuloimiseen HTML:n kirjoittamisessa.

Samoin, jos suunnittelija haluaa, että kaikki otsikot käyttävät samaa kokoa, hän asettaa kaikki otsikot h1:ksi, vaikka tämä ei tosiasiassa ole rakenteellisesti merkityksellistä.

Tämä on pääotsikko, kun olen järjestänyt tekstin tiivistelmämuodossa.
Tämä ei ole pääotsikko, mutta haluan, että se käyttää samaa kirjasinta kuin yllä oleva otsikko, mutta en tiedä, miten käyttää CSS:ää.
Tämä ei ole ollenkaan otsikko. Mutta toivon, että sivun teksti käyttää samaa kirjasinta, jotta voin saavuttaa sen,
Jos ymmärrän CSS:n, voin saavuttaa tämän suunnittelun ilman, että dokumentin rakenne häiriintyy.

Meidän täytyy jättää pienet temppumme huomiotta ja aloittaa niiden käytön elementtien merkityksen mukaan, ei ulkoasun mukaan. Itse asiassa, h1 voi olla mitä tahansa haluat. CSS:n avulla h1 voi olla ei-puolukas pieni roomalainen kirjasin, ja p-teksti voi olla粗体的大号字，li voi myös olla ilman pisteitä（voit käyttää pieniä kissoja ja kaniita tai yrityksen logon PNG,GIF tai JPEG-kuvaa korvaamaan）ja niin edelleen.

Alkaen tänään aiotamme käyttää CSS:ää päätöksentekoon elementtien ulkoasusta. Voimme jopa muuttaa niiden ulkoasua riippuen niiden sijainnista sivulla tai sivustolla. CSS voi täysin irrottaa esityksen rakenteesta ja mahdollistaa, että voit muotoilla elementit haluamallasi tavalla.

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;
	{}

Miksi teet sen? Tarkoituksena on saavuttaa brändätty ulkoasu ja tuntua graafisissa selaimissa samalla, kun dokumentin rakenne säilyy tekstiselaimissa, mobiililaitteissa ja HTML-muodossa olevissa sähköposteissa.

Emme halua puhua enempää XHTML:n osalta CSS:n teknisistä asioista. Haluamme vain näyttää, että dokumenttirakenne ja visuaalinen ilme ovat täysin eri asioita, ja rakenteelliset elementit tulisi käyttää tekstin muuntamiseen, ei näyttöeffectien määräämiseen.

Käytä rakenteellisia elementtejä, ei merkityksettömiä roskia

Koska olemme unohtaneet tai emme ole koskaan tienneet HTML:n ja XHTML:n käytön tarkoitusta, moni HTML-kriitikko käyttää näitä merkkejä luetteloiden lisäämiseen:

Projekti yksi<br />
Projekti kaksi<br />
Projekti kolme<br />

Harkitse käyttämistä järjestettyä tai ei-järjestettyä luetteloa korvikkeena:

<ul>
<li>Projekti yksi</li>
<li>Projekti kaksi</li>
<li>Projekti kolme</li>
</ul>

"Mutta li antaa minulle pyöreän pisteen, enkä tarvitse sitä!" Voitehan sanoa. Kuten edellisessä luvussa todettiin, CSS ei tee oletuksia elementtien odotetusta ulkoasusta. Se odottaa sinua kertomaan, mitä odotat elementin ulkoasusta. Suljetut pisteet ovat CSS:n peruskyky. Se voi tehdä luettelosta näyttämään kuin tavallinen teksti, tai se voi tehdä luettelosta näyttämään kuin graafinen navigointirivi, jolla on täydellinen käänteisyys.

Joten käytä luettelo-elementtejä luetteloiden merkintöihin. Samoin käytä strongia korvaamaan b ja em korvaamaan i, jne. Suurimmassa osassa työpöytäselaimia strongin näyttöefekti on sama kuin b:n, ja em:n ja i:n, ja voit myös luoda odottamasi visuaalisen efektin ilman, että se rikkoo dokumentin rakennetta.

Vaikka CSS ei tee mitään oletuksia elementtien näyttämisestä, selaimet tekevät paljon oletuksia, eikä ole ollut vielä yhtäkään selainta, joka näyttää strong-elementin muulla tavalla kuin lihavoituna kirjasimena (ellei CSS:ää ole suunniteltu näyttämään elementtiä toisella tavalla). Jos olet huolissasi siitä, että tuntematon selain ei näytä strong-elementtiä lihavoituna, voit kirjoittaa tällaisen CSS-säännön:

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

Visuaaliset elementit ja rakenne

Web-standardit eivät ainoastaan vaadi meitä käyttämään tiettyjä teknologioita, vaan myös noudattamaan näiden teknologioiden käyttötapoja. XHTML:n käyttäminen merkintöjen kirjoittamiseen ja CSS:n käyttäminen osan tai koko asettelun käsittelyyn ei välttämättä tee sivustosta helpommin käyttöä tai kevyempää, eikä säästä paljoa宽带. Kuten aikaisemmin käytetyissä teknologioissa, XHTML ja CSS voidaan käyttää väärin ja väärin. Pitkät XHTML ja pitkät HTML tuhlaavat käyttäjän宽带 ja aika. Pitkät ylivoimaiset CSS eivät voi korvata täysin esittävä HTML-koodi; tämä on vain huono asia korvannut toisen huonon asian.