Kannattaako rakenteen ja ulkoasun erottaminen?

Jos emme erota HTML-sivun rakennetta ja ulkoasua toisistaan, niin törmäämme ennemmin tai myöhemmin ongelmiin.

Näihin ongelmiin on olemassa hyvin yksinkertainen ratkaisu. Määrittelemme WWW-sivun rakenteen kunnolla ja pidämme ulkoasun kokonaan erillään sivujen rakenteesta! Tällöin WWW-sivun tekemisen alkuvaiheessa kuvaamme HTML-elementeillä (tai tyyleillä) ainoastaan WWW-sivun rakenteen. Tällöin emme kiinnittää huomiota ollenkaan WWW-sivun ulkoasuun. Ulkoasun määritykset teemme tämän jälkeen erilliseen CSS-tyylitiedostoon, jonka avulla voimme muuttaa kerralla esimerkiksi kaikkien HTML-sivun tekstikappaleiden kirjasimen tyypin toiseksi. Käyttämällä samaa tyylitiedostoa useammille sivuille mahdollistamme kokonaisen artikkelikokoelman (sivuston) ulkoasun muuttamisen keskitetysti ja nopeasti.

Eriyttämällä WWW-sivun rakenteen ja ulkoasun sekä määrittelemällä WWW-sivun rakenteen olemme jo pitkällä esteettömien WWW-sivujen tekemisessä. Jos jo alkumetreillä teemme epäilyttäviä rakenteellisia ratkaisuja, niin myöhemmässä vaiheessa tehtävät toimenpiteet eivät välttämättä enää auta. Asiakirjan korjaaminen esteettömäksi myöhemmässä vaiheessa on aikaamme ja resurssejamme vievää. On tärkeää lähteä alusta pitäen tekemään esteetöntä WWW-sivua.

Edellä luvussa "Esteettömän WWW-sivun rakenne" tarkastelimme WWW-sivun rakenteen vaikutusta sivun esteettömyyteen. Määrittelemällä WWW-sivulle hyvä rakenne ja erottamalla ulkoasu kokonaan WWW-sivun rakenteeesta saamme aikaan perussivun, jonka sisältöön pääsemme käsiksi esteettömästi erilaisilla selaimilla. Tässä luvussa toteutamme yksinkertaisen ja esteettömän perussivun. Opimme merkitsemään WWW-sivusta löytyvät otsikot, tekstikappaleet sekä erilaiset listat. Sivun esteettömyys tulee automaattisesti mukaan käyttämistämme rakenteellisista ratkaisuista, joten sitä ei korosteta erikseen. Sivuille voi toki tulla monia muitakin elementtejä, joista muutamia tarkastelemme luvussa Muita tarpeellisia HTML-sivun rakenteita.

Toteutamme WWW-sivun tekstieditorilla, jolla joudumme määrittelemään sivun rakenteen HTML-elementtien avulla. Jos HTML-elementtien määrittäminen on sinulle vierasta, niin sinun kannattaa lukea perusteet luvusta Esteettömän WWW-sivun rakenne. Monilla on käytössään graafisia HTML-editoreja, joten tarkastelemme lyhyesti myös niihin liittyviä tyylimäärityksiä.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/tyovaline/wwwsivu/index4.html
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2003-11-10 10:21:28
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto