Usein tarvittavia HTML-rakenteita

Sisällysluettelo

• HTML-elementtien tarpeelliset lisämääritykset
• Eritasoiset elementit - erilaiset käyttökohteet
• Usein käytettyjä kappaletasoisia elementtejä
  • Navigoinnin ja sisällön erottaminen - Yleinen lohko
  • Koodit näkyville - Muotoilematon tekstikappale
  • WWW-sivun tekijän yhteystiedot
  • Lainauksien merkiseminen
  • Määritelmien listaaminen
• Tiedot taulukkoon
• Linkkien tekeminen
  • WWW-sivun sisäiset linkit - Sisällysluettelo
  • Sähköpostilinkki
• Kuvien lisääminen WWW-sivulle
• Käyttökelpoisia merkkitasoisia elementtejä
• Tavallisimpia WWW-sivulle tehtäviä virheitä
  • Jotkin elementit eivät voi sijaita toisten elementtien sisällä
  • Väärin kirjoitettu dokumenttityyppi
  • Attribuuttien arvot ilman lainausmerkkejä
  • Linkkielementissä ei käytetä enää name-attribuuttia
• Milloin erikoismerkit on koodattava?

"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.

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.

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>

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

Lainauksien merkiseminen

Lainauksien merkitsemiseen on olemassa erilaisia elementtejä.

• blockquote-elementillä voidaan merkitä koko kappaleen mittaisia lainauksia.
  • cite-attribuutti sisältää linkin lainattuun lähteeseen.
• q-elementti määrittelee lyhyen, tekstin seassa sijaitsevan lainauksen. Kyseessä on merkkitason elementti, jonka täytyy sijaita esimerkiksi tekstikappaleen sisällä.
• cite-elementillä merkitään sitaattien lähteitä, kuten henkilöiden tai lehtien nimiä. Kyseessä on merkkitason elementti, jonka täytyy sijaita esimerkiksi tekstikappaleen sisällä.

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>

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>

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.

• dl-elementti määrittää määritelmälistan aloituskohdan. Määritelmälistan kaikki termit ja kuvaukset tulevat yhden dl-elementin sisään.
• dt-elementillä määrillään termi, jolle halutaan antaa kuvaus.
• dd-elementillä määritellään kuvaus, joka kuvaa edellä dt-elementissä annettua termiä.

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>

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.

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>

• table-elementillä määrittelemme taulukon alku- ja loppukohdan. Kaikki taulukon sisään tulevat asiat, kuten otsikot, otsikkorivit, rivit ja solut merkitsemme table-elementin sisälle.
• summary-attribuutti (table-aloituselementin sisällä) sisältää sanallisen kuvauksen taulukon sisällöstä ja mahdollisesti myös muodosta. Teksti on erityisen hyödyllinen esimerkiksi ääniselaimen käyttäjille. Tekstin perusteella he voivat tehdä päätöksen taulukon ohittamisesta tai saavat taulukon ymmärtämistä helpottavia vihjeitä.
• caption-elementillä määrittelemme koko taulukkoon liittyvän otsikon. Jos liitämme taulukkoon otsikon, caption-elementin on sijaittava heti aloittavan table-elementin jälkeen.
• tr-elementtillä määrittelemme taulukon rivin. Esimerkin määrittelyistä kannattaa huomata, että taulukon sarakkeet (itse asiassa solut) määritellään jokaisen rivin sisään. Myös otsikkosolut tulevat tavallisen taulukkorivin (tr-elementti) sisään.
• th-elementillä määrittelemme taulukkon otsikkosolut. Taulukon otsikkosolut sijaitsevat yleensä taulukon yläosassa tai taulukon vasemmassa reunassa. Otsikkosolujen sisälle (aloitus- ja lopetuselementin väliin) tulevat rivien tai sarakkeiden otsikkotekstit. Oletuksena selaimet muotoilevat otsikkosolut hieman tavallisista soluista eroavasti.
• td-elementillä määritelemme taulukon yksittäiset solut. Taulukon varsinainen sisältö kirjoitetaan td-elementtien sisään.

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

• rowspan-attribuutilla määrittelemme kuinka monen rivin alueelle kyseinen solu laajenee. 0 tarkoittaa, että solu laajenee kaikkien rivien suuruiseksi.
• colspan-attribuutilla määrittelemme kuinka monen sarakkeen alueelle kyseinen solu laajenee. 0 tarkoittaa, että solu laajenee kaikkien sarakkeiden suuruiseksi.

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>

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.

• Linkkitekstin on oltava linkin kohdetta kuvaava. Linkkitekstin on kerrottava ymmärrettävästi linkin kohde, vaikka se otettaisiin erilleen dokumentista. Esimerkiksi teksti Essikurssi toimisi hyvin Essikurssin etusivulle johtavana linkkinä, mutta teksti Klikkaa tästä olisi huonoin mahdollinen vaihtoehto.
• Linkkitekstin on oltava lyhyt ja ytimekäs. Kokonaisia lauseita ei kannata merkitä linkiksi, vaan ainoastaan linkin kohdetta parhaiten kuvaavat sanat.
• Saman dokumentin eri teksteistä ei kannata tehdä linkkejä samaan osoitteeseen. Linkkien yksikäsitteisyyden ja havainnollisuuden vuoksi saman dokumentin kahdesta eri tekstistä ei kannata tehdä linkkiä samaan osoitteeseen.

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.

• Mainitse mahdolliset rajoitukset linkin yhteydessä. Jos linkki johtaa raskaille tai erikoisia tekniikoita vaativille sivuille, asiasta kannattaa mainita linkin yhteydessä. Linkkitekstin yhteydessä voi ilmoittaa esimerkiksi sivun poikkeuksellisen suuren koon, joka merkitsee pitkää latausaikaa.
• Älä avaa uusia ikkunoita. Linkkeihin ei siis kannata määritellä uusi ikkunoita avaavia ominaisuuksia (esimerkiksi target-määritystä tai JavaScript-komentoja). Kokemattomalle tai apuvälineitä käyttävälle käyttäjälle uuden selainikkunan avautuminen voi johtaa navigoinnin hallinnan menettämiseen. Käyttäjä ei välttämättä enää löydä alla avoinna olevaa ikkunaa, jossa hän oli alunperin. Uuden ikkunan avaaminen estää palaamisen edelliseen ikkunaan Back (suom. Takaisin) -painikkeella.
• Erota linkit selkeästi toisistaan. Linkeistä kannattaa usein tehdä selkeä järjestämätön lista, jolloin käyttäjät erottavat linkit helposti toisistaan listamerkkien ansiosta. Pelkkä linkkien rivittäminen ei riitä, koska linkki voi rivittyä selaimessa useammalle riville. Tämän vuoksi navigointilinkeissä kannatta käyttää jotakin selkeää erotimerkkiä, jos linkkejä ei määritä listaksi. Erotinmerkkinä voi toimia esimerkiksi putkimerkki (|) perusnavigoinnissa.
• Mieti linkkien käyttötarkoitusta. Linkkien määrittämisessä kannattaa muistaa muutama erikoistapaus.
  • Henkilön nimestä johtava linkki kannattaa määrittää henkilön kotisivuille.
  • Henkilön sähköpostiosoitteesta kannattaa tehdä mailto-linkki. Esimerkki mailto-linkin käytöstä tulee myöhemmin.

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.

• Linkkien on oltava linkkien näköisiä! Linkkien ulkoasua ei kannata lähteä radikaalisti muuttamaan, koska sivujen käyttäjät ovat tottuneet tietyllä tavalla toimiviin linkkeihin.
• Muut sivun osat eivät saa muistuttaa linkkejä! Sivujen ulkoasua muutettaessa pitää muistaa, ettei muotoile mitään linkin näköiseksi. Esimerkiksi alleviivauksen käyttö korostamismerkinnöissä kannattaa suosiolla unohtaa. Alleviivaus tekstissä tarkoittaa aina linkkiä.

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

• href-attribuutti viittaa osoitteeseen, jonne linkistä halutaan siirtyä. Attribuuttiin voidaan sijoittaa kokonainen WWW-osoite (URL), jos linkki johtaa kokonaan toiselle sivustolle. Jos linkki taas johtaa saman sivuston toiseen dokumenttiin, linkiksi kannattaa määritellä hakemistorakenneviittaus.
• title-attribuuttiin voidaan määritellä linkkitekstiä täydentävä otsikko. Jos linkkiteksti ei ole riittävän selkeä, title-attribuutilla kannattaa kertoa tarkentavaa tietoa linkin kohteesta.

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>

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>

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:

• Vältä turhaa kuvien käyttöä. Koristelukäytössä kuvia kannattaa käyttää todella harkiten, koska ne tekevät sivuista usein raskaita. Sopivasti käytettynä koristekuvat tekevät kuitenkin sivuista miellyttävämpiä. Jos kuvien yhteiskoko sivulla ylittää 50 KB, kuvia kannattaa vähentää, koska sivujen latausaika on jo melko pitkä modeemikäyttäjille.
• Sisällytä kuviin ainoastaan olennainen asia. Kuvista kannattaa rajata ainoastaan sisällölle olennainen asia. Esimerkiksi tämän artikkelin kuvista on poistettu turhat selaimen osoite- ja työkalurivit, joilla ei asian kannalta ole mitään merkitystä.
• Kuvat pienennetään ja rajataan kuvankäsittelyohjelmassa. Kuville voidaan määrittää CSS:ssä tarkat koko parametrit, joiden kokoisena kuvat näytetään. Tämän avulla ei saa kuitenkaan pienentää kuvan kokoa, koska parametrien avulla pienennetyn kuvan latautuminen vie yhtä kauan kuin suurenkin kuvan. Tämän vuoksi pienentäminen ja rajaaminen on tehtävä kuvankäsittelyohjelmassa.
• Älä liitä kuviin tekstiä. Yleensä tekstiä sisältävien kuvien käyttö on turhaa, koska usein samat tehosteet saadaan tehtyä CSS-tyylien avulla. Tekstikuvia näkee usein käytettävän erilaisten navigointien yhteydessä. Näistä useimmat olisi korvattavissa sopivilla CSS:ssä määriteltävillä rajoilla ja taustakuvilla.
• Käytä oikeaa kuvaformaattia. Oikean formaatin eli tiedostomuodon valinnalla voidaan olennaisesti keventää kuvien kokoa.
  • PNG- ja GIF-formaatteja kannattaa käyttää erilaisten kaavioiden esittämiseen.
  • JPG-formaattia kannattaa käyttää valokuvien esittämiseen.
  • Muita formaatteja kuten BMP:tä ei kannata käyttää, koska selaimet eivät tue niitä. Internet Explorer saattaa harhaanjohtavasti näyttää BMP-muotoisia kuvia, mutta mikään muu selain ei niitä näytä.
• Käytä kuvissa vaihtoehtotekstiä. Kuviin täytyy määritellä alt-teksti, jonka avulla kuvan sisältö välitetään kuvia tukemattomien selainten käyttäjille. Myös hitaan yhteyden vuoksi käyttäjä on voinut poistaa kuvat näkyviltä. Koristekuvissa voi käyttää tyhjää alt-tekstiä.
• Käytä suurista kuvista thumbnail-kuvia. Jos kuva on sisällölle olennainen, mutta pienessä koossa kuvan sisältö ei näy kunnolla, kannattaa käyttää pientä thumbnail-kuvaa linkkinä suurempaan kuvaan. Tällöin on myös hyvä merkitä suuremman kuvan koko linkin yhteyteen.

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.

• src-attribuutti kertoo paikan, jossa kuva sijaitsee hakemistorakenteessa.
• alt-attribuutti kertoo kuvalle vaihtoehtoisen tekstin, joka näytetään, jos kuvaa ei ole saatavilla tai kuvaa ei pystytä näyttämään. Kuvan vaihtoehtoista tekstiä kannattaa oikeasti miettiä, jos kuvan tietosisältö ei käy ilmi esimerkiksi tekstistä.
• longdesc-attribuutilla voidaan määritellä kuvalle pitkä ja tarkka kuvaus. Attribuutin arvoksi ei laiteta kuvausta vaan WWW-osoite, josta kuvaus löytyy.
• title-attribuutti kertoo kuvalle näytettävän tarkan sanallisen otsikon. Joissakin selaimissa otsikon saa näkyville viemällä hiirikursorin kuvan päälle.

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.

• abbr-elementillä merkitään lyhenteitä, jotka luetaan jokainen kirjain erikseen.

  <p>
   <abbr title="World Wide Web">WWW</abbr>
  </p>
  

• acronym-elementillä merkitään lyhenteitä, jotka voidaan lausua sanojen tapaan (kirjainsanoja).

  <p>
   <acronym title="North Atlantic Treaty Organization">NATO</acronym>
  </p>
  

• br-elementti aiheuttaa tekstissä pakotetun rivinvaihdon. Rivinvaihtoa ei saa koskaan käyttää tyhjän tilan tekemiseen, vaan siihen täytyy käyttää CSS-tyylejä. Ainoita paikkoja, joissa pakottua rivinvaihtoa joutuu yleensä käyttämään, on osoite- tai vastaavien tietojen määrittäminen. Esimerkki br-elementin käytöstä löytyy alaluvusta "Sivun tekijän yhteystiedot".
• code-elementillä merkitään ohjelmakoodi. Kaikki tämän luvun HTML-koodit on merkitty code-elementillä.
• dfn-elementillä merkitään termien määrittelyt.
• em-elementillä merkitään korostusta vaativat asiat.
• kbd-elementillä merkitään tekstit, jotka käyttäjän pitäisi syöttää.
• samp-elementillä merkitään esimerkiksi ohjelmien esimerkkitulosteita.
• span-elementti on yleinen merkkitason elementti, jolla voidaan yhdistää merkkitasoisia elementtejä ja luoda merkkitasoisia lohkoja.
• strong-elementillä merkitään voimakasta korostusta (vahventamista) kaipaavat asiat.
• var-elementillä merkitään muuttujia ja ohjelmien parametreja.

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.

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.

Taulukko 2. Muutama linkkeihin heksadesimaalimuodossa koodattava erikoismerkki.

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

• Jukka Korpela, ” Merkit ja koodaukset”, saatavilla HTML-muodossa osoitteessa <URL: http://www.cs.tut.fi/~jkorpela/merkit/index.html>.

• Web Design Group, ”ISO 8859-1 character set overview”, saatavilla HTML-muodossa osoitteessa <URL: http://www.htmlhelp.com/reference/charset/>.

• W3C, ”Character entity references in HTML 4”, saatavilla HTML-muodossa osoitteessa <URL: http://www.w3.org/TR/1999/REC-html401-19991224/sgml/entities.html>.

• Delco Electronics Corporation, ”ASCII - ISO 8859-1 (Latin-1) Table with HTML Entity Names”, saatavilla HTML-muodossa osoitteessa <URL: http://www.bbsinc.com/iso8859.html.