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/cssicon : 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, etcprefetch : 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.
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).
Complétez le code HTML ci-dessous avec les consignes suivantes :
exo.css située dans le dossier styles