Les différents types de liens
On distingue deux formes de liens :
- Les liens absolus
- Les liens relatifs
Les liens absolus sont ceux qui marcheront dans tous les cas. On les repère facilement, ils commencent, en web, par https://. Ce sont les adresses complètes qui mènent à un fichier ou un dossier, donc impossible de se tromper.
S'il peut être séduisant de se dire "je ne vais utiliser que ceux-là", ils ont cependant un défaut, ils sont plus longs à charger. C'est logique, on part à chaque fois de zéro pour tout recommencer.
Imaginez que vous soyez un ordinateur qui doive aller chercher un fichier ici : https://masson-formation.fr/pages/cours/coursPDF/liens.html
En partant de l'orgine du site MF, vous devez entrer dans un dossier "page" puis entrer dans un dossier "cours" puis entrer dans un dossier "coursPDF" pour trouver le fichier "liens.html".
Imaginez que maintenant, je vous demande d'aller chercher un autre cours en vous donnant l'url : https://masson-formation.fr/pages/cours/coursPDF/images.html
Avec un lien absolu, je vais vous demander de sortir de tous les dossiers pour retourner à l'accueil du site pour re-rentrer dans tous les dossiers pour y trouver le fichier "images.html". C'est dommage, vous étiez déjà dans le bon dossier, le fichier était à côté du premier !
On peut donc utiliser un lien relatif qui va justement nous éviter cette démarche inutile.
Former un lien relatif
Il faut comprendre une chose. Un lien relatif se conçoit en fonction de l'endroit d'où on part. Par exemple, de la place de la page HTML, dans l'arborescence, qui appelle une image.
Il y a deux choses à retenir pour former un lien relatif.
- Pour entrer dans un dossier, il faut simplement taper son nom en respectant la casse (majuscules, minuscules) et sans mettre de / devant.
- ../ permet de remonter dans d'un cran dans l'arborescence.
En pratique
Si votre arborescence de site est convenablement formée, vous devriez avoir quelque chose comme ça :
A noter que le nom donné à vos dossiers peut varier. C'est ok tant que les noms de ne contiennent pas d'espace, pas de caractères spéciaux, pas de chiffre au début, comme toujours.
Imaginez maintenant, vouloir appeler une image depuis la page index.html qui se trouver seule à la racine de votre site. Le schéma devient ainsi alors :
On voit donc qu'en partant de l'index (la page d'accueil du site) on doit entrer dans le dossier "images" pour acéder à une image. Or, pour entrer dans un dossier, on n'a besoin que du nom du dossier. Le code sera donc
<img src="images/monImage.jpg" alt="">
Si on décide maintenant de faire la même chose, appeler une image, mais depuis une page HTML qui n'est pas l'index. Cette page se trouvant dans le dossier HTML, le schéma va devenir ceci :
On voit donc qu'il faut alors sortir du dossier "pages" pour entrerdans le dossier "images" et y trouver l'image. Le code est donc :
<img src="../images/monImage.jpg" alt="">
Si vous avez compris ça, vous avez aussi compris les liens <a href="">. La logique est la même, la cible devient simplement une page HTML.
Cette fiche vous a plu ou vous a rendu service ? Pour être informé des prochaines publications, n'hésitez pas à suivre Masson Formation :
