Base du web #1 | cours HTML

Les Bases du WEB – Liste

Bienvenue à ce quatrième blogue sur les bases de HTML, il est temps d’intégrer une liste dans notre page, vous pouvez lire les informations détaillées sur le site de Mozilla (UL, OL, LI).

Nous commençons maintenant à acquérir de meilleures connaissances en ce qui constitue une page web et son infrastructure. Bien qu’on ne soit pas encore des experts de la programmation HTML, nous y approchons à petits pas!

Pour son utilité, nous savons qu’on peut utiliser des listes pour afficher plusieurs éléments. Par contre, ce qui est plaisant avec le HTML, c’est que ces listes peuvent aussi être utilisées pour afficher de beaux menus complexes sur une seule page (avec un peu de style (CSS) que nous verrons dans de futures leçons) ou même des images en rafales avec l’aide de JavaScript pour avoir un bel effet WEB 2.0.

Pour débuter, il faut savoir qu’il existe deux types de liste: les listes ordonnées (balise « ol ») et les listes désordonnées (balise « ul »).

Une liste ordonnée est simplement numérotée.

Exemple:

  1. Premier
  2. Deuxième

Une liste désordonnée s’affiche habituellement avec des points.

Exemple:

  • Premier
  • Deuxième

Lors de la création d’une liste, chaque item doit être énuméré avec la balise « li ». Voici des exemples de listes et ses dispositions:

Pour la liste ordonnée:

<ol>
  <li>Premier</li>
  <li>Deuxième</li>
</ol>

Pour la liste désordonnée:

<ul>
  <li>Premier</li>
  <li>Deuxième</li>
</ul>

Comme vous avez remarqué, la seule différence entre ces deux listes est l’ouverture de la liste où l’on place soit la balise « ul » ou « ol ».

Pour les listes, on peut aussi les imbriquer pour insérer des sous-listes:

Exemple:

<ul>
  <li>Mon Premier
    <ul>
      <li>Premier Sous-menu</li>
      <li>Deuxième Sous-menu</li>
    </ul>
  </li>
  <li>Mon Deuxième</li>
</ul>

Voici le résultat de l’affichage pour l’exemple ci-haut :

  • Mon Premier
    • Premier Sous-menu
    • Deuxième Sous-menu
  • Mon Deuxième

Voilà pour l’introduction aux listes. Dans notre prochain blogue, nous allons ajouter du style à votre page!

Voir la leçon sur You Tube


Commentaires

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *