- Tervetuloa tutustumaan töihini ja blogin kuvitus- ym ohjeisiin!
HTML5 ja CSS3 osa 3: Linkit
HTML5 ja CSS3 osa 3: Linkit
Jossain vaiheessa törmää käsitteisiin lohkotason (block) ja tekstitason (inline) elementti. Me olemme jo aiemmissa osissa käyttäneet joitakin molemmista elementeistä. Erona on, että lohkotason elementti aloittaa aina uuden rivin ja täyttää leveys-suunnassa kaiken mahdollisen tilan (venyy oikealle ja vasemmalle niin pitkälle kuin pystyy.) Tekstitason elementti ei aloita uutta riviä ja vie vain sen verran tilaa kuin tarpeellista. Suurin osa HTML tageista on lohkotason elementtejä.
Lohkotason elementtejä ovat mm. otsikot ja kappaleet. Tekstitason elementtejä taas ovat mm. strong, kuva ja linkki, johon tutustutaan seuraavaksi.
Linkit
Linkin voi tehdä kuvaan tai tekstiin ja linkkiä napsauttamalla siirrytään jonnekin muualle, esim oman sivuston toiselle sivulle tai kokonaan toiseen sivustoon. Linkin tekoon käytetään ankkuri-tagia: <a> </a>. Yleensä a tarvitsee seurakseen href-attribuutin joka ilmaisee osoitteen lainausmerkkien sisällä. Sitten tulee itse linkkinä toimiva teksti/kuva ja homman loppuun päättävä a-tagi, joka kertoo, että linkki päättyy:
<a href=”http://www.annukka.info”>Annukka Leppäsen portfolio</a>
Edellisessä oli kyse absoluuttisesta viittauksesta ja sitä käytetään kun linkin kohde on web-osoite. Kun teet linkkejä sivustosi sisällä, käytät suhteellisia viittauksia: kerrotaan missä viitattava dokumentti on suhteessa viittaavaan dokumenttiin. Suhteellisten osoitteiden teko on helpompaa kuin miltä kuulostaa.
Aloita vaikka tekemällä toinen html-sivu, jossa tarvittavat perustagit. Anna sen nimeksi index.html ja tallenna se samaan kansioon kuin ekasivu.html Kun joskus teet ihan oikeat sivut itsellesi, tulee ns etusivusi nimen olla nimenomaan index.html, sillä kun kävijä kirjoittaa sivusi osoitteen selaimen osoitekenttään ja palvelimelle lähtee pyyntö, tulee sieltä löytyä tuon niminen sivu tai käyttäjä saa virheilmoituksen.
Tehdään sitten index-sivulle linkki, jota napsauttamalla päästään ekasivulle. Lisää heti aloittavan <body> tagin alle/perään: <a href=”ekasivu.html”>Siirry tästä index-sivulle</a> Näin helpolla päästään, kun linkitettävät tiedostot sijaitsevat samassa kansiossa. Jos käytät ylä-, tai alikansioita, tutustu ehdottomasti suhteellinen viittaus esimerkkiin kansiorakennetta käyttäen.
Linkin kohde voi hyvin olla jokin muukin kuin html-sivu. Vaikka tekstitiedosto tai kuva:
<a href=”koira.jpg">Kuva koirasta</a> <a href="käsikirjoitus.docx">Elokuvan käsikirjoitus</a>
Oma lukunsa ovat ankkurilinkit, joita tehdään pitempiin juttuihin sellaisiin kohtiin, joihin halutaan siirtyä nopeasti. (Katso esimerkki sivusta jossa ankkurit käytössä.) Tyypillistä on tehdä sivun alkuun sisällysluettelo ja siihen linkit ankkureihin. Näitä linkkejä napsauttamalla pääsee sitten siirtymään haluamaansa kohtaan pitkässä jutussa, esim johonkin tiettyyn otsikkoon.
Otetaan esimerkiksi sisällysluettelo josta siirrytään sen mukaisiin otsikkokohtiin tekstissä. Tehdään ensin linkit sisällysluetteloon sivun alkuun, tässä otsikon nro kolme linkki:
<a href="#kolmonen">Kolmanteen otsikkoon</a>
Sitten tehdään nimetty ankkuri kohtaan, eli otsikkoon, johon sisällysluettelossa viitataan:
<a name="kolmonen">Kolmas otsikko</a>
Nimeä ja linkitä tähän tapaan kaikki sisällysluettelon kohdat ja otsikot johon ne viittaavat. Ankkurilinkin voi tehdä myös toisen sivun tiettyyn kohtaan:
Luo ankkuri sivulle A, joka viittaa sivulla B olevaan ”koira” kohtaan.
<a href="sivuB.html#koira">Siirry tästä lukemaan koira tietoutta</a>
Sijoita sitten ankkuri sivulle B (sivuB.html)
<a name="koira">Koira tietoutta </a>
Sähköpostiosoite linkin kohteena oli suosittu aikoinaan. Selain käynnistää sähköpostiohjelman (vain Outlook toimii) kun linkkiä napsauttaa. Jos roskapostittajista huolimatta haluat osoitteesi näkyviin sivullesi, onnistuu se koodilla
<a href="mailto:heppu.hei@firma.fi">heppu.hei@firma.fi</a>
tai tekemällä siitä linkin, mutta tässäkin tapauksessa roskapostittajat löytävät sen:
<a href = "mailto: heppu.hei @firma.fi" >Lähetä viesti</a>
