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>

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>

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.

  4. 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.

Une solution

Dans index.html :

<!DOCTYPE html>
<html>
<head>
    <title>Accueil</title>
</head>
<body>
    <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>
</body>
</html>

Dans contact.html :

<!DOCTYPE html>
<html>
<head>
    <title>Contact</title>
</head>
<body>
    <h1>Contact</h1>
    <p>Vous pouvez me joindre à cette adresse email : monemail@example.com</p>
</body>
</html>

Dans cette solution, nous avons utilisé la balise <a> avec l'attribut href pour créer un lien de la page d'accueil vers la page de contact.