Vous savez ce que j'adore ?... Les listes.

Avez-vous déjà fait une liste 
de courses ou de choses à faire ?

Avez-vous déjà vu une liste 
sur une page Web,

comme le "Top 10 des meilleurs
vidéos de la semaine" ?

Je suis sûr que oui, car on 
rencontre des listes tout le temps.

Le HTML nous propose des balises
pour faire des listes,

et on va les utiliser pour afficher
la liste des raisons qui font

que les lapins sont de bons
animaux de compagnie.

Pour commencer une liste simple,

on va utiliser la balise .

A quoi correspond les 2 lettres "ul" ?

J'imagine que le "l" est pour "liste".

Le "u" correspond à "unordered"
en anglais (non ordonnée, sans ordre).

Cela veut dire que le navigateur ne
va pas numéroter les éléments.

Il va juste ajouter un point 
devant chaque élément.

Pour voir ça, ajoutons 
le premier élément,

on écrit : "Ils ont plein de poils".

Vous voyez le cercle noir au début,
à gauche ?

C'est un gros point.

Bon. A quoi correspond la
balise  ?

Le "l" est pour "liste" et le "i" 
pour "item" en anglais (élément).

A chaque fois que nous ajoutons
un nouvel élément,

on a besoin d'ajouter un  à
l'intérieur de .

Chaque  doit au moins avoir 
un élément ,

car une liste sans élément, 
ça ne sert à rien.

OK. On va ajouter des éléments.

On écrit : "Ils écoutent bien",

"Ils mangent tous vos restes de carotte".

OK. C'est pas mal pour une première liste.

Tout le monde va vouloir un lapin
en lisant ça !

Je n'ai pas numéroté cette liste car...

il n'y a pas une raison plus importante
qu'une autre.

Mais, parfois, on veut numéroter
(ordonner) la liste.

Par exemple, si je veux afficher la liste :
Top 3 des lapins les plus célèbres.

Donc, pour débuter notre liste ordonnée,

on va utiliser la balise  au lieu de .

Savez-vous pourquoi on utilise "ol" ?

Utilisez les premières lettres de 
"liste ordonnée".

Exactement ! "ol" correspond à
"liste ordonnée" !

On indique au navigateur de numéroter
automatiquement chaque élément.

On va continuer d'utiliser 
pour chaque élément

à l'intérieur de la liste.

On écrit : "Bugs Bunny",

ensuite "Bambi",

et, bien sûr, le "lapin de pâques".

Ce qui est cool avec les listes ordonnées,

c'est que le navigateur va les numéroter
lui-même tout seul.

Donc, si on échange des éléments, 
si on en enlève ou si on en ajoute,

il va continuer à les numéroter correctement.

Par exemple, si vous me dites que
vous ne connaissez pas "Bambi",

Bon. D'abord, je vais vous demander 
de regarder le film "Bambi" !

Ensuite je me forcerais à déplacer
"Bambi" en bas de la liste.

Et du coup, le pauvre "Bambi"
se retrouve numéro 3 !

OK. Vous connaissez maintenant 
ce qu'il faut pour créer des listes.

Continuez ! Et listez tout ce que vous voulez !