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 !