Les listes non-ordonnées HTML

Les listes non-ordonnées HTML

  1. Objectifs

    • ِ Connaitre les listes non-ordonnées en HTML.
  2. Les listes non ordonne

    • Comme leur nom l’indique, les listes non-ordonnées n’ont pas de notion d’ordre et on peut mélanger leurs éléments sans que cela modifie leur sens.
    • Les listes non-ordonnées se définissent avec la balise <ul> et sont utilisées pour afficher des taches, créer des menus ou des sous-menus.
    • Ces listes sont précédées d’un petit symbole qui peut être modifiable en CSS. Souvent c’est un cercle plein, cela peut être un carré, ou même une image personnalisée.
    • Les listes non-ordonnées (Unordered List) fournissent un outil de structuration similaire au liste ordonnée mais sans la notion de numérotation.
    • Elles sont également appelées liste à puce car chaque item est précédé d’une puce graphique qui, par défaut est un disque plein de la même couleur que le texte qui la suit.
    • Une liste à puces est introduite par l’élément <ul> et fermée par </ul>. Comme l’élément <ol>, son seul contenu direct est un ou plusieurs éléments <li>.
    • La valeur par défaut est les puces, qui sont de petits cercles noirs.
    • La structure d’une liste à puces est donc la suivante:
    • <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>1tem 3 </li>
      </ul>




  3. Comment changer l’apparence des puces d’une liste non-ordonnée

    • Si les disques noirs ne sont pas à votre goût, vous pouvez changer l’apparence des puces d’une liste non-ordonnée. Rien de plus simple, ajoutez la propriété “list-style-type” à l’élément HTML “ul” et définissez la valeur qui représentera le style que vous souhaitez donner aux puces de votre liste.
    • Il existe plusieurs styles possibles aux puces d’une liste non-ordonnée, voici quelques possibilités :
      • Disque noir : list-style-type: disc;
      • Cercle : list-style-type: circle;
      • Carré noir : list-style-type: square;
      • Chiffres (ce qui revient à créer une liste ordonnée) : list-style-type: decimal;
      • Caractère: list-style-type: ‘@‘; Vous pouvez utiliser n’importe quel caractère ASCII comme puce pour votre liste, cela offre donc un large panel de possibilités pour styliser vos listes !
      • Aucune puce : list-style-type: none;

      Exemple:

      <!DOCTYPE html>
      <html>
        <head>
          <title>Exemple liste</title>
        </head>
        <body>
          <h2>Exemple de la propriété list-style-type </h2>
          <ul style="list-style-type: square;">
            <li>Apéritifs</li>
            <li>Plat principal</li>
            <li>Salades</li>
          </ul>
          <ul>
            <li>Boissons gazeuses</li>
            <li>Boissons chaudes</li>
            <li>Glaciers</li>
          </ul>
        </body>
      </html>
  4. Comment Créer une Liste sans Puces

    • Dans quelques cas, vous aurez besoin de supprimer les puces/style des listes ordonnées (<ol>) et non ordonnées(<ul>). Supprimer les puces des listes HTML, ce n’est pas dificile à faire. On peut le faire à l’aide des propriétés CSS list-style ou list-style-type.

  5. Comment remplacer les Puces de la Liste avec des Images

    • CSS peut être utilisé pour convertir les puces de la liste aux séquences ou cercles, mais cela donne un peu de contrôle sur leur apparence ou location.
    • Le changement des puces de la liste standard HTML aux images est un moyen incroyable pour les connecter au sujet de votre site web et rendre votre site visuellement plus attrayant.





Abonnez vous à notre chaîne YouTube gratuitement