Linkki, a -elementti

Linkkejä käytetään www-sivustolla liikkumiseen, siirtymiseen muille www-sivustoille sekä jonkin toiminnan kännistämiseen esim. videon. Sivustolla liikkuminen perustuu useimmiten lista-tyypiseen rakenteen hyödyntämiseen, siitä tällä sivulla myöhemmin. Linkki voi olla tekstin sisässä oleva sana ja sanan klikkaaminen hiiren avulla aiheuttaa siirtymisen linkin osoittamaan paikkaan. Linkki tai useita linkkejä voidaan liittää myös kuvaan.

Linkki toteutetaan <a> -elementillä sekä elementtiä ohjaavat atribuutit, esimerkiksi kohde jonne linkistä siirrytään.


  Linkkinä voi toimia joku <a href="#otsikko5">sana</a> tekstissä.

Taulukossa img-elementin atribuutit ja määritteet:

Atribuutti	Määritteet	Tarkoitus
`charset`	Esimerkiksi `UTF-8`	Linkissä käytettävä merkistö. EI HTML5
`coord`	Pikseleinä esitetty, neliö, ympyrä tai muu muoto `X,Y,X,Y` tai `X,Y`	Koordinaateilla aktiivinen alue esim kuvassa EI HTML5.
`download`	URL-osoite, esim `/images/american_carshow.jpg`	Esimerkiksi esitettävän kuvan sijainti tiedostojärjestelmässä. UUSI HTML5
`href`	URL-osoite, esim `http://www.w3schools.com`	Esimerkiksi linkistä avutuvan sivuston osoite. UUSI HTML5
`hreflang`	Kohteen kieli, esim `hreflang="en"`	Linkin kohteessa käytetty kieli.
`media`	Useita määritteitä.	Joukko useita määritteitä (Määritteet ). UUSI HTML5
`name`	Yksilöllinen nimi, esim `"otsikko12"`	Dokumentin kohdan yksilöllinen nimi, nimeämisellä voidaan merkitä' dokumentista kohtia joihin linkin avulla voidaan siirtyä. EI HTML5, suositellaan merkitsemään `id`-atribuutilla.
`rel`	`alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag`	Linkin tyyppi ja suhde, katso esim head-elementti ja miten CSS-tyyli liitetään html-tiedostoon.
`rev`	teksti	Ei HTML5:ssä, käyttökohteita vähän.
`shape`	Linkki alueen muoto, `default, rect, circle, poly`	Esimerkiksi kuvassa olevan linkkialueen muoto, käytetty `coord`-atribuutin yhteydessä. EI HTML5
`target`	Kohdekehys: `_blank`, avataan uuteen ikkunaan `_parent`, avataan pääkehykseen eli frame:iin `_self`, samaan kehykseen jossa linkkikin on `_top`, koko sivun kokoisena poistaen mahdolliset kehykset `kehyksennimi`, kehykseen jolla on id tai name-tunniste	Yksilöi miten linkin kohde avataan selaimessa.
`type`	`"media_type"` Mediatyyppi, esim `"MIME_type"`	??? UUSI HTML5

Linkin kohde

Atribuutilla target voidaan määritellä miten linkin kohde aukeaa selaimessa.

Alla esimerkkejä linkin kohteen käytöstä, kokeile koodin alla olevia punaisia linkkitekstejä ja seuraa miten selain reagoi kussakin tapauksessa:

Linkki avaa selaimeen uuden välilehden:


  <p>Selaimeen <a href="linkki_opas.html" target="_blank"> UUSI VÄLILEHTI ! </a><p>

Selaimeen UUSI VÄLILEHTI ! (Muista sulkea avautun välilehti)

Linkki avaa selaimessa samaa välilehteen:


  <p>Selaimeen <a href="linkki_opas.html" target="_parent"> SAMAAN VÄLILEHTEEN ! </a><p>

Selaimeen SAMAAN VÄLILEHTEEN ! (Ei tarvitse sulkea välilehteä)

Linkki avaa selaimessa samaa kehykseen:

Toimii samalla tavalla kuin edellinen,


  <p>Selaimeen <a href="linkki_opas.html" target="_self"> SAMAAN KEHYKSEEN ! </a><p>

Selaimeen SAMAAN KEHYKSEEN ! (Ei tarvitse sulkea välilehteä)

Linkki avaa selaimessa koko sivun kokoisena:

Toimii samalla tavalla kuin kaksi edellistä jos avataan www-sivun tiedosto (html, php tms), alla linkistä avataan kuvatiedosto,


  <p>Selaimeen <a href="Inarinhopea.jpg" target="_top"> SAMAAN KEHYKSEEN ! </a><p>

Selaimeen SAMAAN KEHYKSEEN ! (Tarvitsee selaimella palata edeliiseen näkymään)

Linkki sivulle sijoitettuun "avainsanaan"

Linkillä voidaan siirtyä www-sivulle avainsanalla merkittyyn kohtaa. Avainsanojen avulla voidaan merkitä sivulla useita kohtia joihin voidaan siirtyä.

Avainsana-ratkaisuissa käytetään HTML5-koodatuilla sivuilla id-tunnisteita.


  Linkki sivu1.html nimisellä sivulla olevaan avainsana1 -tekstillä 
  merkittyyn kohtaan:

  <a  href="sivu1.html#avainasana1"> Testitulokset </a> 
	
	
  Vastaavasti sivu1.html nimisellä sivulla kohdan merkitseminen, 
  id-atribuuttina oleva avainsana1-sana merkitsee kohdan jonne linkistä siirrytään:
   
  <a id="avainsana1"> Testitulokset </a>
	 
  Yllä oleva voidaan merkitä ilman Testitulokset -tekstiäkin:
	 
  <a id="avainsana1"> </a>

Linkki kuvassa

Kuva, animaatio ja video voivat sisältään linkin johonkin kohteeseen. Esimerkissä automerkin logossa (kuvassa) on linkki automerkin kotivisuille:


  <a https://www.jaguar.com/index.html" target="_blank">
    <img src="Jagge_logo.jpg" alt="Jagulaari" width="15%"> 
  </a>

Myös giff-animaanio toimii, (animaation by gifer.com):

Lista & linkki, liikkuminen www-sivuilla

Liikkuminen www-sivustolla eli menu toteuttaa usein listan avulla. Mikäli www-sivuston koostuu useista samankaltaisen rakenteen omaavista www-sivuista, menu on "lähes" samanlainen www-sivuston jokaisella sivulla. Tämän www-oppaan menut on toteutettu kahdella erillisellä ul-listalla sekä niihin on kohdistettu CSS-muotoiluja.

Esimerkiksi oppaat, web-kaupat ja -palvelusivustot ovat usein suuria kokonaisuuksia jolloin menu-osa sisältää paljon linkkejä. Seuraus, sivun tekijän on mietittävä tarkkaan mitä valikoilta haluaa sekä minne sen sijoittaa. Vähemmän materiaali sisältävä sivusto tarvitsee luonnollisesti pienemmän navigointi-osan tai sivulla ei ole lainkaan navigointia.

Esimerkissä (alla), listassa (ul-li rakenne) a-elementeihin on lisätty linkit html-sivuille jotka sijaitsevat samassa kansiossa kuin index.html tiedosto www-palvelimella. CSS-muotoilu liitetään <div id="navigointi"> elementillä. Katso lisää div-elementistä html-oppaasta, menu:sta ja sen muotoiluista lisää CSS-oppaassa.

Lyhyesti: div-elementillä voidaan liittää CSS-muotoilut html-elementtiin tai -elementteihin.


  <div id="navigointi">
   <ul>
    <li> <a href="index.html"> Etusivu </a> </li>
    <li> <a href="sivu1.html"> 1.sivu  </a> </li>
    <li> <a href="sivu2.html"> 2.sivu  </a> </li>
    <li> <a href="info.html" > Linkit  </a> </li>
   </ul>
  </div>

Useita linkkejä samassa kuvassa

Yhteen kuvaan voidaan upottaa useita linkkejä käyttämällä kuvatiedoston koordinaatteihin kiinnitettyä "karttatiedostoa". Kuvan karttatiedosto kootaan <map>-elementtiin.

HUOM ! Vaikka tässä käsitelty esimerkki toimii HTML5-koodatulla sivulla, ei selainten tuesta tekniikalle ole takuita sekä esimerkille on löydettävissä vaihtoehtoja (JavaSript). Huomaa myös, jos www-sivulla olevan kuvan koko selaimessa muuttuu, muuttuu myös kuvassa koordinaattipisteiden sijainnit suhteessa kuvaan.

Kuvan karttatiedoston alueet voi olla lähes minkä muotoisia tahansa. Kuvasta, johon karttatiedosto liitetään, koordinaatit voi selvittää kuvankäsittelyohjelmalla. Linkkien alueet esitetään X- ja Y-koordinaattien pikseliarvona.
Linkkien alue voi olla:

ympyrä - cicle
suorakulmio - rect
monikulmio - poly

Linkki-alueiden koordinaatien määrittelyssä on eroa:

circle, ympyrä ilmoitetaan kolmella koordinaatilla. 
        Kaksi ensimmäistä ovat ympyrän keskipisteen X- ja Y-koordinaatit sekä 
        kolmas kertoo ympyrän säteen.
		
rect, suorakulmio ilmoitetaan neljällä koordinaatilla. 
      Kaksi ensimmäistä kertoo suorakulmion vasemman ylänurkan X- ja Y-koordinaatit sekä 
      kaksi seuraavaa vastaavasti oikean alanurkan koordinaatit.
	  
poly, monikulmiossa koordinaattipisteden määrää ei ole rajoitettu, 
      monikulmiossa kuuluu muistaa toistaa viimeisenä ne koordinaatit 
      joilla monikulmio aloitettiin.

ESIMERKKI, vaihe vaiheelta. Aarrekartta jossa joissakin kohdissa on linkki jollekin www-sivustolle. Tehdään aarrekartalle karttatiedosto map -elementillä, (alla oleva kuva).

Aarrekartaan halutaan neljä linkkialuetta käyttäen suorakulmioita joiden nimiksi annetaan:
Ankkuripaikka
Patsaat
Avainkätkö
Aarre


  1. Koodataan map-elementti:

  <map>

  </map>

  2. Luodaan karttatiedostoa myöhemmin kuvaan liitettäväksi käyttäen 
  name- ja id-atribuutteja. Atribuuteilla name ja id tulee olla sama nimi 
  (aarrekartta10):

  <map name=="aarrekartta10" id="aarrekartta10">
  
  </map>

  3. Luodaan karttatiedostoon linkitetty alue eli area. Jokaista aluetta 
  jolla sijaitsee linkki pitää luoda oma area:

  <map name="aarrekartta10" id="aarrekartta10">
   <area alt="Teksti" />
  </map>

  4. Atribuutilla shape kerrotaan minkä muotoisella alueella linkki (area) on. 
  Luodaan neljä suorakulmion-muotoista aluetta, eli rect-atribuuttia.

  <map name="aarrekartta10" id="aarrekartta10">
   <area alt="ankkuripaikka" shape="rect" />
   <area alt="patsaat" shape ="rect" />
   <area alt="avainkatko" shape="rect"/>
   <area alt="aarre" shape="rect" />
  </map>

Käytettävä kuva johon karttatiedosto aiotaan liittää. Kuvassa on hahmoteltu aiotut karttatiedoston "aktiiviset alueet" vihreällä ja punaisella, näille väreillä esitetyille alueille tullaan lisäämään linkit.

Tarkoitus on luoda aarrekartta-kuvaan linkin sisältämiä alueita karttatiedostolla. Koska kuvalla on mitat pikseleinä voidaan kuvasta kuvänkäsittely-ohjelmalla (esim Paint).
Avatessa aarrekartta Paint:iin ja liikutellessa hiiren osoitinta kuvan päällä näkyy vasemmassa alakulmassa koordinaatit. Paintissä ensimmäinen on X-koordinaatti (vaakasuunta) ja toinen Y-koordinaatti (pystysuunta). Kuvan vasemman yläkulman koordinaatit ovat 0 , 0 ja kuvan oikean alakulman koordinaatit on kuvan kertovat kuvan koon pikseleinä.

Kuvaan yllä on piirretty neljä nelikulmiota kuvaamaan aiottuja alueita joihin sijoitetaan linkki. Vihreiden ja punaisen neliöiden koordinaatit vasemmalta oikealle ovat seuraavat (vasen ylänurkka / oikea alanurkka):

Ankkuripaikka 85, 110 / 140, 165
Patsaat 210, 90 / 265, 145
Avainkätkö 350, 140 / 410, 200
Aarre 340, 40 / 400, 100


  5. Luodaan linkkialueille koordinaatit käyttäen coords-atribuuttia:

  <map name="aarrekartta10" id="aarrekartta10">
   <area alt="ankkuripaikka" shape="rect" coords="85,110,140,165" />
   <area alt="patsaat" shape="rect" coords="210,90,265,145" />
   <area alt="avainkatko" shape="rect" coords="350,140,410,200" />
   <area alt="aarre" shape="rect" coords="340,40,400,100" />
  </map>

  6. Lisätään karttatiedostoon linkit kullekin linkki-alueelle. 
  Esimerkissä linkkeissä on käytetty joitain tunnettuja www-sivuja 
  sekä yhtä oppaan sivua.

  <map name="aarrekartta10" id="aarrekartta10">
   <area alt="ankkuripaikka" shape="rect" coords="85,110,140,165" 
    href="http://www.youtube.com/" />
   <area alt="patsaat" shape="rect" coords="210,90,265,145"
    href="http://www.hathitrust.org/" />
   <area alt="avainkatko" shape="rect"coords="350,140,410,200" 
    href="http://www.w3schools.com/" />
   <area alt="aarre" shape="rect" coords="340,40,400,100"
    href="../kuvat/jaguar-XE.jpg/" />
  </map>

  7. Liitetään lopuksi aarrekartta-kuvatiedosto ja luotu karttatiedosto yhteen. 
  Kuva tuodaan tavallisena kuvana www-sivulle ja siihen liitetään kuvakartta 
  usemap-atribuutilla.

  <img src="../images/a_kartta.jpg" alt="aarrekartta" usemap="#aarrekartta10"/>
  <map name="aarrekartta10" id="aarrekartta10">
   <area alt="ankkuripaikka" shape="rect" coords="85,110,140,165" 
    href="http://www.youtube.com/"/>
   <area alt="patsaat" shape="rect" coords="210,90,265,145"
    href="http://www.hathitrust.org/"/>
   <area alt="avainkatko" shape="rect"coords="350,140,410,200"
    href="http://www.w3schools.com/" />
   <area alt="aarre" shape="rect" coords="340,40,400,100"
    href="../images/jaguar-XE.jpg/"/>
  </map>

	
  Huom ! 
  Pientä extraa saa vaihtamalla hiiren-osoitinta
  linkki-alueiden kohdalla.
 
  <area alt="ankkuripaikka" shape="rect" coords="85,110,140,165" 
    style="cursor:pointer" 
  href="http://www.youtube.com/"/> 

  Ja lisää extraa esittämällä pienessä tekstilaatikossa infoa kun
  hiiren-osoitin on linkki-alueiden kohdalla. 
 
  <area alt="ankkuripaikka" shape="rect" coords="85,110,140,165" 
    style="cursor:pointer" 
  href="http://www.youtube.com/" title="Ankkuripaikka"/>

Lopputuloksena on aarrekartta jossa linkkejä on tietyillä alueilla.

WEB-opas, HTML - Linkit