14. HTML linkit

HTML Linkit

Linkkejä löytyy miltei jokaiselta nettisivulta. Linkit päästävät kävijät sivuilta toiselle.

HTML Linkit - ns. Hyperlinkit

HTML linkit ovat hyperlinkkejä.

Hyperlinkki on kuva tai teksti jota voi klikata, ja hypätä seuraavalle sivulle / dokumenttiin.

HTML Linkit - Syntaxi

HTML koodissa, linkit määritellään <a> tagilla:

<a href="url">linkitys teksti</a>

Esimerkki

<a href="http://www. konnevesi .fi">Vieraile sivuillamme</a>

href atribuutti määrittää määränpää osoitteen (http://www.konnevesi.fi)

linkki teksti on näkyvä osa (Vieraile sivuillamme).

Linkki tekstiä klikatessasi, pääset määrättyyn osoitteeseen.

Note Linkkitekstin ei ole pakko olla tekstiä. Se voi olla HTML kuva tai HTML elementti.


HTML Linkit - kuvat linkkeinä

On yleistä käyttää kuvia linkkeinä:

Esimerkki

<a href="index.html">
<img src="smiley.gif" alt="HTML ohje" style="width:42px;height:42px;border:0">
</a>
Note border:0 on lisätty estämään IE9 (ja aikaisemmat) näyttämästä reunusta kuvan ympärillä.

HTML Linkit - Tee kirjainmerkkejä

HTML kirjainmerkit auttavat kävijää liikkumaan nettisivullasi haluttuun osaan.

Ne ovat erittäin käteviä jos nettisivullasi on paljon tekstiä.

Tehdäksesi kirjainmerkin, tee kirjainmerkki ensin, sitten vasta linkitys.

Kun linkkiä klikataan, sivu skrollautuu automaattisesti haluttuun kohtaan.

Esimerkki

Ensin tee kirjainmerkki jossa on id atribuutti:

<h2 id="tips">Hyviä ohjeita osio</h2>

Sitten, lisää linkki kirjainmerkkiin ("Hyviä ohjeita osio"), samalle sivulle:

<a href="#tips">Mene kohtaan Hyviä ohjeita osio</a>

Tai, lisää linkki kirjainmerkkiin ("Hyviä ohjeita osio"), toiselta sivulta:

Esimerkki

<a href="html_tips.html#tips">Mene kohtaan Hyviä ohjeita osio</a>