ITKP101-Harjoitustyö Lassi Lehtinen. Esteettömän WWW-sivun toteuttaminen. Mikä on WWW-sivu? Helpottaako hyvä rakenne työtämme?

Transkriptio

1 ITKP101-Harjoitustyö Lassi Lehtinen ITKP101-Harjoitustyö Lassi Lehtinen Esteettömän WWW-sivun toteuttaminen Esteettömän WWW-sivun tekeminen on varsin yksinkertaista. Useimmiten meille on yksinkertaisempaa tehdä esteetön WWW-sivu kuin esteellisen WWW-sivu. Esteellisyys johtuu usein tarpeettomien ja monimutkaisempien tekniikoiden käytöstä. Tehdessämme esteettömiä WWW-sivuja meidän ei tarvitse osata kaikkein hienompia ja uusimpia tekniikoita, vaan voimme tehdä hyvän ja asiapitoisen perussivun. Toki erilaisten tekniikoiden käytöllä on oma hyvät puolensa, mutta niiden käyttö ei saa aiheuttaa ylimääräisiä esteitä sivujen käyttäjille. Mikä on WWW-sivu? WWW-sivu on tavallista muotoilematonta teksti, joka voidaan esimerkiksi kirjoittaa jollakin tekstieditorilla (esim. Notepad). Muotoilemattomasta tekstist ei erota siellä esiintyviä otsikoita tai muita rakenteita, kuten seuraavasta esimerkistä voit todeta. Tekstistä eivät myöskään erotu lauseista korostettavat sanat. Pelkkä teksti ei ole kovinkaan miellyttävää luettavaa rakenteen puuttumisen vuoksi. Tekstistä on kuitenkin aina erotettavissa erilaisia rakenteellisia osia, kuten esimerkiksi otsikoita, tekstikappaleita ja listoja. Rakenteellisten osien erottamisen voimme toteuttaa HTML-elementtien avulla, joita käyttämällä teemme muotoilemattomasta tekstistä HTML-sivun. HTML-elementeillä (eli tageilla) voimme määrittää tekstikappaleille tai niiden osille rakenteellinen merkitys. HTML-elementit eroavat muusta kirjoitetusta tekstist siten, että ne on kirjoitettu pienempi kuin -merkin (<) ja suurempi kuin -merkin (>) väliin (<siis tänne>). WWW-sivuilla käytettävissä olevat HTMLelementit on määritelty etukäteen, joten esimerkiksi WWW-sivun pääotsikon merkitsemme <h1>-elementin (Heading1) sisään. Vastaavalla tavalla tekstikappaleet merkitsemme <p>-elementin (Paragraph) sisään. Merkintöjä käyttämällä saamme edellisen esimerkin tekstin havainnollisempaan muotoon, koska nyt voimme erottaa selvästi otsikko ja tekstikappale toisistaan. HTML-elementti on yksinkertaisesti jokin englanninkielinen sana tai siitä tehty lyhenne, joka on laitettu pienempi kuin ja suurempi kuin -merkin väliin. Useimmat HTML-elementit tulevat tekstin sekaan pareittain eli niissä on sekä aloitus- että lopetuselementti. Seuraavassa esimerkissä tekstikappaleen sisältä löytyvä <strong>-aloituselementti kertoo, että sen jälkeen tuleva teksti täytyy korostaa (vahventaa). Vastaavasti lopetuselementti </strong> kertoo, että vastaavan aloituselementin vaikutus loppuu eli korostaminen täytyy lopettaa. HTML-elementin lopetuselementti on samanlainen kuin aloituselementti lukuun ottamatta kauttaviivaa (/) pienempi kuin -merkin jälkeen. Esimerkistä kannattaa myös huomata, että jotkin HTML-elementit voidaan lisätä toisten HTML-elementtien sisään. Helpottaako hyvä rakenne työtämme? Ehdottomasti! Jo alussa meidän kannattaa opetella ajattelemaan WWW-sivun rakennetta ulkoasun sijaan. Ikävä kyllä, monet WWW-sivujen tekijät unohtavat kokonaan rakenteen ulkoasun kustannuksella ja saavat varmasti kärsiä asiasta. Tällöin esimerkiksi ulkoasun muuttaminen voi olla todella työlästä. Hyvillä rakenteen määrittelyillä saamme aikaan selkeitä ja rakenteeltaan hyviä WWW-sivuja, joista löydämme etsimänsä helposti esimerkiksi sivuja päivitettäessä. Lisäksi hyvällä rakenteen määrittelyllä mahdollistamme ulkoasun muuttamisen mahdollisimman helposti ja kootusti. Tällöin voimme esimerkiksi muuttaa kaikkia WWW-sivun (tai sivuston) toisen tason otsikoiden kirjasintyyppiä muutamassa sekunnissa. Jos rakennetta ei ole määritelty oikein voi kirjasintyypin muuttamiseen mennä useita minuutteja jo yhdelläkin sivulla. Erityisen tärkeää on ajatella rakennetta graafisia HTML-editoreja käyttäessämme. Meidän ei kannata kiinnittää ulkoasuun mitään huomiota sivun rakenteen ja sisällön määrittämisen yhteydessä. Graafisia HTML-editoreja käyttäessämme rakenne kannattaa määritellä editoreista löytyvien rakenteellisten tyylien avulla. Tällaisia tyylejä ovat esimerkiksi: Otsikko 1 - Otsikko 6 (engl. Heading - Heading 6) -tyyleillä määritellään otsikot tasojen mukaisesti. Otsikko1 on korkeimman tason otsikko eli sivun pääotsikko. Normaali, leipäteksti (engl. Normal / Paragraph) -tyylillä määritellään kaikki tavalliset teksikappaleet. Luettelomerkeillä varustettu luettelo, järjestämätön lista (engl. Bulleted List, Unordered List) -tyylillä määritellään järjestämätön lista, jonka alkioilla ei ole tiettyä järjestystä. Numeroitu luettelo, järjestetty lista (engl. Numbered List, Ordered List) -tyylillä määritellään järjestettu lista, jonka alkioilla on tietty järjestys. Muotoiltu (engl. Formatted) -tyylillä määritellään teksti, jossa halutaan säilyttää kirjoitusmuotoilut, kuten välilyönnit ja rivinvaihdot. Tyyli soveltuu erityisesti käytettäväksi erilaisten ohjelmakoodien esittämiseen. Esimerkiksi tämän artikkelin esimerkkeissä on käytetty tätä tyyliä. Vahvennus (engl. Strong) -tyylillä määritellään tekstin joukosta erityisesti korostettavia asioita. Selainikkunassa vahvennus näytetään oletuksena lihavoituna. Korostus (engl. Emphasis) -tyylillä määritellään tekstin joukosta korostettavia asioita. Selainikkunassa korostettu teksti näytetään oletuksena kursivoituna. Tyylejä käyttäessämme kannattaa miettiä aina tyylin merkitystä WWW-sivun rakenteelle. Otsikoita ei siis saisi tehdä suurentamalla kirjasinta ja lihavoimalla tekstiä vaan se pitäisi tehdä merkitsemällä otsikko oikean tasoisella tyylillä. Kun sivun rakenne on kunnossa, voimme muuttaa sivun ulkoasua nopeasti ja yhtenäisesti. Hyvällä rakenteen määrittelyllä parannetaan samalla myös sivun esteettömyyttä. Kun rakenne on kunnossa emmekä ole kiinnittäneet ulkoasua WWW-sivuun, niin WWW-sivua voidaan lukea esteettömästi monenlaisilla selaimilla.

2 Eritasoiset elementit - erilaiset käyttökohteet Lohkotason eli kappaletason elementeillä tarkoitetaan yhtenäisen lohkon muodostavia elementtejä. Tällaisia lohkoja ovat esimerkiksi tekstikappaleet (pelemementin sisällä) ja listat (ul- tai ol-elementin sisällä). Yhden lohkotason elementin sisään (esim. div-elementti) voimme joissakin tapauksissa laittaa useitakin lohkotason elementtejä eli esimerkiksi tekstikappaleita. Tekstikappaleen tai otsikoiden sisään emme kuitenkaan voi laittaa muita lohkotasoisia elementtejä, vaan ainoastaan merkkitason elementtejä. Lohkotason elementeillä on monenlaista käyttöä, koska niillä voimme merkitä erilaisia WWW-sivun rakenteellisia osia tai voimme erotaa toisistaan WWW-sivun navigoinnin ja sisällön. Merkkitason elementit (esim. strong ja img) sijaitsevat aina jonkin lohkotason elementin sisällä. Kuvat ja vahvennukset sijaitsevat useinmiten tekstinkappaleen, listan tai taulukon sisällä. Merkkitason elementin sisällä voi sijaita toinen merkkitason elementti (vahvennuksen sisällä voi olla linkki), mutta ei koskaan lohkotason elementtiä. Rakenteellisesti epäilyttäviä ratkaisuja Monilla WWW-sivuilla on käytetty rakenteellisesti hyvin arveluttavia ratkaisuja. Näistä ratkaisuista aiheutuu ongelmia esimerkiksi käyttäjäryhmille, joilla on käytössään poikkeuksellinen pieni katselulaite tai selainikkunan koko. Seuraavassa on listattu pahimpia rakenteellisia ongelmia. Taulukkotaittaminen hankaloittaa olennaisesti sivun lukemista erikoisemmissa selaimissa. Esimerkiksi ääniselaimilla kokonaiskuvan muodostaminen on hankalaa tai jopa mahdotonta. Sivun varsinainen sisältö ja rakenne on tällöin piilotettu taulukkoon, joten sivun muuttaminenkin on työlästä. Taulukon käyttämisen voi usein korvata muilla rakenteellisilla määrittelyillä ja CSS-tyylien avulla. Oletukset selainikkunan koosta haittaavat monia käyttäjiä, jotka selaavat sivua oletuksista poikkeavilla asetuksilla. Esimerkiksi mobiililaitteilla selaavilla käyttäjillä on suuria ongelmia saada sivun sisältöä järkevässä muodossa, jos sivun koko on kiinnitetty. Usein juuri taulukkotaitetuilla sivuilla tehdään myös oletuksia käyttäjän selainikkunan tai katselulaitteen koosta. Sivun pitäisi antaa skaalautua käyttäjän selainikkunan koon ja asetusten mukaisesti. Kehyksien käyttö tuottaa vaikeuksia erityisesti selaajille, joilla ei ole kehyksiä tukevaa selainohjelmaa. Tällöin kehykset pilkkovat sivun pieniin palasiin, jolloin selaaminen on hankalaa ja perustuu ikävän usein arvailuun. Tällöin myös pienellä näytöllä selaajalla on ongelmia, koska kehykset laajentavat sivua paljon sivusuunnassa, joten sivua joutuu vierittämään vaakasuunnassa. Kehyksiä voi jäljitellä CSS:n avulla tarvittaessa, mutta useimmiten sekin on tarpeetonta. Selainkohtaisten HTML- tai muiden laajennuksien käyttö tuottaa vaikeuksia toisen valmistajan selainta käyttävälle. Tämän vuoksi sivujen sisältö voi jäädä kokonaan joidenkin käyttäjien ulottumattomiin, joten selainkohtaisia laajennuksia ei kannata käyttää. HTML-sivuilla kannattaa käyttää ainoastaan W3C:n suosituksen mukaisia HTML-elementtejä. Tässä artikkelissa esitellään XHTML 1.0 Strict -suosituksen mukaisia HTMLelementtejä. Kannattaako rakenteen ja ulkoasun erottaminen? Jos emme erota HTML-sivun rakennetta ja ulkoasua toisistaan, niin törmäämme ennemmin tai myöhemmin ongelmiin. Sivumme tai sivustomme ulkoasun muuttaminen on hidasta, koska ulkoasu on liian kiinteä osa HTML-sivua. Tällöin joudumme tekemään muutoksen kaikki sivuihin yksitellen. Sivujemme sisältö voi jäädä erilaisten selainten tai päätelaitteiden käyttäjien ulottumattomiin. HTML-sivun sisään tehtävät tiukat ulkoasun määrittelyt eivät mukaudu kaikkien käyttäjän päätelaitteen asetusten mukaisesti. Tällöin esimerkiksi kirjankoon kiinnittäminen HTML-sivuun voi aiheuttaa, ettei tekstistä saa selvää joillakin selaimilla. 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.

3

4

5 Linkki ITKP101 - Tietokone ja tietoverkot työvälineenä -kurssin kotisivuille: