Laboratoire sur la liste non ordonnée HTML

Introduction

La balise ul en HTML est utilisée pour créer une liste non ordonnée où les éléments sont généralement affichés sous forme d'une liste à puce. Ce laboratoire vous guidera sur la manière de créer une liste non ordonnée à l'aide d'HTML et fournira des exemples de syntaxe et d'utilisation de la balise ul.

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 la structure du document HTML

Créez un fichier index.html dans un nouveau dossier de projet et ouvrez-le dans un éditeur de code.

Créez la structure de base d'un document HTML en ajoutant les balises html, head et body. À l'intérieur de la balise head, ajoutez la balise title et définissez le titre du document sur "HTML Unordered List Lab".

<!doctype html>
<html>
  <head>
    <title>HTML Unordered List Lab</title>
  </head>
  <body>
    <!-- Ajoutez le contenu ici -->
  </body>
</html>

Créer une liste non ordonnée à l'aide de la balise ul

À l'intérieur de la balise body, créez une liste non ordonnée à l'aide de la balise ul. Pour ajouter des éléments de liste, utilisez la balise li à l'intérieur de la balise ul.

<ul>
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Ajouter des attributs à la balise ul

La balise ul n'a pas d'attributs spécifiques, mais elle prend en charge les attributs globaux et les attributs d'événement. Voici un exemple d'ajout de l'attribut class à la balise ul.

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Appliquer un style CSS à la balise ul

Pour styliser la balise ul, vous pouvez utiliser le CSS. Dans l'exemple suivant, nous définissons list-style-type sur 'carré' et ajoutons des marges.

<style>
  ul {
    list-style-type: square;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50px;
  }
</style>

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Anidement de listes non ordonnées

Vous pouvez emboîter une liste non ordonnée à l'intérieur d'une autre liste non ordonnée en plaçant une autre balise <ul> à l'intérieur d'une balise <li>. Voici un exemple de liste non ordonnée imbriquée.

<ul>
  <li>This is the first item in the parent list</li>
  <li>
    This is the second item in the parent list
    <ul>
      <li>This is a nested item</li>
      <li>This is another nested item</li>
    </ul>
  </li>
  <li>This is the third item in the parent list</li>
</ul>

Résumé

Dans ce laboratoire, vous avez appris à créer une liste non ordonnée à l'aide de la balise ul en HTML. Vous avez également appris à ajouter des attributs et des styles CSS à la balise ul. Rappelez-vous que la balise ul est utilisée pour créer une liste à puces d'éléments. La balise ul nécessite une balise de début et de fin, et les éléments de liste doivent être ajoutés à l'aide de la balise li à l'intérieur de la balise ul. Vous pouvez emboîter une liste non ordonnée à l'intérieur d'une autre liste non ordonnée en plaçant une autre balise ul à l'intérieur d'une balise li.

Liste non ordonnée HTML