Hypertextin ideana oli linkittää tietoja asiakirjan tekstin sisälle, jolloin sanat toimivat linkkeinä muihin asiakirjoihin. Toisin sanoen hyperlinkit yhdistävät web-sivuja. Ne tekevät mahdolliseksi siirtymisen sivulta toiselle vain yhdellä hiiren klikkauksella, joten tietojen etsiminen helpottuu. Ilman linkkejä web ei olisi web, vaan pelkkä kokoelma erillisiä sivuja, jotka eivät olisi mitenkään yhteyksissä toisiinsa. Linkki on se joka tekee webistä webin.
Hyperlinkkien tulee erottua selvästi muusta tekstistä. Linkin värin on oltava eri verrattuna muuhun sivun tekstiin ja samalla alleviivaus kertoo käyttäjälle kyseessä olevan linkin. Siksi, väärinkäsitysten välttämiseksi, älä käytä tavallisessa tekstissä alleviivausta.
Linkki voi olla joko dokumenttiin joka on samassa palvelimessa tai internetissä olevassa toisessa palvelimessa.
Klikkaa kuva suuremmaksi.
1. Linkki saman palvelimen toiselle sivulle.
Rivi 10, <a href="audio.html">Linkki Raspilan omaan palvelimeen</a>
Linkki aukeaa samaan välilehteen.
Linkki toiselle web-sivulle luodaan elementin <a> (anchor) avulla. Sivu, jolle käyttäjä siirtyy, merkitään elementin a attribuutin href arvolla, lainausmerkkien sisälle kirjoitetaan tiedoston nimi ja url eli osoite johon hypätään. Kun käyttäjä painaa verkkosivulla linkkiä, selain hakee linkin määrittämän sivun. Jos sivu on samalla palvelimella, sivun nimi riittää, koko url-osoitetta ei tarvita.
Linkki-elementille voi lisätä attribuutin target, jolla ilmaistaan ikkuna, johon sivu avataan. Jos attribuutin arvo on ”_blank”, se avaa linkin uuteen ikkunaan, välilehteen. Jos tuo _blank jätetään pois, sivu aukeaa samaan ikkunaan, eli välilehteen.
Tämän suhteen on kaksi koulukuntaa:
- toiset haluavat että linkattu sivu aukeaa automaattisesti uuteen ikkunaan, välilehteen
- toiset haluavat että käyttäjä itse määrittää aukeaako linkkisivu samaan tai uuteen välilehteen.
Molempi parempi?
2. Linkki sivuun joka on toisella palvelimella.
Rivi 13, <a href="https://www.raspberrypi.org/" target=”_blank”>Kotiin.</a>
Attribuutti target jolle annetaan arvo ”_blank”, avaa linkin uuteen ikkunaan.
Määreessä href lainausmerkkien sisälle kirjoitetaan url eli osoite johon hypätään.
3. Linkki kuvasta.
Jos halutaan tehdä kuva jota klikkaamalla aukeaa uusi sivu, niin laitetaan img-tagi a-tagin sisään.
Rivi 18 ja 19, <a href="https://fi.wikipedia.org/wiki/Linus_Torvalds">
<img src="Linus_T.jpg" width="200" height="280" alt="LT-kuva"></a>
Linkki aukeaa samaan välilehteen.
Klikkaa kuva suuremmaksi.