Usein tarvittavia HTML-rakenteita

Merkitys ja tavoite

Artikkelissa tarkastellaan taulukoiden, linkkien, kuvien ja lainauksien esteetöntä toteutusta WWW-sivulle.

Keskeiset ajatukset

WWW-sivulle voi tulla monipuolisia elementtejä, joiden lisäämisessä on otettava mahdollisimman hyvin huomioon erilaiset käyttäjät.

Avainsanat

WWW-sivu, esteettömyys, taulukko, linkki, kuva, lainaukset, virheet ja erikoismerkit.

Tiivistelmä

WWW-sivuja tehtäessä sivuille on usein tarpeen liittää taulukkomuotoista tietoa, tekstiä havainnollistavia kuvia, lisätietoa antavia linkkejä ja erilaisia lainauksia. Kaikkien elementtien lisäämisessä voidaan ottaa huomioon sivun erilaiset käyttäjät, jotta tehtävät ratkaisut saadaan mahdollisimman esteettömiksi. Sivujen tekijöille saattaa tulla muutamia kiusallisia HTML-elementteihin liittyviä kirjoitusvirheitä, jotka voi välttää tiedostamalla ongelmakohdat. Sivuille ja osoitteisiin tulevat erikoismerkit joudutaan koodaamaan sivun esteettömyyden varmistamiseksi.

"Esteettömän WWW-sivun toteuttaminen" -luvussa käsittelimme otsikoita, tekstikappaleita ja listoja sisältävän WWW-sivun tekemistä. Tässä luvussa tarkastelemme muutamia muita tarvittavia HTML-rakenteita, kuten kuvien, linkkien ja taulukoiden lisäämiseen tarvitsemiamme määrityksiä. Käytettävien määritysten pohjana on mahdollisimman hyvän esteettömyyden toteuttaminen, vaikka sitä ei korostettaisi erikseen.

HTML-elementtien tarpeelliset lisämääritykset

Monissa HTML-elementeissä joudumme käyttämään lisämäärityksiä eli attribuutteja, koska pelkkä HTML-elementti ei riitä kertomaan kaikkea tarvittavaa tietoa. Esimerkiksi kuvan lisäämiseen tarkoitettu img-elementti kertoo ainoastaan kuvan sijaintipaikan WWW-sivun tekstien joukossa. Tämän vuoksi kuvan lisäämisen yhteydessä kerromme lisättävän kuvan fyysisen sijainnin hakemistorakenteessa erillisellä src-attribuutilla. Lisäksi määrittelemme kuvalle esteettömyyttä nostavan vaihtoehtoisen selitystekstin alt-attribuutin avulla. Tarkemmin näiden attribuuttien käyttöä käsitelemme kuvien lisäämisen yhteydessä.

Attribuutit sijoitamme aina elementin aloituselementin sisään. Esimerkin tapauksessa img-elementin aloituselementti toimii samalla myös lopetuselementtinä, jolloin elementin loppuun on lisätty kauttaviiva (/). Attribuuttien arvon liitämme attribuutin nimeen yhtäsuuruusmerkin (=) avulla. Attribuutin arvon määritelemme aina lainausmerkkien sisään. Esimerkissä kuvan sijainti hakemistorakenteessa ja kuvan nimi kerrotaan src-attribuutilla. Attribuutin arvoksi on esimerkissä määritelty pelkästään kuvan nimi kuva1.png, koska kuva ja HTML-dokumentti sijaitsevat samassa hakemistossa. 

<p>
  <img src="kuva1.png" alt="Kuvan vaihtoehtoinen selitysteksti" />
</p>

Eritasoiset elementit - erilaiset käyttökohteet

Lohkotason eli kappaletason elementeillä tarkoitetaan yhtenäisen lohkon muodostavia elementtejä. Tällaisia lohkoja ovat esimerkiksi tekstikappaleet (p-elemementin sisällä) ja listat (ul- tai ol-elementin sisällä). Yhden lohkotason elementin sisään (esimerkiksi div-elementti) voimme joissakin tapauksissa panna useitakin lohkotason elementtejä eli esimerkiksi tekstikappaleita. Tekstikappaleen tai otsikoiden sisään emme kuitenkaan voi sijoittaa muita lohkotasoisia elementtejä, vaan ainoastaan merkkitason elementtejä. Lohkotason elementeillä on monenlaista käyttöä, koska niillä voimme merkitä erilaisia WWW-sivun rakenteellisia osia tai voimme erottaa toisistaan WWW-sivun navigoinnin ja sisällön.

Merkkitason elementit (esimerkiksi strong ja img) sijaitsevat aina jonkin lohkotason elementin sisällä. Kuvat ja vahvennukset sijaitsevat useimmiten 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ä.

Usein käytettyjä kappaletasoisia elementtejä

Luvussa Esteettömän WWW-sivun toteuttaminen kävimme läpi normaalin tekstikappaleen, otsikoiden ja muutaman listan määrittelyt. Tässä yhteydessä käymme läpi muutamia uusia, mutta usein käytettyjä kappaletasoisia elementtejä. Tällaisia ovat yleistä lohkoa kuvaava div-elementti, muotoilematonta tekstiä merkitsevä pre-elementti, tekijätietoja sisältävä address-elementti ja määritelmälistan ja erilaisten lainauksien merkitsemiseen käytttävät elementit.

Kappaletason elementtejä on olemassa monia muitakin, mutta niitä ei tarkastella tässä yhteydessä. Esimerkiksi kaikkien HTML 4.01 -suositukseen kuuluvien elementtien kuvaukset löytyvät W3C:n HTML 4.01 -suosituksesta osoitteesta <URL: http://www.w3.org/TR/html4/>.

Navigoinnin ja sisällön erottaminen - Yleinen lohko

div-elementti on monikäyttöinen kappaletason elementti. WWW-sivuja tehtäessä on usein tarve erottaa jotkin sivun eri osat toisistaan. Tällaiset osat voivat olla esimerkiksi sivuun liittyvän navigoinnin ja sisällön erottaminen. div-elementillä tämä onnistuu helposti, koska div-elementin sisään voi tulla useita kappaletasoisia elementtejä. div-elementillä ei ole varsinaista rakenteellista erityismerkitystä, joten sitä voidaan käyttää muista elementeistä muodostuvien lohkojen tekemiseen. div-elementtiä ei kuitenkaan kannata käyttää tekstikappaleiden tai otsikoiden merkitsemiseen, koska niitä varten on olemassa omat elementtinsä!

Esimerkissä muotoillaan navigointia ja sisältöä erillisinä osina (esimerkiksi erilaiset taustavärit), joten ne erotetaan toisistaan div-elementin avulla. Erillisen navigointilohkon merkitseminen mahdollistaa myös koko navigoinnin siirtämisen kehyksien tapaisesti sivun oikeaan tai vasempaan laitaan CSS:n avulla. Elementissä on käytetty class-attribuuttia määrittelemään lohkolle oma luokka(nimi), johon viittamalla voimme määritellä lohkolle ominaisuuksia CSS-tiedostossa. Esimerkissä (Kuva 1) CSS-tiedostossa on määritelty lohkolle sisällöstä erottuva taustaväri ja raja.

Div-elementin avulla määriteltyjä lohkoja voidaan muokata CSS:n avulla.

Kuva 1. Erillisen navigoinnin määrittäminen.

<div class="navigointi">
  <ul>
    <li><a href="eka.html">Eka linkki</a></li>
    <li><a href="toka.html">Toka linkki</a></li>
    <li><a href="kolmas.html">Kolmas linkki</a></li>
  </ul>
</div>


<div class="sisalto"> 
... Tänne tulee sivun varsinainen sisältö ...
</div>

Koodit näkyville - Muotoilematon tekstikappale

pre-elementillä (PREformatted text) voimme määritellä tekstikappaleita, joiden haluamme näkyvän täsmälleen kirjoitusasussaan. Selaimet rivittävät normaalien tekstikappaleiden (p-elementti) tekstin selainikkunaan sopivaksi sekä poistavat ylimääräiset välilyönnit ja rivinvaihdot tekstistä automaattisesti. Usein kuitenkin erilaiset ohjelmakoodit, kuten tämän artikkelin esimerkit, halutaan näkyviin täsmälleen kirjoitusasussaan. Tällöin käytetään p-elementin sijasta pre-elementtiä. pre-elementtiä ei saa koskaan käyttää ulkoasun muotoilemiseen eli esimerkiksi tekstin pakkorivittämiseen!

Esimerkki on poimittu edellisestä luvusta järjestetyn listan esimerkkien yhteydestä. Esimerkissä on ylimääräisiä rivinvaihtoja lista-alkioiden välissä ja muutama sisentävä välilyönti erottamassa lista-alkiot muusta listasta. Esimerkissä halutaan näyttää listan tekevä koodi ja korostaa rakennetta sisennyksin ja rivinvaihdoin. Kannattaa kuitenkin muistaa, että pre-elementtiin tulevia HTML-elementtien koodeja ei näytetä, vaan elementit toimivat kuten muuallakin artikkelissa. Jos HTML-elementit halutaan näkyville, pienempi kuin ja suurempi kuin -merkit täytyy koodata erikseen, kuten esimerkissä on tehty.

Muotoilematon teksti näkyy selainikkunassa kirjoitusasussaan rivinvaihtoineen, sarkaimineen ja välilyönteineen.

Kuva 2. Muotoilematon teksti selainikkunassa.

<pre>
&lt;ol&gt;
  &lt;li&gt;Ensimmäinen lista-alkio&lt;/li&gt;


  &lt;li&gt;Toinen lista-alkio&lt;/li&gt;


  &lt;li&gt;Kolmas lista-alkio&lt;/li&gt;
&lt;/ol&gt;
</pre>

WWW-sivun tekijän yhteystiedot

WWW-sivun tekijän yhteystiedot voidaan esittää address-elementin avulla. Kuitenkaan kaikkiin dokumentissa oleviin yhteystietoihin ei pidä käyttää address-elementtiä. Alla olevassa esimerkissä on käytetty a-elementtiä tekemään sähköpostiosoitteesta sähköpostinlähetyslinkki. Lisäksi esimerkissä on käytetty br-elementtiä tekemään pakotettu rivinvaihto osoitetietojen sisällä.

<address>
Petri Heinonen 
(<a href="mailto:peheinon@mit.jyu.fi">peheinon@mit.jyu.fi</a>)<br />
Avoin yliopisto, Jyväskylän yliopisto
</address>
Osoitetiedot näkyvät graafisessa selainikkunassa hieman kursivoituna.

Kuva 3. Tekijän osoitetietojen näkyminen selaimessa.

Lainauksien merkiseminen

Lainauksien merkitsemiseen on olemassa erilaisia elementtejä.

Esimerkissä on lainattu W3C:n Suomen toimiston raportista katkelma. cite-attribuutilla osoitetaan dokumenttiin, josta lainaus on poimittu. Selain sisentää oletuksena lainattua kappaletta, mutta lainauksen muotoilut voidaan määritellä kokonaan uudenlaisiksi CSS-tyylien avulla.

<blockquote 
cite="http://www.w3c.tut.fi/reports/2003/0508wai-intro/index.html">
<p>
Saavutettavuudella (accessibility) tarkoitetaan erilaisten käyttötarpeiden 
huomioimista arkisia sovelluksia toteutettaessa. Saavutettavuus poistaa 
käytettävyyden esteitä ja lisää käyttömukavuutta. Jos saavutettavuutta 
ei oteta erilaisia tuotteita, välineitä ja palveluja suunniteltaessa 
riittävästi huomioon, saattaa osa asiallisista käyttäjistä 
jäädä jopa kokonaan tavoittamatta. 
</p>
</blockquote>
Lainaus esitetään hieman sisennettynä graafisessa selaimessa.

Kuva 4. Kappalelainaus.

Seuraavassa esimerkissä on kyseessä hieman lyhempi lainaus. cite-elementtiä on käytetty merkitsemään henkilö, jota lainataan, ja q-elementillä määritellään varsinaisen lainauksen sisältö. Selain on oletuksena korostanut lainauksen kohdetta ja lisännyt automaattisesti lainausmerkit lainauksen ympärille. 

<p>
Kuten <cite>Ossi Nykänen</cite> kirjoittaa artikkelissaan: 
<q>Saavutettavuus ei tarkoita tylsää tai pelkkään tekstiin 
nojautuvaa sisältöä tai hölmön näköistä esitystapaa.</q> 
</p>
Cite-elementin sisältö näytetään graafisessa selaimessa kursivoituna ja lainauksen ympärille on lisätty lainausmerkit.

Kuva 5. Lyhyempi lainaus kappaleen sisältä.

Määritelmien listaaminen

Määritelmälista (Definition List) tarkoittaa listaa, jossa on erillinen termi (Denition Term) ja sitä vastaavaa kuvaus (Definition Description). Listaa käytetään nimensä mukaisesti määritelmä- tai käsitelistojen tekemiseen, joten jokainen ei sitä tarvitse.

Alla olevassa esimerkissä on määritelty kaksi termiä: XHTML ja URL. Selain muotoilee automaattisesti määritelmälistan termin ikkunan vasempaan reunaan ja tekee määritelmän eteen pienen sisennyksen.

<dl>
  <dt>XHTML</dt>
    <dd>WWW-dokumentin rakenteen kuvaamiskieli, 
    joka noudattaa XML:n kielioppia.</dd>
  <dt>URL</dt>
    <dd>WWW-sivun osoite.</dd>
</dl>
Määritelmälistan termit ja määritelmät erotetaan toisistaan erilaisien sisennyksien avulla selainikkunassa.

Kuva 6. Määritelmälista.

Tiedot taulukkoon

Taulukolla voimme helposti esittää taulukkomuodossa olevia tietoja. Taulukolla ei kannata taittaa HTML-sivua, koska se aiheuttaa esteitä joillekin sivujen lukijoille. Esimerkiksi useimmat ääni- ja tekstiselaimia käyttävät eivät näe sivun graafista ulkoasua, joten taulukkotaitettu sisältö voi olla vaikeasti hahmotettavissa. Myöskään taulukkomuotoisia tietoja ei kannata panna muiden elementtien sisään.

Esimerkissä on tehty kolmerivinen ja kaksisarakkeinen taulukko. Taulukon yläpuolella on määritelty koko taulukkoon liittyvä otsikko. Taulukon ensimmäisellä rivillä on taulukon sarakeotsikot, joiden alapuolisilla riveillä ovat taulukon sisällöt. Esimerkin alapuolelta löytyy tarkemmat selitykset esimerkin eri kohtiin. Joissakin selaimissa on oletuksena, että taulukoihin ei lisätä lainkaan reunoja. Alla olevaan esimerkkiin on lisätty reunat CSS:n avulla, jotta esimerkki olisi havainnollinen. Muut taulukon osat ovat muotoilemattomia.

Kolmerivinen ja kaksisarakkeinen taulukko, jonka yläpuolella on taulukon otsikko.

Kuva 7. Taulukon käyttöesimerkki.

<table summary="Kaksisarakkeinen ja kolmerivinen esimerkkitaulukko">
<caption>Koko taulukon otsikko</caption>
<tr>  
  <th>Ensimmäisen sarakkeen otsikko</th>    <th> Toisen sarakkeen otsikko</th>
</tr>
<tr>
  <td>Ensimmäisen sarakkeen ylin rivi</td>  <td>Toisen sarakkeen ylin rivi</td>
</tr>
<tr>  
  <td>Ensimmäisen sarakkeen alin rivi</td>	<td>Toisen sarakkeen alin rivi</td>
</tr>
</table>

Voimme tarvittaessa myös yhdistää taulukon sarakkeita ja rivejä. Yhdistäminen onnistuu colspan ja rowspan-attribuuttien avulla.

Seuraavassa esimerkkissä taulukon vasemman puoleisen sarakkeen kaksi viimeistä riviä on yhdistetty yhdeksi soluksi. Tällöin kahdelle alimmaiselle riville (tr-elementti) ei ole määritelty kuin yhdet td-elementit, jotka toimivat oikean puoleisen sarakkeen soluina. Vastaavasti taulukon otsikkorivin jälkeen on ensimmäisen rivin kaksi sarakketta yhdistetty yhdeksi soluksi. Tällöin kyseiselle riville ei ole määritelty kuin yksi td-elementti.

<table summary="Taulukon koosteteksti">
<caption>Koko taulukon otsikko</caption>
<tr>
  <th>Ensimmäisen sarakkeen otsikko</th>  <th> Toisen sarakkeen otsikko</th>
</tr>
<tr>
  <td colspan="2">Kahden sarakkeen ja yhden rivin solu</td>
</tr>
<tr>
  <td rowspan="3">Yhden sarakkeen ja kolme rivin solu</td>
  <td>Toisen sarakkeen toinen</td>
</tr>
<tr>
  <td>Toisen sarakkeen kolmas</td>
</tr>
<tr>
  <td>Toisen sarakkeen </td>
</tr>
</table>
Kaksisarakkeisesta ja viisirivisestä taulukosta on yhdistetty kaikki toisen rivin solut ja kolme alinta vasemman laidan solua.

Kuva 8. Taulukon rivien ja sarakkeiden yhdistäminen.

Linkkien tekeminen

WWW-sivulle voimme tehdä kahdenlaisia linkkejä: ulkoisia ja sisäisiä. Dokumentin ulkoisella linkillä tarkoitetaan linkkiä, jota seuraamalla joudutaan kokonaan toiseen dokumenttiin. Sisäisellä linkillä vastaavasti tarkoitetaan linkkiä, jota seuraamalla päästään saman dokumentin toiseen osaan. Tällainen linkki on todella käyttökelpoinen esimerkiksi sisällysluettelossa.

Kumpikin linkki tehdään a-elementtiä (anchor) käyttäen. Elementin sisään eli aloitus- ja lopetuselementtien väliin tulee havainnollinen linkkiteksti. Linkkitekstiä määrittäessä kannattaa muistaa muutamia hyvän linkkitekstin ominaisuuksia.

Linkkien oikea toiminta on myös hyvä varmistaa linkkejä tehtäessä. WWW-sivuja selatessa törmää mitä eriskummallisimpiin linkkeihin, jotka yrittävät rajoittaa käyttäjän liikkumista sivustolla. Mitään rajoituksia ei kuitenkaan kannata alkaa miettiä, vaan kannattaa aina muistaa linkkien perustoiminta.

Linkit ovat hyvin tärkeä siirtymistie sivuilta toiselle, joten linkkejä tehtäessä kannattaa myös muistaa muutamia linkkien ulkoasuun liittyviä asioita. Linkkien ulkoasu (vierailematon, vierailtu, aktiivinen) voidaan määritellä CSS-tyylien avulla hyvinkin tarkoin.

Linkkielementti ei yksistään riitä kertomaan linkin kohdetta, vaan linkin tekemisessä tarvitaan myös muutamaa attribuuttia.

Seuraavassa esimerkissä on absoluuttinen linkki Essikurssiin. href-attribuutilla on kerrottu sivun koko osoite, jonne halutaan siirtyä. title-attribuutilla on haluttu tarkentaa hieman linkin kohteena olevaa sivustoa. Esimerkin linkki voi sijaita missä tahansa dokumentissa millä tahansa WWW-palvelimella. Esimerkkikuvasta nähdään, että käytetty selain näyttää title-tekstin kun hiiren osoitin viedään linkin päälle.

<p>
  <a href="http://appro.mit.jyu.fi/essikurssi/" 
     title="Esteettömän WWW-sisällöntuotannon kurssi" >Essikurssi</a> 
	toimii esimerkkinä esteettömän sivuston tekemisestä.
</p>
Absoluuttisessa linkissä annetaan sivun osoite kokonaisuudessaan.

Kuva 9. Absoluuttinen linkki Essikurssille.

Seuraavassa esimerkissä on tehty suhteellinen eli sivuston sisäinen linkki dokumentista toiseen. Suhteellisia linkkejä kannattaa käyttää esimerkiksi omaa sivustoa tehtäessä. Suhteellisten linkkien avulla varmistetaan, että tehty sivusto toimii myös sivuston siirtämisen jälkeen. Sivusto voidaan joutua siirtämään toiselle palveluntarjoajalle (WWW-palvelimelle) tai toisenlaiseen hakemistorakenteeseen. Siirtämistä pitäisi välttää viimeiseen asti sivuston löytymisen vuoksi, mutta joskus sellaistakin joutuu tekemään. Esimerkissä linkin kohde löytyy dokumentin sisältävän hakemiston äitihakemiston (..) alla sijaitsevasta t2-nimisestä hakemistosta. Linkki viittaa kyseisen hakemiston index.html-nimiseen tiedostoon.

<p>Tarkemmin HTML-sivun tekemiseen voit perehtyä artikkelissa 
  <a href="../t2/index.html">Yksinkertaisen HTML-sivun tekeminen</a>.
</p>

WWW-sivun sisäiset linkit - Sisällysluettelo

Dokumentin sisäisiä linkkejä tarvitsemme esimerkiksi sisällysluettelon tekemisessä. Dokumentin sisäiset linkit mahdollistavat kätevän siirtymisen dokumentin osasta toiseen, jolloin voimme siirtyä suoraan lukemaan dokumentin meitä kiinnostavaa osaa.

Ennen sisällysluettelon tekemistä dokumentin hyppykohdat (esimerkiksi otsikot) täytyy nimetä yksikäsitteisesti, jotta osataan siirtyä suoraan oikeaan kohtaan. Nimeäminen tehdään id-attribuutilla seuraavan esimerkin mukaisesti. Esimerkkinä käytetään artikkelin Esteettömän WWW-sivun toteuttaminen sisällysluetteloa. Kaikkiin dokumentin h2-tasoisiin otsikoihin on lisätty yksikäsitteinen id-attribuutti. 

<h2 id="perustukset">WWW-sivun perustukset</h2>
...
<h2 id="otsikko">Otsikot - rakenteen määrittäjät</h2>
...
<h2 id="tekstikappale">Tekstikappaleiden erottaminen</h2>
...
<h2 id="listat">Listat - järjestyksessä vai ei?</h2>
...

Aiemmin hyppykohdan merkitseminen tehtiin a-elementin name-attribuutilla, mutta tapa on poistumassa käytöstä. Tapaa ei ole järkevää esitellä tässä yhteydessä.

Hyppykohtien (id-attribuuttien) merkitsemisen jälkeen voimme tehdä varsinaisen sisällysluettelon. Linkit tehdään samalla tavoin kuin aiemminkin, mutta nyt href-attribuutin arvo alkaa risuaitamerkillä (#). Heti merkin jälkeen on määritelty sen otsikon id-attribuutin arvo, johon linkin halutaan hyppäävän, kun linkkiä napsautetaan hiirellä. Seuratessamme sisäistä linkkiä selainikkuna vierittää WWW-sivua siten, että selainikkunan yläosaan tulee näkyville linkin osoittama kohta eli esimerkin tapauksessa otsikko.

<h2>Sisällysluettelo</h2>
<ul>
<li><a href="#perustukset">WWW-sivun perustukset</a></li>
<li><a href="#otsikko">Otsikot - rakenteen määrittäjät</a></li>
<li><a href="#tekstikappale">Tekstikappaleiden erottaminen</a></li>
<li><a href="#listat">Listat - järjestyksessä vai ei?</a></li>
<li><a href="#tarkea">Tärkeiden asioiden korostaminen</a></li>
<li><a href="#susi">Sudenkuoppien välttelyä</a></li>
<li><a href="#validius">Sivun tarkistaminen - lopullinen tuomio?</a></li>
<li><a href="#tehtavat">Tehtäviä</a></li>
</ul>
Sisäiset linkit eivät eroa ulkoasultaan muista linkeistä.

Kuva 10. Sisäinen linkki sisällysluettelossa.

Sähköpostilinkki

Sähköpostilinkillä tarkoitetaan tässä yhteydessä henkilön sähköpostiosoitteesta tehtyä linkkiä, jonka seuraaminen avaa näkyville sähköpostiohjelman. Tällainen linkki esiintyikin jo address-elementin esimerkin yhteydessä. Sähköpostilinkki eroaa tavallisesta linkistä siinä, että href-attribuutin arvoksi määritellään sähköpostiosoite ja sitä edeltämään mailto-määritys (mailto:osoite@palvelin.fi). mailto-määrityksellä mahdollistetaan oletussähköpostiohjelman avautuminen näkyville linkkiä napsautettaessa. Ilman määritystä yritettäisiin avata näkyville sähköpostiosoitteen mukainen sivu, joka luultavimmin antaa näkyville virheilmoituksen. Alla olevassa esimerkissä sähköpostilinkkiä on käytetty osoitetietojen määrittämisessä. 

<address>
Petri Heinonen 
(<a href="mailto:peheinon@mit.jyu.fi">peheinon@mit.jyu.fi</a>)<br />
Avoin yliopisto, Jyväskylän yliopisto
</address>

Kuvien lisääminen WWW-sivulle

Kuvien lisäämisellä voimme havainnollistaa tai elävöittää WWW-sivua. Kuvien lisäämisessä on kuitenkin oltava varovainen, koska niiden liikakäytöllä saadaan helposti luotua esteitä esimerkiksi modeemikäyttäjille. Kuvien lisäämisessä kannattaakin muistaa seuraavia asioita:

Kuvat liitetään HTML-dokumenttiin img-elementin avulla. img-elementtiä kutsutaan korvattavaksi elementiksi, koska kuva ladataan elementin sijaintipaikalle WWW-sivulle. Kuvien lisäämisessä tarvitaan img-elementille muutama attribuutti, joiden avulla kerrotaan kuvasta tarpeellisia tietoja.

Esimerkiksi on otettu tämän artikkelin ensimmäinen kuva. Kuvan ja kuvateksti sijoittamista varten on käytetty div-elementtiä, jolle on annettu CSS-tyyleillä haluttuja ominaisuuksia (liu'utus oikeaan laitaan). Tämän jälkeen löytyy img-elementti, johon on määritelty tarvittavat attribuutit. img-elementistä kannattaa huomata, että sillä ei ole lopetuselementtiä ollenkaan. Elementti lopetetaan sijoittamalla aloituselementin loppuun kauttaviiva (/) ennen suurempi kuin -merkkiä. 

<div class="pictright">
 <img src="kuva1.png" 
   alt="Navigoinnin lisääminen dokumenttiin div-elementin avulla." />
  <p class="caption"><strong>Kuva 1</strong>. 
	  Erillisen navigoinnin määrittäminen.</p>
</div>

Käyttökelpoisia merkkitasoisia elementtejä

Merkkitason elementtejä käytetään kappaleen sisäisten rakenteiden merkintään. Tällaisia rakenteita ovat esimerkiksi lyhenteet, määritelmät ja korostukset. Seuraavassa käydään lyhyesti läpi elementit ja niiden rakenteellinen merkitys.

Tavallisimpia WWW-sivulle tehtäviä virheitä

WWW-sivuille tehtävät virheet voivat pahimmillaan estää sivujen katsemisen. Tämän vuoksi on hyvä tietää muutamia yleisiä editorista tai käyttäjästä aiheutuvia virheitä. Joitakin XML:n vaatimuksista aiheutuvia virheitä käsitellään artikkelissa Esteettömän WWW-sivun toteuttaminen. Virheiden olemassaolo on toki helppoa huomata WWW-sivun validoinnin yhteydessä. Virheilmoitukset voivat kuitenkin olla epäselviä.

Jotkin elementit eivät voi sijaita toisten elementtien sisällä

WWW-sivun rakenteen määrittelyyn käytettävät elementit voidaan karkeasti jakaa kahteen osaan. Toiset elementit vaikuttavat kappaleisiin ja niiden ominaisuuksiin ja toiset taas kappaleiden sisällä olevan tekstin ominaisuuksiin. HTML-dokumenttia tehtäessä hyvin tyypillinen virhe on sijoittaa tekstin rakenteen ilmaisemiseen käytettävä elementti koskemaan useampaa kappaletta. Esimerkiksi tuntuu kätevältä muokata useamman p-elementillä määritellyn kappaleen tekstejä strong-elementillä. Näin ei kuitenkaan saa tehdä, vaan halutut muutokset pitää tehdä strong-elementillä jokaisen p-elementin sisään. Esimerkkinä käytetään lyhyttä kappaletta, koska laajemman kappaleen koko korostaminen on hieman arveluttava rakenteellinen ratkaisu.

OIKEIN:

<p><strong> Ensimmäinen tekstikappale..</strong ></p>
<p><strong> Toinen tekstikappale..</strong></p>

VÄÄRIN:

<strong><p> Ensimmäinen tekstikappale..</p>
<p> Toinen tekstikappale..</p></strong>

Väärin kirjoitettu dokumenttityyppi

Dokumenttityypin määrittelyssä on oltava tarkkana, koska kirjoitusvirhe voi aiheuttaa helpostikin sata käsittämätöntä virhettä. Seuraavassa esimerkissä PUBLIC-sanan kirjoitusasun muuttaminen antaa muutaman virheen validaattorissa.

OIKEIN:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

VÄÄRIN:


<!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Attribuuttien arvot ilman lainausmerkkejä

Attribuuttien arvot tulee aina antaa lainausmerkkien sisällä.

OIKEIN:

<a href=”http://appro.mit.jyu.fi/”>Tietotekniikan approbatur</a>

VÄÄRIN:

<a href=http://appro.mit.jyu.fi/>Tietotekniikan approbatur</a>

Linkkielementissä ei käytetä enää name-attribuuttia

XHTML 1.1:n mukana poistuu a-elementistä name-attribuutti, jonka avulla voitiin tehdä dokumentin sisäisiä linkin ”hyppykohtia”. name-attribuutin tilalle on tullut id-attribuutti, jota voidaan käyttää suoraan kyseisessä elementissä. Enää ei elementin sisään tarvitse lisätä erillistä a-elementtiä. Seuraavassa esimerkissä esitetään sekä uusi että vanha tapa lyhyesti:

OIKEIN: (uusi)

<h1 id="juttuja">Sekalaisia juttuja</h1>

VÄÄRIN: (vanha)

<h1><a name=”juttuja”>Sekalaisia juttuja</a></h1>

Milloin erikoismerkit on koodattava?

Erikoismerkkejä tarvitaan WWW-sivuilla kohtuullisen harvoin. Kun niitä tarvitsee, voi merkin saaminen näkyviin WWW-sivuilla tuottaa ongelmia. WWW-sivun merkistön tarkka määrittäminen poistaa useimmat merkistöön liittyvät ongelmat. Merkistön määrittämisellä vältytään esimerkiksi skandimerkkien (ä, ö, å) koodaamiselta. Tyypillisin koodattava merkki on &-merkki, koska sitä käytetään merkkienkoodauksen ilmaisimena. Monissa linkkiteksteissä käytetään &-merkkiä linkin mukana vietävien parametrien erottamiseen. Kun tällainen linkki kirjoitetaan WWW-sivulle, on &-merkki koodattava. Myös pienempi kuin ja suurempi kuin -merkit joudutaan koodaamaan, koska niitä käytetään HTML-elementtien ilmaisemiseen.

MerkkiHTML-koodi
&&amp;
<&lt;
>&gt;

Taulukko 1. Muutama tarpeellinen erikoismerkki HTML-koodeineen.

Toisinaan myös erikoismerkit tuottavat ongelmia WWW-osoitteissa. WWW-sivuja tehtäessä kannattaa pitääperussääntönä sitä, että skandimerkkejä ja välilyöntejä ei käytetä käytetätiedostojen ja hakemistojen nimissä. Joissakin, erityisesti vanhoissa, selaimissa koodaamaton välilyönti osoitteessa voi estää koko linkin toiminnan. Linkkeihin määriteltävät erikoismerkit poikkeavat WWW-sivuun määriteltävistä erikoismerkeistä siten, että ne annetaan heksadesimaalimuodossa.

Merkki Heksades. Merkki Heksades. Merkki Heksades.
Välilyönti %20 ä %E4 ö %F6
å %E5 Ö %D6 Ä %C4
Å %C5

Taulukko 2. Muutama linkkeihin heksadesimaalimuodossa koodattava erikoismerkki.

Tarkemmin erilaisista merkistöistä ja niiden käytöstä voit lukea seuraavista osoitteista:

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