Bienvenue à ce nouveau tuto 🙂 . Dans cette partie , nous allons apprendre comment créer des listes dans HTML.
Les listes permettent de mieux structurer un texte et d’ordonner les informations.
accès rapide
La démo
Liste non ordonnée
Les listes non ordonnée permettent de créer des éléments sans notion d’ordre.
Pour crée une liste non ordonnée,Il suffit juste de mettre les élements souhaité dans les balises <ul> et </ul>.
Chaque élément de la liste doit être délimité par deux balises <li> </li>
Ci-dessous un exemple de liste non ordonnée :
<!DOCTYPE html>
<html>
<head>
<title>Inserer les listes</title>
</head>
<body>
<h1>Liste non ordonnée</h1>
<ul>
<li>Le premier élément de la liste</li>
<li>Le deuxieme élément de la liste</li>
<li>Le troisieme élément de la liste</li>
</ul>
</body>
</html>
Par défaut , les éléments de la liste s’affichent sous format de puces.
Nous pouvant changer cet affichage via l’attribut type.Exemple :
<UL type=« disc »>
<UL type=« circle »>
<UL type=« square »>
Ci-dessous un exemple de de ces trois types :
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Liste non ordonnée avec l'attribut disc</h1>
<ul type="disc">
<li>Le premier élément de la liste</li>
<li>Le deuxieme élément de la liste</li>
<li>Le troisieme élément de la liste</li>
</ul>
<h1>Liste non ordonnée avec l'attribut circle</h1>
<ul type="circle">
<li>Le premier élément de la liste</li>
<li>Le deuxieme élément de la liste</li>
<li>Le troisieme élément de la liste</li>
</ul>
<h1>Liste non ordonnée avec l'attribut square</h1>
<ul type="square">
<li>Le premier élément de la liste</li>
<li>Le deuxieme élément de la liste</li>
<li>Le troisieme élément de la liste</li>
</ul>
</body>
</html>
Liste ordonnée
Les listes ordonnée permettent de créer des éléments avec notion d’ordre.
Une liste ordonnée fonctionne de la même façon que la liste non ordonnée , seule une balise change 🙂
Il faut juste remplacer <ul></ul> par <ol></ol>.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Liste ordonnée</h1>
<ol>
<li>Le premier élément de la liste</li>
<li>Le deuxieme élément de la liste</li>
<li>Le troisieme élément de la liste</li>
</ol>
</body>
</html>
Par défaut , les éléments de la liste s’affichent numéroté à partir de 1.
Nous pouvant changer cet affichage via l’attribut type ou start. Exemple:
<OL type=« i »> Numérotation du type i,ii,iii…
<OL type=« I »> Numérotation du type I, II, III, IV…
<OL type=« A »> Numérotation du type A, B, C, D…
<OL type=« a »> Numérotation du type a, b, c, d…
<OL start=« 5 »> Numérotation du type 5, 6, 7, 8…
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Liste ordonée</h1>
<ol type="i">
<li>Le premier élément de la liste</li>
<li>Le deuxieme élément de la liste</li>
<li>Le troisieme élément de la liste</li>
</ol>
<ol type="I">
<li>Le premier élément de la liste</li>
<li>Le deuxieme élément de la liste</li>
<li>Le troisieme élément de la liste</li>
</ol>
<ol type="a">
<li>Le premier élément de la liste</li>
<li>Le deuxieme élément de la liste</li>
<li>Le troisieme élément de la liste</li>
</ol>
<ol type="A">
<li>Le premier élément de la liste</li>
<li>Le deuxieme élément de la liste</li>
<li>Le troisieme élément de la liste</li>
</ol>
</body>
</html>
Liste de définition
Ce type de liste est composé de paires « terme à définir + définition ».
Les éléments <dl></dl> sont utilisés pour représenter la liste de définition qu’on va créer.
A l’intérieur de ces balises, nous mettons les termes à définir entre les balise <dt></dt> .Ensuite, nous mettons les définitions relatives à chaque terme dans les balises <dd></dd> .
Ci-dessous un exemple de liste de définition :
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Quelques définition </h1>
<dl>
<dt>HTML</dt>
<dd>Langage utilisé pour affiché du contenu le web</dd>
<dt>Balise</dt>
<dd>élément présentant certaines fonctionnalités</dd>
<dt>Attribut</dt>
<dd>élément spécifique à une balise pouvant prendre certaines valeurs</dd>
</dl>
</body>
</html>
Dans cette partie , nous avons appris comment comment créer des listes dans HTML
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons commencer à ajouter des éléments pour la mise en forme du texte à notre fichier HTML.