Conception & Réalisation de sites Web

Structures de mise en page

Les paragraphes

La balise <p> permet de créer un paragraphe. C'est la structure la plus simple.
Par défaut, elle se traduit par un bloc de texte avec un espace avant et après.

Exemple de paragraphe :

<p>
   Mon texte ici
</p>

Ce qui donne dans le navigateur :

Mon texte ici

Les listes

Il est possible de faire des listes ordonnées ( 1, 2, 3 ou a, b, c) ou non ordonnées (avec des puces rondes ou carrés).

Pour cela nous allons utiliser une balise <ol> ("Ordered List") ou <ul> ("Unordered List") dans laquelle nous placerons autant de balises <li> (accronyme de "list item") que nous avons d'élements dans notre liste.

Exemple de liste ordonnée :

<ol>
   <li>Mettre sa ceinture</li>
   <li>Vérifier les rétroviseurs</li>
   <li>Mettre le contact</li>
</ol>

Ce qui donne dans le navigateur :

  1. Mettre sa ceinture
  2. Vérifier les rétroviseurs
  3. Mettre le contact

Exemple de liste non-ordonnée :

<ul>
   <li>Faire la lessive</li>
   <li>Finir ma page web</li>
   <li>Ranger l'armoire</li>
</ul>

Ce qui donne dans le navigateur :

  • Faire la lessive
  • Finir ma page web
  • Ranger l'armoire

Il est possible de choisir le type de puce que nous souhaitons grâce à l'attribut type.

Pour une liste ordonnée (ol), l'attribut type peut avoir les valeurs suivantes :

  • type="1" => pour une suite numérique
  • type="a" => pour une suite alphabétique
  • type="A" => pour une suite alphabétique en majuscule
  • type="I" => pour une suite numérique en chiffres romains

Pour une liste non-ordonnée (ul), l'attribut type peut avoir les valeurs suivantes :

  • type="disc" => pour un rond plein
  • type="circle" => pour un rond vide
  • type="square" => pour un carré

<ol type="A">
   <li>Mettre sa ceinture</li>
   <li>Vérifier les rétroviseurs</li>
   <li>Mettre le contact</li>
</ol>
<ul type="square">
   <li>Faire la lessive</li>
   <li>Finir ma page web</li>
   <li>Ranger l'armoire</li>
</ul>

Ce qui donne dans le navigateur :

  1. Mettre sa ceinture
  2. Vérifier les rétroviseurs
  3. Mettre le contact
  • Faire la lessive
  • Finir ma page web
  • Ranger l'armoire
Balise Indication donnée au navigateur
<ol> Début d'une liste ordonnée.
</ol> Fin d'une liste ordonnée.
<ul> Début d'une liste non-ordonnée.
</ul> Fin d'une liste non-ordonnée.
<li> Début d'un item de la liste (une puce sera ajoutée).
</li> Fin d'un item de la liste.
Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!