Esittely latautuu. Ole hyvä ja odota

Esittely latautuu. Ole hyvä ja odota

Jani Kiviharju Helsingin normaalilyseo Syksy 2016

Samankaltaiset esitykset


Esitys aiheesta: "Jani Kiviharju Helsingin normaalilyseo Syksy 2016"— Esityksen transkriptio:

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

2 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

3 Viittaus tiedostoon Tiedostoon voidaan viitata absoluuttisesti tai suhteellisesti Absoluuttisessa viittauksessa ilmoitetaan koko tiedoston osoite: <a href=” 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

4 <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

5 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

6 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>

7 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

8 Taustamateriaalia Linkit http://www.sivut.org/html/oppaat/linkit.php
Kuvat


Lataa ppt "Jani Kiviharju Helsingin normaalilyseo Syksy 2016"

Samankaltaiset esitykset


Iklan oleh Google