Miten tehään linki

[[tuollainen viesti oli kerran viekussani, olkoon se nyt otsikkona XD]]

Ensinnäkin body-koodiin täytyy määritellä, minkä värisiä linkit ovat. Aloitamme tekemällä uuden tiedoston. Tallenna harjoitus1.html nimellä etusivu.html ja ota sitten uusi tiedosto. Laita sen nimeksi valikko.html
Ryhdymme tekemään nyt eri osioita Hopeanuolen sivuille, tee sinäkin samoja vaiheita omaa harjoitustasi. Aluksi teemme valikon, josta pääsee eri osioihin.


Kirjoita tiedostoon tekstit esimerkin mukaan.
Body-koodin uudet linkit määrittävät linkkien värin sivulla. Link="yellow" tekee koskemattomista linkeistä keltaisia, alink="gold" tekee aktiivisista linkeistä kultaisia ja vlink="lime" tekee vierailluista linkeistä limetin vihreitä.
Nyt voimme siirtyä lisäämään linkkejä.


Ensimmäisenä tietenkin lisäämme valikkoon etusivun linkin. Etsusivun osoite on nyt tiedoston nimi, eli etusivu.html
Linkki tehdään tagilla a ja päätellään tagilla /a. tagiin lisätään liite href="" ja lainausmerkkeihin laitetaan sen tiedoston/sivun osoite, jonne linkin halutaan johtavan. Nyt siis kirjoitamme Tagin a href="etusivu.html" ja päättelemme tagilla /a, kunhan olemme laittaneet väliin sanan, joka on linkki.
Toimi mallin mukaan:



Sivun pitäisi nyt olla tämän näköinen:



Kokeile klikata kohtaa Etusivulle ja katso, pääsetkö sinne




Kuvien lisäys

Kuvatiedoston lisäämiseksi sivulle pitää html-tiedoston kanssa samassa hakemistossa (kansiossa) olla kuvatiedosto, joka sinne halutaan liittää. Teemme otsikkokuvan valikko-sivulle, voit muokata omasi paintilla tai muulla, mutta tee siitä todella pieni, esimerkin mukainen:



Tallenna tiedosto nimellä vlkkotsikko.gif


Nyt lisäämme kuvan valikon otsikoksi.
Kuvatiedosto lisätään html-tiedostoon img-tagilla ja sen liitteellä src="" määritellään tiedoston osoite. Lisää valikko.html-tiedostoon esimerkin mukaisesti:



Sivun pitäisi nyt näyttää tältä:



Jos kuva ei näy, tarkista, että olet kirjoittanut koodin oikein. Esimerkiksi lainausmerkin" puuttuminen tai kuvatiedoston virheellinen nimi (isoilla ja pienillä kirjaimilla on nyt väliä) aiheuttavat sen, ettei kuva näy.



Kuva linkkinä

Nyt teemme Hopeanuolen sivuille linkit-osion. Jokaisen sivun linkitä-osiosta löytyy bannereita linkittämistä varten. Aluksi banneri on tallennettava omien sivujen hakemistoon (samaan kansioon, johon teet sivuja). Kuvat on tietyissä tapauksissa mahdollista linkittää suoraan sieltä, missä ne netissä ovat, mutta tämä ei yleensä, mm.linkittämisen yhteydessä ole suositeltavaa, koska se, että kuvat näkyvät sinun sivuillasi, pistää ne latautumaan hitaammin kuvan omistajan oikealle sivulle.

Aivan aluksi ota uusi tekstitiedosto, tallenna se nimellä linkit.html ja kirjoita siihen tekstit mallin mukaan:



Nyt pääsemme lisäämään itse linkkejä. Esimerkkinä linkitämme Gin Stationin. Lähdetään siitä, että tallennetaan banneri samaan kansioon.



Nyt lisäämme koodin, jolla banneri linkitetään GinSiin. Se tapahtuu niinkin yksinkertaisesti, kuin laittamalla img-tagi a-tagin sisään esimerkin mukaan:



Html-tiedoston pitäisi näyttää nyt tältä:




Kuten huomaat, kuvan ympärillä on ärsyttävät keltaiset kehykset. On kaksi tapaa poistaa ne. Toinen on muuttaa kaikkiin body-koodin link-liitemäärityksiin "black" tai mikä nyt sivun tausta värinä onkin.
Toinen huomattavasti käytännöllisempi tapa on hoitaa asia img-tagin border-liitteellä, jolla määritellään kehyksen leveys. Lisätään siis img-koodiin komento border=0.





Edelleen linkit-osio on vähän huono. Sen huomaatte, kun klikkaatte linkkiä, mitä tapahtuu? Linkki aukeaa samaan ikkunaan. On järkevämpää avata linkki uuteen ikkunaan, jolloin sinunkin sivusi jäävät vielä kävijälle auki ja on muutenkin siistimmän näköistä, jos linkit eivät aukea sivun ulkoasun sisälle.
Linkki saadaan aukeamaan uuteen ikkunaan a-tagin liitteellä target, jolla siis määritellään ikkuna, johon sivu aukeaa. Lisätäämpä nyt siis koodiin target="_blank", joka pistää linkin aukeamaan uuteen ikkunaan:




Lopuksi lisäämme vielä linkit-osion linkin valikkoon. Avaa tiedosto valikko.html tekstimuotoisena ja lisää sinne linkki tiedostoon linkit.html:





Tarkista, että linkit toimivat, ennenkuin siirryt eteenpäin! Jos sivulla on jokin vinossa, tarkista koodin oikeinkirjoitus.


Siirry eteenpäin


Teksti ja tiedot © Äffä, tekstiä ei saa suoraan kopioida minnekkään