Le langage HTML/Placement des objets


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.

Les bases du codages en HTML

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.

Ancien HTMLModifier

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" />.

Méthode moderne : avec du CSSModifier

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>,
    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

Bla bla bla bla bla bla bla