Listes : ordonnées et non ordonnées
Créez des listes numérotées et à puces
Listes : ordonnées et non ordonnées est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML for Kids, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML for Kids comprend 4 leçons au total.
Listes ordonnées et non ordonnées
Bienvenue dans la prochaine leçon ! Aujourd’hui, nous allons apprendre à créer des listes en HTML. Les listes aident à organiser les informations et les rendent plus faciles à lire.
Que sont les listes ?
Les listes sont un excellent moyen de regrouper des éléments liés. Le HTML possède deux grands types de listes :
- Listes ordonnées : les éléments sont numérotés (1, 2, 3...).
- Listes non ordonnées : les éléments sont précédés de puces.
Apprenons à créer ces deux types de listes !
Créer une liste ordonnée
Une liste ordonnée se crée avec la balise <ol>. Chaque élément de la liste est ajouté avec la balise <li> (élément de liste).
Exemple :
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to school</li>
</ol>
Créer une liste non ordonnée
Une liste non ordonnée se crée avec la balise <ul>. Chaque élément est ajouté avec la balise <li>, comme dans les listes ordonnées.
Exemple :
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
Listes imbriquées
Vous pouvez créer une liste à l’intérieur d’une autre liste. C’est ce qu’on appelle une liste imbriquée. Vous pouvez imbriquer des listes ordonnées et non ordonnées les unes dans les autres.
Exemple :
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Spinach</li>
</ul>
</li>
</ul>
Listes avec descriptions
HTML vous permet également de créer des listes de descriptions à l’aide des balises <dl>, <dt> et <dd> :
<dl>: définit la liste.<dt>: définit le terme (titre).<dd>: définit la description.
Exemple :
<dl>
<dt>HTML</dt>
<dd>The language used to create web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>Ajouter du style aux listes
Vous pouvez utiliser CSS pour modifier l’apparence de vos listes. Par exemple, vous pouvez changer le type de puces ou de numéros.
Exemple :
<style>
ul {
list-style-type: square; /* Changes bullets to squares */
}
ol {
list-style-type: upper-roman; /* Changes numbers to Roman numerals */
}
</style>
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
<ol>
<li>First Step</li>
<li>Second Step</li>
</ol>
Essayez par vous-même
Créons une page web simple avec des listes ordonnées et non ordonnées. Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>My To-Do List</h1>
<h2>Morning Routine</h2>
<ol>
<li>Wake up</li>
<li>Brush my teeth</li>
<li>Have breakfast</li>
</ol>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>
Bravo !
Félicitations ! Vous avez appris à créer des listes ordonnées et non ordonnées, des listes imbriquées et des listes de descriptions. Ce sont d’excellents outils pour organiser les informations sur vos pages web. Dans la prochaine leçon, nous apprendrons à ajouter des liens pour relier différentes pages et différents sites web. Préparez-vous à vous amuser davantage !
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 16
- Leçons
- 35
Questions Fréquemment Posées
La leçon « Listes : ordonnées et non ordonnées » est-elle gratuite ?
Oui — le texte complet de « Listes : ordonnées et non ordonnées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML for Kids, passe à CoddyKit PRO. Le cours HTML for Kids comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Listes : ordonnées et non ordonnées » ?
Créez des listes numérotées et à puces Tu pratiques HTML for Kids avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML for Kids ?
Aucune expérience préalable n'est requise. HTML for Kids sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Listes : ordonnées et non ordonnées » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML for Kids ?
Oui. Chaque leçon HTML for Kids inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Titres et paragraphes
- Listes : ordonnées et non ordonnées
- Liens : relier le Web
- Images : ajouter des images à votre page