-
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 !
