Type de marqueur de liste. Liste numérotée en HTML. Formatage des listes à puces
La seule différence est que cette balise est strictement destinée aux listes de numérotation. Le nom de la balise vient de l'abréviation anglaise « Ordered List » - une liste numérotée.
Syntaxe des balises
- Élément n°1
- Élément n°2
- Élément n°3
- ...
Où l'attribut type="value" peut prendre les valeurs suivantes
- A - définit des marqueurs sous forme de lettres latines majuscules (A, B, C..) ;
- a - définit des marqueurs sous forme de lettres latines minuscules (a, b, c..) ;
- I - place des marqueurs sous forme de grands chiffres romains (I, II, III, IV..) ;
- i - définit des marqueurs sous forme de petits chiffres romains (i, ii, iii, iv..) ;
- 1 (par défaut) - définit des marqueurs sous forme de chiffres arabes (1, 2, 3 ..) ;
L'attribut start="value" spécifie la valeur initiale (valeur de départ) du rapport.
L'attribut inversé spécifie le comptage inversé (si nécessaire).
Étiqueter
- nécessite l'utilisation obligatoire d'une balise de fermeture
Pour former des éléments de liste, il est utilisé étiquette appariée
Note
Dans la liste, vous pouvez remplacer le compte par le vôtre. Il existe un attribut spécial value="" sur la balise à cet effet.
- Élément n°1
- Élément n°2
- Élément n°3
Exemples avec des listes numérotées en html ( )
Exemple 1. Liste numérotée HTML en lettres latines
Exemple avec des majuscules
- Élément n°1
- Élément n°2
- Élément n°3
- Élément n°1
- Élément n°2
- Élément n°3
Exemple avec des lettres minuscules
- Élément n°10
- Élément n°11
- Élément n°12
Voici à quoi cela ressemble sur la page :
- Élément n°1
- Élément n°2
- Élément n°3
Exemple 2. Liste numérotée HTML en lettres romaines
Exemple avec des majuscules
- Élément n°1
- Élément n°2
- Élément n°3
Voici à quoi cela ressemble sur la page :
- Élément n°1
- Élément n°2
- Élément n°3
Exemple avec des lettres minuscules
- Élément n°1
- Élément n°2
- Élément n°3
Voici à quoi cela ressemble sur la page :
- Élément n°1
- Élément n°2
- Élément n°3
Exemple 3. Liste numérotée HTML position de départ différente
Un exemple qui montre les capacités de l'attribut start, qui vous permet de définir la valeur de départ du compteur.
- Élément n°1
- Élément n°2
- Élément n°3
Voici à quoi cela ressemble sur la page :
- Élément n°1
- Élément n°2
- Élément n°3
Exemple 4. Modification du nombre dans les listes numérotées HTML
Vous trouverez ci-dessous un exemple avec la possibilité de modifier les valeurs du compteur à l'aide de l'attribut value lors de l'affichage de nouveaux éléments dans les balises
- Élément n°1
- Élément n°2
- Élément n°3
- Élément n°4
Voici à quoi cela ressemble sur la page :
- Élément n°1
- Élément n°2
- Élément n°3
- Élément n°4
Exemple 5. Liste numérotée inversée en HTML
Vous trouverez ci-dessous un exemple de liste numérotée inversée (en comptant dans l’ordre inverse).
- Élément n°1
- Élément n°2
- Élément n°3
- Élément n°4
Voici à quoi cela ressemble sur la page :
- Élément n°1
- Élément n°2
- Élément n°3
- Élément n°4
À 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=" "
- Quatre
- Quatre
- Mercure
- Vénus
- Terre
- Jupiter
- Saturne
- Neptune
- Pluton
- title "insérez une autre liste puis fermez-la avec une deuxième balise"
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 >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 >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 >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 >En plus des listes habituelles en html, vous pouvez créer listes à plusieurs niveaux, c'est-à-dire des sous-sections pour certains points. Pour ce faire, après la balise et le titre "
- 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.
Bonjour, chers lecteurs du site blog. Aujourd'hui, dans le cadre de cette section, je souhaite parler des différentes listes HTML qui peuvent être créées à partir de balises UL, OL, LI et DL spécialement conçues à cet effet. Les paires UL et LI créent des listes à puces, les paires OL et LI créent des listes numérotées et les éléments DL, DT et DD créent des listes de définitions. Nous examinerons également brièvement les principes de création de structures imbriquées.
Je voudrais vous rappeler que nous avons déjà réussi à parler des bases de la mise en page moderne ainsi que de la mise en page tabulaire (). De plus, nous avons abordé les bases et avons appris jusqu'au bout.
Listes à puces basées sur les balises UL et LI
La balise UL est utilisée pour créer des listes à puces et la balise OL est utilisée pour créer des listes numérotées. Ces balises sont des balises par paires et bloquent, tout comme l'élément LI.
Entre les balises d'ouverture et de fermeture se trouvent des éléments de liste individuels, qui à leur tour sont enfermés dans un élément LI d'ouverture et de fermeture. Le navigateur ajoute des retraits d'une ligne en haut et en bas des listes HTML, similaires à l'indentation créée par une balise de paragraphe.
Regardons, par exemple, une option à puces qui pourrait ressembler à ceci :
- Première ligne
- Deuxième
- Dernier élément
Seuls les éléments LI peuvent se trouver à l'intérieur des balises UL d'ouverture et de fermeture, et dans ces éléments (clauses) eux-mêmes, vous pouvez insérer n'importe quel contenu (texte, images, titres, paragraphes, liens et même d'autres listes).
Ceux. L'UL sert uniquement à fournir une liste à puces (non ordonnée), et tout ce que vous verrez sur page web en son sein, est implémenté en utilisant le contenu des éléments LI.
Pour UL, vous pouvez changer le type de marqueur en y écrivant différentes significations pour l'attribut "Type". Si le « Type » (contrôle de l'apparence des marqueurs) pour l'élément UL n'est pas spécifié, alors l'apparence par défaut du marqueur sera affichée (disque - un cercle rempli de la couleur du texte) :
- — cercle plein (par défaut) ;
- - cercle vide ;
- - carré
Dans les exemples ci-dessus, nous avons spécifié l'attribut « Type » dans l'élément UL en utilisant ce type marqueurs pour tous les articles. Mais l'attribut « Type » peut également être spécifié pour chaque balise LI individuelle, définissant son propre type de marqueur pour cet élément.
Exemple de liste à puces avec divers types marqueur pour chaque élément :
- Marqueur en forme de disque rempli
- Marqueur en forme de disque non peint
- Carré
Listes numérotées en HTML basées sur la balise OL
Pour créer une liste numérotée, des balises OL sont utilisées, dans lesquelles les éléments LI seront à nouveau situés. OL et LI, comme je l'ai déjà mentionné, sont basés sur des blocs (c'est-à-dire qu'ils ont tendance à occuper tout l'espace dont ils disposent en largeur) et rien d'autre que les éléments LI ne peut être placé à l'intérieur d'OL.
Il s'avère que OL et UL sont des balises de service qui ne sont nécessaires que pour indiquer au navigateur le type de liste que nous créons (à puces ou numérotées). Dans le cas d'un élément numéroté, à gauche de chaque élément nous verrons non pas un marqueur, mais un numéro et un point derrière lui :
- Première ligne
- Deuxième point
- Troisième ligne
Comme je l'ai mentionné juste au-dessus, les éléments UL, OL et LI ont la possibilité d'utiliser l'attribut TYPE. Il vous permet de configurer le type de marqueur ou de spécifier quels chiffres ou lettres seront utilisés pour numéroter les éléments de la liste. Pour une liste numérotée, les paramètres de cet attribut peuvent prendre les valeurs suivantes :
- — la numérotation sera effectuée en chiffres arabes réguliers (la même option sera utilisée par défaut, en l'absence de l'attribut « Type ») ;
- — lettres majuscules comme numérotation ;
- - minuscules ;
- - les chiffres romains majuscules ;
- - chiffres romains minuscules ;
Un exemple de liste numérotée avec différents types de numérotation pour chaque élément :
- numéroté avec de grands chiffres romains
- Numérotation en petites lettres latines
- Numérotation avec de petits chiffres romains
Lors de la création de listes numérotées, il est également possible de commencer la numérotation non pas à partir d'un, mais à partir du numéro spécifié dans l'attribut START. Par exemple:
- Le premier élément dont le numéro est précisé dans la balise OL avec l'attribut start="23"
- L'élément suivant, avec un numéro un plus haut
- Encore un de plus
Pour OL, vous pouvez également démarrer une nouvelle numérotation à partir de n'importe quelle valeur, à partir de n'importe quel élément, en écrivant l'attribut VALUE avec le numéro requis dans le LI d'ouverture de cet élément. Par exemple:
- Premier point avec le numéro un
- Cet élément recevra le numéro spécifié dans l'attribut value="32"
- Article avec un grand nombre
Concevoir l'apparence des listes en CSS (feuilles de style)
Mais d'habitude maintenant apparence les marqueurs ne sont pas spécifiés via l'attribut TYPE, mais , pour lequel les propriétés correspondantes sont spécifiées.
Ici, je vais juste donner un exemple de différentes puces pour des listes non numérotées, dont l'apparence est définie par fichier séparé avec des feuilles de style en cascade.
- Premier point
- Deuxième
- Dernier
Mais nous en reparlerons dans les articles suivants. C’est ainsi que se définit l’apparence des marqueurs UL sur ce blog. Les images sont utilisées comme marqueurs : pour les éléments normaux d'une liste non numérotée - , pour les éléments imbriqués d'une liste non numérotée - .
Listes spéciales et imbriquées en code HTML
Le troisième et dernier type est appelé « listes de définitions » et est spécifié à l'aide de trois balises : DL, DT et DD. DL indique au navigateur que ce qui suit est une liste de définitions.
Généralement, ce type est utilisé (ou était destiné à être utilisé) pour écrire des entrées de dictionnaire composées de termes (enfermés dans des balises DT) et de leurs descriptions (enfermées dans des balises DD).
- Premier mandat
- Description
- Deuxième mandat
- Sa description
Si vous regardez l'exemple ci-dessus, vous remarquerez que l'élément DD (la description du terme) est décalé (de 40 pixels) par rapport à l'élément DT (le terme lui-même).
En général, DL, DT et DD sont des balises de bloc, et seul le contenu avec des balises de ligne peut être inséré à l'intérieur d'un élément DT (il s'avère qu'à l'intérieur de DT, il ne sera pas possible d'utiliser éléments de bloc titres et paragraphes). Et à l'intérieur des balises DD, vous pouvez insérer n'importe quel élément, à la fois en ligne et en bloc.
Liste imbriquée en HTML, il est créé par analogie avec un simple, mais à l'intérieur de la liste principale, certains éléments sont à nouveau enfermés dans la balise d'ouverture et de fermeture UL ou OL.
Attention, le LI de fermeture de l'élément dans lequel l'élément imbriqué sera créé n'est placé qu'après l'intégralité du code de la liste imbriquée (ceci est très important pour son affichage correct sur la page web). La liste imbriquée pourrait ressembler à ceci :
- Le premier paragraphe du principal numéroté
- Deuxième point
- Premier élément d'une puce imbriquée
- Deuxième
- Troisième et dernier point
- Troisième élément numéroté
Bonne chance à toi! A bientôt sur les pages du site blog
Vous pourriez être intéressé
Comment insérer un lien et une image (photo) en HTML – Balises IMG et A Sélection, Option, Textarea, Étiquette, Fieldset, Légende - balises Formulaires HTML listes déroulantes et champ de texte 
Formulaires HTML pour le site - balises Form, Input et Select, Option, Textarea, Label et autres pour créer des éléments de formulaire Web 
Comment les couleurs sont définies dans le code HTML et CSS, sélection des nuances RVB dans les tableaux, sortie Yandex et autres programmes 
Intégrer et objet - Balises HTML pour afficher du contenu multimédia (vidéo, flash, audio) sur des pages Web 
Balises et attributs des rubriques H1-H6, ligne horizontale Hr, saut de ligne Br et paragraphe P selon la norme Html 4.01 
Tableaux en HTML - Balises Table, Tr et Td, ainsi que Colspan, Cellpadding, Cellspacing et Rowspan pour les créer 
Qu'est-ce que le langage de balisage hypertexte HTML et comment afficher une liste de toutes les balises dans le validateur W3C 
Police (visage, taille et couleur), balises Blockquote et Pre - formatage de texte existant en HTML pur (sans en utilisant CSS)
Iframe et Frame - que sont-ils et comment utiliser au mieux les frames en HTML 
Img - Balise HTML pour insérer une image (Src), aligner et enrouler le texte autour d'elle (align), ainsi que définir l'arrière-plan (background)
Une liste à puces est définie en ajoutant une petite puce, généralement sous la forme d'un cercle plein, avant chaque élément de la liste. La liste elle-même est formée à l'aide d'un conteneur
- , et chaque élément de la liste commence par une balise
- comme indiqué ci-dessous.
- Premier point
- Deuxième point
- Troisième point
La liste doit contenir une balise de fermeture
L'exemple 11.1 montre le code HTML permettant d'ajouter une liste à puces à une page Web.
Exemple 11.1. Créer une liste à puces
- Cheburachka
- Géna Crocodile
- Shapokliak
- Rat Larisa
Résultat cet exemple montré sur la fig. 11.1.
Riz. 11.1. Vue liste à puces
Faites attention au remplissage en haut, en bas et à gauche de la liste. De tels retraits sont ajoutés automatiquement.
Les marqueurs peuvent prendre l’une des trois formes suivantes : cercle (par défaut), cercle et carré. Pour sélectionner un style de marqueur, utilisez l'attribut type de la balise
- . Les valeurs acceptables sont données dans le tableau. 11.1
- D'abord
- Deuxième
- Troisième
- D'abord
- Deuxième
- Troisième
- D'abord
- Deuxième
- Troisième
- changement de foi religieuse (facultatif : bouddhisme, confucianisme, hindouisme). Offre spéciale- Judaïsme et Islam ensemble ;
- un changement dans la croyance en l'infaillibilité du parti favori ;
- la croyance que les extraterrestres existent ;
- préférence pour un système politique comme le meilleur du genre (au choix : féodalisme, socialisme, communisme, capitalisme).
- premier élément
- deuxième élément
- dernier élément
- Département commercial
- Ce département est engagé dans la promotion des biens et services
- Département financier
- Ce département s'occupe de toutes les transactions financières
- NOUVELLES DU JOUR
-
- Aujourd'hui la pluie
- Il pleuvra toute la journée
- NOUVELLES DE LA NUIT
- Il pleuvra la nuit
- Demain, une nouvelle journée commencera
| Type de liste | Code HTML | Exemple |
|---|---|---|
| Liste avec marqueurs de cercle | ||
| Liste avec des puces circulaires | ||
| Liste à puces carrées |
L'apparence du marqueur peut varier légèrement en fonction différents navigateurs, ainsi que lors de la modification de la police et de la taille du texte.
La création d'une liste avec des puces carrées est illustrée dans l'exemple 11.2.
Exemple 11.2. Type de marqueurs
Changer les croyances
Le résultat de cet exemple est présenté sur la Fig. 11.2.
En langue balisage HTML Il existe 3 types de listes : les listes ordonnées (numérotées), non ordonnées (non numérotées) et les listes de définitions.
Pour construire une telle liste, vous avez besoin de 2 types d'éléments : « ul » (abréviation de liste non ordonnée, c'est-à-dire liste non ordonnée) et « li » (élément de liste). Tout ce qui est écrit à l'intérieur de « li » est marqué d'un marqueur.
L'apparence d'une telle liste peut être contrôlée en spécifiant les types de marqueurs.
Types de marqueurs
Il existe un attribut de type spécial placé dans les deux éléments de la liste. C'est votre type de marqueur. Il n'en existe que 3 types : cercle, disque et carré :
- - carré
- - disque
- - circonférence
Selon l'endroit où vous spécifiez le type de marqueur, vous pouvez le modifier pour la liste entière ou pour un élément spécifique.
Liste ordonnée
Pour construire une liste, vous avez également besoin de 2 éléments : 'ol' et 'li' (élément de liste). Les marqueurs sont remplacés par des chiffres avec un point. Exemple de liste simple :
Vous pouvez contrôler l'apparence de la liste ordonnée en spécifiant différents types numérotage.
Types de numérotation
Il existe un attribut de type spécial qui est placé dans l'élément « ol » ou « li ». Ceci est votre type de liste. Il existe 5 types au total :
- - Numérotation en chiffres arabes (1, 2, 3)
- - Numérotation en majuscule(A, B, C)
- - Numérotation en lettres minuscules (a, b, c)
- - Numérotation en grands chiffres romains (I, II, III)
- - Numérotation en petits chiffres romains (i, ii, iii)
- - À partir de quel numéro commencer à numéroter ?
Selon l'endroit où vous spécifiez le type de numérotation, vous pouvez la modifier pour l'ensemble de la liste ou pour un élément spécifique.
Liste de définitions
Une liste de définitions a été élaborée pour les entrées du dictionnaire.
Il existe un conteneur général « dl ». À l’intérieur se trouvent « dt » (terminal de définition) et « dd » (description de définition). L'exemple le plus simple :
Tous les éléments de toutes les listes sont des éléments de bloc. Mais seuls les éléments en ligne peuvent être placés à l'intérieur de l'élément 'dt'. Vous pouvez mettre ce que vous voulez dans les éléments « dd » et « li ». C'est de là que viennent les listes imbriquées.
Imbriquées (listes mixtes)
Il s'agit de listes à plusieurs niveaux, au sein desquelles existe une hiérarchie. Ces listes sont souvent utilisées lors de la création d'un plan de site. Exemple:
- Liste mixte
