Tag link
Il tag link collega i file CSS alla
pagina HTML. Inoltre, link collega
alcuni altri file, ad esempio il favicon.
(Il favicon è l'icona del sito, che
è visibile nella scheda del browser. Può anche
essere visto in alcuni motori di ricerca durante la ricerca
accanto ai siti, ad esempio in Yandex).
Questo tag ha molti attributi e possono assumere valori diversi, tuttavia nella vita reale sono praticamente tutti inutilizzati. Il più comune è il collegamento CSS e l'aggiunta del favicon.
Come collegare il CSS:
<link rel="stylesheet" href="style.css">
Come collegare il favicon:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
Il tag link non richiede un tag di chiusura.
Attributi
| Attributo | Descrizione |
|---|---|
href |
Percorso del file da collegare. |
media |
Tipo di dispositivo per cui collegare il file. Ciò significa che puoi collegare un file CSS solo per schermi grandi (valore screen)
o solo per schermi piccoli: per telefoni o tablet (valore handheld).
Valori possibili: all, braille, handheld, print, screen, speech, projection, tty, tv.
Vedi sotto per maggiori dettagli.
|
rel |
Tipo di file da collegare.
Valori possibili: stylesheet | alternate.
Il valore stylesheet indica che viene collegato un file CSS,
il valore alternate viene utilizzato, ad esempio, per specificare un link
a un file in formato XML per descrivere un feed di notizie, anteprime di articoli.
|
charset |
Codifica del file da collegare.
Attualmente lo standard è utf-8.
|
type |
Tipo di dati del file da collegare. |
Valori dell'attributo media
In HTML5, come valori possono essere specificate media query.
| Valore | Descrizione |
|---|---|
all |
Tutti i dispositivi. |
screen |
Schermo del monitor. |
handheld |
Telefoni, smartphone, dispositivi con schermo piccolo. |
braille |
Dispositivi basati sul sistema Braille, destinati alle persone non vedenti. |
speech |
Sintetizzatori vocali, nonché programmi per la riproduzione di testo a voce alta. Ciò include anche i browser vocali. |
print |
Stampanti. |
projection |
Proiettori. |
tty |
Telescriventi, terminali, dispositivi portatili con capacità di schermo limitate. Per questi non dovrebbero essere utilizzati i pixel come unità di misura. |
tv |
Televisori che sanno aprire pagine web (succede anche questo). |
Valore predefinito: all.
Esempio
Diamo un'occhiata a come appare la struttura di una semplice pagina HTML, alla quale aggiungiamo il collegamento dei file CSS e del favicon:
<!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>
