Maîtrise de la balise HTML <div> et de la mise en forme CSS

Introduction

Dans ce laboratoire, vous allez apprendre à utiliser la balise HTML <div> pour diviser une page web en différentes sections ou parties. Vous allez également apprendre à appliquer le CSS aux éléments regroupés à l'aide de la balise <div>.

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 de la structure de la page web

Ouvrez le fichier index.html dans votre éditeur de texte.

Tout d'abord, créez la structure de base du fichier HTML en ajoutant la déclaration de doctype, les balises <html>, <head> et <body>.

<!doctype html>
<html>
  <head>
    <title>Ma page web</title>
  </head>
  <body></body>
</html>

Ajout de l'en-tête

Dans cette étape, nous allons ajouter la section d'en-tête à la page web en utilisant la balise <div>.

À l'intérieur de la balise <body>, ajoutez une balise <div> avec le nom de classe "header".

<div class="header"></div>

Ajoutez du contenu à l'intérieur de la balise <div> pour représenter la section d'en-tête. Par exemple :

<div class="header">
  <h1>Bienvenue sur mon site web</h1>
</div>

Ajout des sections de barre latérale et de contenu principal

Ensuite, nous allons ajouter les sections de barre latérale et de contenu principal à la page web en utilisant la balise <div>.

À l'intérieur de la balise <body>, ajoutez une autre balise <div> avec le nom de classe "container".

<div class="container"></div>

À l'intérieur de la balise <div> "container", ajoutez deux autres balises <div> - l'une pour la barre latérale et l'autre pour le contenu principal. Donnez-lui respectivement les noms de classe "sidebar" et "main-content".

<div class="container">
  <div class="sidebar">
    <!-- ajoutez le contenu de la barre latérale -->
  </div>
  <div class="main-content">
    <!-- ajoutez le contenu principal ici -->
  </div>
</div>

Ajoutez du contenu à l'intérieur des balises <div> pour représenter les sections de barre latérale et de contenu principal. Par exemple :

<div class="container">
  <div class="sidebar">
    <h2>A propos de moi</h2>
    <p>Bonjour, je m'appelle John et je suis un développeur web.</p>
  </div>
  <div class="main-content">
    <h2>Mon dernier projet</h2>
    <p>Découvrez mon dernier projet web!</p>
  </div>
</div>

Ajout du pied de page

Enfin, nous allons ajouter la section du pied de page à la page web en utilisant la balise <div>.

À l'intérieur de la balise <body>, ajoutez une autre balise <div> avec le nom de classe "footer".

<div class="footer"></div>

Ajoutez du contenu à l'intérieur de la balise <div> pour représenter la section du pied de page. Par exemple :

<div class="footer">
  <p>&copy; 2021 Mon site web. Tous droits réservés.</p>
</div>

Mise en forme de la page web

Maintenant que nous avons créé la structure de base de la page web en utilisant la balise <div>, nous pouvons appliquer des styles CSS pour rendre la page plus attrayante.

Ouvrez le fichier style.css dans votre éditeur de texte, ou créez un nouveau fichier nommé style.css et reliez-le au fichier index.html à l'aide d'une balise <link> à l'intérieur de la section <head>.

<!doctype html>
<html>
  <head>
    <title>Ma page web</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

Dans le fichier style.css, ajoutez les styles suivants aux différents noms de classe que nous avons utilisés précédemment :

/* Styles de l'en-tête */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Styles du conteneur */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* Styles de la barre latérale */
.sidebar {
  width: 30%;
  padding: 10px;
  background-color: #f2f2f2;
}

/* Styles du contenu principal */
.main-content {
  width: 65%;
  padding: 10px;
  background-color: #fff;
}

/* Styles du pied de page */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

Aperçu de la page web

Maintenant que nous avons créé la structure de la page web et appliqué des styles CSS à l'aide de la balise <div>, voyons comment la page web se présente dans un navigateur web.

Enregistrez les fichiers index.html et style.css.
Ouvrez le fichier index.html dans un navigateur web pour voir la page web.

Vous devriez voir une page web avec un en-tête, une barre latérale, un contenu principal et une section de pied de page, toutes bien stylisées avec CSS.

Résumé

Dans ce laboratoire, vous avez appris à utiliser la balise HTML <div> pour diviser une page web en différentes sections ou parties. Vous avez également appris à appliquer des styles CSS aux différentes sections en utilisant les noms de classe attribués à celles-ci. Grâce à ces techniques, vous pouvez créer des pages web plus complexes et visuellement attrayantes.

Balise HTML <div> et mise en forme CSS