Premiers pas en HTML - Leçon 3 - Balises de listes ul, ol. Attributs des balises HTML.
Les listes sont très courantes sur les sites : dans les menus, dans le texte pour énumérer des éléments. Commençons par le type le plus populaire, la liste non ordonnée <UL></UL> (unordered list).
Liste UL
La liste UL est utilisée pour les menus, pour les listes à puces, et on peut définir la forme des puces via HTML.
Modifions notre code HTML :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<ul>
</ul>
</body>
</html>
Le document affichera uniquement le titre car la liste est vide. Ajoutons des éléments avec les balises <LI></LI> (list item) :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</body>
</html>
La liste apparaîtra alors avec des puces. Le style des puces peut être modifié via l’attribut type de la balise <UL>.
Attributs des balises HTML
Comme indiqué, la balise UL possède des attributs. Tous les tags HTML ont des attributs qui permettent de contrôler leur affichage : couleurs, tailles, formes, etc. Pour UL, on peut définir la forme des puces : rond, cercle, carré.
Un attribut s’écrit ainsi :
<tag attribut="valeur">
Pour UL, l’attribut s’appelle type :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<ul type="square">
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</body>
</html>
En actualisant la page, les puces seront carrées (square). On peut aussi choisir des cercles :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<ul type="circle">
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</body>
</html>
On peut aussi définir différents types de puces pour chaque élément en ajoutant type dans <li> :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<ul type="circle">
<li>Premier élément</li>
<li type="square">Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</body>
</html>
Par défaut, UL et LI utilisent type="disc" (rond plein) :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<ul type="disc">
<li>Premier élément</li>
<li type="square">Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</body>
</html>
Supprimons maintenant l’attribut type du <ul> :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<ul>
<li>Premier élément</li>
<li type="square">Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</body>
</html>
Enfin, mettons trois styles différents sur chaque élément :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<ul>
<li type="disc">Premier élément</li>
<li type="square">Deuxième élément</li>
<li type="circle">Troisième élément</li>
</ul>
</body>
</html>
Vous savez maintenant où écrire les attributs des balises, nous verrons bientôt beaucoup d’autres attributs.
Listes OL
La balise OL (ordered list - liste ordonnée) est moins fréquente que UL mais sert souvent à afficher des séquences d’actions, chronologies, numérotations, etc. Chaque élément numéroté peut être réalisé avec OL.
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
</body>
</html>
Comme pour UL, OL possède un attribut type mais avec des valeurs différentes :
- type="A" - lettres majuscules (A, B, C…)
- type="a" - lettres minuscules (a, b, c…)
- type="I" - chiffres romains majuscules (I, II, III…)
- type="i" - chiffres romains minuscules (i, ii, iii…)
- type="1" - chiffres arabes (1, 2, 3…) par défaut
Essayez différentes valeurs de l’attribut type pour OL. Voici un exemple :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<ol type="i">
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
<li>Quatrième élément</li>
</ol>
</body>
</html>