LabEx
Se connecterInscription gratuite

Liens de navigation HTML

HTMLHTMLBeginner
Pratiquer maintenant

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

La balise HTML <nav> est un élément important pour créer des liens de navigation sur un site web. Dans ce laboratoire, vous allez apprendre à utiliser la balise <nav> pour créer un menu de navigation sur votre site web.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Création d'une page HTML de base

Tout d'abord, créons une nouvelle page HTML nommée index.html et ajoutons la structure HTML de base.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body></body>
</html>

Maintenant, créons un menu de navigation à l'aide de la balise HTML <nav>. Créez un élément <nav> à l'intérieur de la balise <body>.

<body>
  <nav></nav>
</body>

Ensuite, ajoutez quelques liens de navigation à l'intérieur de la balise <nav> à l'aide de la balise HTML <a>.

<body>
  <nav>
    <a href="#">Accueil</a>
    <a href="#">À propos</a>
    <a href="#">Services</a>
    <a href="#">Contactez-nous</a>
  </nav>
</body>

Pour rendre le menu de navigation plus visuellement attrayant, ajoutons-y un peu de CSS. Ajoutez les styles suivants à votre HTML :

<head>
  <meta charset="UTF-8" />
  <title>My Website</title>

  <style>
    nav {
      background-color: #333;
      overflow: hidden;
    }

    a {
      float: left;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    a:hover {
      background-color: #ddd;
      color: black;
    }
  </style>
</head>

Page finale

Votre page index.html finale devrait ressembler à ceci :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>

    <style>
      nav {
        background-color: #333;
        overflow: hidden;
      }

      a {
        float: left;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      a:hover {
        background-color: #ddd;
        color: black;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Accueil</a>
      <a href="#">À propos</a>
      <a href="#">Services</a>
      <a href="#">Contactez-nous</a>
    </nav>
  </body>
</html>

Récapitulatif

Dans ce laboratoire, vous avez appris à utiliser la balise HTML <nav> pour créer un menu de navigation sur votre site web. La création de menus de navigation à l'aide de la balise <nav> et leur stylisation avec CSS peut aider les utilisateurs à naviguer facilement sur votre site web et à le rendre plus visuellement attrayant.

Connexe HTML Cours
HTML pour les débutants

HTML pour les débutants

HTML
Débutant
Démarrage rapide avec HTML

Démarrage rapide avec HTML

HTML
Débutant
Construire une application web Tic-Tac-Toe

Construire une application web Tic-Tac-Toe

HTMLCSSJavaScript
Débutant