Créer des listes HTML avec différents styles

Introduction

Dans ce laboratoire (LabEx), les participants exploreront la création et la mise en forme de listes HTML, en se concentrant sur différents types de listes et leurs attributs. Le laboratoire guide les apprenants dans la construction de diverses structures de listes, y compris les listes ordonnées avec numérotation numérique et alphabétique, les listes non ordonnées avec des styles de marqueurs personnalisés et les listes de description avec plusieurs entrées.

Les participants commenceront par configurer une structure de document HTML5 standard et construiront progressivement des exemples de listes complexes, apprenant à utiliser des balises telles que <ol>, <ul>, <li> et <dl> pour créer des mises en page de listes sémantiques et esthétiquement attrayantes. En expérimentant avec les attributs des listes et les structures de listes imbriquées, les étudiants acquerront des compétences pratiques dans la conception de listes HTML et comprendront comment améliorer l'organisation du contenu des pages web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-451035{{"Créer des listes HTML avec différents styles"}} html/head_elems -.-> lab-451035{{"Créer des listes HTML avec différents styles"}} html/lang_decl -.-> lab-451035{{"Créer des listes HTML avec différents styles"}} html/lists_desc -.-> lab-451035{{"Créer des listes HTML avec différents styles"}} html/doc_flow -.-> lab-451035{{"Créer des listes HTML avec différents styles"}} html/inter_elems -.-> lab-451035{{"Créer des listes HTML avec différents styles"}} end

Configuration de la structure du document HTML

Dans cette étape, vous apprendrez à créer la structure de base d'un document HTML pour votre démonstration de listes. Les documents HTML ont une structure standard qui constitue la base du contenu web.

Ouvrez le WebIDE et accédez au répertoire ~/project. Créez un nouveau fichier appelé lists.html en cliquant avec le bouton droit dans l'explorateur de fichiers et en sélectionnant "Nouveau fichier".

Maintenant, créons la structure de base d'un document HTML5. Tapez le code suivant dans le fichier lists.html :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Lists Example</title>
  </head>
  <body>
    <!-- Nous ajouterons nos listes ici dans les étapes suivantes -->
  </body>
</html>

Décortiquons les éléments clés de cette structure HTML :

<!DOCTYPE html> déclare que ceci est un document HTML5
<html lang="en"> est l'élément racine avec spécification de la langue
<head> contient les métadonnées du document
<meta charset="UTF-8"> assure le bon encodage des caractères
<meta name="viewport"> facilite la conception responsive
<title> définit le titre de la page affiché dans l'onglet du navigateur
<body> est l'endroit où le contenu principal sera placé

La sortie d'exemple dans un navigateur web montrerait une page blanche avec le titre "HTML Lists Example" dans l'onglet du navigateur.

Notes : En savoir plus sur Comment prévisualiser des fichiers HTML dans le WebIDE.

Créer des listes ordonnées avec des types numériques et alphabétiques

Dans cette étape, vous apprendrez à créer des listes ordonnées en HTML en utilisant les balises <ol> (liste ordonnée) et <li> (élément de liste). Les listes ordonnées numérotent automatiquement leurs éléments et peuvent être personnalisées avec différents styles de numérotation.

Ouvrez le fichier lists.html que vous avez créé à l'étape précédente. À l'intérieur de la balise <body>, ajoutez le code suivant pour créer différents types de listes ordonnées :

<h2>Numeric Ordered List (Default)</h2>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<h2>Alphabetic Ordered List</h2>
<ol type="a">
  <li>First alphabetic item</li>
  <li>Second alphabetic item</li>
  <li>Third alphabetic item</li>
</ol>

<h2>Uppercase Alphabetic Ordered List</h2>
<ol type="A">
  <li>First uppercase item</li>
  <li>Second uppercase item</li>
  <li>Third uppercase item</li>
</ol>

<h2>Roman Numeral Ordered List</h2>
<ol type="i">
  <li>First roman numeral item</li>
  <li>Second roman numeral item</li>
  <li>Third roman numeral item</li>
</ol>

Décortiquons les différents types de listes :

La liste ordonnée par défaut utilise une numérotation numérique (1, 2, 3)
type="a" crée une numérotation alphabétique en minuscules (a, b, c)
type="A" crée une numérotation alphabétique en majuscules (A, B, C)
type="i" crée une numérotation en chiffres romains en minuscules (i, ii, iii)

La sortie d'exemple dans un navigateur web montrerait quatre listes ordonnées différentes avec leurs styles de numérotation respectifs.

Implémenter des listes non ordonnées avec différents styles de marqueurs

Dans cette étape, vous apprendrez à créer des listes non ordonnées en HTML en utilisant les balises <ul> (liste non ordonnée) et <li> (élément de liste). Les listes non ordonnées utilisent différents styles de marqueurs pour afficher les éléments de liste sans numérotation numérique ou alphabétique.

Ouvrez le fichier lists.html et ajoutez le code suivant après les listes ordonnées précédentes :

<h2>Default Unordered List (Bullet Points)</h2>
<ul>
  <li>First bullet point</li>
  <li>Second bullet point</li>
  <li>Third bullet point</li>
</ul>

<h2>Disc Marker Style</h2>
<ul type="disc">
  <li>Disc marker item</li>
  <li>Another disc marker item</li>
  <li>Third disc marker item</li>
</ul>

<h2>Circle Marker Style</h2>
<ul type="circle">
  <li>Circle marker item</li>
  <li>Another circle marker item</li>
  <li>Third circle marker item</li>
</ul>

<h2>Square Marker Style</h2>
<ul type="square">
  <li>Square marker item</li>
  <li>Another square marker item</li>
  <li>Third square marker item</li>
</ul>

Explorons les différents styles de marqueurs de listes non ordonnées :

La liste non ordonnée par défaut utilise des puces pleines
type="disc" crée des marqueurs circulaires pleins (par défaut)
type="circle" crée des marqueurs circulaires creux
type="square" crée des marqueurs carrés pleins

La sortie d'exemple dans un navigateur web montrerait quatre listes non ordonnées différentes avec leurs styles de marqueurs respectifs.

Concevoir une liste de description personnalisée avec plusieurs entrées

Dans cette étape, vous apprendrez à créer des listes de description en HTML en utilisant les balises <dl> (liste de description), <dt> (terme de description) et <dd> (détails de description). Les listes de description sont parfaites pour afficher des paires clé - valeur ou des termes avec leurs explications.

Ouvrez le fichier lists.html et ajoutez le code suivant après les exemples de listes précédents :

<h2>Programming Languages Description List</h2>
<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages</dd>

  <dt>CSS</dt>
  <dd>A styling language used to design web page appearance</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity to web pages</dd>
</dl>

<h2>Contact Information Description List</h2>
<dl>
  <dt>Name</dt>
  <dd>John Doe</dd>

  <dt>Email</dt>
  <dd>[email protected]</dd>

  <dt>Phone</dt>
  <dd>+1 (555) 123-4567</dd>
</dl>

Points clés concernant les listes de description :

<dl> définit l'ensemble de la liste de description
<dt> représente le terme ou le nom
<dd> fournit la description ou les détails
Plusieurs balises <dd> peuvent être utilisées pour un seul <dt>
Utile pour les glossaires, les métadonnées et les présentations de paires clé - valeur

La sortie d'exemple dans un navigateur web montrerait deux listes de description avec des termes et leurs descriptions correspondantes.

Expérimenter avec les attributs de liste et les structures de listes imbriquées

Dans cette étape, vous allez explorer des techniques avancées de listes en créant des listes imbriquées et en utilisant des attributs de liste supplémentaires. Les listes imbriquées vous permettent de créer un contenu hiérarchique, tandis que les attributs peuvent vous aider à personnaliser l'apparence et le comportement des listes.

Ouvrez le fichier lists.html et ajoutez le code suivant après les exemples de listes précédents :

<h2>Nested Unordered List</h2>
<ul>
  <li>
    Main Category 1
    <ul>
      <li>Subcategory 1.1</li>
      <li>Subcategory 1.2</li>
    </ul>
  </li>
  <li>
    Main Category 2
    <ul>
      <li>Subcategory 2.1</li>
      <li>Subcategory 2.2</li>
    </ul>
  </li>
</ul>

<h2>Nested Ordered List with Start Attribute</h2>
<ol start="5">
  <li>
    First main item
    <ol type="a">
      <li>First nested item</li>
      <li>Second nested item</li>
    </ol>
  </li>
  <li>
    Second main item
    <ol type="a">
      <li>Third nested item</li>
      <li>Fourth nested item</li>
    </ol>
  </li>
</ol>

<h2>Mixed Nested List</h2>
<ul>
  <li>
    Web Development
    <ol>
      <li>HTML</li>
      <li>
        CSS
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ol>
  </li>
</ul>

Concepts clés démontrés :

Les listes imbriquées peuvent être créées en plaçant une nouvelle liste à l'intérieur d'un élément de liste
Les listes peuvent être mixtes (non ordonnées à l'intérieur d'ordonnées, ou vice versa)
L'attribut start permet de changer le numéro de départ d'une liste ordonnée
L'attribut type peut être utilisé pour changer le style de numérotation ou de marqueur dans les listes imbriquées

La sortie d'exemple dans un navigateur web montrerait trois structures de listes imbriquées différentes avec divers styles et hiérarchies.

Résumé

Dans ce laboratoire (lab), les participants ont appris à créer et à styliser des listes HTML en utilisant diverses techniques. Le laboratoire a commencé par la mise en place d'une structure de document HTML5 standard, en démontrant des éléments essentiels tels que la déclaration DOCTYPE, les balises html, head et body, en mettant l'accent sur les métadonnées appropriées et l'encodage des caractères.

Les exercices pratiques ont couvert la création de différents types de listes ordonnées et non ordonnées, y compris les styles de listes numériques et alphabétiques. Les participants ont exploré les attributs de liste et les structures de listes imbriquées, acquérant ainsi une expérience pratique dans la conception de contenu HTML structuré avec une balisage sémantique. Le laboratoire a fourni une introduction complète aux éléments de liste HTML, permettant aux apprenants d'organiser et de présenter efficacement des informations dans des documents web.