Artikkelissa pyritään esittämään yksinkertaisen ja esteettömän WWW-sivun toteutus graafisen tai merkkipohjaisen HTML-editorin avulla.
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.
WWW-sivu, otsikko, leipätekstikappale, järjestämätön lista, järjestetty lista, validaattori.
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ä.
Tutkimme WWW-sivun rakennetta ohessa olevan esimerkin avulla. Esimerkissä voi olla muutamia sinulle vieraita määrityksiä, mutta niistä ei kannata huolestua tässä vaiheessa.
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.
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.
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.
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.
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.
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>
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ä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ä.
<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.
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).
<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.
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ä.
<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>
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.
<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>
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.
<p> <strong>Tärkeää ja </strong><em> vähemmän tärkeää </em> asiaa. </p>
<p> <strong>Tärkeää ja <em> </strong> vähemmän tärkeää </em> asiaa. </p>
<p> Tekstikappale </p>
<P> Tekstikappale </P>
img
) eli elementeillä, joiden sisään ei tule tekstiä,
aloituselementin loppuun lisätään kauttaviiva juuri ennen suurempi kuin -merkkiä.
<p> Tekstikappale, jonka sisällä on kuva <img src="kuva.jpg" alt="kuvaus" /> </p>
<p>Tekstikappale, jonka sisällä on kuva <img src="kuva.jpg" alt="kuvaus">
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.