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 :
- Mettre sa ceinture
- Vérifier les rétroviseurs
- 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 :
- Mettre sa ceinture
- Vérifier les rétroviseurs
- Mettre le contact
- Faire la lessive
- Finir ma page web
- Ranger l'armoire
