Link-merkki
link-merkki liittää CSS-tiedostoja HTML-sivulle.
Lisäksi link liittää
joitain muita tiedostoja, esimerkiksi faviconin.
(Favicon on sivuston kuvake, joka
näkyy selaimen välilehdessä. Sen voi myös
nähdä joissakin hakukoneissa haun yhteydessä
sivustojen vierellä, esimerkiksi Yandexissä).
Tällä merkillä on erittäin paljon attribuutteja ja ne voivat saada monenlaisia arvoja, kuitenkin oikeassa elämässä niitä käytetään käytännössä tuskin lainkaan. Suosituimmat käyttötavat - CSS:n liittäminen ja faviconin lisääminen.
Miten liittää CSS:
<link rel="stylesheet" href="style.css">
Miten liittää favicon:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
link-merkki ei vaadi päättävää merkkiä.
Attribuutit
| Attribuutti | Kuvaus |
|---|---|
href |
Polku liitettävään tiedostoon. |
media |
Laitetyyppi, jolle tiedosto tulee liittää. Mitä tarkoitetaan - voit liittää CSS-tiedoston vain suurille näytöille (arvo screen)
tai vain pienille näytöille: matkapuhelimille tai tableteille (arvo handheld).
Mahdolliset arvot: all, braille, handheld, print, screen, speech, projection, tty, tv.
Katso tarkemmin alla.
|
rel |
Liitettävän tiedoston tyyppi.
Mahdolliset arvot: stylesheet | alternate.
Arvo stylesheet osoittaa, että liitetään CSS-tiedosto,
arvoa alternate käytetään esimerkiksi osoittamaan linkkiä
XML-muotoiseen tiedostoon uutissyötteen, artikkeliennakoiden kuvaamiseen.
|
charset |
Liitettävän tiedoston merkistökoodaus.
Nykyään standardi on utf-8.
|
type |
Liitettävän tiedoston datatyyppi. |
Attribuutin media arvot
HTML5:ssa arvoiksi voidaan määrittää medialausekkeet.
| Arvo | Kuvaus |
|---|---|
all |
Kaikki laitteet. |
screen |
Näyttö. |
handheld |
Puhelimet, älypuhelimet, laitteet pienellä näytöllä. |
braille |
Braille-järjestelmään perustuvat laitteet, jotka on tarkoitettu sokeille ihmisille. |
speech |
Puhesyntetisaattorit sekä ohjelmat tekstin ääneen lukemiseen. Myös puheselaimet kuuluvat tähän. |
print |
Tulostimet. |
projection |
Projektorit. |
tty |
Teletyypit, päätteet, kannettavat laitteet, joissa on rajoitetut näyttömahdollisuudet. Niille ei pitäisi käyttää pikseleitä mittayksikkönä. |
tv |
Televisiot, jotka osaavat avata web-sivuja (sellaistakin tapahtuu). |
Oletusarvo: all.
Esimerkki
Katsotaanpa, miltä näyttää yksinkertaisimman HTML-sivun rakenne, johon lisätään CSS-tiedostojen ja faviconin liittäminen:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
