Znacznik link
Znacznik link podłącza pliki CSS do strony
HTML. Ponadto, link podłącza
niektóre inne pliki, na przykład favikonę.
(Favikona to mała ikona strony, która
jest widoczna na karcie przeglądarki. Można ją również
zobaczyć w niektórych wyszukiwarkach obok wyników
wyszukiwania, na przykład w Yandeks).
Ten znacznik ma bardzo wiele atrybutów i mogą one przyjmować różnorodne wartości, jednak w praktyce prawie wszystkie nie są używane. Najpopularniejsze to podłączanie CSS i dodawanie favikony.
Jak podłączyć CSS:
<link rel="stylesheet" href="style.css">
Jak podłączyć favikonę:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
Znacznik link nie wymaga tagu zamykającego.
Atrybuty
| Atrybut | Opis |
|---|---|
href |
Ścieżka do podłączanego pliku. |
media |
Typ urządzenia, dla którego należy podłączyć plik. Chodzi o to, że możesz podłączyć plik CSS tylko dla dużych ekranów (wartość screen)
lub tylko dla małych ekranów: dla telefonów komórkowych lub tabletów (wartość handheld).
Możliwe wartości: all, braille, handheld, print, screen, speech, projection, tty, tv.
Szczegóły poniżej.
|
rel |
Typ podłączanego pliku.
Możliwe wartości: stylesheet | alternate.
Wartość stylesheet wskazuje, że podłączany jest plik CSS,
wartość alternate jest używana, na przykład, do wskazania linku
do pliku w formacie XML opisującego kanał z wiadomościami, zapowiedziami artykułów.
|
charset |
Kodowanie podłączanego pliku.
Obecnie standardem jest utf-8.
|
type |
Typ danych podłączanego pliku. |
Wartości atrybutu media
W HTML5 jako wartości mogą być określone zapytania medialne (media queries).
| Wartość | Opis |
|---|---|
all |
Wszystkie urządzenia. |
screen |
Ekran monitora. |
handheld |
Telefony, smartfony, urządzenia z małym ekranem. |
braille |
Urządzenia oparte na systemie Braille'a, przeznaczone dla osób niewidomych. |
speech |
Syntezatory mowy, a także programy do odtwarzania tekstu na głos. Do tej kategorii należą również przeglądarki głosowe. |
print |
Drukarki. |
projection |
Projektory. |
tty |
Teletypy, terminale, urządzenia przenośne z ograniczonymi możliwościami ekranu. Dla nich nie powinny być używane piksele jako jednostki miary. |
tv |
Telewizory, które potrafią otwierać strony internetowe (bywa i tak). |
Wartość domyślna: all.
Przykład
Spójrzmy, jak wygląda struktura najprostszej strony HTML, do której dodamy podłączenie plików CSS i favikony:
<!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>
