HTML

Mise en forme du texte HTML

Retraits et listes numérotées ou non numérotées...

Pour terminer la mise en forme du texte il y a les très pratiques balises de liste et de retrait. Pour mettre un texte en retrait ou pour énumérer des éléments avec ou sans numéros.

Ces balises ne peuvent être placées entre d’autres balises à part dans une table. Mais vous pouvez utiliser des balises à l’intérieur de celle-ci. Exemple, un BLOCKNOTE peut être dans une table mais les polices de caractère ou l’alignement doivent impérativement être placés à l’intérieur du BLOCKNOTE pour affecter son texte. Toute ces balises peuvent être jumelées ensemble comme par exemple faire une énumération dans un texte en BLOCKNOTE.

Voici les différents types de balises. La balise <ol> (ordered lists) permet des énumérations avec une numérotation automatique. Alors que la balise <ul> (Unordered lists) affiche une liste non-nuumérotée. Chaque item ou élément de la liste doit être entouré par la balise <li>élément<<li> (list items).

La balise <blockquote> permet quant à elle de mettre un texte en retrait. N’oubliez pas de refermer la balise sinon votre texte restera jusqu’au bout en retrait. À l’aide des feuilles de style vous pouvez donner du style à vos listes mais ce n’est pas compatible avec Netscape.

Exemples : Le Retrait

<blockquote>
La balise blockquote permet de mettre un texte en retrait. Noubliez pas de refermer
la balise sinon votre texte restera jusqu’au bout en retrait.
</blockquote>

Résultat :

La balise blockquote permet de mettre un texte en retrait. Noubliez pas de refermer la balise sinon votre texte restera jusqu’au bout en retrait.

Exemples : Liste non-numérique

<ul>
  <li>ligne 1</li>
  <li>ligne 2</li>
  <li>ligne 3</li>
</ul>

Résultat :

• ligne 1
• ligne 2
• ligne 3

Exemples :La liste numérique

<ol>
  <li>ligne 1</li>
  <li>ligne 2</li>
  <li>ligne 3</li>
</ol>

Résultat :

1. ligne 1
2. ligne 2
3. ligne 3

Exemples :La liste numérique et sous liste

<ol>
  <li>Item 1
    <ol>
      <li>Item 1, ligne 1</li>
      <li>Item 1, ligne 2</li>
      <li>Item 1, ligne 3</li>
    </ol>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Résultat :

1. Item 1
   
   1. Item 1, ligne 1
   2. Item 1, ligne 2
   3. Item 1, ligne 3
2. Item 2
3. Item 3

Plus vous ajoutez de liste dans une liste et plus il y aura de retrait.

Noter qu’à chaque nouvelle liste un paragraphe est créé, pour remédier à ce problème, vous pouvez mettre une liste dans une table alors la table pourra être juste au-dessous du titre. Et un gros problème, vous pouvez changer la police, la couleur et la grandeur du texte mais le numéro restera toujours la police, couleur et grandeur par défaut du document (sauf en CSS et IE).

De plus, vous pouvez ajouter des sauts de ligne pour ajouter des lignes vide entre les énumérations de la liste.

Attributs « start » et « reversed »

<ol start="3">
  <li>ligne 1</li>
  <li>ligne 2</li>
  <li>ligne 3</li>
</ol>

Résultat :

3. ligne 1
4. ligne 2
5. ligne 3

<ol reversed>
  <li>ligne 1</li>
  <li>ligne 2</li>
  <li>ligne 3</li>
</ol>

Résultat :

1. ligne 1
2. ligne 2
3. ligne 3

ul {
 list-style-type: square;
}

ul {
  list-style-position: outside;
}

ul {
  list-style-image: url(images/image.png);
}