### <link>

L'élément link permet de lier des ressources au document.

La différence entre la liaison faite par cet élément et la liaison faite pour les éléments embarqués (images, vidéos, autre document dans un iframe, etc) est avant tout sémantique (le moyen physique de la liaison est le même : une URL). L'élément link lie au document des ressources qui le concernent dans son ensemble alors que les éléments embarqués sont du contenu dans le corps du document et constituent seulement une partie de ce qui est affiché par le navigateur.

Pour le moment, l'utilisation principale de l'élément link est la liaison à des feuilles de styles externes : des fichiers contenant du code CSS permettant la mise en forme et la mise en page des éléments contenus dans le corps du document.

Il y a trois attributs souvent utilisés :

- `rel` qui définit le type de relation entre la ressource et le document,
- `href` qui donne l'URL de la ressource à lier,
- `type` qui définit le type MIME de la ressource.

Les valeurs possibles pour l'attribut `rel` sont fixées précisément.
Les plus utilisées sont :

- `stylesheet` : `href` sera alors l'URL d'une feuille de style utilisée dans le document. `type` est facultatif, mais si il est précisé, il sera `text/css`
- `icon` : `href` sera alors l'URL d'une icône qui sera affichée devant le title dans l'onglet du navigateur. Le format graphique supporté dépend des navigateurs et peut être .ico, .gif, .png, etc
- `prefetch` : `href` sera alors l'URL d'un document qui sera téléchargé (ainsi que ses ressources) en arrière-plan pendant que l'utilisateur consulte le document en-cours.

Il convient de mettre le lien sur le(s) fichier(s) CSS tout au début du code HTML, car de cette façon le navigateur pourra demander le fichier au serveur dès qu'il commencera à parser le code HTML, et pourra l'utiliser plus rapidement pour faire son travail de calcul de rendu et d'affichage.

Exemple : utilisation de link
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Utilisation de link</title> <link rel="stylesheet" href="../_core/def.css" type="text/css"> <link rel="icon" href="../favicon.ico" type="image/x-icon"> </head> <body> <h4>Mise en forme faite par la feuille de style liée.</h4> </body> </html>

`prefetch` peut sembler intéressant à première vue car il permet d'accélerer la navigation en préchargeant la page que l'utilisateur est sensé voir après le document en cours.

Dans certaines situations la page suivante est relativement facile à deviner. Par exemple dans ce tutoriel, on peut penser que l'utilisateur va avoir une navigation linéaire et que la page qu'il consultera après celle_ci sera la page suivante dans le menu générale.

Dans d'autres situations la page suivante n'est pas aussi évidente comme par exemple dans le cas d'une page qui propose beaucoup de choix différents après une recherche

Enfin, quelques fois le préchargement est impossible car la page suivante sera faite dynamiquement à partir d'informations saisies dans la page en cours. C'est le cas d'une page de recherche : on ne peut pas savoir à l'avance quelle sera la recherche de l'utilisateur. C'est le cas également dans des pages de finalisation de commandes sur des sites commerciaux, où, bien que chaque étape soit clairement identifiée et connue, le contenu lui même est différent (nom de l'utilisateur, articles achetés, adresse, numéro de carte de crédit, etc).

### Rédiger l'en-tête d'une page

Complétez le code HTML ci-dessous avec les consignes suivantes :

- le jeux de caractères utilisé est iso-8859-1
- le nom de l'auteur est Pierre Poljack
- la description de la page est "Exercice de la partie 3 du tutoriel HTML"
- les mots clés sont "exercice", "tutoriel" et "HTML"
- le titre de la page est "Exercice tuto"
- il y a un lien sur la feuille de style `exo.css` située dans le dossier `styles`
- le corps de la page contient le texte "C'est un des exercices de la troisiéme partie du tutoriel HTML de François Piat." Les caractères accentués (é et ç) doivent être remplacés par leur entité HTML.

Code à compléter

Exercice : en-tête d'une page
<! > <html lang="fr"> <head> </head> <body> </body> </html>

Une solution possible

Exercice : en-tête d'une page
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="iso-8859-1"> <meta name="author" content="Pierre Poljack"> <meta name="description" content="Exercice de la partie 3 du tutoriel HTML"> <meta name="keywords" content="exercice, tutoriel, HTML"> <title>Exercice tuto</title> <link rel="stylesheet" href="styles/exo.css" type="text/css"> </head> <body> C'est un des exercices de la troisième partie du tutoriel HTML de François Piat. </body> </html>