Le langage HTML/Placement des objets

Un livre de Wikibooks.

Le placement des objets relève de la mise en forme. Certes, on a expliqué en introduction que le HTML ne concernait pas la mise en forme mais seulement la description du contenu ; par exemple, la balise <blockquote>…</blockquote> a pour effet de décaler le texte vers la droite, mais ce n'est qu'une conséquence de la feuille de style appliquée au bloc de citation.

Nous allons faire une exception à cette règle pour placement des objets. En effet, avant le CSS, le placement des objets était déjà une préoccupation, le W3C a donc créé des balises permettant ce placement — donc de la mise en forme —, on peut donc toujours trouver de telles balise dans du code ou des ouvrages. Les balises sont donc données à titre d'information, mais elles devraient être proscrites au profit du CSS.

[modifier] Ancien HTML

Par défaut, les objets — texte, images… — sont aligné à gauche, à moins que le réglage du navigateur ou la feuille de style en décide autrement.

• Il est possible de centrer les objets avec les balises <center>…</center>.
• Pour aligner à droite, il faut utiliser la balise <div align="right">…</div>.
• Le texte, quant à lui, peut être justifié avec la balise <div align="justify">…</div>.

On peut aussi indiquer l'alignement à l'intérieur de la balise de description, par exemple :

• pour centrer un paragraphe, on peut utiliser
  <p align="center">…</p> ;
• pour centrer une image, on peut utiliser
  <img src="…" … align="center" />.

[modifier] Méthode moderne : avec du CSS

Ceci est maintenant obsolète avec le CSS. Il est maintenant recommandé de ne pas utiliser les balises ci-dessus et d'avoir recours au CSS, par exemple :

• pour du texte : <div style="text-align:valeur">…</div>,

  où valeur est left (gauche), right (droite), center (centré) ou justify (justifié);

• pour une image :
  • pour aligner à droite : <div style="text-align: right;padding-right: 10px">…</div> (ce qui laisse une marge de 10 pixels à droite) ;
  • pour centrer : <div style="text-align: center">…</div>.

Exemple

<div style="text-align:right">
   Bla bla bla bla bla bla bla 
</div>
<div style="text-align: center">
   <img src="http://fr.wikibooks.org/images/wiki-textbook.png" width="129" />
</div>

donne