XHTML ja linkit Inline-elementti Linkki tehdään a-elementillä ja linkin kohde ilmoitetaan href- attribuutilla Absoluuttinen linkki Helian pääsivulle: Siirry.

Esitys aiheesta: "XHTML ja linkit Inline-elementti Linkki tehdään a-elementillä ja linkin kohde ilmoitetaan href- attribuutilla Absoluuttinen linkki Helian pääsivulle: Siirry."— Esityksen transkriptio:

1 XHTML ja linkit Inline-elementti Linkki tehdään a-elementillä ja linkin kohde ilmoitetaan href- attribuutilla Absoluuttinen linkki Helian pääsivulle: Siirry Helian sivuille linkin kohde url-osoitteena linkkiteksti xhtml-sivulla target-attribuutilla (Transitional) voidaan määrittää mihin ikkunaan linkin kohde avautuu. Vaihtoehtoja _blank, _self, _top, _parent. Siirry Heliaan avaa Helian sivut uuteen ikkunaan ”mailto-linkki” avaa sähköpostiohjelman ja linkin kohteeksi laitetaan sähköpostiosoite Lähetä viesti Annalle

2 Suhteellinen linkki Linkki samaan kansioon Katso kuvia Linkki alikansioon Tanssiharrastus Linkki hakemistossa yksi ylöspäin Uutiset Voit linkittää myös muihin kuin xhtml-tiedostoihin. Esim. linkki kuvaan Maisema rannalta Linkki word-dokumenttiin Kameran käyttöohje Linkki.swf-tiedostoon Flash-harjoitustyö 2.3.

3 Sivun sisäinen linkki Linkin kohde eli ankkuri sijaitsee samalla sivulla, jolloin linkissä kohde merkitään #kohdesana: Kappale 2: Luokat Linkin kohde voi sijaita myös toisella sivulla, jolloin siirrytään toiselle sivulle ankkurin osoittamaan kohtaan: Kappale 2: Luokat Ankkurin paikka sivulla merkitään a-elementillä käyttäen name- attribuuttia. Esimerkissä viitataan sivulla olevaan otsikkoon: Kappale 2: Luokat Ankkuri voidaan merkitä myös liittämällä kohteena olevaan elementtiin id-attribuutti, mikä on suositeltavaa ja xhtml 1.1.:ssä ainoa tapa tehdä sivun sisäiseen linkkiin ankkuri: Kappale 2: Luokat

4 CSS ja linkit Pseudoluokkaa eli näennäisluokkaa käytetään linkkien tyylimäärittelyssä seuraavasti: a:linklinkki a:visitedkäyty linkki a:activeaktiivinen linkki eri selaimilla erilainen tulkinta: linkki, jonka päällä hiiri on alhaalla, esim. Opera 6 linkki, jota on juuri klikattu, esim. Mozilla 1.2. linkki, jossa juuri on käyty, esim. IE6 a:hoverhiiri linkin päällä toimii Mozillassa myös muilla elementeilläkin esim. p Esimerkki: a:link {color:navy} a:active {color:#CC0033} a:visited {color:#9933FF} a:hover {color:lime; background:yellow; border:solid; border-color:pink; text-decoration:none}