XHTML: Linkki 2008-03-09 00:43

Linkit ovat WWW:n ydin. Suunnitteluvaiheessa sivuston sivuille kannattaa miettiä looginen hakemistorakenne sivuston hallinnan helpottamiseksi, ja navigointi sivustolla on tehtävä käyttäjälle helpoksi. Linkkien on erotuttava muusta tekstistä, ja oman sivuston ulkopuolelle osoittavat linkit on myös hyvä koota class-attribuuteilla omaksi ryhmäkseen.

Linkki | Anchor <a>...</a>

kun jokin tekstikohta halutaan linkiksi, ympäröidään linkkinä toimiva tekstikohta, merkkitasoinen elementti tai tyhjä elementti a-elementillä.

href-attribuutti

a-elementtiin olennaisena kuuluu sen alkutunnisteeseen lisättävä href-attribuutti, jossa kerrotaan linkitettävän kohteen sijainti.

Kun linkitetään sivuston ulkopuolelle, linkitettävä URL on annettava täydellisessä muodossaan, http://-alkuineen. Sivuston sisällä linkki voidaan antaa suhteellisena.

Sijoita linkki kohdetta kuvaaviin sanoihin! Vältä seuraavaa:

Writing Killer Web Headings and Links

Linkkitekstin helppo ja välitön ymmärrettävyys saa klikkaamaan.

title-attribuutti

Mikäli linkitettävä teksti tai kuva ei kerro riittävästi linkitettävästä kohteesta, kannattaa tämä kertoa a-elementtiin liitettävässä title-attribuutissa. title-attribuuttiin sisällytetty teksti tulee esille selaimessa kun hiiri viedään linkin päälle.

target-attribuutti

XHTML 1.0 Transitional sallii myös linkin avaamisen uuteen selainikkunaan. Tämä toteutetaan target-attribuutille annettavalla arvolla _blank.

Huom! Käytännössä uuteen ikkunaan osoitetut linkit avautuvat nykyisissä selaimissa uuteen välilehteen.

Should Links Open In New Windows?

Linkkien avaaminen uuteen ikkunaan saattaa näyttää sivujen tekijälle hyvältäkin idealta, mutta ei välttämättä ole sitä käyttäjän näkökulmasta.

Absoluuttiset, suhteelliset ja sivunsisäiset linkit

Linkin kohde voidaan kertoa href-attribuutissa eri tavoin, riippuen kohteen suhteesta linkittävään sivuun.

Absoluuttinen linkki

Käytetään linkitettäessä oman sivuston ulkopuolelle.

• URL annetaan täydellisenä:
  <a href="http://www.helsinki.fi/">Helsinki-portaali</a>
• Sivuston ulkopuolelle suuntautuvat linkit on hyvä merkitä class-attribuutilla jolloin niille voidaan antaa erottuva ulkoasu CSS:llä:
  <a href="http://www.helsinki.fi/" class="ulos">Helsinki-portaali</a>
  (Oikeastaan kannattaa käyttää (myös) rel="external"-attribuuttia, mutta sen CSS-muotoilussa voi joskus olla erikoisuuksia - class-attribuuttiin CSS:n liittäminen on ongelmattomampaa.)
• Myös sivulla esiintyviin Internetosoitteisiin liitettävät linkit voi merkitä omaksi ryhmäkseen:
  <a href="http://www.helsinki.fi/" class="url">www.helsinki.fi</a>
• Ulos osoittava linkki voidaan avata myös uuteen selainikkunaan:
  <a href="http://www.helsinki.fi/" class="ulos" target="_blank">Helsinki-portaali</a>

Suhteellinen linkki

Käytetään linkitettäessä oman sivustoon kuuluvalle sivulle.

• Kun kohdesivu sijaitsee viittaavaan sivun kanssa samassa kansiossa, riittää pelkkä tiedostonimi:
  <a href="tiedosto.html">linkitetty sivu</a>
• Viitatessa hakemistorakenteessa ylätasolle, lisätään alkuun kaksi pistettä ja kauttaviiva:
  <a href="../tiedosto.html">linkitetty sivu</a>
• Vastaavasti kaksi tasoa ylöspäin:
  <a href="../../tiedosto.html">linkitetty sivu</a>
• Kun linkitetään rakenteessa alaspäin, lisätään alkuun kansion nimi:
  <a href="alikansio/tiedosto.html">linkitetty sivu</a>
• Kun kohde on samalla tasolla olevassa rinnakkaisessa kansiossa, mennään ensin ylöspäin kahdella pisteellä, sitten alihakemistoon hakemistonimellä:
  <a href="../kansio/tiedosto.html">linkitetty sivu</a>
• Voidaan viitata myös verkkotunnuksen (domain) päätasosta laskien aloittamalla kauttaviivalla:
  <a href="/verkko-opas/kansio/alikansio/tiedosto.html">linkitetty sivu</a>

Sivunsisäinen linkki

Käytetään linkitettäessä tiettyyn kohtaan sivulla.

• Johonkin kohtaan samalla sivulla, viittaamalla elementille annettuun id-attribuuttiin:
  <a href="#valiotsikko">linkitetty kohta</a>
• Vastaavasti toisen tiedoston tiettyyn id-attribuutilla merkittyyn kohtaan:
  <a href="tiedosto.html#valiotsikko">linkitetty kohta</a>
• Sivun loppuun voi laittaa sivun alkuun osoittavan linkin:
  <a href="#">sivun alkuun</a>

Pitkän sivun alkuun kannattaa tehdä sisällysluettelo sivunsisäisellä linkityksellä. Linkeille tehdään kohteet antamalla alaotsikoille yksilöivät id-attribuutit joihin linkeissä viitataan:

<h2 id="valiotsikko">Väliotsikko</h2>

A Short Story About “Back To Top” Links

Seikkaperäisesti sivun alkuun osoittavasta linkistä.

Sähköpostiosoitteen linkittäminen

Sähköpostiosoite lisätään sivulle yksinkertaisimmillaan seuraavasti:

<a href="mailto:etunimi.sukunimi@esimerkki.fi">
etunimi.sukunimi@esimerkki.fi</a>

Ongelmana tavassa on se, että roskapostittajat keräävät webbisivuilta koneellisesti sähköpostiosoitteita listoilleen, joten tätä ei kannata käyttää. Yksi mahdollisuus sen sijaan on tehdä sähköpostiosoitteen sisältävä kuva, ja liittää se haluttuihin kohtiin sivuilla. Seuraavan linkin alla monia muita tapoja suojata sähköpostiosoite.

Hide email address in source code

Esiteltynä ja arvioituna monia eri tekniikoita verkkosivuille laitettavan sähköpostiosoitteen salaamiseksi spammiboteilta.