Créer la section d'en-tête en HTML

Introduction

Dans ce laboratoire, nous allons apprendre à créer la section d'en-tête d'une page HTML à l'aide de la balise <header>. La section d'en-tête d'une page web contient généralement le logo du site web, le menu de navigation, la barre de recherche, etc. La balise <header> est un élément de niveau de bloc utilisé pour regrouper d'autres éléments HTML ensemble pour créer la section d'en-tête d'une page 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.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 86%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Configuration du document HTML

Nous allons commencer par créer un nouveau fichier HTML nommé index.html. Dans index.html, nous allons ajouter la structure de base d'un document HTML en utilisant le code suivant :

<!doctype html>
<html>
  <head>
    <title>Tutoriel sur l'en-tête HTML</title>
  </head>
  <body></body>
</html>

Création de la section d'en-tête

Nous allons créer la section d'en-tête de la page HTML à l'aide de la balise <header>. Dans la balise <body>, ajoutez le code suivant :

<header>
  <h1>Bienvenue sur mon site web</h1>
  <nav>
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">À propos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Dans le code ci-dessus, nous avons ajouté une balise <h1> pour définir le titre de la section d'en-tête et une balise <nav> pour définir le menu de navigation. Dans la balise <nav>, nous avons ajouté une liste non ordonnée <ul> et trois éléments de liste <li> avec les balises d'ancrage <a> correspondantes pour créer le menu de navigation.

Ajout de styles à la section d'en-tête

Pour ajouter des styles à la section d'en-tête, nous allons créer un fichier CSS appelé style.css. Dans style.css, nous allons écrire le code suivant :

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav li a {
  color: #fff;
  display: block;
  padding: 0.5em;
  text-decoration: none;
}

Dans le code ci-dessus, nous avons ajouté des styles à la balise <header> pour définir la couleur d'arrière-plan, la couleur de texte et le padding. Nous avons également ajouté des styles à la balise <nav> et ses éléments enfants pour définir les styles du menu de navigation.

Liaison du fichier CSS

Pour lier le fichier CSS au fichier HTML, ajoutez le code suivant à l'intérieur de la balise <head> :

<link rel="stylesheet" href="style.css" />

Enregistrez les modifications dans index.html et ouvrez-le dans un navigateur web. Vous devriez voir la sortie suivante :

HTML Header Example

Résumé

Félicitations! Vous avez réussi à créer une section d'en-tête HTML de base à l'aide de la balise <header>. Dans ce laboratoire, vous avez appris à créer la section d'en-tête d'une page HTML, à lui ajouter des styles et à lier un fichier CSS au document HTML. La section d'en-tête est une partie essentielle de toute page web car elle fournit le contenu introductif et le menu de navigation aux visiteurs.

Section d'en-tête HTML