Accueil

Formation

Nano plate-forme
Programmation
Automation
HTML
1- Préambule
2- Introduction
3- Exercice
4- Page Web ?
5- Texte
6- Images
7- Couleurs
8- Répertoires
9- Hyperliens
10- Tableaux
11- Formulaires
12- Cadres
PHP

Sénégal
Asbl
Sur le chemin...
Téléchargement
Dernière mise à jour : le vendredi 2 mai 2003

Les répertoires

Quand un site se limite à trois pages et cinq images, cela ne pose aucun problème de tout stocker dans le même répertoire. Les choses sont alors très faciles, il suffit de donner les références d'une image en citant simplement son nom de fichier, et l'image sera incluse sans problème dans la page.

Quand un site devient plus volumineux et compliqué (comme celui que vous allez réaliser) il est indispensable de travailler avec des répertoires qui regrouperont tous les éléments de mêmes types:

  • un répertoire pour toutes les images
  • un répertoire par langue
  • ... (à vous de voir dans votre analyse de conception)

Cette architecture va compliquer la recherche des éléments nécessaires comme:

  • la recherche des fichiers pour l'affichage des images
  • la recherche des cibles lors de l'activation d'hyperliens (voir chapitre suivant: Les hyperliens)

puisqu'il faudra aller les chercher dans des répertoires différents.

Nous allons envisager plusieurs cas au niveau de la recherche des images afin de voir comment procéder.

Les mêmes principes seront applicables directement au problème des hyperliens.

Pour accéder à d'autres fichiers à partir d'une page, il existe deux types de liens:

  • Les liens absolus, qui auront pour référence la racine du site
    • Un lien absolu commencera toujours par une / (slash)
  • Les liens relatifs, qui auront pour référence la page à partir de laquelle on veut aboutir à la "cible".
    • Un lien relatif ne commencera jamais par une / (slash)

Voici des exemples graphiques afin de mieux comprendre ces principes importants.

Les liens absolus

Premier exemple: la page "page1.html" qui se trouve dans le fichier "Intro" fait appel à l'image "image.jpg" qui se trouve dans le répertoire "FR". Quelle référence faut-il signaler en SRC (source) pour que l'image soit intégrée correctement à la page?


En lien absolu, l'insertion de l'image sera réalisée par la balise <IMG SRC="/FR/image.jpg">

La première / signale qu'on part de la racine du site comme référence, qu'on "descend" dans le répertoire "FR" et que là se trouve le fichier recherché s'appelant "image.jpg".

Comparez ceci avec le premier exemple du point "Liens relatifs"


Second exemple: la page "page1.html" qui se trouve dans le fichier "FR" fait appel à l'image "image.jpg" qui se trouve dans le répertoire "Intro". Quelle référence faut-il signaler en SRC (source) pour que l'image soit intégrée correctement à la page?


En lien absolu, l'insertion de l'image sera réalisée par la balise <IMG SRC="/FR/Intro/image.jpg">

La première / signale qu'on part de la racine du site comme référence, qu'on "descend" dans le répertoire "FR", puis qu'on "descend" dans le répertoire "Intro" et que là se trouve le fichier recherché s'appelant "image.jpg".

Comparez ceci avec le second exemple du point "Liens relatifs"


Troisième exemple: la page "page1.html" qui se trouve dans le fichier "Intro" fait appel à l'image "image.jpg" qui se trouve dans le répertoire "Photos". Quelle référence faut-il signaler en SRC (source) pour que l'image soit intégrée correctement à la page?


En lien absolu, l'insertion de l'image sera réalisée par la balise <IMG SRC="/Photos/image.jpg">

La première / signale qu'on part de la racine du site comme référence, qu'on "descend" dans le répertoire "Photos" et que là se trouve le fichier recherché s'appelant "image.jpg".

Comparez ceci avec le troisème exemple du point "Liens relatifs"

Les liens relatifs

Premier exemple: la page "page1.html" qui se trouve dans le fichier "Intro" fait appel à l'image "image.jpg" qui se trouve dans le répertoire "FR". Quelle référence faut-il signaler en SRC (source) pour que l'image soit intégrée correctement à la page?


En lien relatif, l'insertion de l'image sera réalisée par la balise <IMG SRC="../image.jpg">

L'absence de / en début de lien signale qu'on part du répertoire où se trouve la page comme référence, qu'on "remonte" d'un répertoire (on se trouve à ce moment dans le répertoire "FR") et que là se trouve le fichier recherché s'appelant "image.jpg".

Comparez ceci avec le premier exemple du point "Liens absolus"


Second exemple: la page "page1.html" qui se trouve dans le fichier "FR" fait appel à l'image "image.jpg" qui se trouve dans le répertoire "Intro". Quelle référence faut-il signaler en SRC (source) pour que l'image soit intégrée correctement à la page?


En lien relatif, l'insertion de l'image sera réalisée par la balise <IMG SRC="Intro/image.jpg">

L'absence de la / signale qu'on part du répertoire où se trouve la page ("FR") comme référence, puis qu'on "descend" dans le répertoire "Intro" et que là se trouve le fichier recherché s'appelant "image.jpg".

Comparez ceci avec le second exemple du point "Liens absolus"


Troisième exemple: la page "page1.html" qui se trouve dans le fichier "Intro" fait appel à l'image "image.jpg" qui se trouve dans le répertoire "Photos". Quelle référence faut-il signaler en SRC (source) pour que l'image soit intégrée correctement à la page?


En lien relatif, l'insertion de l'image sera réalisée par la balise <IMG SRC="../../Photos/image.jpg">

L'absence de / signale qu'on part du répertoire de la page ("Intro") comme référence, qu'on "remonte" d'un répertoire, puis qu'on "remonte" encore d'un répertoire, que de là, on "descend" dans le répertoire "Photos" et que là se trouve le fichier recherché s'appelant "image.jpg".

Comparez ceci avec le troisème exemple du point "Liens absolus"

Quels liens utiliser?

A part quelques cas exceptionnels, utilisez TOUJOURS les liens RELATIFS.

Vous devez pouvoir tester votre site sur votre ordinateur. A ce niveau, les liens absolus feront référence à la racine de votre disque dur alors que dans le site "uploadé", ces mêmes liens absolus feront référence à la racine du site, ce qui va changer toutes les données. Tous les liens seront à corriger.

D'autre part, il se peut qu'un jour, vous ayez à modifier la structure de votre site en "reculant" ou en "avançant" tout un groupe de répertoires dans la hiérarchie du site. En lien absolus, tous les liens seront à refaire. En liens relatifs, s'ils sont bien conçus, il y a beaucoup de chances pour qu'il n'y ait rien à modifier, et sûrement pas pour tous les répertoires qui sont "en dessous" dans le groupe de répertoires que vous "déménagez".

Voilà, comme ça vous savez ce qui vous reste à faire.

◊ ◊ ◊

© Rupert Meurice de Dormale 2003