Liens et navigation
Cours · HTML : structurer le Web (école d'ingénieur), chapitre 3 · école d'ingénieur, informatique · le début du chapitre, la suite sur Adloun
Le « H » de HTML est celui d'hypertexte : un texte dont certains mots mènent ailleurs. Sans liens, une page est une île ; avec eux, le Web devient une toile. Ce chapitre présente l'élément <a>, explique comment écrire l'adresse d'une page voisine, et transforme les pages éparses de la Librairie du Campus en un véritable site, avec son menu de navigation.
Objectifs du chapitre
- Écrire un lien vers une autre page, un autre site, un endroit de la page, une adresse électronique ou un numéro de téléphone.
- Distinguer URL absolue et chemin relatif, et écrire le chemin d'une page à une autre dans l'arborescence d'un site.
- Organiser un site de plusieurs pages et son menu de navigation.
- Rédiger des intitulés de liens utiles, et repérer les liens cassés.
3.1 L'élément <a>
Un lien est un élément <a> (anchor, « ancre ») dont l'attribut href (hypertext reference) donne la destination. Son contenu est l'intitulé du lien : ce que le visiteur voit et sur quoi il clique.
<a href="catalogue.html">Consulter le catalogue</a>Le navigateur affiche l'intitulé souligné, en bleu (en violet une fois visité) ; le pointeur de la souris devient une main au survol, et la barre d'état montre la destination. Un clic charge la page désignée. Au clavier, la touche Tab passe d'un lien au suivant, et Entrée le suit.
Un lien est un élément en ligne : il se place dans une phrase, un élément de liste, un titre. Depuis HTML5, il peut aussi entourer un bloc entier (une carte de produit, par exemple), pourvu que ce bloc ne contienne pas d'autre lien.
3.2 Où mène un lien ? URL absolues et chemins relatifs
3.2.1 L'URL absolue
Pour pointer vers un autre site, on donne l'adresse complète, schéma compris :
<a href="https://dev.java/learn/">La documentation officielle de Java</a>Une URL absolue contient le schéma et l'hôte (https://dev.java/…). Elle désigne la même ressource, quelle que soit la page où elle est écrite.
3.2.2 Le chemin relatif
Entre les pages d'un même site, on écrit un chemin relatif : la position de la page cible par rapport à la page courante. Prenons l'arborescence de la Librairie du Campus :
Un chemin relatif se lit à partir du dossier de la page courante :
catalogue.htmlou./catalogue.html: un fichier du même dossier ;livres/programmation-java.html: un fichier d'un sous-dossier ;../catalogue.html: un fichier du dossier parent (..remonte d'un niveau ; on peut l'enchaîner :../../) ;/catalogue.html: un chemin qui commence par/part de la racine du site (sur le serveur), quel que soit le dossier courant.
Les séparateurs sont toujours des barres obliques /, même sous Windows.
La suite du cours est sur Adloun
Le chapitre en entier, formules et figures comprises, avec le tuteur, les fiches, les QCM et les exercices.
Lire la suite du coursEn accès libre, sans inscription.