- 4,5 sur 5 basé sur 2 votes

Très souvent, certaines informations d'un site Internet doivent être présentées sous forme de listes.

Les listes vous permettent d'organiser et de systématiser diverses informations et de les présenter au visiteur sous une forme pratique.

Les listes HTML se déclinent en trois variétés : les listes à puces, les listes numérotées et les listes de définitions. Voyons comment les créer dans l'ordre.

Liste à puces.

Ce type de liste est le plus souvent utilisé. La liste à puces en HTML est créée à l'aide de balises

• . Dans ce cas, un marqueur est ajouté en face de chaque élément de la liste ; par défaut, il s'agit d'un marqueur en forme de cercle. A l'aide de balises, un conteneur est créé, à l'intérieur duquel se trouvent les éléments de la liste : .

  Le code de la liste à puces ressemblera à ceci :

  • Cette option est
  • Cette option
  • Ce genre d'option

  Vous pouvez également essayer de créer une page HTML en utilisant ce code, le résultat sera la liste suivante :

  

  Comme vous pouvez le voir, chaque élément de la liste est placé sur une nouvelle ligne, avec certains retraits créés à gauche, en haut et en bas. Chaque élément de la liste commence par un marqueur ; le marqueur peut être un cercle rempli (utilisé par défaut), un cercle ou un carré. À l'étiquette

  Il existe un attribut type, qui est utilisé pour définir le style du marqueur. Cet attribut a les significations suivantes :
  • disque - cercle;
  • cercle - cercle;
  • carré - carré.

  La valeur du disque est la valeur par défaut.

  Un exemple de création d'une liste à puces avec des marqueurs de cercle :

  • Cette option est
  • Cette option
  • Ce genre d'option

  En conséquence, la liste prendra la forme suivante :

  

  Création d'une liste à puces avec des marqueurs carrés :

  • Cette option est
  • Cette option
  • Ce genre d'option

  La liste ressemblera à :

  

  L'attribut type peut être appliqué à plus qu'une simple balise

  , mais aussi au tag
  • . De cette façon, vous pouvez créer une liste avec une variété de puces.
    • Cette option est
    • Cette option
    • Ce genre d'option

    Le résultat sera le suivant :

    

    Listes numérotées.

    Les listes numérotées en HTML sont des listes dans lesquelles chaque élément possède un numéro de série. Les listes numérotées sont créées à l'aide d'une balise ;

    et imbriqué dans ses balises

    1. 1. Première ligne
       2. Deuxième ligne
       3. Troisième ligne

       La liste ressemble à ceci :

       

       Par défaut, la numérotation est en chiffres arabes. Mais l'étiquette

       Il existe un attribut de type, à l'aide des valeurs dont vous pouvez effectuer une numérotation en majuscules (type="A") ou minuscules (type="a") en lettres latines, en chiffres romains en majuscules (type="I" ) et le registre inférieur (type="i" ).

       Vous trouverez ci-dessous des versions abrégées du code et le type de numérotation qui peut être dans un cas ou un autre.

       Vue liste :

       Vue liste :

       

       Numérotation en lettres minuscules de l'alphabet latin :

       Vue liste :

       

       Vue liste :

       

       Vue liste :

       

       Liste des définitions en HTML.

       Un type particulier de liste est celui des listes de définitions. Ils diffèrent en ce que chaque élément de liste se compose de deux éléments, un terme et un texte qui révèle sa signification. Ces listes sont créées à l'aide de balises

       . Étiqueter

       crée un conteneur pour la liste, tag

       définit le terme et la balise

       description ou définition d'un terme.

       Cette liste s'écrit ainsi :

       Terme 1

       Définition 1

       Terme 2

       Définition du terme 2

       Terme 3

       Définition 3

       Le résultat sera la liste suivante :

       

       Comme vous pouvez le constater, cela crée une indentation appropriée pour le terme et le texte de définition.

       Listes imbriquées ou multi-niveaux en HTML.

       Parfois, il est nécessaire d'imbriquer une autre liste dans un élément d'un certain type de liste. En HTML, il est possible d'intégrer de manière illimitée certaines listes dans des éléments d'autres listes.

       Par exemple, voici du code qui imbrique des listes numérotées dans des éléments de liste à puces.

       • Cette option est
         1. Première ligne
         2. Deuxième ligne
         3. Troisième ligne
       • Cette option
         1. Première ligne
         2. Deuxième ligne
         3. Troisième ligne
       • Ce genre d'option
         1. Première ligne
         2. Deuxième ligne
         3. Troisième ligne

       Les listes à puces vous permettent de diviser un texte volumineux en blocs distincts, chacun commençant par une puce - généralement un petit point. Cela attire l'attention du lecteur sur le texte et augmente sa lisibilité.

       Avec élément

       Les fonctionnalités suivantes sont associées :
       • à l'endroit où cela se produit
         , le navigateur ajoute automatiquement un saut de ligne ;
         • la liste comporte des retraits en haut et en bas ;
         • Par défaut, les marqueurs sont affichés sous forme de cercle plein ;
         • Chaque élément de la liste est décalé vers la droite par rapport au texte principal.

         La figure 1 montre le résultat de l'exemple, illustrant les caractéristiques ci-dessus de la liste à puces.

         Riz. 1. Vue liste à puces

         Type de marqueur

         Les marqueurs peuvent prendre l’une des trois formes suivantes : cercle plein (par défaut), cercle ouvert et carré. Pour sélectionner le type de marqueur, utilisez la propriété list-style-type ou la propriété universelle list-style (exemple 1). Les valeurs suivantes s'appliquent :

         • disque - marqueurs en forme de cercle rempli;
         • cercle - marqueurs en forme de cercle ouvert;
         • carré - marqueurs carrés.

         Exemple 1 : Modification de l'apparence d'un marqueur

         • Sépulki
         • Sépulcaire
         • Sépulnation

         L'exemple montre comment créer une liste à puces en utilisant un petit carré de couleur unie comme icône de puce. Bien que le nombre de valeurs soit limité à trois, cela ne signifie pas que nous disposons de seulement trois types de marqueurs. Il existe de nombreux caractères spéciaux qui peuvent servir avec succès d’icône de marqueur. Vissez-les directement à

       • Cela ne fonctionnera pas, vous devrez donc contourner ce problème. Pour cela, masquez les marqueurs de liste à l'aide de la propriété list-style avec la valeur none et dans le texte avant le contenu
       • Nous ajoutons notre propre personnage en utilisant le pseudo-élément ::before. Dans l'exemple 2, un triangle sert de tel marqueur.

         Exemple 2 : Utilisation de ::avant

         • Sépulki
         • Sépulcaire
         • Sépulnation

         Le résultat de cet exemple est présenté sur la Fig. 2. Étant donné que l'utilisation de la propriété list-style avec la valeur none ne supprime pas du tout les marqueurs, mais les masque uniquement, la liste apparaît décalée vers la droite. Pour supprimer cette fonctionnalité, l'exemple ajoute une propriété text-indent avec une valeur négative. Sa tâche est de déplacer le texte vers la gauche d'un caractère.

         

         Riz. 2. Marqueurs arbitraires dans la liste

         Il n'est pas nécessaire que le caractère soit au format hexadécimal ; il peut être inséré directement dans le texte. L'essentiel est d'enregistrer le document en encodage UTF-8 et que l'éditeur le prenne en charge. Les caractères eux-mêmes et leurs codes peuvent être extraits, par exemple, de LibreOffice Writer (Fig. 3).

         

         Riz. 3. Sélection d'un symbole dans LibreOffice

         Liste avec des marqueurs dessinés à la main

         Les styles vous permettent de définir n'importe quelle image appropriée comme marqueur via la propriété list-style-image. La valeur est un chemin relatif ou absolu vers le fichier graphique, comme indiqué dans l'exemple 3.

         Exemple 3 : Utiliser une image comme marqueur

         • Sépulki
         • Sépulcaire
         • Sépulnation

         Il est préférable de choisir un petit dessin afin de ne pas transformer les éléments de la liste en légendes. En figue. La figure 4 montre le résultat d'un exemple d'utilisation de petites images comme marqueurs.

         

         Riz. 4. Dessiner comme marqueur

         L'utilisation de list-style-image présente certains inconvénients :

         • le motif ne peut pas être déplacé vers le haut ou vers le bas ;
         • La position de l'image par rapport au texte peut différer selon les navigateurs.

         Ces défauts peuvent être évités en utilisant la propriété background, elle définit l'image d'arrière-plan. Pour chaque élément de la liste

       • nous supprimons les marqueurs d'origine et définissons l'image d'arrière-plan sans répéter. Et pour que le texte n'apparaisse pas en haut de l'image, on le décale vers la droite en utilisant padding-left (exemple 4).

         Exemple 4 : Utilisation de l'arrière-plan

         Ul ( marge gauche : -1em ; ) li ( style de liste : aucun ; arrière-plan : url(images/bullet.png) no-repeat 0 2px ; padding-left : 20px ; )

         Position du texte et de la puce

         Il existe deux manières de placer un marqueur par rapport au texte : le marqueur est déplacé en dehors de la bordure des éléments de la liste ou enroulé autour du texte (Fig. 5).

         à l'intérieur	dehors

         Riz. 5. Placement des marqueurs par rapport au texte

         Pour contrôler la position des marqueurs, utilisez la propriété list-style-position. Il a deux significations : à l'extérieur - les puces sont placées à l'extérieur du bloc de texte (c'est la valeur par défaut) et à l'intérieur - les puces font partie du bloc de texte et sont affichées dans l'élément de liste (exemple 5).

         Exemple 5 : Changer la position des marqueurs

         • Avant de commencer, vérifiez que le matériel fourni avec le kit 3BM est bien inclus.
         • S'il manque un ou plusieurs périphériques, vous devez immédiatement contacter le personnel technique du CC.
         • Après avoir inspecté visuellement votre zone de travail, vous pouvez soigneusement mettre le 3BM sous tension.

         Le résultat de cet exemple est présenté sur la Fig. 6.

         

         HTML prend en charge trois types différents de listes, chacune possédant ses propres balises :

         • – une liste numérotée (à l'aide de chiffres ou de lettres), dont chaque élément possède un numéro d'ordre (lettre) ;
           1. – une liste à puces (non numérotée), à ​​côté de chaque élément de laquelle est placé un marqueur (plutôt que des caractères numériques ou alphabétiques indiquant un numéro de série) ;

              • – une liste de définitions se compose de paires nom/valeur, comprenant des termes et des définitions.

              Listes numérotées

              Dans une liste numérotée, le navigateur insère automatiquement les numéros d'éléments dans l'ordre, en commençant par une certaine valeur (généralement 1). Cela vous permet d'insérer et de supprimer des éléments de liste sans perturber la numérotation, puisque les nombres restants seront automatiquement recalculés.
              Les listes numérotées sont créées à l'aide d'un élément de bloc

              (de la liste ordonnée anglaise - liste numérotée). A côté du conteneur
              pour chaque élément de la liste, un élément est placé
              1. (de l'élément de liste anglais - élément de liste). La valeur par défaut est une liste numérotée avec des chiffres arabes.
                 Étiqueter
                 a la syntaxe suivante :
                 1. élément 1
                 2. élément 2
                 3. élément 3

                 Les éléments de liste numérotés doivent contenir plusieurs éléments de liste, comme illustré dans l'exemple suivant :

                 Exemple : liste numérotée

                 • Essayez-le vous-même "

                 Instruction étape par étape

                 1. Obtenez la clé
                 2. Insérez la clé dans la serrure
                 3. Tournez la clé de deux tours
                 4. Sortez la clé de la serrure
                 5. Ouvre la porte

                 Instruction étape par étape

                 1. Obtenez la clé
                 2. Insérez la clé dans la serrure
                 3. Tournez la clé de deux tours
                 4. Sortez la clé de la serrure
                 5. Ouvre la porte

                 Parfois, en examinant les codes HTML existants, vous rencontrerez l'argument taper en élément

                 , qui sert à indiquer le type de numérotation (lettres, chiffres romains et arabes, etc.). Syntaxe:

                 Ici : tapez – listez les symboles :

                 • A - lettres latines majuscules (A, B, C...) ;
                 • a - lettres latines minuscules (a, b, c...) ;
                 • I - grands chiffres romains (I, II, III...) ;
                 • i - petits chiffres romains (i, ii, iii...) ;
                 • 1 - Chiffres arabes (1, 2, 3...) (utilisés par défaut).

                 Si vous souhaitez que la liste commence par un nombre autre que 1, vous devez le préciser à l'aide de l'attribut commencerétiqueter

                 .
                 L'exemple suivant montre une liste numérotée avec de grands chiffres romains et une valeur de départ XLIX :

                 La numérotation peut également être lancée à l'aide de l'attribut valeur, qui est ajouté à l'élément

                 1. de la manière suivante :

                 7. Dans ce cas, la numérotation séquentielle de la liste sera interrompue et à partir de ce moment la numérotation recommencera, en l'occurrence à partir de sept.

                    Exemple d'utilisation d'attribut valeurétiqueter

                 8. , qui permet de modifier le numéro d'un élément de liste donné :

                    Dans cet exemple, le « premier élément de liste » serait le numéro 1, le « deuxième élément de liste » serait le numéro 7 et le « troisième élément de liste » serait le numéro 8.

                    Formatage de listes numérotées avec CSS

                    Pour modifier les numéros de liste, vous devez utiliser la propriété type de style de liste Feuilles de style CSS :

                    Styles de liste numérotée

                    Exemple	Signification	Description
                    une, b, c	alpha inférieur	Minuscules
                    A, B, C	alpha supérieur	Lettres majuscules
                    je, ii, iii	bas-romain	Chiffres romains en minuscules
                    Moi, II, III	haut-romain	Chiffres romains en majuscules

                    Exemple : application d'une propriété CSS type de style de liste

                    Listes à puces

                    Les listes à puces sont essentiellement similaires aux listes numérotées, sauf qu'elles ne contiennent pas de numérotation séquentielle des éléments. Les listes à puces sont créées à l'aide d'un élément de bloc

                    (de la liste anglaise non ordonnée - liste non numérotée). Chaque élément de liste, comme dans les listes numérotées, commence par une balise
                    • . Le navigateur met en retrait chaque élément de la liste et affiche automatiquement des puces.
                      Étiqueter
                      a la syntaxe suivante :
                      • Premier point
                      • Deuxième point
                      • Troisième point

                      Dans l'exemple suivant, vous pouvez constater que, par défaut, un petit marqueur sous la forme d'un cercle plein est ajouté avant chaque élément de la liste :

                      À l'intérieur d'une balise

                      • Il n'est pas nécessaire de placer uniquement du texte ; il est acceptable de placer n'importe quel élément du contenu diffusé en continu (liens, paragraphes, images, etc.)

                        Listes imbriquées

                        N'importe quelle liste peut être imbriquée dans une autre. A l'intérieur d'un élément
                      • Il est permis de créer une liste imbriquée ou une liste de deuxième niveau. Pour imbriquer une liste, décrivez la nouvelle liste à l'intérieur de l'élément
                      • liste déjà existante. Lorsque vous imbriquez une liste à puces dans une autre, le navigateur modifie automatiquement le style de puce de la liste de deuxième niveau. N'importe quelle liste peut être imbriquée dans une autre. L'exemple suivant montre la structure d'une liste à puces imbriquée dans le deuxième élément d'une liste numérotée.

                        Exemple : listes imbriquées

                        • Essayez-le vous-même "
                        • Lundi
                          1. Envoyer un mail
                          2. Visite chez l'éditeur
                             • Choisir un thème
                             • Conception décorative
                             • Rapport final
                          3. Consultation des messages en soirée
                        • Mardi
                          1. Réviser le calendrier
                          2. Envoyer des images
                        • Mercredi...
                        • Lundi
                          1. Envoyer un mail
                          2. Visite chez l'éditeur
                             • Choisir un thème
                             • Conception décorative
                             • Rapport final
                          3. Consultation des messages en soirée
                        • Mardi
                          1. Réviser le calendrier
                          2. Envoyer des images
                        • Mercredi...

                        Formatage des listes à puces

                        Pour modifier l'apparence du marqueur de liste, utilisez la propriété type de style de liste Feuilles de style CSS :

                        L'exemple suivant montre différents styles de listes à puces :

                        Exemple : styles de liste à puces

                        • Essayez-le vous-même "
                        • Café
                        • Café
                        • Café
                        • Café

                        Disque:

                        • Café
                        • Lait

                        Cercle:

                        • Café
                        • Lait

                        Carré:

                        • Café
                        • Lait

                        Aucun:

                        • Café
                        • Lait

                        Marqueurs graphiques.

                        En HTML il est possible de créer une liste avec des marqueurs graphiques. C'est une chose lorsque les marqueurs de liste sont des cercles ou des carrés standard, et une autre lorsque le développeur sélectionne lui-même le marqueur en fonction de la conception de la page. Afin de rendre les éléments de la liste plus beaux, de petites images sont souvent utilisées.
                        Pour remplacer un marqueur ordinaire par un marqueur graphique, remplacez la propriété type de style de liste par propriété image de style de liste et indiquez l'URL de l'image :

                        Exemple : marqueurs graphiques

                        • Essayez-le vous-même "

                        signes du zodiaque

                        • Taureau
                        • Gémeaux

                        signes du zodiaque

                        • Bélier
                        • Taureau
                        • Gémeaux

                        Listes de définitions (descriptions)

                        Les listes de définitions sont très utiles pour créer, par exemple, votre dictionnaire personnel de termes. Chaque élément de la liste de définitions comporte deux parties : le terme et sa définition.
                        Vous mettez la liste entière dans un élément

                        (de la liste de définitions anglaise - liste de définitions). Il comprend des balises

                        (du terme de définition anglais - un mot, un terme défini) et

                        (de l'anglais Definition Description - description du terme en cours de définition).
                        Les listes de définitions sont souvent utilisées dans les publications scientifiques, techniques et pédagogiques, pour compiler des glossaires, des dictionnaires, des ouvrages de référence, etc.

                        La structure générale de la liste des descriptions est la suivante :

                        Premier mandat

                        Description du premier terme

                        Deuxième mandat

                        Description du deuxième mandat

                        L'exemple suivant montre une utilisation possible d'une liste de définitions :

                        Exemple : liste de définitions

                        • Essayez-le vous-même "

                        World Wide Web - de l'anglais. Le World Wide Web (WWW) est un système distribué qui permet d'accéder à des documents associés situés sur différents ordinateurs connectés à Internet. Internet est un ensemble de réseaux qui utilisent un protocole d'échange unique pour transmettre des informations. Un site Web est un ensemble de pages Web individuelles reliées entre elles par des liens et une conception uniforme.

                        Le World Wide Web

                        - de l'anglais Le World Wide Web (WWW) est un système distribué qui permet d'accéder à des documents associés situés sur différents ordinateurs connectés à Internet.

                        l'Internet

                        — un ensemble de réseaux qui utilisent un protocole d'échange unique pour transmettre des informations.

                        Site web

                        - un ensemble de pages Web individuelles reliées entre elles par des liens et une conception uniforme.

                        Par défaut, le texte du terme est pressé contre le bord gauche de la fenêtre du navigateur et la description du terme est située en dessous et décalée vers la droite.

                        À l'aide de listes HTML, vous pouvez créer un menu pour votre site avec différents éléments et sous-éléments. A l'aide de listes, le contenu (carte) du site est créé, ce qui est très pratique pour les moteurs de recherche.

                        Et donc, il y a des balises "" - elles définissent une liste à puces.
                        Balises "" – définissent des éléments, c'est-à-dire des éléments d'une liste à puces.

                        Tout d’abord, créons une liste simple de plusieurs éléments :

                        <HTML > <tête > <titre > Liste à puces HTML simpletitre > tête > <corps > <ul > <li > Unli > <li > Deuxli > <li > Troisli > <li > Quatreli > ul > corps > HTML >

                        • Trois

                        Pour les marquages ​​HTML, vous pouvez définir certains types qui sont écrits à l'intérieur
                        première balise "

                        "V tapez=" "

                        Créons une liste dans laquelle, au lieu de points, il y aura de petits cercles (points perforés). Ce type est appelé " cercle"

                        <HTML > <tête > <titre > Liste à puces HTMLtitre > tête > <corps > <type ul= "cercle"> <li > Unli > <li > Deuxli > <li > Troisli > <li > Quatreli > ul > corps > HTML >
                        • Quatre

                        Maintenant, au lieu du type "cercle", définissons le "type" carré" (carrés)

                        <HTML > <tête > <titre > Liste à puces HTMLtitre > tête > <corps > <type ul= "carré"> <li > unli > <li > deuxli > <li > troisli > <li > vierli > ul > corps > HTML >

                        Les leçons CSS couvrent en détail le travail avec des listes, à partir desquelles vous pouvez apprendre à définir les couleurs des éléments et du texte qu'elles contiennent, ainsi que comment définir le type de marqueur lui-même (il peut s'agir non seulement d'un carré
                        ou un point - il peut s'agir de presque n'importe quel symbole).

                        
                        

                        Listes numérotées HTML

                        Les listes peuvent non seulement être étiquetées, mais aussi numérotées, car cela est parfois nécessaire. Il peut s'agir de chiffres (1, 2, 3...) et de lettres de l'alphabet anglais en minuscules et en majuscules. Considérez tout ce qui est décrit ci-dessus.

                        Afin de définir la numérotation, les balises "" sont utilisées.
                        Le type est spécifié dans la première balise.

                        Numérotation par numéros (à partir d'un)

                        <HTML > <tête > <titre > Liste numérotée HTMLtitre > tête > <corps > <oh > <li > Une foisli > <li > Deuxli > <li > Troisli > <li > Quatreli > oh > corps > HTML >
                        1. Quatre

                        Si vous avez besoin que la numérotation commence à partir de zéro (zéro) ou de trois, par exemple, vous devez alors écrire des balises dans le premier début=" " et le numéro requis.

                        <HTML > <tête > <titre > Liste numérotée HTMLtitre > tête > <corps > <vieux début = "0" > <li > zéroli > <li > unli > <li > deuxli > <li > troisli > oh > corps > HTML >

                        Voyons maintenant comment définir la « numérotation des lettres ».

                        En minuscule :

                        <HTML > <tête > <titre > Listes numérotées HTMLtitre > tête > <corps > <vieux type = "un"> <li > Mercureli > <li > Vénusli > <li > Terreli > <li > Marsli > oh > corps > HTML >
                        1. Mercure
                        2. Vénus
                        3. Terre

                        En majuscule:

                        <HTML > <tête > <titre > Listes HTML numérotéestitre > tête > <corps > <vieux type = "UN"> <li > Jupiterli > <li > Saturneli > <li > Uranusli > <li > Neptuneli > <li ><b> Plutonb>li > oh > corps > HTML >
                        1. Jupiter
                        2. Saturne
                        3. Neptune
                        4. Pluton

                        En plus des listes HTML classiques, vous pouvez créer des listes à plusieurs niveaux, c'est-à-dire des sous-sections pour certains éléments. Pour ce faire, après la balise et le titre "

                        • title "insérez une autre liste puis fermez-la avec une deuxième balise"
                        "
                        <HTML > <tête > <titre > Liste à plusieurs niveaux HTMLtitre > tête > <corps > <type ul= "carré" > <li > Violonli > <li > Guitare<ul > <li > classiqueli > <li > guitare rythmiqueli > <li > guitare électriqueli > ul > li > <li > Tamboursli > <li > Doudochkali > ul > corps > HTML >
                        • Violon
                        • Guitare
                          • classique
                          • guitare rythmique
                          • guitare électrique
                        • Tambours
                        • Doudochka

                        La prochaine leçon portera sur la création d'un menu simple basé sur les connaissances acquises lors de cette leçon.

                        Bonne journée!

                        Dans cet article, vous découvrirez toutes les possibilités des listes, comprendrez comment créer une liste numérotée et les balises principales qui vous aideront à transformer une simple liste à puces en une liste plus intéressante et plus visible avec des puces arbitraires. Après avoir terminé la leçon, vous comprendrez où les listes sont utilisées et dans quelles circonstances elles peuvent être utilisées.

                        Cet article est le troisième de ce petit cours sur les bases du HTML. Avant de lire cette leçon, je vous recommande de parcourir les deux précédentes :

                        L'article vient de commencer et vous pouvez déjà remarquer l'utilisation d'une liste à puces standard. Sur mon site Web, cela semble assez simple : à gauche, il y a un petit retrait avec une ligne et un marqueur carré. Plus loin dans l'article, nous examinerons en détail quels types de marqueurs existent, comment créer des nombres et également comment créer votre propre marqueur.

                        Dans chaque partie de l'article, la création de certaines listes sera accompagnée d'explications détaillées pour l'insertion d'une liste particulière.

                        1. Listes à puces en HTML

                        Ce type de liste permet de lister dans le texte un ensemble d'éléments ayant des significations similaires. Il peut s'agir d'une liste de liens liés au même sujet, d'une explication détaillée de certaines parties du texte. Mais voyons à quoi ressemblent les listes à puces dans le code :

                        Et voici à quoi cela ressemble dans le navigateur :

                        Riz. 1.1. Vue standard de la liste non ordonnée à puces HTML dans le navigateur

                        1.1 Puces standard pour les listes à puces

                        Dans l'image ci-dessus (Figure 1.1.), vous pouvez voir les cercles au début de chaque élément de menu. C'est le marqueur. Par défaut, il apparaît sous la forme d'un cercle plein dans le navigateur. Il existe plusieurs types de marqueurs en HTML : cercle plein, cercle vide et carré. Ils ne nécessitent aucun CSS ou image tierce :

                        1.2 Marqueur de liste sous la forme d'un cercle vide

                        Vous connaissez les valeurs des attributs, mais voyons maintenant comment créer une liste à puces HTML dans le code. Dans le tableau ci-dessus, nous avons choisi la deuxième valeur « cercle » pour l'attribut type et l'avons défini sur notre liste à puces :

                        <HTML > <tête > <titre > Exemple de liste à puces avec un marqueur de cercle vide</titre> </tête> <corps > <p>Étoiles:</p> <ul type = "cercle" > <li > Sirius</li> <li > Arcturus</li> <li > Pollux</li> <li > Bételgeuse</li> <li > Soleil</li> </ul> </corps> </html>

                        Voyons immédiatement à quoi ressemblera ce code dans le navigateur :

                        Riz. 1.2. Affichage d'un marqueur de liste sous forme de cercle dans le navigateur

                        1.3 Marqueur de liste en forme de carré

                        Regardons également le dernier exemple avec un marqueur carré pour une liste HTML :

                        Faites attention au marqueur, il est devenu carré :

                        Riz. 1.3. Vue d'un marqueur de liste sous forme de carré dans le navigateur

                        Note importante: Cette méthode n'est plus utilisée pour créer des styles pour les listes à puces. Il existe une séparation claire entre CSS (lisez ce qu'est CSS) et HTML. HTML est destiné au balisage et CSS sert à créer une apparence attrayante.

                        Le code qui contient cet attribut lors de la spécification du type de document actuel comme HTML5 (""), donnera une erreur lors de la validation. Si vous n'avez pas entendu ce qu'est la validation, alors cet endroit est fait pour vous.

                        L'erreur sera la suivante :

                        Riz. 1.4. Erreur sur le validateur lors de l'utilisation de l'attribut "type" d'une liste

                        Nous avons trié les listes à puces. Passons maintenant aux listes numérotées, puis considérons les listes imbriquées et plusieurs exemples prêts à l'emploi qui sont le plus souvent utilisés sur des sites réels.

                        2. Listes numérotées en HTML

                        Contrairement au type de listes précédent, les listes numérotées ont une caractéristique importante : elles sont automatiquement numérotées. Ceci est utile lorsque vous devez numéroter une grande liste. Le faire manuellement prendra beaucoup de temps et vous pouvez toujours vous perdre. Une liste numérotée est spécifiée à l'aide de la balise. À quoi cela ressemble en pratique :

                        Exemple de liste numérotée :

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

                        <HTML > <tête > <titre > Exemple de liste numérotée standard</titre> </tête> <corps > <p> De un à cinq :</p> <oh > <li > D'abord</li> <li > Deuxième</li> <li > Troisième</li> <li > Quatrième</li> <li > Cinquième</li> </ol> </corps> </html>

                        Voici à quoi ressemble une liste numérotée avec les paramètres standard du navigateur :

                        Riz. 2.1. Liste numérotée dans le navigateur avec paramètres standard

                        Comme son prédécesseur (liste à puces), il possède ses propres styles d'affichage des nombres. La numérotation régulière n'est pas le seul type de puce pour une liste numérotée en HTML.

                        2.1 Puces standards pour les listes numérotées

                        Ici, nous avons le choix non pas entre trois types de marqueurs, mais entre cinq :

                        Nom du marqueur	valeur de l'attribut "type"	Exemple de liste
                        Marqueurs sous forme de chiffres arabes	1	Badminton Base-ball
                        Marqueurs sous forme de lettres latines minuscules	un	Chomolungma Chogori Kanchenjunga
                        Marqueurs en forme de lettres majuscules latines	UN	Sommet en chute libre Allée de colère Insensé
                        Marqueurs de chiffres romains minuscules	je	Mer des Philippines Mer d'Oman mer de Corail
                        Marqueurs de chiffres romains majuscules	je	Rouge Vert Bleu

                        2.2 Numérotation personnelle dans la liste HTML

                        En plus de la sortie habituelle d'une liste numérotée, nous pouvons également commencer notre numérotation à partir de n'importe quel nombre. Pour ce faire, vous devez définir l'attribut supplémentaire "start" . Cette numérotation fonctionne sur tous les types de marqueurs pour listes numérotées. À quoi cela ressemble en pratique :

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

                        <HTML > <tête > <titre > Numérotation personnalisée pour une liste numérotée</titre> </tête> <corps > <p> On commence à numéroter à partir de douze :</p> <ol type = "a" start = "12" > <li > Douze</li> <li > Treize</li> <li > Quatorze</li> <li > Quinze</li> <li > Seize</li> </ol> </corps> </html>

                        Voici comment cela apparaîtra sur le site réel :

                        Riz. 2.2. Numérotation à partir d'un nombre arbitraire dans une liste numérotée

                        Dans l'image ci-dessus, nous avons numéroté la liste à partir de douze, tout en réalisant des marqueurs sous forme de lettres latines minuscules. Maintenant, je pense que la manière d'utiliser ces attributs dans vos projets est devenue claire.

                        Eh bien, passons maintenant aux listes HTML imbriquées.

                        3. Comment créer une liste à plusieurs niveaux (imbriquée) en HTML

                        Des listes à plusieurs niveaux sont utilisées sur le site pour créer des menus. Ce menu apparaît le plus souvent soit comme un menu déroulant vers le bas (leçon sur), soit comme un menu déroulant vers la gauche ou la droite. De tels menus vous permettent de stocker d'autres éléments de menu sous une forme compacte.

                        En utilisant des modèles de voitures comme exemple, nous allons construire une liste multi-niveaux en HTML :

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

                        <HTML > <tête > <titre > Liste à puces imbriquée HTML</titre> </tête> <corps > <ul > <li > Citroën<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </corps> </html>

                        Remarquez à quoi ressemble la liste à plusieurs niveaux dans le navigateur :

                        Riz. 3.1. Exemple de liste multi-niveaux en HTML

                        Nous avons créé une liste à plusieurs niveaux en utilisant des puces (tag

                        ). Une liste à plusieurs niveaux de modèles Citroën est apparue avec d'autres marqueurs. La liste principale comporte des puces remplies et la liste de 2ème niveau comporte des cercles vides. Mais, comme vous vous en souvenez, en utilisant l'attribut "type", nous pouvons redéfinir les marqueurs (il vaut mieux définir ).

                        Mais nous pouvons combiner des listes à plusieurs niveaux avec des listes numérotées et à puces comme celle-ci :

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

                        <HTML > <tête > <titre > Listes numérotées, à puces et à plusieurs niveaux en HTML</titre> </tête> <corps > <ul > <li > Premier groupe de tulipes<oh > <li > Première année<ul > <li > Tulipes précoces simples</li> </ul> </li> <li > Seconde classe<ul > <li > Tulipes Terry</li> </ul> </li> </ol> </li> </ul> </corps> </html>

                        Dans l'exemple ci-dessus nous avons une double imbrication (2 niveaux). Premièrement, une liste de deux classes de tulipes est incluse ; nous la numérotons. Ensuite, une liste à puces est imbriquée dans chacun des éléments de la liste numérotée.

                        Voyons à quoi cela ressemble dans le navigateur :

                        Riz. 3.2. Exemple d'une liste numérotée à plusieurs niveaux vers une liste à puces dans le navigateur

                        4. Matériel utile sur les listes HTML

                        Il s'agit d'informations qui nécessitent une compréhension des propriétés CSS. Pour ce faire, je recommande d'étudier les leçons suivantes : . Tous les exemples seront immédiatement accompagnés du code source et divisés en onglets HTML (structure), CSS (styles) et Résultat (résultat).

                        4.1 Comment transformer une liste HTML en chaîne

                        La conversion d'une liste HTML en chaîne peut être nécessaire lors de la création d'un menu horizontal. C'est très simple à faire :

                        4.2 Comment créer une liste HTML sans icône

                        La propriété list-style-type en CSS en est responsable (plus de détails) :

                        4.3 Comment centrer une liste en HTML

                        L'élément de liste est un élément de bloc, il doit donc être centré à l'aide d'un remplissage. Mais il y a un point important : nous devons spécifier explicitement la largeur pour que l'alignement fonctionne :

                        4.4 Comment faire une liste en HTML avec des images

                        Une seule propriété CSS, list-style-image , suffit. Dans l'URL, spécifiez l'adresse avant l'icône. Je veux juste noter qu'il est préférable de sélectionner immédiatement une petite image, car la hauteur de la ligne de liste en dépend :

                        4.5 Liste à puces HTML de votre puce

                        Dans ce cas, vous devez au préalable connecter les icônes de police (par exemple, FontAwesome ). Ensuite, vous pouvez créer n'importe quelle icône au lieu d'un marqueur standard :

                        4.6 Comment faire une liste en HTML en plusieurs colonnes

                        Pour faire une liste en plusieurs colonnes, nous utiliserons la propriété CSS column-count (la propriété n'est supportée que dans les navigateurs suivants : IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Vous devez également définir la hauteur de la liste pour voir la division en plusieurs colonnes :

                        5. Entraînez-vous à travailler avec des listes

                        Dans la vidéo ci-dessous, vous pouvez voir tout le travail avec les listes HTML en pratique :

                        Pour consolider les informations reçues, je recommande de réaliser toutes les étapes manuellement. Essayez différentes puces pour les listes, créez des listes numérotées, puis passez à des listes à plusieurs niveaux (imbriquées) et expérimentez-les.

                        C'est ici que nous terminons avec les listes et passons à la leçon suivante sur les images.

                        Entraînez-vous davantage !

                        Leçon 3. Comment faire une liste en HTML 4.91 /5 (98.26%) 23 voix