Kaikki sisällöt

Robottiääni

Esteettömän WWW-sivun toteuttaminen

Merkitys ja tavoite

Artikkelissa pyritään esittämään yksinkertaisen ja esteettömän WWW-sivun toteutus graafisen tai merkkipohjaisen HTML-editorin avulla.

Keskeiset ajatukset

WWW-sivua tehtäessä on tärkeää ajatella ja merkitä sisällön rakenne oikein, jolloin WWW-sivusta tulee teknisesti mahdollisimman esteetön. Tarkistamalla merkintöjen "kielioppi" vältytään esteettömyysongelmilta.

Avainsanat

WWW-sivu, otsikko, leipätekstikappale, järjestämätön lista, järjestetty lista, validaattori.

Tiivistelmä

Yksinkertainen WWW-sivu saadaan toteutettua valmiilla dokumenttirungolla ja muutamien rakenteellisien HTML-elementtien avulla. Tarpeellisimpia HTML-elementeistä ovat eritasoiset otsikot, leipätekstikappaleet sekä järjestämätön ja järjestetty lista. Lisäksi tarvitaan myös yleisiä korostuksia varten omat rakenteelliset määrityksensä. WWW-sivun valmistuessa on tärkeää tarkistaa WWW-sivulle tehtyjen määritysten oikeellisuus validaattorin avulla.

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, 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ä.

WWW-sivun perustukset

Tutkimme WWW-sivun rakennetta ohessa olevan esimerkin avulla. Esimerkissä voi olla muutamia sinulle vieraita määrityksiä, mutta niistä ei kannata huolestua tässä vaiheessa.

Ensimmäisellä rivillä on XML-määritys, jossa kerrotaan XML:n versio sekä käytettävä merkistö. Merkinnällä halutaan kertoa, että käytämme oletuksesta (UTF8 tai UTF16) poikkeavaa merkistöä (ISO-8859-1), joka sisältää muun muassa ä- ja ö-kirjaimet. Merkintä ei ole pakollinen, mutta erittäin suositeltava merkistöongelmien välttämiseksi.
Toisella ja kolmannella rivillä määritellään WWW-sivussa käytettävä dokumenttityyppi. Dokumenttityypillä selaimelle kerrotaan, minkä tyyppinen dokumentti on kyseessä, jotta selain osaa tulkita WWW-sivun mahdollisimman hyvin. Dokumenttityypin määrittely mahdollistaa WWW-sivun HTML-määritysten oikeellisuuden tarkastamisen eli validoinnin. Validointia tarkastelemme hieman myöhemmin.

Meidän ei tarvitse joka kerralla kirjoittaa XML- ja dokumenttityyppimäärityksiä, vaan ne on kätevintä pitää mukana valmiissa sivupohjassa. Sivupohjalla tarkoitetaan uuden sivun tekemisessä käyttämäämme perusrakennetta, joka voi sisältää sivun perustietoja, kuten esimerkiksi tekijätiedot. Sivupohjaa tehdessämme voimme kopioida valmiit määritykset esimerkiksi tästä artikkelista, joten niitä ei tarvitse välttämättä kirjoittaa käsin.

Artikkelia (sivua) kirjoittaessamme meitä kiinnostavat edellisiä enemmän html-elementti sekä sen sisään tulevat osat. html-elementti toimii eräänlaisena WWW-sivun juurielementtinä, jonka sisään määritellään varsinainen sivun sisältö. Jokaisesta WWW-sivusta täytyy siis löytyä html-elementti. Esimerkin html-elementin sisään on määritelty WWW-sivun nimiavaruus ja sisällön kieli. Määrittelyt kannattaa liittää osaksi WWW-sivua, mutta niiden merkitystä emme tarkastele tässä yhteydessä tämän enempää. html-elementin sisään määritelemme WWW-sivun kaksi eri osaa, jotka on korostettu oheisessa esimerkissä. Esimerkin WWW-sivu näytetään WWW-selaimessa kuvan 1 mukaisesti.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
  <head>  
    <link rel="stylesheet" type="text/css" 
             media="all" href="tyylilomake.css" />
    <title>Asiakirjan otsikko</title>
  </head>


  <body>
    <h1>Asiakirjan otsikko</h1>
    <p>Ensimmäinen tekstikappale.</p>
  </body>
</html>

head-osaan määritelemme WWW-sivun otsikkotiedot, jotka eivät varsinaisesti näy WWW-sivua lukevalle käyttäjälle. Esimerkkisivussa head-osaan on määritetty muutamia tietoja.

Sivuilla käytettävä tyylilomake on määritelty head-osaan link-elementin avulla. Tyylilomakkeeseen kootaan kaikki WWW-sivun ulkoasuun liittyvät määritykset. link-elementti siis mahdollistaa erillään määritellyn WWW-sivun rakenteen ja ulkoasun yhdistämisen. Oman tyylilomakkeesi käyttäminen onnistuu muuttamalla tyylilomake.css-tekstin paikalle oman tyylilomakkeesi nimi. Tyylilomakkeiden käytöstä kerrotaan tarkemmin luvussa Tyylilomakkeet.
WWW-sivun otsikko on määritelty title-elementin avulla. title-elementin sisältö näytetään WWW-sivun lukijalle selainikkunan otsikkopalkissa. title-elementin sisällöksi kannattaa määrittää WWW-sivua mahdollisimman hyvin kuvaava otsikko. Yleensä WWW-sivun pääotsikko on hyvä toistaa title-elementin sisällä, ellei keksi vieläkin kuvaavampaa otsikkoa. title-elementin sisältö on tärkeä myös WWW-sivun löytymisen kannalta. Monet hakukoneet (esimerkiksi Google) järjestävät hakujen tuloksen siten, että title-elementistä löytyneet sanat menevät sisällöstä löytyneiden sanojen edelle hakutuloksissa. Käyttäjälle title-elementti on myös tärkeä, koska sen perusteella voi erottaa kirjanmerkkeihin (tai suosikkeihin) liitetyt WWW-sivut toisistaan.

Selainikkunan otsikkopalkissa näkyy sivun title-elementin sisältö. body-elementin sisältö tulee näkyville varsinaiseen selainikkunaan.

Kuva 1. Sivun näkyminen selainikkunassa.

body-osaan määritellään WWW-sivun varsinainen sisältö. Kaikki body-osaan tulevat sisällöt näytetään WWW-sivun lukijalle selainikkunassa. Esimerkkisivulla on ainoastaan ensimmäisen tason otsikko sekä yksi tekstikappale. Seuraavissa alaluvuissa käydään tarkemmin läpi erilaisia WWW-sivun sisällön rakenteeseen liittyviä elementtejä, kuten otsikoita ja listoja.

Otsikot - rakenteen määrittäjät

Otsikkoelementit (engl. Heading) h1, h2, h3, h4, h5 ja h6 määrittelevät WWW-sivun otsikkotekstit. h1-elementti määrittää korkeimman otsikkotason elementin ja niitä on vain yksi kappale WWW-sivulla. h2 - h6-elementtien täytyy sijaita loogisessa järjestyksessä WWW-sivulla, eli toisen tason otsikon jälkeen tulee kolmannen tason otsikko eikä esimerkiksi viidennen tason otsikko. Esimerkki otsikoiden käytöstä löytyy seuraavasta alaluvusta.

Otsikkoelementtien ja oikeiden otsikkotasojen käytöllä helpotamme WWW-sivun sisällön jäsentymistä kaikille lukijoille. Otsikot kertovat tarkasti WWW-sivun rakenteen, vaikkei ulkoasumäärityksiä näkisikään. Otsikoita ei siis kannata tehdä kirjasimen kokoa suurentamalla tai kirjasinta lihavoimalla. Graafisissa HTML-editoreissa, kuten Microsoftin Front Pagessa, otsikoiden merkitsemiseen kannattaa siksi käyttää Otsikko 1 - 6 (engl. Heading 1 - 6) -tyylejä. Tyylien käyttö lisää oikeantasoisen HTML-otsikkoelementin otsikkotekstin ympärille huomaamattamme.

Tekstikappaleiden erottaminen

Selainikkunassa on kolme eritasoista otsikkoa ja muutama tekstikappale.

Kuva 2. Otsikoiden rakenne.

Tavallinen tekstikappale (engl. Paragraph) merkitään p-elementtillä. Peräkkäiset tekstikappaleet erotetaan siis toisistaan kyseisellä elementillä. Selain rivittää tekstin selainikkunan leveyden mukaan ja poistaa ylimääräiset välilyönnit sekä rivinvaihdot tekstistä automaattisesti. Selainohjelmat jättävät tekstikappaleiden väliin automaattisesti tyhjää tilaa, joten sitä ei tarvitse yrittää luoda keinotekoisesti. Kappaleiden välistä tyhjää tilaa (ja toki kaikkia muitakin ominaisuuksia) voidaan muuttaa CSS-tyylilomakkeen avulla. Oheisessa esimerkissä havainnollistetaan tekstikappaleiden ja otsikoiden käyttöä.

Graafisissa HTML-editoreissa leipätekstikappaleiden merkitsemiseen kannattaa käyttää Normaali (engl. Normal) -tyyliä. Tyylin käyttö lisää p-elementin automaattisesti tekstikappaaleen ympärille. Erityisesti graafisissa HTML-editoreissa kannattaa varoa ylimäääräisten rivinvaihtojen tekemistä, koska niillä on taipumus tehdä ylimääräisiä merkintöjä WWW-sivun rakenteeseen.

  <h1>Asiakirjan pääotsikko</h1>
    <p>..tekstiä..</p>
    <h2>Alaotsikko</h2>
      <p>..tekstiä..</p>
      <h3>Ala-alaotsikko</h3>
        <p>..tekstiä..</p>
    <h2>Alaotsikko</h2>
      <p>..tekstiä..</p>
      <p>..tekstiä..</p>

Listat - järjestyksessä vai ei?

WWW-sivuilla voimme käyttää kolmea erilaista listaa, joista tässä yhteydessä käymme läpi järjestämättömän ja järjestetyn listan. Määritelmälista käsitellään artikkelissa Muita tarpeellisia HTML-rakenteita. Listoilla määrittelemme WWW-sivuilla erilaisia luetteloita. Järjestämätöntä listaa käytämme silloin, kun listan alkioilla ei ole selkeää järjestystä. Vastaavasti järjestettyä listaa käytämme, kun asioiden järjestys on selvästi pääteltävissä.

Järjestämätön lista

Järjestämättömän listan määrittelemme ul-elementillä (Unordered List). Elementillä merkitsemme listan alkamis- ja loppumiskohtat, kun taas varsinaiset lista-alkiot merkitsemme li-elementillä (List Item). Seuraavassa esimerkki järjestämättömän listan käytöstä.

Järjestämättömän listan alkiot näkyvät selainikkunassa listamerkillä erotettuina.

Kuva 3. Järjestämätön lista selainikkunasta katsottuna.

<ul>
<li>Lista-alkio 1</li>
<li>Lista-alkio 2</li>
<li>Lista-alkio 3</li>
</ul>

Graafisissa HTML-editoreissa järjestämättömän
listan merkitsemiseen kannattaa käyttää tyylejä Luettelomerkeillä varustettu lista (engl. Bulleted List) tai Järjestämätön lista (engl. List Bullet). Tyylien käyttö lisää automaattisesti WWW-sivuun listan aloitus- ja lopetusmerkit sekä lista-alkiomerkit.

Järjestetty lista

ol-elementillä (Ordered List) määrittelemme järjestetyn listan, jossa lista-alkiot voidaan asettaa (numeroida) tiettyyn järjestykseen. Elementillä merkitsemme listan alkamis- ja loppumiskohdan, kun taas varsinaiset lista-alkiot merkitsemme käyttäen li-elementtiä (List Item).

Järjestetyn listan alkiot erottuvat järjestysnumerolla.

Kuva 4. Järjestetty lista selainikkunasta katsottuna.

<ol>
<li>Ensimmäinen lista-alkio</li>
<li>Toinen lista-alkio</li>
<li>Kolmas lista-alkio</li>
</ol>

Graafisissa editoreissa järjestämättömän listan merkitsemiseen kannattaa käyttää tyylejä Numeroitu luettelo (engl. Numbered List) tai Järjestetty lista (engl. List Number). Tyylien käyttö lisää automaattisesti WWW-sivuun listan aloitus- ja lopetusmerkit sekä lista-alkiomerkit.

Sisäkkäiset listat

Voimme määritellä listoja myös sisäkkäisiksi. Sisäkkäisten listojen määrittäminen voi tuntua aluksi ongelmalliselta, mutta oikeilla sisennyksillä voimme helpottaa listan hahmottamista. Sisäkkäisten listojen tekemisessä kannattaa muistaa, että sisempi lista tulee aina jonkin lista-alkion sisään. Tällöin ulomman lista-alkion lopetus tulee vasta sisemmän listan jälkeen. Esimerkissä järjestetty lista on oikeasti kokonaan toisella tasolla toisena olevan lista-alkion sisällä.

Kuva 5. Esimerkin sisäkkäinen lista selainikkunassa.

<ul>
<li>Ensimmäisen tason alkioita
  <ul>
    <li>Toisen tason alkioita</li>
    <li>Toisen tason alkioita
      <ol>
        <li>Kolmannen tason ensimmäinen alkio</li>
        <li>Kolmannen tason toinen alkio</li>
        <li>Kolmannen tason kolmas alkio</li>
      </ol>
    </li>
    <li>Toisen tason alkioita</li>
  </ul>
</li>
<li>Ensimmäisen tason alkioita</li>
<li>Ensimmäisen tason alkioita</li>
</ul>

Tärkeiden asioiden korostaminen

HTML:ssä on olemassa kaksi erilaista rakenteellista elementtiä (tyyliä) kappaleen sisäisten korostuksien tekemiseen.

strong-elementillä merkitsemme tekstin joukosta erityistä korostusta (vahvennusta) tarvitsevia osia. Graafisissa HTML-editoreissa vahvennuksen tekemiseen käytämme Vahvennus (engl. Strong) -tyyliä. Esimerkiksi FrontPage-editorissa vahvennus-tyylin saa käyttöön merkkimuotoilujen yhteydestä valikkokomennolla Format | Font (suomeksi Muotoile | Fontti). Tyylin käytössä kannattaa olla erityisen tarkkana, koska ulkoasultaan samannäköisen lopputuloksen saamme kirjasimen lihavoimisella (engl. Bold). Lihavointia ei kuitenkaan kannata käyttää, koska se määrittää ainoastaan tekstin ulkoasun. Vahvennettava teksti ei ole välttämättä lihavoitu, vaikkakin selaimet näyttävät vahvennuksen usein lihavointina.
em-elementillä merkitsemme tekstin joukosta lievempää korostusta tarvitsevia osia. Graafisissa HTML-editoreissa vahvennuksen tekemiseen kannattaa käyttää Korostus (engl. Emphasis) -tyyliä. Esimerkiksi FrontPage-editorissa korostus-tyylin saa käyttöön merkkimuotoilujen yhteydestä valikkokomennolla Format | Font (suomeksi Muotoile | Fontti). Tyylin käytössä kannattaa olla erityisen tarkkana, koska ulkoasultaan samannäköisen lopputuloksen saamme kirjasimen kursivoinnilla (engl. Italic). Kursivointia ei kuitenkaan kannata käyttää, koska se määrittää ainoastaan tekstin ulkoasun. Korostettu teksti ei ole välttämättä kursivoitu, vaikkakin selaimet näyttävät korostuksen usein kursivointina.

Selainikkunassa vahvennus näkyy lihavoituna ja korostus kursivointuna.

Kuva 5. Esimerkki korostuksien käytöstä listassa ja tekstikappaleessa.

<p>Tässä tekstikappaleessa on sekä <em>korostettavaa</em> että 
  <strong>vahvennettavaa</strong> tekstiä.</p>


<ul>
<li>Tässä listassa on <em>korostettavaa</em> ja 
  <strong>vahvennettavaa</strong> tekstiä.</li>
<li>Tämä listan kohta vaatii <em>erityistä korostamista</em>.</li>
<li>Tämä listan kohta vaatii 
<strong>erityistä vahventamista</strong>.</li>
</ul>

Sudenkuoppien välttelyä

Esimerkeissä käytimme XHTML:ää perinteiden HTML:n sijasta. XHTML tuo HTML:n kirjoittamiseen muutamia XML:ään liittyviä sääntöjä, joiden avulla saamme WWW-sivun rakenteen yhtenäiseksi ja järkeväksi. WWW-sivun oikeaoppinen rakenne on esteettömyyden kannalta merkittävä, koska väärillä merkinnöillä voimme estää WWW-sivun näkymisen käyttäjän selaimessa. Oikeaoppisuuden tarkistamiseen käytämme validaattoreita, joita käsitellään seuraavassa alaluvussa. Seuraavaan on otettu muutamia esimerkkejä yleisimmistä virheistä, joihin perinteinen HTML ei ottanut juuri kantaa.

WWW-sivun täytyy olla hyvin muodostettu. Tällöin ei sallita elementtien ristikkäisyyttä, joten ensin aloitettu elementti täytyy myös lopettaa ensiksi.

OIKEIN:

   <p>
   <strong>Tärkeää ja </strong><em> vähemmän tärkeää </em> asiaa.
   </p>

VÄÄRIN:

   <p>
   <strong>Tärkeää ja <em> </strong> vähemmän tärkeää </em> asiaa.
   </p>

Elementtien ja attribuuttien nimissä käytetään vain pieniä kirjaimia. Perinteisesti HTML:ssä kirjoitusasulla ei ole ollut väliä, mutta XML:n sääntöjen mukaan elementit tulee kirjoittaa pienellä.
- OIKEIN:
```

 Tekstikappale

```
- VÄÄRIN:
```
 
 Tekstikappale

```
Kaikilla elementeillä täytyy olla lopetuselementti. Tavallisilla XHTML-elementeillä lopetuselementtinä toimii aloituselementti, johon on lisätty kauttaviiva pienempi kuin -merkin jälkeen. Tyhjillä elementeillä (esimerkiksi img) eli elementeillä, joiden sisään ei tule tekstiä, aloituselementin loppuun lisätään kauttaviiva juuri ennen suurempi kuin -merkkiä.
- OIKEIN:
```

 Tekstikappale, jonka sisällä on kuva 
	<img src="kuva.jpg" alt="kuvaus" />

```
- VÄÄRIN:
```
Tekstikappale, jonka sisällä on kuva 
	<img src="kuva.jpg" alt="kuvaus">
```

Sivun tarkistaminen - lopullinen tuomio?

Erityisesti kirjoittaessamme WWW-sivua käsin on syytä tarkistaa sivu validaattorilla. Jos WWW-sivulle on esimerkiksi tehty syntaksivirheitä (HTML-koodien kirjoitusvirheitä), sivun sisältö voidaan näyttää pahimmassa tapauksessa väärin. Tämän vuoksi sivun syntaksin oikeellisuuden tarkistaminen on tärkeää!

WWW-sivun alkuun lisätty dokumenttityypin määritys auttaa validoinnissa kertomalla "kieliopin", jonka mukaan sivu on tehty. Kielioppi siis määrittää käytettävissä olevat HTML-elementit, niiden merkintätavat sekä elementtien sisäkkäisyyden. Validaattoria käyttäessämme kannattaa aina muistaa, että se ei ota millään tavalla kantaa sivun sisältöön tai rakenteeseen. Validaattori tarkistaa ainoastaan tekemiemme HTML-määritysten oikeellisuuden.

Hyviä ja käyttökelpoisia validaattoreita löydät seuraavista osoitteista:

Validaattorin virheilmoitusten tulkinta vaatii pientä harjaantumista WWW-sivujen tekemiseen. Alussa virheitä voi joutua selvittämään kokeilemalla, mutta pian tavallisimmat virheensä oppii jo tunnistamaan.

Tehtäviä

Tee yksinkertainen HTML-sivu, joka sisältää muutaman eritasoisen otsikon sekä muutaman tekstikappaleen. Sivun rungoksi voit kopioida tässä artikkelissa käytetyn pohjan. Sivun sisältönä voit käyttää tätä artikkelia tai työssäsi tai opiskelussa tekemääsi (tekstinkäsittely)asiakirjaa. Valmiiseen tekstiin on helppo merkitä erilaisia tyyli- tai HTML-määrityksiä, koska sinulla on valmiiksi hyvä käsitys dokumentin rakenteesta. Jos käytät graafista HTML-editoria, tarkista välillä, millaista lähdekoodia editorisi tekee.
Jos käyttämässäsi artikkelissa on järjestettyjä ja järjestämättömiä listoja, merkitse myös ne. Jos valmiita listoja ei löydy, voit tehdä ne itsekin.
Tarkista sivusi W3C MarkUp Validation Service -validaattorilla. Validaattorilla voit tarkistaa myös kovalevylläsi olevan sivun, joten sivua ei tarvitse välttämättä julkaista WWW:ssä. Jos validaattori antaa virheitä, yritä korjata virheet. Jos käytät graafista HTML-editoria, et välttämättä saa sivustasi validia.
Luvun Esteettömän WWW-sivun rakenne tehtäväosassa tutkittiin muutamien sivujen esteellisyyttä. Tarkista kyseisten sivustojen etusivut ja muutama alasivu W3C MarkUp Validation Service -validaattorilla. Validaattorin käyttö onnistuu helpoiten siten, että avaat kaksi selainikkunaa, joista toisessa pidät näkyvillä validaattoria ja toisessa tarkastelemaasi sivustoa. Tällöin voit kätevästi kopioida sivun osoitteen validaattorin kenttään.

Petri Heinonen (peheinon@mit.jyu.fi)
Avoin yliopisto, Jyväskylän yliopisto

Oli apua - 26.09.2004 10:43

Vaikkakin ji epselvksi saako ennen ensimmisen tason otsikkoa olla teksti vai ei, esim. mihin kohtaan navigointilista tulisi laittaa.

- Petteri Lahnala (petteri.lahnala@kolumbus.fi) -

selkeä artikkeli! - 15.02.2005 13:22

Selkeästi ja tiivistetysti esitetty! onneksi löysin tämän sivun.

- Innostus (nobody@company.invalid) -