Linkit

HTML-dokumentissa käytetään usein linkkejä. Linkkit voivat olla:

• Ulkoisia eli toiselle WWW-sivustolle.
• Sisäisiä eli oman sivuston sisällä.
• toiselle sivulle omalla kotisivustolla
• toiseen kohtaa samalla sivulla

viedä toiseen dokumenttiin, esimerkiksi jonkin harrastuksen tai kaverin kotisivulle. Dokumentissa voi myös olla dokumentin sisäisiä linkkejä, joiden kautta päästään helposti liikkumaan dokumentissa paikasta toiseen. Esimerkiksi minunsivu.html-sivulta harrastukset.html-sivulle.

Linkille voidaan antaa title, mikä tarkoittaa tekstiä, joka ilmestyy näkyviin, kun hiiri viedään linkin päälle. Titlen on hyvä olla kuvaava, jotta vältytään turhilta vierailuilta. Title sijoitetaan linkkielementtiin sisälle.

• Linkkielementtinä toimii a.
• Atribuuttina toimii href.
• Sisäisessä linkissä voidaan linkille antaa id-atribuutti.

Ennen a-elementin loppumerkkiä kirjoitettu teksti muodostaa linkkitekstin.

Linkki toiseen kotisivuun

Ulkoiseen dokumenttiin viitataan absoluuttisella viittauksella, eli linkissa käytetään sivun täydellistä osoitetietoa. Esimerkki ulkoisesta linkistä, joka vie toiseen dokumentiin:

<a href="http://www.joopajoo.fi/index.html" title="joopa joo:n sivut">Joopa joon sivut </a>

Linkki oman sivuston toiselle sivulle

Samassa hakemistossa sijaitsevaan sivuun viitataan suhteellisella viittauksella. Samassa hakemistorakenteessa samalla palvelimella sijaitsevaan dokumenttiin kannattaa aina viitata suhteellisella viittauksella. Esimerkiksi ollessasi lukeminen.html-sivulla ja haluat linkin urheilu.html-sivulle, voi sen toteuttaa seuraavasti: Lukemisen lisäksi harrastan

<a href=../urheilu.html" title="Toinen harrastukseni on urheilu" >urheilua </a>

Nyt "urheilua" sana toimii linkkinä urheilu.html-sivulle.

Omalle kotisivulle on helppo toteuttaa navigointipalkki, jonka avulla on kätevä liikkua sivulta toisella. etusivu.html -sivulta toteutettaessa linkkit urheilu.html ja koirat.html -sivuille, viitataan suhteellisilla viittauksilla.

<a href=/harrastukset/urheilu.html">Urheiluharrastukseni</a>

<a href=/lemmikit/koirat.html">Koirat</a>

Huomaa, että toteutettaessa navigointipalkki esimerkiksi koirat.html -sivulle, linkkit täyttyy muokata uudelleen:

<a href=../harrastukset/urheilu.html">Urheiluharrastukseni</a>

<a href=koirat.html">Koirat</a>

<a href=../../etusivu.html">Etusivu</a>

Linkki toiseen kohtaan samaa sivua

Esimerkki sisäisestä linkistä, joka vie toiseen kohtaan samaa dokumenttia:

<a href="# harrastukseni">harrastukseni</a>

Tässä linkissä hypätään kohtaan harrastukseni, jossa on käytössä id-atribuutti:

<h2 id = "harrastukseni">Harrastukseni </h2>