Liens HTML : Créez des hyperliens externes et internes

Introduction

Bienvenue dans le laboratoire sur les liens HTML ! Les hyperliens sont le fondement du World Wide Web, permettant aux utilisateurs de naviguer entre les pages et les ressources. En HTML, les liens sont créés à l'aide de la balise <a> (ancre).

Dans ce laboratoire, vous apprendrez les compétences essentielles pour créer et gérer des liens. Vous commencerez par créer un lien externe de base, puis vous apprendrez à le faire s'ouvrir dans un nouvel onglet du navigateur. Ensuite, vous créerez un lien interne qui sautera vers une autre section de la même page. Enfin, vous ajouterez une infobulle (tooltip) à un lien pour une meilleure expérience utilisateur.

Vous travaillerez avec un fichier index.html dans le WebIDE. Vous pouvez voir vos modifications en direct en passant à l'onglet "Web 8080" dans l'interface LabEx.

Commençons !

Ajouter une balise avec l'attribut href pour un lien externe

Dans cette étape, vous allez créer votre premier hyperlien. La balise <a>, qui signifie "ancre" (anchor), est utilisée pour définir un hyperlien. L'attribut le plus important de l'élément <a> est href, qui spécifie l'URL de destination du lien.

Ajoutons un lien vers le site web de LabEx.

Tout d'abord, ouvrez le fichier index.html depuis l'explorateur de fichiers sur le côté gauche du WebIDE.

Maintenant, trouvez l'élément <h2>Section 1</h2> et ajoutez la balise <a> suivante à l'intérieur de la balise <p> juste après.

<a href="https://labex.io">Visit LabEx</a>

Le corps de votre fichier index.html devrait maintenant ressembler à ceci. Notez le nouveau lien à l'intérieur de la première section.

<body>
  <h1>Welcome to the HTML Links Lab</h1>
  <p>
    This page will be used to practice creating different kinds of HTML links.
  </p>

  <nav>
    <!-- Navigation links will be added here -->
  </nav>

  <div class="section">
    <h2>Section 1</h2>
    <p>
      <a href="https://labex.io">Visit LabEx</a>
    </p>
  </div>

  <div class="section">
    <h2>Section 2</h2>
    <p>
      This is the section we will link to from the top of the page. It is placed
      far down to demonstrate the page jump effect.
    </p>
  </div>
</body>

Après avoir ajouté le code, enregistrez le fichier (Ctrl+S ou Cmd+S). Ensuite, passez à l'onglet "Web 8080" pour voir votre nouveau lien. Cliquer dessus vous mènera à la page d'accueil de LabEx.

Définir l'attribut target sur _blank pour un nouvel onglet

Dans cette étape, vous apprendrez à faire ouvrir un lien dans un nouvel onglet du navigateur. Par défaut, les liens s'ouvrent dans le même onglet. Pour modifier ce comportement, nous utilisons l'attribut target.

Définir target="_blank" demande au navigateur d'ouvrir le document lié dans un nouvel onglet ou une nouvelle fenêtre. C'est une pratique courante pour les liens externes, car elle permet à l'utilisateur de rester sur votre site web tout en lui donnant la possibilité de visiter la ressource externe.

Modifions le lien que vous avez créé à l'étape précédente. Ajoutez l'attribut target="_blank" à la balise <a>.

<a href="https://labex.io" target="_blank">Visit LabEx</a>

La première section de votre fichier index.html mis à jour devrait maintenant contenir ce lien modifié :

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank">Visit LabEx</a>
  </p>
</div>

Enregistrez le fichier et passez à l'onglet "Web 8080". Désormais, lorsque vous cliquerez sur le lien "Visit LabEx", il devrait s'ouvrir dans un nouvel onglet du navigateur, laissant votre onglet d'environnement de laboratoire ouvert.

Créer un lien interne avec href vers un ancrage d'ID

Dans cette étape, nous allons créer un lien interne, également appelé "ancre de page" ou "lien de saut". Ces liens permettent aux utilisateurs de se déplacer vers une partie spécifique de la même page, ce qui est très utile pour les longs documents.

Pour créer un lien interne, vous définissez l'attribut href avec un symbole dièse (#) suivi de l'id de l'élément vers lequel vous souhaitez créer un lien. Par exemple, href="#section-name".

Ajoutons un lien à l'intérieur de l'élément <nav> en haut de notre page qui permettra de sauter vers la "Section 2".

Ajoutez la ligne suivante à l'intérieur de la balise <nav> :

<a href="#section2">Jump to Section 2</a>

La zone de navigation de votre fichier index.html devrait maintenant ressembler à ceci :

<nav>
  <!-- Navigation links will be added here -->
  <a href="#section2">Jump to Section 2</a>
</nav>

Enregistrez le fichier et vérifiez l'onglet "Web 8080". Vous verrez le nouveau lien en haut. Si vous cliquez dessus maintenant, rien ne se passera car nous n'avons pas encore défini l'ancre de destination. Nous le ferons à l'étape suivante.

Ajouter l'attribut id à l'élément pour l'ancrage

Dans l'étape précédente, vous avez créé un lien pointant vers #section2. Maintenant, vous devez créer la destination pour ce lien. Cela se fait en utilisant l'attribut id.

L'attribut id fournit un identifiant unique pour un élément HTML sur une page. La valeur de l'id doit être unique dans le document HTML. Notre lien interne href="#section2" recherchera un élément avec id="section2".

Ajoutons cet id à la balise <h2> pour la Section 2. Trouvez la ligne suivante :

<h2>Section 2</h2>

Et modifiez-la pour inclure l'attribut id :

<h2 id="section2">Section 2</h2>

La deuxième section de votre fichier index.html mis à jour devrait maintenant ressembler à ceci :

<div class="section">
  <h2 id="section2">Section 2</h2>
  <p>
    This is the section we will link to from the top of the page. It is placed
    far down to demonstrate the page jump effect.
  </p>
</div>

Enregistrez le fichier et retournez à l'onglet "Web 8080". Cliquez sur le lien "Jump to Section 2" en haut de la page. Le navigateur devrait maintenant faire défiler la page en douceur jusqu'au titre "Section 2".

Utiliser l'attribut title pour l'infobulle du lien

Dans cette dernière étape, vous apprendrez à ajouter une infobulle à un lien. Une infobulle fournit des informations supplémentaires, non essentielles, et apparaît généralement lorsqu'un utilisateur passe sa souris sur un élément. Cela peut améliorer l'accessibilité et l'expérience utilisateur.

Nous pouvons ajouter une infobulle à n'importe quel élément, y compris un lien, en utilisant l'attribut global title.

Ajoutons un titre descriptif à notre lien externe vers LabEx. Trouvez le lien que vous avez créé lors des deux premières étapes et ajoutez-lui un attribut title.

<a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
  >Visit LabEx</a
>

Votre fichier index.html final devrait maintenant contenir tous les éléments que nous avons ajoutés tout au long de ce laboratoire. La première section ressemblera à ceci :

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
      >Visit LabEx</a
    >
  </p>
</div>

Enregistrez le fichier une dernière fois. Allez dans l'onglet "Web 8080" et passez votre souris sur le lien "Visit LabEx". Une petite boîte devrait apparaître avec le texte "Go to the LabEx homepage".

Résumé

Félicitations pour avoir terminé ce laboratoire ! Vous avez appris les bases de la création et de la personnalisation des liens en HTML.

Dans ce laboratoire, vous avez pratiqué comment :

Utiliser la balise <a> avec l'attribut href pour créer des liens externes.
Utiliser l'attribut target="_blank" pour ouvrir les liens dans un nouvel onglet.
Créer des ancres de page internes en utilisant href="#id" pour la navigation au sein d'une même page.
Utiliser l'attribut id pour définir la destination d'un lien interne.
Ajouter des infobulles informatives à vos liens avec l'attribut title pour une meilleure expérience utilisateur.

Ces compétences sont essentielles pour construire des sites web navigables et conviviaux. Continuez à pratiquer pour devenir plus compétent en HTML !