Listes HTML : Créer des listes non ordonnées et ordonnées

Introduction

Les listes HTML sont un élément fondamental du développement web, utilisées pour regrouper et organiser des éléments connexes. Elles rendent le contenu plus lisible et accessible. Il existe deux types principaux de listes :

Listes non ordonnées (<ul>): Utilisées lorsque l'ordre des éléments n'a pas d'importance. Elles sont généralement affichées avec des puces.
Listes ordonnées (<ol>): Utilisées lorsque l'ordre des éléments est important. Elles sont généralement affichées avec des numéros.

Dans ce laboratoire, vous apprendrez à créer les deux types de listes, à y ajouter des éléments, et même à créer des sous-listes imbriquées pour construire des structures plus complexes. À la fin, vous disposerez d'une seule page HTML démontrant ces types de listes.

Créer la balise ul pour une liste non ordonnée

Dans cette étape, vous allez créer une liste non ordonnée. Les listes non ordonnées sont définies avec la balise <ul> et sont utilisées pour des éléments dont la séquence n'est pas importante.

Tout d'abord, localisez le fichier index.html dans l'explorateur de fichiers sur le côté gauche du WebIDE. Cliquez dessus pour l'ouvrir dans l'éditeur.

À l'intérieur de la balise <body> de votre fichier index.html, ajoutez une liste non ordonnée vide en plaçant les balises <ul> et </ul> juste après le titre <h1>.

Votre fichier index.html devrait maintenant ressembler à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul></ul>
  </body>
</html>

Après avoir ajouté le code, enregistrez le fichier. Vous pouvez prévisualiser vos modifications en passant à l'onglet Web 8080. À ce stade, vous ne verrez aucun élément de liste, car nous n'en avons pas encore ajouté.

Ajouter des balises li à l'intérieur de ul pour les éléments de liste

Dans cette étape, vous allez ajouter des éléments à la liste non ordonnée. Chaque élément d'une liste est défini avec la balise <li> (list item). Ces balises <li> doivent être placées à l'intérieur de la balise parente <ul>.

Ajoutons trois éléments à notre liste de courses. Modifiez votre fichier index.html pour inclure "Milk", "Bread" et "Cheese" comme éléments de liste.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </body>
</html>

Enregistrez le fichier et passez à l'onglet Web 8080 pour voir vos modifications. Vous devriez maintenant voir une liste à puces avec les trois articles d'épicerie.

Créer la balise ol pour une liste ordonnée

Dans cette étape, vous allez créer une liste ordonnée. Les listes ordonnées sont définies avec la balise <ol> et sont utilisées lorsque l'ordre des éléments est important, comme dans une recette ou une liste de tâches. Le navigateur numérote automatiquement les éléments.

Ajoutons une nouvelle section pour une liste de tâches. Dans votre fichier index.html, ajoutez un nouveau titre <h2>To-Do List</h2> et une liste ordonnée vide <ol></ol> sous la liste non ordonnée existante.

Votre fichier index.html devrait maintenant contenir les deux structures de liste :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol></ol>
  </body>
</html>

Enregistrez le fichier et vérifiez l'aperçu dans l'onglet Web 8080. Vous verrez le nouveau titre, mais la liste ordonnée sera vide pour l'instant.

Ajouter des balises li à l'intérieur de ol pour les éléments numérotés

Dans cette étape, vous allez ajouter des éléments à votre nouvelle liste ordonnée. Tout comme avec les listes non ordonnées, vous utilisez la balise <li> pour définir chaque élément. Le navigateur s'occupera automatiquement de la numérotation.

Ajoutons trois tâches à notre liste de tâches. Modifiez le fichier index.html et placez les éléments <li> suivants à l'intérieur de vos balises <ol>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>Go to the gym</li>
    </ol>
  </body>
</html>

Enregistrez le fichier et actualisez l'onglet Web 8080. Vous verrez maintenant une liste numérotée affichant vos trois tâches.

Imbriquer ul à l'intérieur de ol pour les sous-listes

Dans cette étape, vous apprendrez à créer des listes imbriquées, également appelées sous-listes. Ceci est utile pour décomposer un élément de liste en points plus petits et connexes. Vous pouvez imbriquer une liste (<ul> ou <ol>) à l'intérieur d'un élément <li>.

Ajoutons plus de détails à la tâche "Go to the gym". Nous allons ajouter une liste non ordonnée imbriquée pour spécifier les activités d'entraînement. Pour ce faire, placez un nouveau bloc <ul> à l'intérieur de l'élément <li>Go to the gym</li>.

Mettez à jour votre fichier index.html avec le code suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>
        Go to the gym
        <ul>
          <li>Treadmill</li>
          <li>Weights</li>
        </ul>
      </li>
    </ol>
  </body>
</html>

Enregistrez le fichier et visualisez-le dans l'onglet Web 8080. Vous verrez une sous-liste indentée et à puces sous l'élément "Go to the gym". Cela démontre comment vous pouvez créer des structures de contenu plus complexes et organisées.

Résumé

Félicitations pour avoir terminé le laboratoire !

Dans ce laboratoire, vous avez appris les bases de la création de listes en HTML. Vous avez réussi à :

Créer une liste non ordonnée (<ul>) pour les éléments sans ordre spécifique.
Créer une liste ordonnée (<ol>) pour les éléments où la séquence est importante.
Utiliser la balise d'élément de liste (<li>) pour ajouter des éléments aux deux types de listes.
Créer une liste imbriquée pour construire une structure hiérarchique.

Les listes sont un outil essentiel pour organiser le contenu et améliorer la lisibilité de vos pages web. Vous pouvez maintenant les utiliser efficacement dans vos futurs projets web.