Return to Video

HTML Lists (Video Version)

  • 0:01 - 0:03
    Vous savez ce que j'adore ?... Les listes.
  • 0:03 - 0:05
    Avez-vous déjà fait une liste
    de courses ou de choses à faire ?
  • 0:05 - 0:07
    Avez-vous déjà vu une liste
    sur une page Web,
  • 0:07 - 0:10
    comme le "Top 10 des meilleurs
    vidéos de la semaine" ?
  • 0:10 - 0:14
    Je suis sûr que oui, car on
    rencontre des listes tout le temps.
  • 0:14 - 0:16
    Le HTML nous propose des balises
    pour faire des listes,
  • 0:16 - 0:19
    et on va les utiliser pour afficher
    la liste des raisons qui font
  • 0:19 - 0:24
    que les lapins sont de bons
    animaux de compagnie.
  • 0:24 - 0:27
    Pour commencer une liste simple,
  • 0:27 - 0:30
    on va utiliser la balise .
  • 0:30 - 0:32
    A quoi correspond les 2 lettres "ul" ?
  • 0:32 - 0:35
    J'imagine que le "l" est pour "liste".
  • 0:35 - 0:40
    Le "u" correspond à "unordered"
    en anglais (non ordonnée, sans ordre).
  • 0:40 - 0:43
    Cela veut dire que le navigateur ne
    va pas numéroter les éléments.
  • 0:43 - 0:45
    Il va juste ajouter un point
    devant chaque élément.
  • 0:45 - 0:48
    Pour voir ça, ajoutons
    le premier élément,
  • 0:48 - 0:50
    on écrit : "Ils ont plein de poils".
  • 0:50 - 0:52
    Vous voyez le cercle noir au début,
    à gauche ?
  • 0:52 - 0:53
    C'est un gros point.
  • 0:53 - 0:56
    Bon. A quoi correspond la
    balise ?
  • 0:56 - 1:00
    Le "l" est pour "liste" et le "i"
    pour "item" en anglais (élément).
  • 1:00 - 1:02
    A chaque fois que nous ajoutons
    un nouvel élément,
  • 1:02 - 1:06
    on a besoin d'ajouter un à
    l'intérieur de .
  • 1:06 - 1:08
    Chaque doit au moins avoir
    un élément ,
  • 1:08 - 1:12
    car une liste sans élément,
    ça ne sert à rien.
  • 1:12 - 1:14
    OK. On va ajouter des éléments.
  • 1:14 - 1:17
    On écrit : "Ils écoutent bien",
  • 1:17 - 1:22
    "Ils mangent tous vos restes de carotte".
  • 1:22 - 1:25
    OK. C'est pas mal pour une première liste.
  • 1:25 - 1:28
    Tout le monde va vouloir un lapin
    en lisant ça !
  • 1:28 - 1:30
    Je n'ai pas numéroté cette liste car...
  • 1:30 - 1:33
    il n'y a pas une raison plus importante
    qu'une autre.
  • 1:34 - 1:37
    Mais, parfois, on veut numéroter
    (ordonner) la liste.
  • 1:37 - 1:44
    Par exemple, si je veux afficher la liste :
    Top 3 des lapins les plus célèbres.
  • 1:44 - 1:47
    Donc, pour débuter notre liste ordonnée,
  • 1:47 - 1:51
    on va utiliser la balise au lieu de .
  • 1:51 - 1:55
    Savez-vous pourquoi on utilise "ol" ?
  • 1:55 - 1:59
    Utilisez les premières lettres de
    "liste ordonnée".
  • 1:59 - 2:03
    Exactement ! "ol" correspond à
    "liste ordonnée" !
  • 2:03 - 2:06
    On indique au navigateur de numéroter
    automatiquement chaque élément.
  • 2:07 - 2:10
    On va continuer d'utiliser
    pour chaque élément
  • 2:10 - 2:12
    à l'intérieur de la liste.
  • 2:12 - 2:13
    On écrit : "Bugs Bunny",
  • 2:13 - 2:16
    ensuite "Bambi",
  • 2:16 - 2:20
    et, bien sûr, le "lapin de pâques".
  • 2:20 - 2:23
    Ce qui est cool avec les listes ordonnées,
  • 2:23 - 2:25
    c'est que le navigateur va les numéroter
    lui-même tout seul.
  • 2:25 - 2:28
    Donc, si on échange des éléments,
    si on en enlève ou si on en ajoute,
  • 2:28 - 2:30
    il va continuer à les numéroter correctement.
  • 2:30 - 2:34
    Par exemple, si vous me dites que
    vous ne connaissez pas "Bambi",
  • 2:34 - 2:37
    Bon. D'abord, je vais vous demander
    de regarder le film "Bambi" !
  • 2:37 - 2:41
    Ensuite je me forcerais à déplacer
    "Bambi" en bas de la liste.
  • 2:41 - 2:44
    Et du coup, le pauvre "Bambi"
    se retrouve numéro 3 !
  • 2:44 - 2:47
    OK. Vous connaissez maintenant
    ce qu'il faut pour créer des listes.
  • 2:47 - 2:51
    Continuez ! Et listez tout ce que vous voulez !
Title:
HTML Lists (Video Version)
Description:

more » « less
Video Language:
English
Duration:
02:51
Christophe Noblanc edited French subtitles for HTML Lists (Video Version)
Christophe Noblanc edited French subtitles for HTML Lists (Video Version)

French subtitles

Revisions Compare revisions