[IMAGE]

Linkit ja hakemistorakenne
Kirjan sivut
43-45 ja 60 - 63
Linkit määritellään A-elementillä. Linkkiin määritellään kohdesivu tai -kuva HREF-attribuutilla. 
Malli: Olet tehnyt kaksi sivua. Toisen nimeksi on tallennusvaiheessa annettu kakkonen.htm. Avaat toisen sivun muokattavaksi ja haluat tehdä linkin siltä sivulta sivulle kakkonen.htm.
<A HREF="kakkonen.htm">Tämä on linkkiteksti</A>
Eli alkuosassa määritellään sivu, minkä linkki avaa napautettaessa. Sen jälkeen määritellään sivulla linkkinä näkyvä teksti. Ja lopuksi elementin lopetus, muuten linkki jatkuu niin pitkälle, kunnes vastaan tulee </A> 

Mallit erilaisista linkeistä:
<A HREF=”http://www.veikkaus.fi”>Veikkauksen kotisivulle</A>
Yllä oleva linkki vie veikkauksen kotisivulle. Näytöllä ei näy muuta kuin: Veikkauksen kotisivulle. Sitaattien sisälle voit kirjoittaa minkä tahansa www-sivun, FTP-palvelimen, news- ryhmän jne. osoitteen. 

<A HREF=”toinen.htm”>Avaa tästä toinen dokumentti</A> Tällä avaat toisen dokumentin, joka sijaitsee palvelimella samassa hakemistossa. Esimerkiksi, kun teet omat sivusi, niin tällä saat linkitettyä sivusi etusivulle tai muulle sivulle. Jos dokumentti sijaitsee jossakin toisessa hakemistossa, lisää nimen eteen normaali hakemistopolku esim. <A HREF="c:\internet\kuvat\kaikki.htm">Kaikki kuvat</A>  HUOM! Tällaista linkkiä ei voida käyttää muualla kuin omalla koneellasi. Palvelimelle siirrettynä linkki ei toimi, koska siellä ei ole samanlaista hakemistorakennetta. Tästä asiasta tarkemmin sivun lopussa.

<A HREF=”#kohta”>Tästä pääset toiseen kohtaan sivulla</A> Kirjanmerkkilinkki, jolla pääset toiseen kohtaan samassa dokumentissa. Jotta linkki toimisi, joudut nimeämään kohdan <A NAME=”kohta”>tämä</A>on se kohta johon sivulla tullaan. Tällä merkitset sivulla paikan, johon tullaan, kun painetaan kirjanmerkkilinkistä.

Jos haluat "kirjanmerkitä" jonkin toisen dokumenttisi kohdan tee näin <A HREF=”toinen.htm#kohta”>toisen dokun paikka</A> Muista merkitä kirjanmerkin paikka <A NAME=”kohta”>........ </A>:llä myös toiseen dokumenttiin.

Edellä mainitut esimerkit linkeistä tekevät jonkin sanan tai lauseen linkiksi. Voit käyttää linkkeinä myös kuvia. 
<A HREF=”http://www.veikkaus.fi”><IMG SRC=”kuva.gif”></A>
 Edellä olevassa tapauksessa kuva.gif:stä tulee linkki, jonka päällä napauttamalla surffari pääsee Veikkauksen kotisivulle. Jos olet et ole poistanut kuvalta reunusta asettamalla BORDER-arvoa nollaksi, näkyy kuvan reunus samalla värillä kuin linkkienkin värit. Toisaalta reunus on hyvä olla, jotta muutkin tietävät, että kuvasta on linkki jonnekin muualle.

<A HREF=”MAILTO:nimi@osoite.maa”>Lähetä postia minulle</A> Sähköpostilinkillä saat avattua sähköposti-ikkunan eli linkistä ei suoraan lähde viestiä minnekään. Mailto-kohdan jälkeen lisää oma sähköpostitunnuksesi.


Hakemistorakenne:

Tähän asti edellä esitetyt asiat ovat lähteneet siitä olettamuksesta liikkeelle, että kaikki tiedostot, jotka tehdään sijaitsevat samassa kansiossa. Tämä ei ole mikään pakollinen toiminto. Isommissa sivustoissa on luonnollista lähteä organisoimaan tiedostoja tekemälle aihealueen mukaisia alikansioita. 

Esimerkki hakemistorakenteesta:

Olet tehnyt yhden kansion omalle koneellesi, joka toimii www-sivuston "juuri"-kansiona. Tämän kansion sisälle teet kaksi alikansiota kuvat ja henkilokunta. Kuvat-kansioon on tallennettu tiedosto kuvia.htm ja henkilokunta-kansioon opettajat.htm. Juuri-kansiossa on sivuston pääsivu index.html

Alla on taulukko, jossa on vasemmassa sarakkeessa sivu, minne koodi kirjoitetaan. keskimmäisessä sarakkeessa on sivu, minne linkistä päästään. Ja lopuksi oikealla on varsinainen koodi.

Mille sivulle koodi Minne sivulle pitäisi päästä Koodi
Index.html kuvia.htm <A HREF="kuvat/kuvia.htm">kuvat sivulle</A>
Index.html opettajat.htm <A HREF="henkilokunta/opettajat.htm"> Ope-sivulle</A>
Eli linkkiin laitetaan normaalin tiedoston nimen ohella alikansion nimi ja /-viiva
opettajat.htm Index.html <A HREF="../Index.html">Etusivulle</A>
kuvia.htm Index.html <A HREF="../Index.html">Etusivulle</A>
Linkin alkuun .. joka tarkoittaa, että palaa kansiorakenteessa yksi askel ylöspäin
opettajat.htm kuvia.htm <A HREF="../kuvat/kuvia.htm">Kuvia </A>
kuvia.htm  opettajat.htm <A HREF="../henkilokunta.htm">Opettajat</A>
Linkin alkuun ensin .. eli paluu juurikansioon ja sitten alikansion nimi missä on tiedosto

Samalla tavalla kuin linkeille on esitetty hakemistorakenteen toiminta, voidaan sijoittaa sivulla käytettävät kuvat:
<IMG SRC="kuvat/kuva.jpg">

Huomaa, että sivujen siirron yhteydessä on myös palvelimella oltava samanlainen hakemistorakenne. 

 

Kooste:
Elementti Attribuutit / selitykset
<A> - </A> Linkkielementti
href - linkin kohde tiedosto, osoite, paikka sivulla
name - merkitty kohta sivulla, johon voidaan href-attribuutilla viitata.
target - linkin kohdekehys