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.htmlet 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>
Ajout de liens de navigation à l'aide de la balise
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>
Ajout de liens de navigation à l'aide de la balise
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>
Mise en forme du menu de navigation
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ésumé
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.
