Tässä dokumentissa esitellään erilaisia tapoja tehdä viittauksia (osoitteita, linkkejä) erityisesti oman sivuston sisällä. Kaikki viittaustavat toimivat samalla tavalla linkeissä (a-elementti, kuvissa (img, link-elementeissä, video-elementeissä, audio-elementeissä jne. Selain tulkitsee kunkin osoitetyypin aina joksikin absoluuttiseksi osoitteeksi.
Absoluuttinen osoite tarkoittaa täydellistä osoitetta. Osoite alkaa aina protokollan nimellä, joka yleensä on http tai https, mutta voi olla jotain muutakin. Protokollan nimeä EI VOI jättää pois osoitteen edestä, vaikka selaimet sen usein osoiteriviltä piilottavat. Jos protokollan nimeä ei ole niin osoite tulkitaan suhteelliseksi tai puoliabsoluuttiseksi
<a href="https://www.jyu.fi/">Ulkopuolinen linkki</a>
<a href="http://appro.mit.jyu.fi/itkp1011/">Kurssin kotisivu</a>
<a href="http://appro.mit.jyu.fi/itkp1011/luennot/html5/">HTML5-luento</a>
<a href="http://appro.mit.jyu.fi/itkp1011/luennot/html5/#hyper">HTML5-luennon <samp>a</samp>-elementtiä käsittelevä kohta</a>
<a href="http://appro.mit.jyu.fi/itkp1011/ohjaus/ohjaus2/">HTML5-perusteet pääteohjaustehtävät</a>
<a href="http://appro.mit.jyu.fi/itkp1011/luennot/html5/viittaukset.html">Linkki tähän samaan sivuun</a>
<a href="https://hazor.iki.fi/2002/jotunheimen/tommi/thumbs/DSCN4283-H%e4m%e4h%e4kki.jpg">Linkki toisella palvelimella olevaan kuvaan</a>
<a href="http://appro.mit.jyu.fi/images/appro2_p.png">Linkki tällä palvelimella olevaan kuvaan</a>
<img src="http://appro.mit.jyu.fi/images/appro2_p.png" alt="logo" />
<img src="https://hazor.iki.fi/2002/jotunheimen/tommi/thumbs/DSCN4283-H%e4m%e4h%e4kki.jpg" alt="hämähäkki" />
Absoluuttinen osoite tarkoittaa palvelimen sisällä toimivaa osoitetta. Ulkopuoliset osoitteet ovat aina absoluuttisia. Puoliabsoluuttinen osoite on sama kuin absoluuttisen osoitteen loppuosa palvelimen nimen jälkeen.
<a href="/itkp1011/">Kurssin kotisivu</a>
<a href="/itkp1011/luennot/html5/">HTML5-luento</a>
<a href="/itkp1011/luennot/html5/#hyper">HTML5-luennon <samp>a</samp>-elementtiä käsittelevä kohta</a>
<a href="/itkp1011/ohjaus/ohjaus2/">HTML5-perusteet pääteohjaustehtävät</a>
<a href="/itkp1011/luennot/html5/viittaukset.html">Linkki tähän samaan sivuun</a>
<a href="/images/appro2_p.png">Linkki tällä palvelimella olevaan kuvaan</a>
<img src="/images/appro2_p.png" alt="logo" />
Suhteellisia viittauksia varten on oma harjoittelusivu
Suhteellinen osoite tarkoittaa palvelimen sisällä toimivaa osoitetta. Suhteellisen osoitteen (viittauksen) kohda muuttuu aina sen mukaan millä sivulla kyseinen osoite on. Suhteellinen osoite muunnetaan absoluuttiseksi osoitteeksi käyttäen lähtökohtana kulloinkin näytettävän sivun osoitetta.
Esim. tämän dokumentin osoite on http://appro.mit.jyu.fi/itkp1011/luennot/html5/viittaukset.html. Kaikki tässä dokumentissa olevat suhteelliset viittaukset tulkitaan osoitteen http://appro.mit.jyu.fi/itkp1011/luennot/html5/ perusteella eli sen kansion perusteella, jossa tämä dokumentti sijaitsee. Vrt. komentorivillä käytetty oletushakemisto.
Suhteellisia viittauksia tulkitessa on ymmärrettävä ja tiedettävä kansiorakenne, jossa sivusto ja kukin tiedosto sijaitsee. Esimerkkinä oleviin linkkeihin liittyy seuraava kansiorakenne:
Voit komentorivin tapaan harjoitella erilaisia suhteellisia viittauksia suoraan selaimen osoiteriville. Esim. jos haluat suhteellisella viittauksella siirtyä tältä sivulta harkka-kansioon niin kirjoita osoiteriville:
http://appro.mit.jyu.fi/itkp1011/luennot/html5/../../harkka/
Selaimesi saattaa osata ehdottaa oikeaa osoitetta sitä mukaa, kun kirjoitat
Suhteellista viittausta käsitellään tarkemmin komentoriviluennolla
Vertaa seuraavia linkkejä tämän saman sivun kopioon, joka on aivan eri hakemistossa.
<a href="../../">Kurssin kotisivu</a>
<a href="./">HTML5-luento</a>
<a href="./#hyper">HTML5-luennon <samp>a</samp>-elementtiä käsittelevä kohta</a>
<a href="../../ohjaus/ohjaus2/">HTML5-perusteet pääteohjaustehtävät</a>
<a href="viittaukset.html">Linkki tähän samaan sivuun</a>Toinen vaihtoehto: Linkki tähän samaan sivuun
<a href="#">Linkki tähän samaan sivuun</a>
<a href="../../../images/appro2_p.png">Linkki tällä palvelimella olevaan kuvaan</a>
<img src="../../../images/appro2_p.png" alt="logo" />
<a href="testi/">Linkki kansiorakenteessa yhtä tasoa alemmas</a>
<a href="omakuva.png">Linkki samassa kansiossa olevaan mihin tahansa tiedostoon</a>Samassa kansiossa oleviin alikansioihin tai tiedostoihin viitataan suoraan niiden nimillä
<a href="testi/malli/">Linkki kansiorakenteessa kahta tasoa alemmas</a>
<a href="testi/malli/testi.txt">Linkki alikansiossa olevaan mihin tahansa tiedostoon</a>Samassa kansiossa oleviin alikansioihin tai tiedostoihin viitataan suoraan niiden nimillä
<a href="../">Linkki kansiorakenteessa yhtä tasoa ylemmäs</a>
<a href="../../ohjaus/">Linkki kansiorakenteessa ylemmäs ja sieltä edelleen alemmas</a>
index.html on Apache-www-palvelimissa käytetty maaginen tiedostonimi. Pyydettäessä www-palvelimelta osoitetta, joka viittaa suoraan kansioon, niin palvelin osaa automaattisesti tarjota tässä kansiossa mahdollisesti olevaa index.html-tiedostoa. Osoitteessa ei siis tarvitse näkyä minkään html-tiedoston nimeä vaan riittää, että osoite viittaa kansioon. Esim.
http://users.jyu.fi/~tjlahton/testi/