7. Oppitunti - Linkit
Kyllä: webbisivultamme puuttuu vielä jotain oleellista, nimittäin linkit. Webbisivun tärkein ominaisuushan on, että se on linkitettävissä toisiin webbisivuihin.
Linkkitägi näyttää seuraavalta:
<a href="http://www.w3schools.com"> W3Schools</a>
Kuten muissakin tägeissä, myös linkki-tägissä on sekä aloitus-, että lopetuselementti, tässä tapauksessa <a></a>. Href-määre ilmoittaa, mihin linkki johtaa. Linkkejä on olemassa kahdenlaisia: suhteellisia ja absoluuttisia. Suhteellista linkkiä käytetään, jos kohde sijaitsee samassa paikassa (esim. alakansio/tiedostonimi.html). Absoluuttinen polku on koko kohteen osoite, se näkyy mm. selaimen osoiterivillä (esim. http://nettisivut.net/alakansio/tiedostonimi.html).
Mitä tahansa aloitus- ja lopetuselementin välissä onkin, muuttuu se linkiksi. Tässä tapauksessa siis teksti "W3Schools" vie kyseisen firman kotisivuille:
Jos tägien väliin laitetaan kuva, muuttuu kuva linkiksi:
<a href="http://www.utu.fi"> <img src="hs.gif" /> </a>
Seuraava kuva on linkki Turun yliopiston kotisivuille:
Linkin kohde kirjoitetaan href:n jälkeen lainausmerkkeihin. Esimerkiksi Turun yliopiston osoite on siis http://www.utu.fi. Mikäli kohde sijaitsee samassa kansiossa, ei koko osoitepolkua tarvitse kirjoittaa; pelkkä tiedoston nimi riittää.
1. Tee omasivu.html tiedostoon joitain muutoksia.
Kuvitellaan että meillä on sivusto, joka koostuu useista samankaltaisista sivuista.
2. Tallenna se tämän jälkeen toisella nimellä, esim. omasivu2.html
Nyt meillä on siis sivut omasivu.html ja omasivu.html2. Kun esikatselet sivuja, huomaat että ne näyttävät melko samalta, koska molemmat käyttävät samaa tyylitiedostoa. Tällä tavoin saadaan yhtenäinen sivupohja koko sivustolle.
3. Avaa alkuperäinen omasivu.html. Kopioi seuraava koodi kohtaan johon haluat tehdä linkin:
<p><a href="omasivu2.html"> koelinkki 1</a></p>
4. Tallenna ja esikatsele
Nyt sinulla pitäisi olla linkki tiedostosta omasivu.html tiedostoon omasivu2.html. Voit tehdä samalla tapaa myös useampia linkkejä:
Css-tyylejä voi käyttää myös linkkien muotoilemiseen. Oletuksena linkit ovat sinisiä ja alleviivattuja. Jos haluan muuttaa linkin väriä, onnistuu se seuraavasti:
a {
color:black;}
Css:llä on vielä yksi mielenkiintoinen ominaisuus, jota kutsutaan pseudo-luokaksi. Sen avulla on helppo hieman piristää linkkejä.
4. Kopioi seuraava koodi tyyli.css tiedostoon muun koodin perään
a {
color:black;}
a:hover {
color:white;}
a:active {
color:red;}
a:visited {
color:none;}
Tarkastele luomaasi sivua (tai esimerkkiä) ja huomaat mitä linkeille on tapahtunut: kun liikutat hiirtä linkin ylitse, muuttuu se valkoiseksi, kun klikkaat linkkiä, muuttuu se punaiseksi.
