Listes HTML : Ordre, Désordre & Définition (Tutoriel Complet)

Une page Web est triée et indexée comme l’un des meilleurs moyens de présenter des informations. Deux types de listes peuvent être créés via HTML.

• Liste ordonnée
• Liste non ordonnée

Listes non ordonnées

…….
…….
…….
…….

type = “disc” définit un disque solide. type = « cercle » définit un cercle vide. type = « square » définit un carré plein.

Exemple 1

UP
Punjab
Haryana
MP

Production

Exemple 2

UP
Punjab
Haryana
MP

Production

O UP

Ô Pendjab

O Haryana

O MP

Listes ordonnées

………
………
………
………

type = « 1 » définit un numéro de séquence. type = « A » définit la lettre majuscule de la séquence A, B, C .. type = « a » définit la lettre minuscule de la séquence a, b, c…

Exemple

UP
Punjab
Haryana
MP

Production

1. UP
2. Punjab
3. Haryana
4. MP

Exemple

UP
Punjab
Haryana
MP

Production

A.UP

B.Punjab

C.Haryana

D.MP

Exemple

UP
Punjab
Haryana
MP

Production

a.UP

b.Punjab

c.Haryana

d.MP

Listes de définitions

……..
  
…….
……..
  
…….
……..
  
…….

inclut tous les éléments de la liste de définitions

inclut tous la première couche d’éléments de liste.

inclut tous les éléments de la deuxième couche de liste

Exemple

AAAA
  
These are A letters
BBBB
  
 These are B letters 
CCCC
  
 These are C letters 

Production

AAAA

Ce sont des lettres A

BBBB

Ce sont des lettres B

CCCC

Ce sont des lettres C

Explication

contient tous les éléments des listes de définitions.

AAAA

contient la première couche d’éléments de liste «AAAA».

Ce sont des lettres A

contient la deuxième couche d’éléments de liste «Ce sont des lettres A».

Style de listes non ordonnées

Les listes non ordonnées peuvent définir le style CSS par son identifiant, sa classe ou son nom de balise.

.class{attribute:value}

Exemple

<style type = “text/css”
#b{font-style:italic}



AAA
BBB

Production

1. AAA
2. BBB

Explication: # b {font-style: italic} définit la police en italique pour class = « a »

Style des listes de définitions

La définition peut être définie dans le style CSS par son identifiant, sa classe ou son nom de balise.

balise {attribut: valeur}

Exemple

dt{color:purple}
dd{font-style:italic}


AAAAA
   
 These are A letters 
BBBBB
 
 These are B Letters 

Production:

AAAAA

Ce sont des lettres

BBBBB

Ce sont des lettres B

Explication: dt {color: purple} & dd {font-style: italic} définit le style CSS par nom de balise.