Blogue

Les Bases d’une page WEB – #4

Les Bases d’une page WEB – #4

Bienvenue à ce quatrième blogue sur les bases de HTML.

     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!

     Aujourd’hui, nous allons apprendre comment afficher des listes à l’écran ainsi que leurs utilités.

     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</li>
	<ul>
		<li>Premier Sous-menu</li>
		<li>Deuxième Sous-menu</li>
	</ul>
	<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

Voir le blogue 3 sur les images

     Prochaine étape sera d’embellir nos pages!