Les hyperliens
Un hyperlien (ou lien hypertexte) est un moyen de passer de la page Web que vous consultez à un document lié. Au départ, le Web a été inventé pour pouvoir transférer des données scientifiques. Le transfert est maintenant possible avec des ressources de toutes sortes.
Les balises <a></a>
Les balises <a></a> permettent de créer un hyperlien, le plus souvent vers une ressource telle que : fichier texte, document PDF ou Word, photo, vidéo, page Web,
etc. L'attribut le plus important de l'élément a est href dont
la valeur est l'URL de la ressource qui est la cible du lien (c'est-à-dire l'adresse sur le Web où on peut trouver la ressource). Cette URL peut être donnée sous forme absolue ou relative.
Les URL relatives
Avant tout, notons que sur Internet, les sous-répertoires sont indiqués par des barres obliques (/) et non pas par des barres obliques inverses (\) comme dans Windows. Ceci dit, les URL relatives sont généralement utlisées lorsque la ressource et la page Web qui veut y accéder sont dans le même site Web : l'URL relative de la ressource est alors son adresse relativement à celle de la page Web.
Par exemple, cette page Web-ci est située dans le sous-répertoire html-css/html du site Web fadagogo.com et le fichier test.txt est dans le sous-répertoire
html-css/docs. Pour accéder à ce fichier, il faut d'abord remonter au répertoire parent de html-css/html, c.-à-d. html-css,
puis descendre au sous-répertoire html-css/docs.
En informatique, on utilise la notation ..
pour désigner le répertoire parent d'un sous-répertoire donné.
Vu du sous-répertoire html-css/html, html-css est
.. et html-css/docs est ../docs. Donc, l'adresse relative du fichier test.txt est ../docs/test.txt.
Voici donc le code pour accéder de cette page Web aux ressources html-css/docs/test.txt et
html-css/images/Berners-Lee.jpg :
<a href="../docs/test.txt">Un fichier texte</a>
<a href="../images/Berners-Lee.jpg">Une photo</a>
Et voici ce que le navigateur va afficher. Vous noterez que les liens aparaissent comme le texte du contenu des éléments a ; par défaut, ce texte apparait souligné.
Vous pouvez tester le résultat en cliquant sur les liens ; pour revenir à cette page-ci, vous pourrez utiliser le bouton « retour » de votre navigateur.
.. plusieurs fois de suite si nécessaire.
Par exemple, pour une page Web dans un sous-répertoire AAA/BBB/CCC, l'URL relative du fichier
AAA/XXX/YYY/photo.jpg est ../../XXX/YYY/photo.jpg car .. désigne le parent de AAA/BBB/CCC, c.-à-d. AAA/BBB et ../.. désigne
le parent de AAA/BBB, c'est-à-dire AAA.
Les URL absolues
On peut aussi utliliser un hyperlien pour accéder à une page Web. La page Web intro.html est dans le même sous-répertoire que cette page-ci. Son adresse relative est donc
simplement intro.html et pour y accéder, on utiliserait un hyperlien avec href="intro.html". Si on voulait y accéder d'une page dans un autre site Web, par contre, il
serait impossible d'utiliser l'URL relative. Il faudrait donc utiliser son URL absolue, c.-à-d. au complet incluant http et le nom du site Web. Vous pourrez constater que les
deux morcaux de code à droite
conduisent au même fichier :
<a href="intro.html">Une page Web</a>
<a href="http://fadagogo.com/html-css/html/intro.html">La même page Web</a>
Autres attributs
L'élément a admet d'autres attributs que href. Les deux plus utiles sont probablement target et download. L'attribut target est
généralement utilisé avec la valeur _blank qui a pour effet d'ouvrir la page Web ou le document dans un nouvel onglet. L'attribut download, quant à lui, à pour effet de
tétécharger la ressource qui est la cible du lien en la sauvegardant dans un fichier dont le nom est la valeur de l'attribut. Vous pouvez tester le code :
<a href="../videos/fcomp2.mp4" target="_blank">Ouvrez cette vidéo dans un nouvel onglet</a>
<a href="../docs/test.pdf" download="my_test.pdf">Téléchargez ce document PDF</a>
en cliquant les liens ci-dessous.
Malheureusement, au stade actuel, la majorité des navigateurs ne supportent pas (Internet Explorer, Safari) ou supportent mal (Chrome, Opera) l'attributdownload.
Autres utilisations
À noter que les hyperliens ne sont pas limités aux URL qui utilisent HTTP. On peut les utiliser, par exemple pour envoyer des courriels ou pour faire du FTP.
<a href="mailto:john.doe@ushediac.ca">Envoyer un courriel à John Doe</a>
Recommandations
Tant que vous garderez vos fichiers sur votre ordinateur personnel, il ne devrait pas y avoir de problème majeur avec vos noms de fichier. Par contre, si vous décidez un jour de créer un site Web sur un serveur, vous vous rendrez compte que le meilleur moyen d'avoir des prob-
lèmes est de choisir des noms de fichier où il y a des espaces et des lettres avec des accents. Un nom de photo tel que "Portrait d'Arsène Léger.jpg" est absolument à proscrire. Utilisez à la place "arsene-leger.jpg" ou "arsene_leger.jpg".
Exercice
Insérez dans le simulateur HTML les liens qu'il y a dans cette page-ci et testez-les (le simulateur est dans le même sous-répertoire que cette page-ci, donc les URL relatives ne changeront pas)