Liste ordonnée HTML

Introduction

En HTML, on peut créer une liste ordonnée en utilisant la balise <ol>. La liste ordonnée est une liste d'éléments numérotés dans un ordre particulier. La balise <ol> est utilisée pour créer la liste ordonnée et la balise <li> est utilisée pour définir chaque élément de la liste.

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 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Configurer le fichier HTML

Dans cette étape, nous allons créer un fichier HTML de base et configurer la balise <ol>. Ouvrez le fichier "index.html" et tapez le code suivant :

<!doctype html>
<html>
  <head>
    <title>Exemple de liste ordonnée</title>
  </head>
  <body>
    <h1>Exemple de liste ordonnée</h1>
    <ol>
      <li>Élément 1</li>
      <li>Élément 2</li>
    </ol>
  </body>
</html>

Ajoutez plus d'éléments à la liste

Dans cette étape, nous allons ajouter plus d'éléments à la liste ordonnée. Pour ce faire, ajoutez simplement plus de balises <li> entre les balises <ol> d'ouverture et de fermeture :

<!doctype html>
<html>
  <head>
    <title>Exemple de liste ordonnée</title>
  </head>
  <body>
    <h1>Exemple de liste ordonnée</h1>
    <ol>
      <li>Élément 1</li>
      <li>Élément 2</li>
      <li>Élément 3</li>
      <li>Élément 4</li>
      <li>Élément 5</li>
    </ol>
  </body>
</html>

Changer le type de numérotation

Dans cette étape, nous allons changer le type de numérotation utilisé dans la liste ordonnée. Par défaut, la liste ordonnée utilise la numérotation décimale. Cependant, nous pouvons la changer en d'autres types de numérotation, telles que les chiffres romains ou les lettres. Pour changer le type de numérotation, utilisez l'attribut type dans la balise <ol>. Par exemple :

<!doctype html>
<html>
  <head>
    <title>Exemple de liste ordonnée</title>
  </head>
  <body>
    <h1>Exemple de liste ordonnée</h1>
    <ol type="I">
      <li>Élément 1</li>
      <li>Élément 2</li>
      <li>Élément 3</li>
      <li>Élément 4</li>
      <li>Élément 5</li>
    </ol>
  </body>
</html>

Dans le code ci-dessus, nous avons défini l'attribut type sur I, qui est les chiffres romains en majuscules.

Commencer à numéroter à partir d'un nombre spécifique

Dans cette étape, nous allons changer le nombre de départ des éléments de la liste ordonnée. Par défaut, le premier élément de la liste ordonnée commence par "1". Cependant, nous pouvons le changer pour commencer à partir d'un nombre spécifique. Pour changer le nombre de départ, utilisez l'attribut start dans la balise <ol>. Par exemple :

<!doctype html>
<html>
  <head>
    <title>Exemple de liste ordonnée</title>
  </head>
  <body>
    <h1>Exemple de liste ordonnée</h1>
    <ol start="3">
      <li>Élément 3</li>
      <li>Élément 4</li>
      <li>Élément 5</li>
    </ol>
  </body>
</html>

Dans le code ci-dessus, nous avons défini l'attribut start sur 3, ce qui signifie que le premier élément de la liste ordonnée sera numéroté "3".

Résumé

Dans ce laboratoire, nous avons appris à créer une liste ordonnée en HTML en utilisant la balise <ol>. Nous avons également appris comment ajouter des éléments à la liste, changer le type de numérotation et commencer la numérotation à partir d'un nombre spécifique. Grâce à ces connaissances, nous pouvons créer des listes de qualité sur nos pages web.