Jani Kiviharju Helsingin normaalilyseo Syksy 2016 Linkit ja kuvat Jani Kiviharju Helsingin normaalilyseo Syksy 2016

Hyperteksti ja linkit Hypertekstidokumentissa voi linkkien avulla siirtyä tekstin eri kohtiin tai uusiin dokumentteihin HTML-kielessä linkit toteutetaan ankkuri (anchor) –komennolla <a> Dokumentti tai tiedosto, johon linkki viittaa, määritetään href-parametrillä Esim. <a href=”sivu2.html”>Toiselle sivulle</a> Käyttäjälle näkyy teksti ”Toiselle sivulle” ja tekstiä painamalla selain siirtyy sivu2-nimiselle verkkosivulle

Viittaus tiedostoon Tiedostoon voidaan viitata absoluuttisesti tai suhteellisesti Absoluuttisessa viittauksessa ilmoitetaan koko tiedoston osoite: <a href=”http://www.norssi.helsinki.fi/home/tietotekn/atv2/2.html”>Seuraava sivu</a> Suhteellisessa viittauksessa ilmoitetaan tiedoston sijainti linkin sisältävään tiedostoon nähden <a href=”2.html”>Seuraava sivu</a> saman kansion tiedosto 2.html <a href=”kielet/englanti.jpg”>Englanti</a> kielet-alikansion tiedosto englanti.jpg <a href=”../2007/vuosikertomus.doc”>Vuosikertomus 2007</a> yläkansion 2007-kansion doc.-tiedosto <a href=”Elektroniikka/Samsung/Televisiot/Alennukset/index.html”>Huipputarjous!</a> Suhteellinen viittaus helpottaa sivujen päivittämistä, jos sivuja joudutaan siirtämään palvelimelta tai kansiosta toiselle Jos käytetään suhteellisia viittauksia, tiedostot voidaan siirtää suoraan uuteen sijoituspaikkaansa eikä kaikkia linkkejä tarvitse päivittää käsin

<a>-komento ja lisämääreet href – linkin kohteen URL-osoite Kohde voi olla html-sivu, sivun nimetty osa, kuva, tekstidokumentti tai mikä tahansa muu tiedosto name – käytetään sivun osien nimeämiseen linkkejä varten target – määrää mihin linkki avataan _blank avaa linkin kohteen uuteen ikkunaan _top avaa linkin kohteen koko selainikkunassa _self avaa linkin kohteen siinä kehyksessä, missä linkkiä on painettu _parent avaa linkin kohteen siinä kehyksessä, jonka sisällä linkin sisältänyt kehys oli

Tehtävä 1 Kokeile linkkien lisäämistä verkkosivulle, käytä pohjana jotain aiemmin luomaasi verkkosivua tai laadi uusi testisivu. Kokeile linkin kohteena toista verkkosivua, kuvatiedostoa ja tekstitiedostoa. Lisää sivulle linkki, jossa linkkitekstin paikalla onkin kuva Esim. <a href=”sivu2.html”><img src=”logo.gif”></a> Nyt linkkinä on tekstin sijaan kuva logo.gif Halutessasi voit kokeilla myös target-määrettä target=”_blank” –attribuutilla saat linkin aukeamaan uuteen ikkunaan

Samaan sivuun viittaaminen Jos verkkosivun jokin osa on nimetty <a>-komennon name-määreellä, voidaan tähän sivun osaa viitata linkillä Esim. Otsikon Gerbiilien hoitaminen-nimeäminen <a name=”hoito”><h2>Gerbiilien hoitaminen</h2></a> Linkki samasta dokumentista Gerbiilien hoitaminen –kohtaan <a href=”#hoito”>Tästä gerbiilien hoitamiseen</a> Linkki eri dokumentista gerbiilit-sivun Gerbiilien hoitaminen –kohtaan <a href=”gerbiilit.html#hoito”>Tästä gerbiilien hoitamiseen</a>

Tehtävä 2 Laadi verkkosivu valikko.html Lisää verkkosivulle otsikoita ja tekstiä Ainakin 3 alaotsikkoa Tekstiä niin runsaasti, että sivua pääsee vierittämään alaspäin neljän näytön mitan verran Teksti saa olla suora lainaus muualta (muista lähde!) tai sekasotkua Laadi sivun alkuun linkeistä koostuva valikko, josta pääsee suoraan kuhunkin alaotsikkoon Lisää kunkin alaotsikoidun kappaleen loppuun linkki, jolla pääsee takaisin sivun alun valikkoon

Taustamateriaalia Linkit http://www.sivut.org/html/oppaat/linkit.php http://cs.stadia.fi/~lehtonen/html.html#linkit http://www.w3schools.com/html/html_links.asp http://www.norssi.helsinki.fi/Home/Atk/html/Kurssimateriaaleja/linkit.html http://www.w3schools.com/tags/att_a_target.asp Kuvat http://www.sivut.org/html/oppaat/kuvat.php http://cs.stadia.fi/~lehtonen/html.html#grafiikka http://www.w3schools.com/html/html_images.asp http://www.norssi.helsinki.fi/Home/Atk/html/Kurssimateriaaleja/kuvat.html http://www.norssi.helsinki.fi/Home/Atk/html/Kurssimateriaaleja/aktiivikuva.html