Maîtriser les Listes en HTML

Utiliser les balises de liste
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de comprendre les différentes balises de listes en HTML, savoir quand et comment les utiliser et être capable de créer des listes non ordonnées, ordonnées et de définition dans un document HTML.

Cette leçon traite des différentes balises HTML pour créer des listes non ordonnées, ordonnées et de définition.

Dans cette leçon, nous explorons l'utilisation des balises HTML pour créer des listes, un composant crucial du langage HTML. Nous allons examiner les trois types de listes : les listes non ordonnées, les listes ordonnées et les listes de définition.

Nous commençons par la balise <ul>, utilisée pour les listes non ordonnées, où l'ordre des éléments n'a pas d'importance. Chaque élément de la liste est défini à l'aide de la balise <li>. Ensuite, nous passons aux listes ordonnées avec la balise <ol>, où l'ordre des éléments est significatif et est automatiquement numéroté par le navigateur.

Enfin, nous abordons les listes de définition, utilisant les balises <dl>, <dt> et <dd>, pour représenter des termes et leurs définitions, similaires aux entrées d'un dictionnaire.

Cette leçon inclut également des exemples concrets pour illustrer comment chaque type de liste s'intègre dans un document HTML, et mentionne certaines considérations importantes pour l'affichage des listes, telles que le retrait par rapport au bord de la page.

Voir plus
Questions réponses
Quelle balise utilise-t-on pour créer une liste non ordonnée en HTML ?
On utilise la balise <ul> pour créer une liste non ordonnée.
Comment définit-on un élément de liste en HTML ?
Un élément de liste est défini avec la balise <li>, que ce soit pour une liste ordonnée ou non ordonnée.
Quelle est la différence entre une liste ordonnée et une liste non ordonnée en HTML ?
La principale différence est que les listes ordonnées (<ol>) affichent les éléments avec des chiffres, indiquant l'ordre, tandis que les listes non ordonnées (<ul>) utilisent des puces et l'ordre des éléments n'a pas d'importance.
Nous allons continuer l'étude de nos différentes balises, avec une balise, enfin plusieurs balises même, qui constituent un point important du HTML, qui sont les listes. Alors nous avons vu les paragraphes, nous avons vu les titres, les listes font partie intégrante du langage HTML et sont très utilisées, puisqu'une liste sont principalement utilisées dans les menus par exemple, puisque un menu c'est une liste de choix, et puis sont utilisées dès lors que l'on souhaite faire une énumération, par exemple, ou bien une énumération ordonnée ou non ordonnée, c'est ce que nous allons voir maintenant. Alors une liste s'incorpore avec la balise ul. Donc là il s'agit d'une liste que l'on appelle non ordonnée, un ordonné de listes. Ça c'est la structure de la liste générale. Si l'on regarde dans un navigateur dans l'état actuel, on n'obtient rien. Une liste en fait c'est une liste d'items. Je veux acheter des pommes, des poires, des prunes, par exemple, pour faire mes courses. Donc je vais être obligé d'écrire un certain nombre de pommes, voilà, avec deux M ce sera mieux, poires et prunes. Mais de cette manière là, ça ne fonctionne pas, puisque les éléments en HTML, vous avez cru le comprendre à présent, c'est qu'il faut qu'ils soient placés dans des balises pour bien les séparer. Alors on va les placer dans des balises qui s'appellent li pour dire liste item. Donc premier item, les pommes. Deuxième item, les poires. Troisième item, les prunes. Alors là nous sommes dans une liste que l'on appelle non ordonnée, c'est-à-dire que si je vais chez le marchand et que j'achète d'abord des pommes, des poires et ensuite des prunes, c'est la même chose que si j'achète des poires, des prunes et ensuite des pommes. Donc le caractère d'ordre n'a pas d'importance. Alors nous allons voir ce que ça donne dans notre navigateur. Donc pommes, poires, prunes sont affichées les unes en dessous des autres, ce qui est intéressant déjà en base. Et puis avec un petit point, ce qui est la caractéristique des listes qu'on appelle à puces, donc des listes non ordonnées. Sachant que nous verrons dans une leçon suivante comment modifier le caractère de ces puces. Nous allons voir à présent une seconde type de liste, qui s'appelle OL et qui est, comme vous y pensez, une liste ordonnée, puisque nous avons vu précédemment la liste non ordonnée. Donc ordonnée de liste. Fin de OL. Comme pour OL, ça ne fonctionne pas, enfin ça fonctionne mal si nous n'y mettons pas d'ali. Donc chaque élément de la liste va être incorporé à l'intérieur d'ali. Alors là, typiquement, nous avons acheté des pommes, des poires et des prunes. Peut-être que nous voudrions faire un gâteau. Et donc, en premier, il faut faire la pâte, par exemple. En deuxième, on va mettre au four. Au four et, en troisième, déguster. Voyons ce qui se passe. J'actualise. Et nous avons bien maintenant une liste ordonnée. 1, 2, 3. Premièrement, faire la pâte. Deuxièmement, mettre au four. Troisièmement, déguster. Ce qui, vous en conviendrez, serait compliqué si nous réalisons déguster avant de mettre au four. Donc il s'agit bien d'une liste ordonnée. Et ça a un caractère particulièrement intéressant pour les moteurs de recherche, puisque le moteur sait ainsi que cette liste fonctionne de manière organisée. 1, 2, 3. Ça peut être également une indication dans le code pour différentes autres choses. Mais surtout, l'aspect final nous donne bien un chiffre. 1, 2, 3. Chiffre que l'on peut également modifier. Nous le verrons ultérieurement. Troisième type de liste. Une liste qu'on appelle une liste de définition. Donc, DL. Definition List. Fin de DL. On ne l'oublie pas. Une liste de définition, typiquement, c'est un petit peu comme une entrée de dictionnaire. Dans le dictionnaire, il y a des mots et la définition du mot. Eh bien, une liste de définition, c'est exactement la même chose. Il y a une première balise. On va mettre, je ne sais pas, le mot à définir. Voilà. Quel que soit le mot. Et ensuite, immédiatement après, la définition de ce fameux mot. Avec DD. Definition List. Le DT voulant dire Definition Title. Je vais mettre définition. Fin de DD. Et puis, imaginons que nous ayons un second mot. Je copie. Et je colle. Et je colle. La même structure. DT pour autre mot. Et puis définition de cet autre mot. Etc. Nous allons pouvoir en mettre autant que nous le souhaitons. Donc, DL, liste de définition. Ce type de liste est certainement moins utilisé que les deux précédentes. Regardons malgré tout. Au niveau de notre navigateur. Il y a une mise en forme un peu particulière. Puisque le DT est situé complètement au bord de la page. Et la définition du mot est en retrait. Notez, pour la suite, les listes, quel que soit le type de liste, sont légèrement décalées par rapport au bord de la page. Si nous écrivons à présent un petit paragraphe. P. Voilà. Le paragraphe est bien situé complètement à gauche de la page. Alors que les listes sont situées légèrement en retrait. C'est ce que nous verrons plus tard lorsque nous travaillerons en CSS.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ?&nbsp;Le fonctionnement des sites web ainsi que la structure d'une page HTML.&nbsp; Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre&nbsp;la structure du CSS, les tableaux, boutons et formulaires en CSS.&nbsp; Vous suivez la&nbsp;méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de&nbsp;mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5