Aller au contenu principal

Les liens hypertextes

Les liens hypertextes et les chemins relatifs

Notions théoriques​

Une des fonctionnalités principales du Web est la possibilité de créer des liens entre différentes pages ou ressources.

La balise à connaître​

  • <a> : Crée un lien hypertexte. Utilisez l'attribut href pour spécifier l'URL de la ressource vers laquelle vous voulez pointer.

En HTML, nous utilisons la balise <a> pour créer des liens hypertextes.

Un lien peut pointer :

  • vers une autre page de votre site,
  • vers une page d'un autre site,
  • ou vers une autre ressource comme une image ou un document PDF.
astuce

Le lien est défini par l'attribut href (hypertext reference) de la balise <a>.

Les 2 types de chemins​

Il existe 2 types de chemins que vous pouvez utiliser dans l'attribut href :

  • Les chemins absolus :

    Ils spécifient l'URL complète de la ressource.

    Par exemple, href="https://www.example.com/page.html" pointe vers la page page.html sur le site www.example.com.

  • Les chemins relatifs :

    Ils spécifient l'emplacement de la ressource par rapport à la page actuelle.

    Par exemple, si vous avez une page index.html et une page contact.html dans le même répertoire, vous pouvez créer un lien de index.html à contact.html avec href="contact.html".

info

Exemple d'un chemin absolu et d'un chemin relatif :

<a href="https://www.example.com">Ceci est un lien vers un site externe</a>
<a href="contact.html">Ceci est un lien vers une autre page de mon site</a>
Bonne pratique - Chemins relatifs

Utilisez des chemins relatifs pour les liens internes (entre pages du même site) — cela évite les problèmes lors du changement de domaine ou d'hébergement.

Exemple pratique​

Imaginons que vous voulez créer un petit site pour présenter votre jeu vidéo préféré.

Vous avez 2 pages :

  • une page d'accueil (index.html)
  • et une page de contact (contact.html).

Vous pouvez utiliser la balise <a> pour créer un lien de l'accueil vers la page de contact.

Dans index.html :

<h1>Bienvenue sur mon site sur The Legend of Zelda</h1>
<p><a href="contact.html">Contactez-moi</a> si vous voulez discuter de ce jeu fantastique !</p>

Dans contact.html :

<h1>Contact</h1>
<p>Vous pouvez me joindre à cette adresse email : monemail@example.com</p>
Bonne pratique - Liens externes

Pour les liens externes, ajoutez target="_blank" pour ouvrir dans un nouvel onglet, et rel="noopener" pour la sécurité.

Test de mémorisation/compréhension​


Quelle balise est utilisée pour créer un lien hypertexte ?


Quel attribut est utilisé pour spécifier l'URL du lien ?


Quelle est la différence entre un chemin absolu et un chemin relatif ?


TP pour réfléchir et résoudre des problèmes​

  1. Dans le répertoire tp_jeu_prefere (que vous avez créé dans votre répertoire "Documents") créez le fichier contact.html.

  2. Votre mission consiste à organiser votre site en 2 pages : une page d'accueil et une page de contact :

  3. Créez un nouveau fichier contact.html pour la page de contact. Dans cette page, indiquez une adresse email où les visiteurs peuvent vous contacter.

  1. Dans votre fichier index.html ajoutez un lien vers la page de contact.

    La page d'accueil doit contenir un lien vers la page de contact.

Bonne pratique - Liens relatifs en local

Toujours tester les liens relatifs en ouvrant le fichier depuis son répertoire réel — un lien valide en local peut échouer si les fichiers ne sont pas au bon endroit.

Une solution