Le langage HTML/Placement des objets

Un livre de Wikilivres.
Aller à : navigation, rechercher


Les bases du codages en HTML

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.

Ancien HTML[modifier | modifier le wikicode]

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 CSS[modifier | modifier le wikicode]

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

Wiki-textbook.png