Historique des conversations
Chargement...
Chapitre 5 : Les listes en HTML
Chapitre 5 : Les listes en HTML
Les listes non ordonnées (ul)
Les listes non ordonnées sont utilisées pour les éléments sans ordre spécifique. Chaque élément est défini par la balise <li>.
<ul>
<li>Pomme</li>
<li>Banane</li>
<li>Orange</li>
</ul>Les listes ordonnées (ol)
Les listes ordonnées sont utilisées pour les éléments ayant un ordre (étapes, classement, etc.).
<ol>
<li>Étape 1</li>
<li>Étape 2</li>
<li>Étape 3</li>
</ol>Listes imbriquées
On peut imbriquer une liste à l'intérieur d'une autre :
<ul>
<li>Fruits
<ul>
<li>Pomme</li>
<li>Banane</li>
</ul>
</li>
<li>Légumes</li>
</ul>Résumé
<ul>: liste non ordonnée (bullet points)<ol>: liste ordonnée (numérotée)<li>: élément de liste
Évaluation des acquis
Correction immédiate
Quiz du chapitre 5
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Liste à puces (non ordonnée)
Atelier #1Crée une liste de courses (Pommes, Poires) avec des puces.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<ul>
<li>Pommes</li>
<li>Poires</li>
</ul>
#2 — Liste numérotée (ordonnée)
Atelier #2Crée un podium (Premier, Second, Troisième) avec des numéros.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<ol>
<li>Premier</li>
<li>Second</li>
<li>Troisième</li>
</ol>
#3 — Liste imbriquée
Atelier #3Crée une liste à puces où le premier élément contient lui-même une sous-liste numérotée.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<ul>
<li>Fruits
<ol>
<li>Rouges</li>
<li>Jaunes</li>
</ol>
</li>
<li>Légumes</li>
</ul>
#4 — Liste de définition
Atelier #4Utilise dl, dt, dd pour définir le mot 'HTML'.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<dl>
<dt>HTML</dt>
<dd>Langage de balisage pour le Web.</dd>
</dl>
#5 — Menu de navigation
Atelier #5Une liste à puces est souvent utilisée pour les menus. Crée un menu 'Accueil', 'Contact' avec des liens.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>