Menthal27

XHTML: Hyperlinkit

Linkki (a)

Hyperlinkki (joka usein lyhennetään pelkäksi sanaksi ‘linkki’) on ikään kuin tie Internet-sivulta toiselle. Kun linkkiä klikkaa, se johdattaa klikkaajan toiselle sivulle tai eri kohtaan sivua. Esimerkiksi tämä linkki vie vierailijan Ihmemaan hakusivulle.

Linkki saadaan aikaan tagilla a, ja linkin kohde ilmoitetaan attribuutilla href.

Yksinkertaisimmillaan linkin koodi näyttää siis tältä:

<a href="osoite">Klikkaa tästä!</a>

Sähköpostilinkki

Linkin voi asettaa myös sähköpostilinkiksi, jolloin sitä klikatessa aukeaa automaattisesti sähköpostiohjelma. Linkin arvo on tällöin mailto: sekä sähköpostiosoite.

Roskapostirobotit keräävät usein tätä koodia hyväksikäyttäen sähköpostiosoitteita listoilleen, joten suojaa osoitteesi tavalla tai toisella, mikäli haluat välttyä roskapostilta!

<a href="mailto:SÄHKÖPOSTIOSOITE">Tekstiä</a>
Valmis otsikko sähköpostilinkkiin

Jos sähköpostilinkkiin haluaa määrittää myös valmiin aiheen, tämä onnistuu lisäämällä sähköpostiosoitteen perään kohdan ?subject=AIHE.

<a href="mailto:SÄHKÖPOSTIOSOITE?subject=AIHE">Tekstiä</a>

Sivuankkuri

Sivuankkuri on linkki, jota klikkaamalla vierailija pääsee toiseen, ennalta määritettyyn kohtaan samalla (tai miksei myös eri) sivulla.

Linkkikoodi on muuten tavallinen, mutta linkin kohteeksi laitetaan risuaita sekä kohteen nimi (esim. #esimerkkikohta).

<a href="#esimerkkikohta">Klikkaa!</a>

Sen määrittäminen, minne linkki johdattaa, ei ole kovin vaikeaa. Haluttuun tagin lisätään yksinkertaisesti attribuutti id="esimerkkikohta". Huomaa, että id-attirbuutissa ei ole risuaitaa.

Id-attribuutin voi lisätä mihin tahansa elementtiin.

Esimerkkejä:

<p id="esimerkkikohta">Kappale</p> tai
<textarea id="esimerkkikohta"></textarea> tai
<strong id="esimerkkikohta">Tekstiä</strong>

Yllä mainitussa esimerkissä ensin mainittu linkkikoodi vie sivulla sen kappaleen kohdalle, jonka id on esimerkkikohta. Yksinkertaista ja toimivaa.

Yksi id-attribuutti voi esiintyä yhdellä sivulla vain kerran. Jos esimerkiksi olet jo laittanut johonkin elementtiin pätkän id="mansikka", et voi laittaa minkään toisen elementin id:ksi "mansikka".

Kuvan linkittäminen

Kuva linkitetään laittamalla img-koodi hyperlinkin sisään.

<a href="linkin osoite">KUVAKOODI TÄHÄN</a>

Kuvakartta

Mikä on kuvakartta?

Kuvakartan avulla pystytään linkittämään osia kuvasta. Kuvakartta on siis kuva, jonka osia on linkitetty erityisen kuvakarttakoodin avulla. Linkitetyt osat voivat olla käytännössä minkä muotoisia tahansa, ja niiden lukumäärää ei ole rajoitettu.

Kuvakartan kokoaminen

Aloitus ja lopetus (map)

Kuvakartta aloitetaan ja päätellään map-tagilla.

<map>

</map>
Nimi (name) ja id

Map-tagiin lisätään name- ja id-attribuutit, joiden avulla yhdistämme kuvakartan lopuksi kuvaan. Name- ja id-attribuuttien arvojen tulee olla identtiset.

<map name="kuvakartta123" id="kuvakartta123">
</map>
Linkitetty alue (area)

Area on kuvakartassa yhtä kuin linkitetty alue, kuvan linkitetty osa. Jokaista linkitettyä kohtaa varten luodaan oma area. Alt-attribuutti on pakollinen.

<map name="kuvakartta123" id="kuvakartta123">
<area alt="Teksti" />
</map>
Muoto (shape)

Shape on arean pakollinen attribuutti. Se kertoo, minkä muotoinen linkki (area) on. Vaihtoehtoina ovat rect (suorakulmio), circle (ympyrä) sekä poly (monikulmio). Esimerkissä käytämme kolmea monikulmiota sekä ympyrää.

<map name="kuvakartta123" id="kuvakartta123">
<area alt="Teksti" shape="poly" />
<area alt="Teksti" shape="poly" />
<area alt="Teksti" shape="poly" />
<area alt="Teksti" shape="circle" />
</map>
Koordinaatit (coords)

Esimerkkikuva

Coords on attribuutti, joka kertoo areoiden (linkkien) sijainnin kuvakartalla. Oikealla on kuva, jolle me teemme tässä ohjeessa kuvakartan. Kuten huomaatte, kuva on jaettu neljään osaan (monikulmioon), ja yhdessä osassa teksti on ympyröity. Tarkoituksemme on tehdä linkki1, linkki2 ja linkki3 -osista sellaisenaan nelikulmion muotoiset linkit kuvakartan avulla. Ympyröityyn kohtaan sijoitamme ympyrän muotoisen linkin.

Coords-attribuuttiin annetaan linkin koordinaatit pikseleinä vasemmasta yläkulmasta. Ympyrän, monikulmion ja suorakulmion kohdilla koordinaattien merkitseminen poikkeavat hieman toisistaan.

Ympyrän (circle) tapauksessa ilmoitetaan kolme koordinaattia, esimerkiksi 20,200,220. Kaksi ensimmäistä koordinaattien kertovat ympyrän keskipisteen paikan (ensimmäinen koordinaatti kuvan vasemmasta reunasta ja toinen ylhäältä). Kolmas kertoo ympyrän säteen.

Suorakulmion (rect) tapauksessa tarvitaan neljä koordinaattia (esim. 20,10,120,200). Ensimmäinen koordinaatti kertoo linkin alkamiskohdan vasemmalta, toinen linkin alkamiskohdan ylhäältä. Kolmas koordinaatti kertoo linkin loppumiskohdan kuvan vasemmasta reunasta, neljäs kuvan loppumiskohdan yläreunasta.

Monikulmion (poly) tapauksessa koordinaattien määrä ei ole rajattu. Jos teet esimerkiksi kuusikulmion, tarvitset 12 koordinaattia (jokaiselle kuudelle kulmalle pysty- ja vaakakoordinaatin). Muistathan viimeisenä toistaa ne koordinaatit, jotka luettelit ensimmäisenä. Näin suljet alueen.

Melkein millä tahansa kuvankäsittelyohjelmalla saa selville haluamansa pisteen koordinaatit kuvasta. Myös Windowsin mukana tuleva Paint soveltuu kaikessa yksinkertaisuudessaan tähän.

Tässä esimerkissä laitamme koordinaatit yllä esiteltyyn kuvaan.

<map name="kuvakartta123" id="kuvakartta123">
<area alt="Teksti" shape="poly" coords="0,0,0,72,77,77,92,0,0,0" />
<area alt="Teksti" shape="poly" coords="0,72,77,77,64,149,0,149" />
<area alt="Teksti" shape="poly" coords="92,0,77,77,150,81,149,0" />
<area alt="Teksti" shape="circle" coords="113,116,23" />
</map>
Linkitys (href ja nohref)

Href on attribuutti, joka kertoo linkin osoitteen. Esimerkissä on tilasyistä jaettu koodi useammalle riville.

<map name="kuvakartta123" id="kuvakartta123">
<area alt="Teksti" shape="poly" coords="0,0,0,72,77,77,92,0,0,0"
href="http://www.menthal27.net/" />
<area alt="Teksti" shape="poly" coords="0,72,77,77,64,149,0,149"
href="mansikka.html" />
<area alt="Teksti" shape="poly" coords="92,0,77,77,150,81,149,0"
href="http://www.fi" />
<area alt="Teksti" shape="circle" coords="113,116,23"
href="http://www.google.com/" />
</map>

Mikäli jotakin osiota ei linkitetä, href-attribuutin tilalle kirjoitetaan nohref="nohref".

Kuvakartan yhdistäminen kuvaan

Kuva, johon kuvakartta yhdistetään, laitetaan sivulle aivan tavallisena kuvana. Siihen lisätään usemap-attribuutti, jonka arvona on risuaita sekä kuvakartan nimi / id.

<img src="kuva.gif" alt="Tässä on kuva" usemap="#kuvakartta123" />
Teksti Teksti Teksti Teksti

Neljään osaan jaettu kuva

Linkin osoitteen muoto

Linkin osoite voidaan merkitä monella tavalla.

1. Täydellinen osoite

Linkitettävän sivun osoite voidaan kirjoittaa kokonaisuudessaan aina http://-osaa myöten. Esimerkiksi:

<a href="http://www.menthal27.net/menthal27/index.php">Menthal27</a>

2. Kansion sisäinen osoite

Oletetaan, että sinulla on kaksi tiedostoa osoitteessa http://www.menthal27.net/huuhaa/. Nämä tiedostot ovat index.html ja kokeilu.html. Haluat linkittää index.html:stä kokeilu.html:ään.

Riittää, että kirjoitat osoitteeksi kokeilu.html, koska index.html sijaitsee kokeilu.html:n kanssa samassa kansiossa.

<a href="kokeilu.html">Klikkaa!</a>

3. Linkittäminen saman domainin muihin kansioihin

Oletetaan, että sivusi sijaitsevat osoitteessa http://www.menthal27.net/huuhaa/. Haluat kuitenkin linkittää tiedoston, joka on osoitteessa http://www.menthal27.net/index.php?sivu=linkit. Voit toki kirjoittaa linkkiin täydellisen http://-osoitteen, mutta helpommalla selviää lisäämällä linkin osoitteeksi /index.php?sivu=linkit:

<a href="/index.php?sivu=linkit">Klikkaa!</a>

Yllä näytetty koodi näyttää toiminnassa tältä: Klikkaa!
Tällä tavalla linkitettäessä olennaista on se, että osoitteen alussa on /-viiva.

Tätä voi soveltaa myös alikansioihin. Kun halutaan linkittää vaikkapa tältä sivustolta osoitteeseen http://www.menthal27.net/x/info/, riittää, että kirjoitamme linkin osoitteeksi /x/info/:

<a href="/x/info/">Klikkaa!</a>

Käytännössä kyseinen koodi näyttää tältä: Klikkaa!

Jos halutaan päästä linkittämään vain yksi tai kaksi kansiota ylemmäs, voi olla helpompi käyttää toisenlaista osoiterakennetta. Oletetaan, että haluamme linkittää sivulta http://www.s.net/m27/esimerkki/huuhaa.html osoitteeseen http://www.s.net/m27/etusivu.html. Tämä onnistuu seuraavasti:

<a href="../etusivu.html">Klikkaa!</a>

Yksi ../ vie linkkiä aina yhden kansion ylöspäin. Mikäli siis haluaisimme linkittää yllä mainitulta sivulta (huuhaa.html) osoitteeseen http://www.menthal27.net/index.php eli kaksi kansiota ylemmäs, koodi olisi seuraava:

<a href="../../index.php">Klikkaa!</a>

Suhteellisen osoitteen määrittäminen koko sivulle (base)

Head-tagien väliin sijoitettavalla base-elementillä voidaan määrittää, miten kaikki sivun linkit suhteutetaan. Normaalisti linkkien osoitteet suhtautetaan sen sivun osoitteeseen, jolla linkit ovat; esimerkiksi linkki <a href="linkit.html">linkit</a> vie aina samassa kansiossa olevaan tiedostoon linkit.html.

Oletetaan, että sivulla www.domain.ltd/esim/kansio/hei.html on seuraava linkki:

<a href="../linkit.html">Klikkaa!</a>

Jos linkkiä klikkaa, päätyy osoitteeseen www.domain.ltd/esim/linkit.html. Jos kuitenkin määritämme base-elementillä koko sivun linkeille toisen kiinnesivun, esimerkiksi www.esimer.kki/puutarha/, linkki viekin osoitteeseen www.esimer.kki/linkit.html.

Base sijoitetaan aina head-tagien väliin. Osoite, johon linkit kiinnitetään, ilmoitetaan täydellisenä href-attribuutin sisällä. Osoite voi olla suhteellinen tai absoluuttinen. Yhdellä sivulla ei saa olla useampia base-tageja.

Esimerkkejä basen käytöstä:

<base href="http://www.esimerkki.esim/ek/raha/korko.html" />
<base href="/x/" />
<base href="../esimerkit/talvi.php" />

Muuta linkkeihin sopivaa

Otsikko?

Mikäli haluaa, että linkin päälle mentäessä ilmestyy kursorin viereen hetken kuluttua pieni laatikko, jossa on tekstiä, tulee linkkikoodiin lisätä attribuutti title="TEKSTIÄ".

Tekstiä alapalkkiin?

Javascriptillä on toteutettavissa linkki, jonka päälle mentäessä selaimen alapalkissa näkyy tekstiä. Lisätietoja javascript-osiosta.

  

Menthal27 © Sonja Valkeinen 2002-2008. Shadows. WP. Takaisin sivun alkuun.