Liens relatifs
Un chemin relatif est une description de l'emplacement d'un fichier à atteindre depuis l'emplacement du fichier actuel. En pratique :
- Utiliser un lien absolu, c'est comme indiquer une adresse sur une lettre postale. Le facteur va à cette adresse (peu importe comment) et il dépose le courrier lorsque cette adresse est habitée (ou renvoie le courrier s'il n'y a personne).
- Utiliser un lien relatif, c'est indiquer à une personne dans la rue comment se rendre à une adresse. On peut lui dire d'aller tout droit, puis de tourner à gauche dans cette rue, à droite dans une autre rue, etc.
Pour naviguer dans son propre site, il faut utiliser une URL relative. En organisant correctement ses dossiers et ses fichiers, on peut être certain que les liens hypertextes créés resteront valables quel que soit le serveur sur lequel le site internet est hébergé.
Exercice n°1 : Bien se repérer pour bien naviguer
Cet exercice est à réaliser avec un papier et un crayon !
Il faudra utiliser l'arborescence du site affiché ci-contre pour visualiser les passages d'un fichier à l'autre, les remontées ou descentes d'un dossier à un autre...
Remplacer chaque point d'interrogation par le lien relatif qui convient.
Fichier-cible stocké dans le même répertoire que le fichier-source
Je suis en train de consulter le fichier page1.html.
Quelle balise et quel lien permettent d'afficher la page contenue dans le fichier page2.html (qui est dans le
même dossier que page1.html) ?
<?>lien vers la page 2</?>
Fichier-cible stocké dans un sous-répertoire du répertoire contenant le fichier-source
Je suis en train de consulter le fichier accueil.html.
Quel lien permet d'afficher la page contenue dans le fichier page1.html qui appartient au dossier
autres_pages_du_site (qui est dans le même répertoire que accueil.html) ?
<?>lien vers la page 1</?>
Solution ?
Pour descendre dans un dossier, on utilise le symbole / après le nom du dossier.
Fichier-cible stocké dans un autre répertoire que le fichier-source
Je suis en train de consulter le fichier page2.html.
Quel lien permet d'afficher l'image Une_image.png dans cette page ? En d'autres termes, comment remonter d'un
répertoire puis aller dans le dossier [images_du_site] afin d'atteindre ce fichier image ?
<img src="liens_internes.html?">
Solution ?
Pour remonter d'un dossier, on utilise le symbole ../.
Exercice n°2 : Plusieurs images
L'image ci-contre présente un extrait d'une arborescence de site.
Compléter le code de la page exercice_02.html afin que les images dont le nom commence par Liens_internes s'affichent les unes à côté des autres.
Attention à la casse (minuscules/majuscules).
Exercice n°4 : Encore des favoris !
- Chercher sur internet une image (libre de droits !) puis enregistrer cette image dans son répertoire personnel.
- Reprendre le fichier
favoris.html, et afficher l'image téléchargée précédemment après la liste des sites utiles.
Travail originel CC-BY-NC-SA : Nicolas Buyle-Bodin, Jean-Manuel Meny et Mcikaël Bordonaro. Autres modifications par Cédric Frayssinet et Maxime Chourré