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 kohden, 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 miettimään, vaan kannattaa aina muistaa linkkien perustoiminta.
- Mainitse mahdolliset rajoitukset linkin yhteydessä. Jos linkki johtaa raskaille tai erikoisia tekniikoita vaativille sivuille, niin asiasta kannattaa mainita linkin yhteydessä. Esimerkiksi sivun poikkeuksellisen suuren koon (pitkä latausaika) voi ilmoittaa linkkitekstin yhteydessä.
- Älä avaa uusia ikkunoita. Linkkeihin ei siis kannata määritellä uusi ikkunoita avaavia ominaisuuksia (esim. 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ä tehdessään 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 voimme laittaa kokonainen WWW-osoite (URL), jos linkki johtaa kokonaan toiselle sivustolle. Jos linkki taas johtaa saman sivuston toiseen dokumenttiin, niin linkiksi kannattaa määritellä hakemistorakenneviittaus.title-attribuuttiin voidaan määritellä linkkitekstiä täydentävä otsikko. Jos linkkiteksti ei ole riittävän selkeä, niintitle-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 18. Absoluuttinen linkki Essikurssille.
Seuraavassa esimerkissä on tehty suhteellinen eli sivuston sisäinen linkki dokumentista toiseen. Suhteellisia linkkejä kannattaa käyttää esimerkiksi omaa sivustoa tehdessään. Suhteellisten linkkien avulla varmistetaan, että tekemämme 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 yhden hakemistoaskeleen taaksepäin (..) sijaitsevan hakemiston 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 (esim. 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 erään artikkelin 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ä (#).
Välittömästi 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ä vierittää selainikkuna 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 tarkastaminen - lopullinen tuomio?</a></li> <li><a href="#tehtavat">Tehtäviä</a></li> </ul>
Kuva 19. 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.
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>
Käyttäjien kommentit