Listes commandées dans HTML
Utilisation des listes commandées dans HTML
Les listes ordonnées en HTML peuvent être utilisées de plusieurs manières. Les quatre exemples suivants démontreront certains de leurs scénarios d'utilisation:
Exemple n ° 1: utilisation simple des listes ordonnées
Dans cet exemple, nous apprendrons à créer une liste commandée simple dans HTML. Pour ce faire, vous devrez passer par le script HTML indiqué dans l'image suivante:
Les listes commandées dans HTML peuvent être créées en utilisant la balise «OL». Une fois que vous avez appliqué cette balise, vous mentionnez tous les éléments de cette liste ordonnée en les entourant dans la balise «Li». Dans cet exemple, nous créons une liste ordonnée de trois cours. Par conséquent, nous utilisons la balise «OL» suivie des trois balises «Li» dans ce script.
Ensuite, après avoir enregistré ce script et l'exécuté dans notre navigateur, la page Web suivante apparaît sur notre écran. Vous pouvez voir que nos cours spécifiés sont affichés sous la forme d'une liste ordonnée sur cette page Web.
Exemple n ° 2: listes commandées avec des lettres de case supérieur
Il n'est pas nécessaire d'avoir uniquement la liste des nombres ordonnés. Nous pouvons également avoir les listes commandées des alphabets. Le script HTML indiqué dans l'image suivante montrera comment créer une liste commandée avec les lettres supérieures en HTML.
Dans ce script HTML, nous affichons les trois directions différentes sous la forme d'une liste ordonnée. Cependant, cette fois, nous voulons une liste ordonnée des lettres supérieures. Par conséquent, nous utilisons un attribut «Type» supplémentaire avec la balise «OL» pour mentionner le type exact de la liste ordonnée. Nous égalisons cet attribut à «A» pour créer une liste ordonnée avec les alphabets supérieurs. Ensuite, nous mentionnons simplement tous les éléments de cette liste ordonnée avec la balise «Li».
Notre liste ordonnée avec les alphabets supérieurs est indiquée dans l'image suivante:
Note: Si vous remplacez «A» dans le script précédent par «A», «I», «I» ou «1», alors notre liste ordonnée aura de petites lettres de cas, des chiffres romains en haut, des chiffres romains en minuscules, ou nombres, respectivement. Cependant, par défaut, une liste ordonnée dans HTML comprend des nombres. Par conséquent, vous n'avez pas besoin de mentionner spécifiquement le type «1» dans ce cas.
Exemple n ° 3: listes commandées avec un point de départ aléatoire
Parfois, vous ne voulez pas que votre liste commandée commence par «1». Vous voulez plutôt avoir un point de départ aléatoire pour cela. Pour ce faire, vous pouvez utiliser le script HTML indiqué dans l'image suivante:
Dans ce script, nous voulons que notre liste commandée commence à partir du numéro «10». Par conséquent, nous utilisons l'attribut «Démarrer» avec la balise «OL» et l'étalons à «10». Ensuite, nous mentionnons les trois éléments différents avec la balise «Li».
Notre liste commandée avec un point de départ de notre choix autre que «1» est indiquée dans l'image suivante:
Exemple n ° 4: listes ordonnées imbriquées
Dans cet exemple, nous apprendrons à créer les listes ordonnées imbriquées, je.e. listes ordonnées dans une liste ordonnée dans HTML. Le script HTML à cet effet est illustré dans l'image suivante:
Dans cet exemple, nous voulons avoir une liste ordonnée extérieure des différentes boissons. À l'intérieur de chaque catégorie, nous voulions que les listes ordonnées intérieures mentionnent les différentes boissons appartenant à chacune de ces catégories. Par conséquent, nous avons imbriqué les balises «OL» et «Li» en conséquence dans le script HTML indiqué dans l'image précédente.
La page Web suivante affiche notre liste ordonnée imbriquée dans HTML:
Conclusion
Ce tutoriel est de discuter de l'utilisation des listes ordonnées dans HTML. Nous vous avons donné une brève introduction des listes ordonnées dans HTML, suivis de quelques exemples qui devaient apporter plus de clarté à ce concept. Après avoir bien compris ces exemples, vous pourrez utiliser les listes commandées dans HTML assez efficacement.