Est un élément de la liste de définitions. HTML : liste numérotée et à puces
Les listes constituent une partie importante du contenu car elles aident à organiser les informations. Le texte des listes est mieux perçu et plus facile à retenir.
Le plus simple est que devant chacun de ses éléments se trouve un marqueur - un cercle, un carré ou un cercle. L’ordre des éléments dans une liste à puces n’a pas d’importance.
Pour le créer, vous ne devez utiliser que deux balises :
Et
est un conteneur contenant une liste dont les éléments sont spécifiés par la balise
- Pierre
- Ciseaux
- Papier
Par défaut, le marqueur de liste est un cercle noir ( disque). En ajoutant à la balise
attribut taper et en lui attribuant la valeur appropriée, le marqueur peut être changé en cercle ( cercle) ou carré noir ( carré).
Il diffère de marqué en ce que l'ordre des éléments qu'il contient est important et, par conséquent, au lieu d'un marqueur, des chiffres ou des lettres séquentiels sont utilisés ici. Il n'y a pas lieu de se soucier de l'ordre dans la liste : le navigateur se charge de cette tâche. Si vous modifiez la liste (supprimez ou ajoutez un élément dans le désordre), le navigateur la recalculera et l'affichera correctement.
Les balises sont utilisées pour créer des listes numérotées
Et
définit le début et la fin de la liste, tag
remplacé par
.
- Pierre
- Ciseaux
- Papier
Puisque les choses ne sont pas toujours aussi simples avec les listes numérotées, pour le tag
créé les attributs suivants (remarque : ci-dessous est juste une liste numérotée) :
1. taper. Cet attribut vous permet de numéroter la liste non seulement avec des chiffres arabes, mais également avec des chiffres romains ou des lettres latines de casse différente. taper prend en charge les valeurs 1 (par défaut), a, A, i, I (essayez de les expérimenter vous-même).
2. commencer. La numérotation ne doit pas toujours commencer par un. Cet attribut vous permet de définir la valeur initiale - le numéro du premier élément de la liste. Vous pouvez y spécifier que le rapport commence, par exemple, par le chiffre 100 ou la lettre K.
3. renversé. Si la liste ne doit pas aller de 1 à 10, mais de 10 à 1, alors cet attribut doit être utilisé. Si cela est précisé, la numérotation sera inversée.
Afin d'attribuer un numéro arbitraire à un élément au milieu de la liste, vous devez utiliser dans la balise
En modifiant le numéro d'un élément au milieu de la liste, vous modifierez la numérotation de tous les éléments qui le suivent - le rapport commencera par la valeur dans l'attribut value. Par exemple, si vous avez attribué à l'élément 18 le numéro 35, alors les éléments qui le suivent porteront les numéros non pas 19, 20, 21, mais 36, 37, 38.
Liste des définitions
Un type de liste qui n’est pas aussi connu que ceux évoqués ci-dessus. Se compose de termes et de leurs définitions. Créé à l'aide de balises :
- un conteneur contenant une liste.
Le champ d'application des listes de définitions concerne les glossaires, les ouvrages de référence, les tests, les dictionnaires et autres listes volumineuses de type « Terme - explication ».
Voici un exemple de liste de définitions :
- Descripteur
- L'unité de base du langage de balisage, connue de tous sous le nom de « Tag ».
- Attribut
- Une propriété d'une balise qui lui donne fonctionnalités supplémentaires conception de texte.
- Étiquette
- Une seule balise qui n’a pas besoin d’être fermée.
Une liste composée de listes imbriquées les unes dans les autres. Peut inclure des listes de différents types. La difficulté de création réside dans le maintien de l'imbrication correcte des balises, car il est facile de se perdre dans une structure multi-niveaux.
Voici un exemple liste à plusieurs niveaux:
- De construction
- Pascal
- Obéron
- Limbo
- Orienté objet
- Java
- Fonctionnel
- Zézayer
- Python
HTML fournit un ensemble spécial de balises pour présenter des informations sous forme de listes. Les listes sont l'une des formes de présentation de données les plus couramment utilisées, à la fois dans documents électroniques, et en version imprimée. Nous rencontrons des listes presque tous les jours - il peut s'agir d'une liste d'achats nécessaires dans un magasin, d'élèves en classe ou simplement de choses à faire. La possibilité d'organiser des structures de liste est disponible dans de nombreux éditeurs de texte, notamment, un traitement de texte puissant Microsoft Word dispose d'outils pratiques pour formater des listes de différents types (les possibilités de création de listes HTML à l'aide de Microsoft Word sont abordées au chapitre 8). Voici un certain nombre de cas pour lesquels l'utilisation de listes est assez pratique :
- Combiner des informations en une seule structure pour créer une apparence lisible.
- Description de processus complexes étape par étape.
- Une disposition des informations sous forme de table des matières, avec des paragraphes pointant vers les sections pertinentes du document.
Notez que les points ci-dessus sont précisément organisés sous la forme d’une structure de liste.
HTML fournit les principaux types de listes suivants : liste à puces, numérotée et liste de définitions. Pour implémenter des listes différents types Les balises suivantes sont utilisées :
- ,
- (LI - Élément de liste, élément de liste). Étiqueter
- ne nécessite pas de balise de fermeture correspondante, bien que sa présence ne soit en principe pas interdite. Les navigateurs commencent généralement chaque nouvel élément de liste sur une nouvelle ligne lors de l'affichage d'un document.
Les informations fournies sont suffisantes pour construire une liste à puces de base. Donnons un exemple de document HTML utilisant une liste à puces, dont l'affichage par le navigateur est illustré à la Fig. 2.1.
Exemple de liste à puces - Bélier
- Taureau
- Jumeaux
- Cancer
- Lion
- Vierge
- Balance
- Scorpion
- Sagittaire
- Capricorne
- Verseau
- Poisson
Signes du zodiaque :
Riz. 2.1. Affichage du navigateur de la liste à puces
Notez qu'en plus des éléments de liste marqués de la balise
- , d'autres éléments HTML peuvent être présents. Dans l'exemple ci-dessus, l'un de ces éléments est du texte brut, qui n'est pas un élément de liste, mais fait office de titre.
Note
Certains manuels sur le langage HTML indiquent qu'une balise conteneur doit être utilisée pour définir le titre de la liste.
(LH - En-tête de liste, en-tête de liste). Cette balise n'est actuellement reconnue par aucun navigateur courant et ne fait pas partie de la spécification HTML. Ainsi, son utilisation devient inutile, même si elle n’entraînera aucune erreur. Dans la balise
- deux paramètres peuvent être spécifiés : COMPACT et TYPE.
- .
Exemple d'entrée :
-
.
Note
Les navigateurs interprètent le type de jeton différemment pour élément individuel liste. Le navigateur Netscape modifie l'apparence du marqueur pour celui-ci et tous les suivants jusqu'à ce que la prochaine redéfinition de l'apparence du marqueur soit rencontrée. Navigateur Internet L'Explorateur modifie l'apparence du marqueur uniquement pour cet élément.
Marqueurs de liste graphiques
Vous pouvez utiliser des images graphiques comme puces de liste, ce qui est largement utilisé pour créer des documents HTML attrayants et bien conçus. En fait, cette possibilité n'est pas offerte directement par le langage HTML, mais est implémentée de manière quelque peu artificielle. Cela ne signifie pas que cela n’est pas recommandé ou répréhensible, mais seulement qu’aucune construction spéciale du langage HTML ne sera utilisée ici.
Pour comprendre l'idée, vous devez comprendre le mécanisme d'implémentation des listes sur les pages HTML. Il s'avère que la balise list
- (comme d'ailleurs les balises de liste d'autres types, discutées ci-dessous) effectue une seule tâche - elle indique au navigateur que toutes les informations situées après cette balise doivent être affichées décalées vers la droite (en retrait) d'un certain montant. Balises
- , qui pointent vers des éléments de liste individuels, fournissent des marqueurs d'éléments de liste standard.
Si nous devons créer une liste avec des marqueurs graphiques, nous pouvons alors nous passer complètement de balises
- . Il suffira d'insérer l'image graphique souhaitée avant chaque élément de la liste. Le seul problème à résoudre est de séparer les éléments de la liste les uns des autres. Vous pouvez utiliser des balises de paragraphe pour cela
Ou forcer un saut de ligne
. Un exemple de mise en œuvre d'une liste avec des marqueurs graphiques dont l'affichage est illustré à la Fig. 2.2 est présenté ci-dessous :Liste à puces Signes du zodiaque :
Bélier
Riz. 2.2. Liste à puces avec puces graphiques
Dans l'exemple ci-dessus, le marqueur d'élément de liste est fichier graphique Green_ball.gif. Notez que l'utilisation de graphiques sur les pages HTML peut augmenter considérablement la quantité d'informations transmises. Cependant, dans dans ce cas cette augmentation est extrêmement faible. Ici le même fichier est utilisé pour tous les marqueurs,
qui ne sera transmis qu'une seule fois. La taille des fichiers d'une petite image est également extrêmement petite.
Note
Les techniques de création de listes avec des puces graphiques sont abordées tour à tour au chapitre 8.
Liste numérotée
Un autre type de liste implémenté en HTML est la liste numérotée. Sinon, les listes de ce type sont dites ordonnées. Le nom de famille est souvent utilisé comme traduction formelle du nom de la balise correspondante.
- , à l'aide duquel des listes de ce type sont organisées en documents HTML (OL - Ordered List, liste ordonnée).
- .
Voici un exemple de document HTML utilisant une liste numérotée : affichage dont navigateur est illustré à la Fig. 2.3.
Exemple de liste numérotée - Sirius
- Kanopus
- Arcturus
- Alpha Centaure
- Véga
- K appella
- Rigel
- Procyon
- Achernar
- Bêta Centaure
- Wetelgeuse
- Aldébaran
. . .- Mizar
. . .- Polaire
Les étoiles les plus brillantes visibles depuis la Terre :
Riz. 2.Z. Liste numérotée
Dans la balise
- Les paramètres suivants peuvent être spécifiés : COMPACT, TYPE et START.
- .
Exemple d'entrée :
- .
Paramètre de balise START
- vous permet de commencer à numéroter la liste à partir de quelque chose d'autre qu'un. La valeur du paramètre START doit toujours être un nombre naturel, quel que soit le type de numérotation de liste. Voici un exemple :
- pour les listes numérotées, permet l'utilisation des paramètres TYPE et VALEUR. Le paramètre TYPE peut prendre les mêmes valeurs que pour la balise
- .
- .
Note
Les navigateurs interprètent différemment le type de numérotation d’un élément de liste individuel. Le navigateur Netscape modifie le type de numérotation de cet élément et de tous les éléments suivants jusqu'à ce que le prochain remplacement soit rencontré. Internet Explorer modifie l'apparence du numéro uniquement pour cet élément.
Zvaleur du paramètre de la balise VALUE
- - vous permet de modifier le numéro d'un élément de liste donné. Cela modifie la numérotation de tous les éléments suivants. Une application typique est celle des listes avec certains éléments manquants. Un exemple d'une telle liste a été donné ci-dessus (Fig. 2.3). Il fournit une liste ordonnée des étoiles les plus brillantes, dans laquelle les 58e et 75e places contiennent des étoiles clairement visibles à nos latitudes (Mizar est l'étoile la plus brillante de la constellation de la Grande Ourse et Polaris est l'étoile la plus brillante de la constellation de la Petite Ourse). .
Donnons un autre exemple original d'utilisation de différents types de numérotation. Le code HTML ci-dessous contient trois listes avec une numérotation différente. Pour faciliter la visualisation, chacune des listes est placée dans une cellule distincte du tableau. Les trois listes sont identiques et ne diffèrent que par le type de numérotation : dans la première colonne du tableau il y a des chiffres arabes, dans la seconde - des chiffres romains et dans la troisième la numérotation est en lettres latines. Veuillez noter que les éléments de la liste sont vides, c'est-à-dire après n'importe quelle balise
- il n'y a pas de données. Un exemple de ce genre peut être utilisé comme table de correspondance entre l'écriture des nombres en chiffres arabes et romains. Il s'avère que n'importe quel navigateur prenant en charge les listes peut être utilisé comme générateur d'un tel tableau (Fig. 2.4), il vous suffit de taper le code HTML donné. La numérotation en chiffres romains fonctionne correctement jusqu'à la valeur 3999. En étudiant la colonne de droite, vous pourrez comprendre comment se fait la numérotation en lettres romaines. Une fois la numérotation à une lettre (de A à Z) épuisée, le premier numéro à deux lettres est pris comme numéro suivant - AA, etc.
Utiliser différents types de numérotation dans les listes -
. . .
-
. . .
-
. . .
Riz. 2.4. Différents types de numérotation de listes HTML
Liste des définitions
Les listes de définitions, également appelées dictionnaires de définitions, constituent un type particulier de liste. Contrairement aux autres types de listes, chaque élément d'une liste de définitions se compose toujours de deux parties. La première partie de l'élément de liste contient le terme en cours de définition et la deuxième partie contient du texte sous la forme d'une entrée de dictionnaire qui révèle la signification du terme.
Les listes de définitions sont spécifiées à l'aide d'une balise conteneur
- (Liste de définitions). À l'intérieur du conteneur avec une étiquette
- (Terme de définition) le terme en cours de définition est marqué et l'étiquette
- (Description de la définition) - un paragraphe avec sa définition. Pour les balises
- Et
- Vous pouvez omettre les balises de fermeture correspondantes.
De manière générale, la liste des définitions s'écrit comme suit :
- Terme
- Définition du terme
Dans le texte après la balise
- les éléments de niveau bloc tels que les balises de paragraphe ne peuvent pas être utilisés
Ou des en-têtes
-
. En règle générale, le texte du terme défini doit être situé sur une seule ligne. Le texte contenant la définition du terme s'affiche à partir de la ligne suivante (ou chaque ligne pour certains navigateurs) après la définition du terme, en retrait vers la droite. Dans les informations placées après le tag
- , les éléments au niveau du bloc peuvent être localisés. Il s'ensuit notamment que des listes de définitions peuvent être imbriquées.
Dans la balise
- un paramètre COMPACT peut être spécifié, dont le but est similaire aux autres listes décrites ci-dessus.
- Personne flegmatique
- Passif, très travailleur, lent à s'adapter ;
humeur stable, peu sensible aux influences extérieures;
léthargie des réactions émotionnelles et lenteur de l'activité volontaire
- Sanguine
- Actif, énergique, adaptable, -
vivacité et mobilité des réactions émotionnelles, rapidité et force des manifestations volitives
- Colérique
- Actif, très énergique, persistant ;
impétuosité et force des réactions émotionnelles, manifestations violentes de la volonté
- Mélancolique
- Passif, facilement fatigué, difficile à adapter, -
faiblesse des manifestations volitives et prédominance de l'humeur dépressive, doute de soi - Zempya
- Lune
- Carte
- Phobos
- Déimos
- Uranus
- Ariel
- Parapluie
- Titanie
- Obéron
- Miranda
- Neptune
- Triton
- Néréide
Principales utilisations des listes :
Numéroté - pour lister les éléments qui se suivent dans un ordre strictement défini.
À puces : pour répertorier les éléments dans un ordre aléatoire.
Multi-niveau - pour spécifier les informations de certains éléments.
Liste de définitions - utilisée pour formater les dictionnaires.
Page HTML de liste numérotée
Les balises sont utilisées pour créer des listes numérotées
-
Étiqueter
-
Par défaut, les éléments de la liste sont numérotés dans l'ordre 1, 2, 3... À l'aide de l'attribut TYPE, vous pouvez modifier le style de numérotation.
Numérotation des valeurs TYPE A A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..
Si vous ajoutez déjà liste existante nouvelles valeurs, le navigateur les recalculera automatiquement.
À l'aide des attributs START VALUE, vous pouvez modifier l'ordre de numérotation de la liste.
START - utilisé pour spécifier le numéro de départ de la liste, différent de 1.
VALEUR - permet d'attribuer un numéro arbitraire à n'importe quel élément de la liste.
Exemple:
Page HTML de liste à puces
Les balises sont utilisées pour créer des listes à puces
- indique le début/la fin d'un élément de liste individuel.
Par défaut, les éléments de la liste sont marqués d'un cercle noir. L'attribut TYPE peut être utilisé pour modifier le style de marquage.
Au sein d’une même liste, vous pouvez utiliser différents marquages pour les éléments de la liste.
Exemple:
Page HTML de liste à plusieurs niveaux
Pour créer des listes à plusieurs niveaux, vous pouvez utiliser des listes à puces ou numérotées, ou une combinaison des deux. Une liste à plusieurs niveaux est créée en imbriquant une liste dans le corps d’une autre. La tâche principale est de ne pas se tromper. Pour ce faire, je vous conseille de faire des retraits différents pour les listes individuelles.
Listes de définitions de pages HTML
Trois balises sont utilisées pour créer des listes de définitions :
- - début/fin de la liste.
- - début/fin d'un terme spécifique.
- - début/fin de l'article explicatif du terme.
Balises
- Et
- il n'est pas nécessaire d'alterner. Ceux. Vous pouvez « lier » plusieurs termes à une même définition, et vice versa.
Exemple:
Code HTML :
- Terme 1
- Résumé1 au terme 1
- Résumé2 au terme 1
Affichage du navigateur :
Terme 1 Résumé1 au terme 1 Résumé2 au terme 1Puisque sur ce site certains styles sont appliqués à certains éléments, leur affichage dans le tableau est quelque peu différent de ce que vous obtiendrez.
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.
- disque - marqueurs en forme de cercle rempli;
- cercle - marqueurs en forme de cercle ouvert;
- carré - marqueurs carrés.
- Sépulki
- Sépulcaire
- Sépulnation
- 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 fait office de marqueur.
Exemple 2 : Utilisation de ::avant
Listes - 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
Listes - Sépulki
- Sépulcaire
- Sépulnation
Il est préférable de choisir une petite image afin de ne pas transformer les éléments de la liste en légendes. Sur la fig. 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
Listes - 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.
À 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 les 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 marqué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 > Numéroté liste 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 majuscules :
<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 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 "
"
<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 > Batterieli >
<li > Doudochkali >
ul >
corps >
HTML >
- Violon
- Guitare
- classique
- guitare rythmique
- guitare électrique
- Batterie
- Doudochka
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 :
Exemple 1 : Modification de l'apparence d'un marqueur
Listes 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 à
La prochaine leçon portera sur la création d'un menu simple basé sur les connaissances acquises lors de cette leçon.
Étiqueter
- Le début/la fin de la liste entière est marqué.
Étiqueter
- indique le début/la fin d'un élément de liste individuel.
Étiqueter
-
Voici un exemple de document HTML utilisant une liste de définitions :
Exemple de liste de définitions Classification des tempéraments humains typiques,
basésur les vues d'Hippocrate
L'affichage du document HTML donné dans le navigateur est illustré à la Fig. 2.5.
Riz. 2.5. Liste de définitions (semblable à un groupe d'entrées dans un dictionnaire)
Type de listes
Et - .
Ces types de listes ont été initialement conçus pour être plus compacts que les listes à puces classiques. Selon les règles d'écriture des éléments de ces listes, il n'était pas autorisé d'y utiliser des éléments de bloc, ce qui signifie qu'il était impossible de mettre en œuvre l'imbrication de listes de ce type. Chaque élément de la liste était une ligne de texte.
Pour des listes comme
il était prévu d'introduire une limite sur la « longueur du texte d'un élément de liste (24 caractères). Une telle limitation nous permettrait de déduire des listes comme
sous une forme similaire à la liste des répertoires dans systèmes d'exploitation UNIX et MS-DOS lors de l'utilisation du commutateur /W (plusieurs colonnes). De plus, les marqueurs n'étaient pas affichés pour les éléments de liste de ce type. Actuellement, tous ces plans n'ont pas été mis en œuvre, car l'utilisation ultérieure de listes de ce type n'est pas recommandée. Les versions modernes des navigateurs affichent les listes de ces types exactement de la même manière que les listes comme
- .
Listes imbriquées
Il arrive parfois que vous deviez inclure une liste entière du même type ou un autre dans un élément de liste d'un type. Cela créera des listes à plusieurs niveaux ou imbriquées. HTML permet l'imbrication arbitraire de différents types de listes, mais il faut être prudent lors de leur organisation.
Vous trouverez ci-dessous le code HTML d'un document avec des listes imbriquées, dont l'affichage est illustré à la Fig. 2.6. Dans cet exemple, chaque élément de la liste à puces contient sa propre liste numérotée.
Exemple de liste imbriquée Satellites de certaines planètes
- , les éléments au niveau du bloc peuvent être localisés. Il s'ensuit notamment que des listes de définitions peuvent être imbriquées.
-
P. exemple d'entrée :
- .
- .
Cette entrée détermine la numérotation de la liste commençant par la lettre latine majuscule « E ». Pour les autres types de numérotation, l'entrée START=5 définira la numérotation, respectivement, à partir du chiffre "5", du chiffre romain "V", etc.
La modification du type de numérotation de la liste et des valeurs numériques peut être effectuée pour n'importe quel élément de la liste. Étiqueter
- pour les listes numérotées, permet l'utilisation des paramètres TYPE et VALEUR. Le paramètre TYPE peut prendre les mêmes valeurs que pour la balise
Le paramètre COMPACT a la même signification que les listes à puces. Le paramètre TYPE est utilisé pour spécifier le type de numérotation des listes. Peut prendre les valeurs suivantes :
TYPE = A - définit des marqueurs sous forme de lettres latines majuscules ;
TYPE = a - définit des marqueurs sous forme de lettres latines minuscules ;
TYPE = I - définit des marqueurs sous la forme de grands chiffres romains ;
TYPE = i - définit des marqueurs sous la forme de petits chiffres romains ;
TYPE = 1 - définit des marqueurs sous forme de chiffres arabes.
La valeur par défaut est toujours TYPE = 1, c'est-à-dire une numérotation en chiffres arabes. Cela s'applique également aux listes numérotées imbriquées. Ici, contrairement aux listes à puces, les navigateurs par défaut ne rendent pas la numérotation différente selon les niveaux d'imbrication des listes. Notez qu'après le numéro de l'élément de la liste, il y a toujours un signe « point » supplémentaire.
Le paramètre TYPE avec les mêmes valeurs peut être utilisé pour spécifier le style de numérotation des éléments individuels de la liste. Pour ce faire, le paramètre TYPE avec la valeur correspondante peut être spécifié dans la balise de l'élément de liste
Listes de ce genre représentent généralement une séquence ordonnée d’éléments individuels. La différence avec les listes à puces est que dans une liste numérotée, chaque élément est automatiquement précédé d'un numéro de série. Le type de numérotation dépend du navigateur et peut être défini par les paramètres des balises de liste. Sinon, la mise en œuvre de listes numérotées est très similaire à la mise en œuvre de listes à puces.
Balises
- Et
Pour créer une liste numérotée, vous devez utiliser une balise conteneur, à l'intérieur de laquelle se trouvent tous les éléments de la liste. Les balises de liste d'ouverture et de fermeture fournissent un saut de ligne avant et après la liste, séparant ainsi la liste du contenu principal du document.
Comme pour une liste à puces, chaque élément d'une liste numérotée doit commencer par la balise
- , qui pointent vers des éléments de liste individuels, fournissent des marqueurs d'éléments de liste standard.
Le paramètre COMPACT est écrit sans valeur et permet d'indiquer au navigateur que cette liste doit être présenté sous une forme compacte. Par exemple, la police ou la distance entre les lignes de liste, etc. peuvent être réduites.
Note
Actuellement, la présence du paramètre COMPACT dans la balise
- n'affecte en rien l'affichage des listes dans les principaux navigateurs. L'utilisation de ce paramètre est donc inutile, d'autant plus que son utilisation n'est pas recommandée par la spécification HTML 4.0.
Le paramètre TYPE peut prendre les valeurs suivantes : disque, cercle et carré. Ce paramètre permet de forcer l'apparition des puces de liste. Le type exact de marqueur dépendra du navigateur que vous utilisez. Les options d'affichage typiques sont les suivantes :
TYPE = disque - les marqueurs sont affichés sous forme de cercles pleins ; TYPE = cercle - les marqueurs sont affichés sous forme de cercles ouverts ; TYPE = carré - les marqueurs sont affichés sous forme de carrés remplis. Exemple d'entrée :
-
.
La valeur par défaut est TYPE = disque. Pour les listes à puces imbriquées, la valeur par défaut est le disque au premier niveau, le cercle au deuxième niveau, le carré au troisième niveau et au-delà. C'est exactement ce qui se fait dans dernières versions Navigateurs Netscape et Internet Explorer. Veuillez noter que d'autres navigateurs peuvent afficher les marqueurs différemment. Par exemple, dans la spécification HTML 4.0, le type de marqueur affiché lorsque TYPE = carré est spécifié sous la forme d'un contour carré.
Le paramètre TYPE avec les mêmes valeurs peut être utilisé pour spécifier le type de marqueurs pour les éléments individuels de la liste. Pour ce faire, le paramètre TYPE avec la valeur correspondante peut être spécifié dans la balise de l'élément de liste
- .
- ,
- ,
- , à l'aide duquel des listes de ce type sont organisées en documents HTML (UL - Unordered List, liste non ordonnée).
Une liste à puces utilise caractères spéciaux, appelés marqueurs de liste (souvent appelés puces, qui est la prononciation formelle du terme anglais bullet). L'apparence des marqueurs de liste est déterminée par le navigateur, et lors de la création de listes imbriquées, les navigateurs diversifient automatiquement l'apparence des marqueurs à différents niveaux d'imbrication.
Balises Et<LI >
Pour créer une liste à puces, vous devez utiliser un conteneur de balises, à l'intérieur duquel se trouvent tous les éléments de la liste. Les balises de liste d'ouverture et de fermeture fournissent un saut de ligne avant et après la liste, séparant ainsi la liste du contenu principal du document, il n'est donc pas nécessaire d'utiliser des balises de paragraphe ici.
.
Chaque élément de la liste doit commencer par une balise
