Hüperlink ehk lihtsamalt link, ongi see, millest sai alguse hüperteksti ehk veebi idee. Lingi lisamiseks HTML dokumenti kasutatakse elementi <a> (ingliskeelsest sõnast anchor), mille algus- ja lõpumärgendi vahele paigutatakse sisu, millel klõpsamisel link töötab. Lingi elemendi sisuks ei pea tingimata olema tekst, vaid selleks võib olla ka näiteks pilt või ükskõik milline muu html element.

Vaikimisi on link allajoonitud, külastamata link sinist värvi, külastatud link lillakat ning aktiivne link (lingile klõpsamise hetkel) punast värvi. Hiire kursoriga lingi peale liikudes muutub kursor ka väikeseks käe ikooniks.

Linke saame kasutada veebilehel või erinevate veebilehtede vahel ringi liikumiseks.

Linke kirjutatakse märgendit <a> atribuuti href kasutades kujul:

<a href="lingitav materjal"> lingi tekst, mida kasutajale kuvame </a>

Lingitavaks materjaliiks võib olla URL (aadress), teine veebileht, pilt, pdf fail vms.

Näiteks lisab järgnev rida veebilehele teksti “Rocca al Mare Kool” millel klõpsates avataksegi Rocca al Mare Kooli koduleht:

<a href="https://ramkool.edu.ee/">Rocca al Mare Kool</a>

Linki saab lisada ka teistele objektidele, näiteks pildile. Järgmine rida lisab veebilehele pildi, millel klõpsates avatakse Rocca al Mare Kooli koduleht:

<a href="https://ramkool.edu.ee/"><img src="RaMK_logo.jpg" alt="RaMK logo" /></a>

Või siis näiteks lisame lingi nupu (button) elemendile. Selle jaoks peame kasutama ka juba natuke JavaScript koodi:

<button onclick="location.href='https://ramkool.edu.ee/';">Rocc al Mare Kool</button>

Lokaalsed lingid

Eespool olevas näiteks on href atribuudina toodud välja täispikk URL-aadress. Kui me kasutame aga linke lokaalsel veebisaidil erinevate lehtede vahel ringi liikumiseks, siis võime kasutada URL-i ilma “https://www….” osata.

Näiteks kui tahame veebilehe külastajaid suunata ühelt samas kaustas asuvalt faililt suunata teisele failile:

<a href="teine_fail.html">Teine fail</a>

Lingi sihtmärk (target) atribuut

Lingi atribuut target võimaldab määrata akent, kus link avatakse (kasutatav vaid koos atribuudiga href). Kasutada saab järgmiseid väärtusi:

• • _blank – link avaneb uues aknas (uuel vahelehel (tab, sakk)). Seda võimalust soovitan kasutada, kui link suunab kasutaja mõnele välisele veebilehele.
  • _self – link avaneb samas aknas, kus klõpsati.
  • _parent – link avaneb „ema“ raamistikus (parent frameset);
  • _top – link avaneb terves aknas (kui varem oli näiteks raamistiku raamis);

Näiteks lisab järgmine rida veebilehele lingi, mis avab Rocca al Mare Kooli kodulehe uues aknas:

<a href="https://ramkool.edu.ee/" target="_blank">Rocca al Mare Kool</a>

Lingid sama lehe piires, siseviited

Linke saab lisada ka ühe veebilehe piires selle erinevatele osadele. Selleks tuleb HTML elementidel kasutada atribuuti id, neile selle abil nimed määrata ning seejärel saabki selle nime järgi lingiga viidata.

Näiteks määrame veebilehe ühele pealkirjale nime „osa2“:

<h2 id="osa2">Veebilehe teine osa</h2>

Seejärel saab luua lingi, mis sellele pealkirjale viitab:

<a href="#osa2">Vaata ka osa 2</a>

Teise HTML dokumendi kindla nimega osale viitamiseks tuleb elemendi nimi lisada dokumendi aadressi lõppu! Näiteks:

<a href="http://www.seejasee.ee/#osa2">Vaata ka selle ja selle asja osa 2</a>

<a href="http://www.seejasee.ee/info.html#osa2">Vaata ka selle ja selle asja info osa 2</a>

Lingi väljanägemise muutmine

Vaikeväärtusena on kõik lingid allajoonitud, külastamata lingid on sinist värvi, külastatud lingid lillat värvi ja aktiivsed lingid punast värvi. Soovi korral saame me seda aga muuta ning kui vajame erinevaid kujundusi samatüübilisele elemendile (külastamata, külastatud jne), siis saame me seda teha selektorite abil.

a – kõik lingi olekud;
a:link – külastamata link;
a:visited – külastatud link;
a:hover – hiirekursor on liikunud lingi peale;
a:active – hiire vasak nupp on lingil alla vajutatud (klõpsamine).

Linkide kujundamiseks saab kasutada kõiki teksti kujundamiseks mõeldud omadusi (font, suurus, värv, taustavärv jms). Näiteks loome linkidele kujunduse, kus külastamata lingi värvus on helesinine, külastatud lingil roheline, aktiivne link on roosa ja paksu kirjaga ning kui hiire kursoriga lingile liigutakse on link valge paksu tekstiga punasel taustal:

a{
  text-decoration:none;
}
a:link {
  color:lightblue; 
}
a:visited {
  color: black; 
}
a:hover {
  background-color: red; 
  font-weight: bold;
  color:white; 
}
a:active {
  color:pink; 
}

Kuna lingid on vaikeväärtusena allajoonitud, siis eemaldasime ka alljoonimise kasutades text-decoration omadust.

Natuke vaeva nähes võime oma lingid kujundada ka nii, et nad näevad välja nagu nupud:

a:link, a:visited {
  background-color: lightblue;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: skyblue;
}

Enesekontroll (3 küsimust)