Créer et styliser des éléments div en HTML

Introduction

Dans ce laboratoire (lab), les participants exploreront les concepts fondamentaux de la création et de la mise en forme des éléments <div> en HTML, en se concentrant sur la compréhension de leur objectif, de leur structure et de leur polyvalence dans la conception de pages web. Le laboratoire guide les apprenants à travers un parcours complet de l'utilisation des éléments div, en commençant par la création de base et en progressant vers des techniques de mise en forme avancées.

Les participants apprendront comment les éléments div servent de conteneurs essentiels pour organiser et regrouper le contenu web, découvriront leurs caractéristiques de niveau bloc et pratiqueront des techniques pour personnaliser les tailles, le positionnement et l'apparence visuelle. En travaillant sur des exemples pratiques et des exercices pratiques, les étudiants acquerront des compétences pratiques dans l'utilisation des éléments div pour créer des mises en page de pages web logiques et bien structurées qui améliorent à la fois la conception et la fonctionnalité.

Comprendre l'objectif des éléments Div

Dans cette étape, vous allez apprendre l'objectif fondamental des éléments <div> en HTML et comment ils sont utilisés pour structurer et organiser le contenu des pages web.

Un élément <div> (division) est un conteneur utilisé pour regrouper et organiser d'autres éléments HTML. C'est un élément de niveau bloc polyvalent qui aide les développeurs à créer des sections logiques et à appliquer des styles à des groupes de contenu. Imaginez un <div> comme une boîte qui peut contenir d'autres éléments et aider à structurer la mise en page de votre page web.

Créons un simple fichier HTML pour démontrer l'utilisation de base des éléments <div>. Ouvrez le WebIDE et créez un nouveau fichier appelé div-example.html dans le répertoire ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Element Example</title>
  </head>
  <body>
    <div>
      <h1>Welcome to My Website</h1>
      <p>This is a paragraph inside a div element.</p>
    </div>

    <div>
      <h2>About Section</h2>
      <p>Here's some information about our project.</p>
    </div>
  </body>
</html>

Dans cet exemple, nous avons utilisé deux éléments <div> pour créer des sections distinctes sur la page. Chaque <div> contient un en-tête et un paragraphe, montrant comment les div peuvent regrouper des contenus liés.

Caractéristiques clés des éléments <div> :

Ce sont des éléments de niveau bloc, ce qui signifie qu'ils commencent généralement sur une nouvelle ligne.
Ils peuvent contenir d'autres éléments HTML.
Ils sont souvent utilisés à des fins de mise en page et de style.
Ils n'ont pas de représentation visuelle inhérente sans CSS.

Exemple de sortie lorsqu'il est consulté dans un navigateur web :

Créer un div de base avec un contenu texte

Dans cette étape, vous allez apprendre à créer un élément div et à y ajouter un contenu texte. En vous appuyant sur l'étape précédente, nous allons explorer comment ajouter un texte significatif à l'intérieur des éléments div.

Ouvrez le WebIDE et modifiez le fichier div-example.html dans le répertoire ~/project pour inclure un contenu texte plus détaillé :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Text Content Example</title>
  </head>
  <body>
    <div>
      <h1>Welcome to Our Learning Platform</h1>
      <p>This div contains an introduction to our website.</p>
      <p>We provide interactive learning experiences for web development.</p>
    </div>

    <div>
      <h2>Course Highlights</h2>
      <p>Our courses cover various web technologies:</p>
      <ul>
        <li>HTML Fundamentals</li>
        <li>CSS Styling</li>
        <li>JavaScript Interactivity</li>
      </ul>
    </div>
  </body>
</html>

Dans cet exemple, nous avons démontré plusieurs façons d'ajouter un contenu texte aux éléments div :

En utilisant des balises d'en-tête (<h1>, <h2>)
En ajoutant des paragraphes avec les balises <p>
En incluant une liste non ordonnée avec les balises <ul> et <li>

Chaque div peut contenir plusieurs types de texte et d'éléments HTML. Cette flexibilité vous permet de créer un contenu structuré et organisé sur votre page web.

L'exemple de sortie lorsqu'il est consulté dans un navigateur web ressemblerait à ceci :

Ajouter une couleur de fond à un élément Div

Dans cette étape, vous allez apprendre à ajouter des couleurs de fond aux éléments div en utilisant des styles CSS en ligne. Les couleurs de fond aident à créer une séparation visuelle et à améliorer la conception de votre page web.

Ouvrez le fichier div-example.html dans le répertoire ~/project et modifiez-le pour inclure des couleurs de fond :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Background Color Example</title>
    <style>
      .intro-section {
        background-color: #f0f0f0;
        padding: 15px;
      }

      .courses-section {
        background-color: #e6f2ff;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div class="intro-section">
      <h1>Welcome to Our Learning Platform</h1>
      <p>This section has a light gray background.</p>
      <p>Background colors help create visual hierarchy.</p>
    </div>

    <div class="courses-section">
      <h2>Course Highlights</h2>
      <p>This section has a light blue background.</p>
      <ul>
        <li>HTML Fundamentals</li>
        <li>CSS Styling</li>
        <li>JavaScript Interactivity</li>
      </ul>
    </div>
  </body>
</html>

Dans cet exemple, nous avons démontré deux façons d'ajouter des couleurs de fond :

En utilisant la balise style CSS en ligne dans la section <head>
En créant des classes CSS avec des couleurs de fond spécifiques
En ajoutant un padding pour créer un espace à l'intérieur du div

Points clés concernant les couleurs de fond :

Utilisez des codes de couleur hexadécimaux (par exemple, #f0f0f0)
Vous pouvez utiliser des noms de couleur ou des valeurs RGB
La propriété background-color définit le fond
Le padding ajoute de l'espace à l'intérieur du div

Exemple de rendu visuel :

Explorer les caractéristiques de niveau bloc des éléments Div

Dans cette étape, vous allez apprendre les caractéristiques de niveau bloc des éléments div et leur comportement dans la mise en page des pages web. Les éléments div sont uniques en ce qu'ils permettent de créer des sections de contenu distinctes qui commencent automatiquement sur une nouvelle ligne.

Créez un nouveau fichier appelé block-level-example.html dans le répertoire ~/project avec le contenu suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Block-Level Characteristics</title>
    <style>
      .block-example {
        border: 2px solid blue;
        margin: 10px 0;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="block-example">
      <h2>First Div Block</h2>
      <p>
        This is the first div element. Notice how it takes up the full width of
        its container.
      </p>
    </div>

    <div class="block-example">
      <h2>Second Div Block</h2>
      <p>
        This div starts on a new line, even though the previous div is right
        above it.
      </p>
    </div>

    <p>
      This is a paragraph outside the divs to show the block-level behavior.
    </p>
  </body>
</html>

Caractéristiques clés de niveau bloc des éléments div :

Ils commencent toujours sur une nouvelle ligne.
Ils occupent toute la largeur de leur conteneur parent.
Ils créent un « bloc » de contenu qui peut être facilement stylisé et positionné.

Pour démontrer la nature de niveau bloc, nous avons ajouté :

Une bordure bleue pour visualiser les limites de chaque div.
Des marges et un remplissage (padding) pour montrer l'espacement.
Plusieurs div pour illustrer leur empilement vertical.

L'exemple de rendu visuel ressemblerait à ceci :

Personnaliser la taille et le positionnement des Div

Dans cette étape, vous allez apprendre à personnaliser la taille et le positionnement des éléments div en utilisant des propriétés CSS. Cela vous aidera à créer des mises en page web plus complexes et visuellement attrayantes.

Créez un nouveau fichier appelé div-sizing-example.html dans le répertoire ~/project avec le contenu suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Sizing and Positioning</title>
    <style>
      .container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
      }

      .box {
        width: 300px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
        padding: 15px;
        border: 2px solid #333;
      }

      .inline-boxes {
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Div Sizing and Positioning Example</h1>

      <div class="box">
        <h2>Fixed Size Div</h2>
        <p>This div has a fixed width of 300px and height of 200px.</p>
      </div>

      <div class="inline-boxes">
        <div class="box">
          <h2>Inline Box 1</h2>
          <p>Flexbox allows divs to sit side by side.</p>
        </div>
        <div class="box">
          <h2>Inline Box 2</h2>
          <p>Divs can be easily positioned horizontally.</p>
        </div>
      </div>
    </div>
  </body>
</html>

Propriétés CSS clés pour personnaliser la taille et le positionnement des div :

width et height : Contrôlent la taille du div.
margin : Ajoute de l'espace autour du div.
padding : Ajoute de l'espace à l'intérieur du div.
display: flex : Crée des mises en page flexibles.
max-width : Limite la largeur maximale d'un div.
margin: 0 auto : Centre un div horizontalement.

L'exemple de rendu visuel ressemblerait à ceci :

Résumé

Dans ce laboratoire (lab), les participants ont exploré l'utilisation et le style fondamentaux des éléments <div> en HTML, en se concentrant sur la compréhension de leur rôle dans la structure et l'organisation des pages web. Le laboratoire a guidé les apprenants dans la création de conteneurs div de base, l'ajout de contenu texte, l'application de couleurs de fond et l'examen des caractéristiques de niveau bloc de ces éléments HTML polyvalents.

Les participants ont appris comment les div servent de conteneurs flexibles pour regrouper le contenu lié, peuvent être utilisés pour créer des sections logiques au sein d'une page web et constituent une base pour la mise en page et le style. En pratiquant des exemples pratiques, les apprenants ont acquis des compétences pratiques dans l'utilisation des éléments div pour structurer le contenu web et appliquer des propriétés CSS de base, améliorant ainsi leur compréhension de la composition des pages HTML et des techniques de conception.