01/11/2020

5. Hyperliens

L’un des attraits de la navigation sur le web vient du mécanisme d’hyperliens. Certains mots d’une page sont "réactifs" : on accède à un autre document en cliquant dessus. Cela permet de naviguer d’un document à un autre.

Essayez : en cliquant sur l’expression réactive de cette phrase vous verrez apparaître la page du site web de le site des enseignements d'informatique (dans une autre fenêtre afin de maintenir l’exercice toujours visible).

5.1. Le mécanisme de lien et la balise <a>

L’hyperlien est inséré dans un document à l’aide d’une balise spécifique : la balise <a>. La balise fermante </a> encadrera le mot ou l’expression qui permettra effectivement d’activer l’hyperlien. La balise ouvrante <a> contiendra l’adresse vers laquelle on redirige l’utilisateur.

Ainsi, le code source dans le paragraphe plus haut est :

… vous verrez apparaître…
		  site web de <a href="http://www.univ-montp3.fr/miap/ens/info"
		  target="_blank">
		l’Université</a>...

L’attribut href de la balise a permet de donner au navigateur l’adresse de la page à visiter ; la valeur de href est http://www.univ-montp3.fr/miap/ens/info (partie entre guillemets).

L’attribut target indique au navigateur d’afficher la page visitée dans une nouvelle fenêtre ; l’utilisation de cet attribut est controversée aujourd’hui ; on considère que c’est le visiteur de la page qui doit choisir : clic simple ou clic-droit > ouvrir dans un nouvel onglet.

5.2. Exercice

Retournez dans l’éditeur au fichier exemple.html et ajoutez un lien vers le site de l’université (le texte mentionne l’université dans le premier paragraphe).
Ajoutez aussi un lien vers la page d’accueil du diplôme que vous poursuivez (ou de votre UFR, par exemple).

Pensez à testez les hyperliens mis en place (pensez à enregistrer le fichier modifié avant de rafraîchir l'affichage de la page).

5.3. Liens absolus

Les liens que nous avons utilisé précédemment sont qualifiés de liens absolus car ils ne dépendent pas du contexte. La valeur de l’attribut href dans la balise est une adresse complète commençant par "http://..." ou "https://...". Rappelons que http désigne le protocole que doit utiliser votre machine et le serveur pour le transfert des informations de la page demandée.

Observons que dans certains adresses, il n'y a pas de nom de fichier HTML qui apparaît. C'est le cas, par exemple, avec l'adresse http://www.univ-montp3.fr/miap/ens/info. Dans ce cas, le serveur envoie la page nommée index.htm ou index.html si elle existe dans le dossier racine du site (en général le concepteur du site en a mis une, sinon le serveur envoie quelque chose qui dépend de ses réglages).

5.4. Liens relatifs

Lorsque des pages sont sur un même site web et que l'une réfère à l'autre par un hyperlien, il n'est pas nécessaire de préciser l'adresse complète. Il est suffisant de prendre comme adresse le chemin relatif dans l'arborescence de fichiers. Quand les fichiers sont dans le même dossier, ce chemin relatif est juste le nom du fichier cible. Cette possibilité permet de développer des sites webs sur une machine puis de les transférer sur le serveur. Autre intérêt des chemins relatifs : si vous changez le nom du dossier contenant les fichiers, les hyperliens continuent à fonctionner.

5.5. Exercice

Revenez à votre page exemple.html.
Ajoutez un paragraphe contenant un texte du genre : Voir mes loisirs
Placez avant ce texte une balise <a> et indiquez loisirs.html comme adresse dans l'attribut href. Pensez à mettre la balise fermante <a> à la fin du texte. Votre code devrait alors être (saisissez le code car les erreurs de saisie éventuelle sont formatrices) :

<a href="loisirs.html">Voir mes loisirs</a>
Testez
Dans le fichier loisirs.html, ajoutez un hyperlien permettant de revenir à la page exemple.html. Vous pouvez maintenant passer d'une page à une autre sans quitter le navigateur.