Liez vos ressources !

Liens internes

Le dossier «bar» situé dans le répertoire «bar-starbuzz.zip» que vous venez de télécharger contient les fichiers «bar.html», «cocktails.html», «itineraire.html» ainsi que quelques images. Ouvrez le fichier «bar.html» dans votre éditeur et faites les modifications qui sont surlignées ci-dessous. Une fois ces modifications effectuées, enregistrez le fichier, ouvrez-le dans votre navigateur et cliquez sur les différents liens présents. Vous devriez obtenir le résultat présenté sur l'image de droite ci-dessous:

Comme nous pouvons le constater avec l'exemple ci-dessus, un lien cliquable est contenu dans un élément <a>. L'attribut href de cet élément indique au navigateur la destination du lien, c'est-à-dire la page à charger lors d'un clic.

Chemins relatifs

Avant de poursuivre la création de nouvelles pages HTML, pensez à organiser votre site. Jusqu'à présent, nous avons mis tous les fichiers HTML et les images dans un seul et même dossier. Vous vous rendrez compte que même pour un site de taille modeste, il convient de stocker les pages, les images et autres ressources dans plusieurs dossiers. Aussi, dans un premier temps, nous aimerions que vous créiez la structure de dossiers et de fichiers telle qu'expliquée par l'image de droite ci-dessous:

En chargeant la page «bar.html» nous remarquons que la nouvelle structure du site engendre quelques problèmes:

Jusqu'à présent, les valeurs de l'attribut href pointaient sur des fichiers situés dans le même dossier que celui dans lequel se trouvait le fichier «bar.html». Néanmoins, les sites sont généralement un peu plus complexes et il faut savoir faire pointer cet attribut vers des pages situées dans d'autres dossiers. Or, tracer le chemin d'accès à la page destination depuis la page en cours revient à descendre ou remonter d'un niveau ou deux de dossiers dans l'arborescence du site. Quel que soit le sens, le résultat obtenu est un chemin relatif par rapport à la page en cours que nous pouvons mettre comme valeur de l'attribut href.

Pour construire vos liens internes avec chemin relatif, il suffit de commencer à la page sur laquelle se situe le lien puis de tracer un chemin qui passe par les dossiers, jusqu'à trouver le fichier vers lequel pointe le lien. A ce dessein, deux opérations doivent pouvoir être réalisée:

• Descendre dans un sous-dossier
  Pour réparer le lien «cocktails» de la page «bar.html», il s'agit tout d'abord d'identifier le chemin menant de l'origine à la destination en traversant les différents sous-dossiers comme l'indique l'image de gauche ci-dessous. Une fois le chemin établi, il suffit de le faire savoir au navigateur sous une forme qu'il comprendra. La syntaxe utilisée consiste à séparer chaque sous-dossier parcouru à l'aide du séparateur «/» comme l'indique l'image de droite ci-dessous:
  
  

  Identifier le chemin descendant de l'origine à la destination

  

  Parcourir les sous-dossiers à l'aide du séparateur «/»

• Remonter vers le dossier parent
  Pour réparer le lien «Retour au Bar» de la page «itineraire.html», il s'agit tout d'abord d'identifier le chemin menant de l'origine à la destination en remontant au dossier parent comme l'indique l'image de gauche ci-dessous. Une fois le chemin établi, il suffit de le faire savoir au navigateur sous une forme qu'il comprendra. La syntaxe utilisée pour remonter au dossier parent consiste à utiliser «..», comme l'indique l'image de droite ci-dessous:
  
  

  Identifier le chemin montant de l'origine à la destination

  

  Remonter au dossier parent à l'aide de «..»

Remarquons que l'attribut src de l'élément <img> prend comme valeur le chemin relatif de l'image à insérer de la même manière que le fait l'attribut href de l'élément <a>. Nous y reviendrons bientôt.