La version française de cette traduction est :
http://www.la-grange.net/w3c/html4.01/

Traducteur : J.J.Solari dans le cadre de l'effort de la liste de discussion w3c-translators.fr@w3.org
La version française peut contenir des erreurs. La version anglaise de cette note est l'unique version normative. Version originale : http://www.w3.org/TR/1999/REC-html401-19991224


15 L'alignement, les styles de police et les règles horizontales

Sommaire

  1. Le formatage
    1. La couleur d'arrière-plan
    2. L'alignement
    3. Les objets flottants
  2. Les polices
    1. Les éléments de style de police : les éléments TT, I, B, BIG, SMALL, STRIKE, S et U
    2. Les éléments modificateurs de police : les éléments FONT et BASEFONT
  3. Les règles : l'élément HR

Cette section de la spécification aborde certains éléments et attributs HTML qui peuvent être utilisés pour la mise en forme visuelle des éléments. Nombre d'entre eux sont déconseillés.

15.1 Le formatage

15.1.1 La couleur d'arrière-plan

Définition des attributs

bgcolor = couleur [CI]
Déconseillé. Cet attribut établit la couleur d'arrière-plan du corps du document ou des cellules des tables.

Cet attribut établit la couleur d'arrière-plan du canevas du corps du document (l'élément BODY) ou des tables (les éléments TABLE, TR, TH et TD). On peut utiliser des attributs supplémentaires avec l'élément BODY pour spécifier la couleur du texte.

Cet attribut est déconseillé en faveur des feuilles de style pour spécifier les informations de couleur d'arrière-plan.

15.1.2 L'alignement

Il est possible d'aligner les éléments de bloc (tables, images, objets, paragraphes, etc.) sur le canevas avec l'attribut align. Bien que cet attribut puisse se placer sur de nombreux éléments HTML, l'éventail des valeurs possibles diffère parfois d'un élément à l'autre. Ici nous abordons seulement la signification de l'attribut align pour le texte.

Définition des attributs

align = left|center|right|justify [CI]
Déconseillé. Cet attribut spécifie l'alignement horizontal de son élément par rapport à son environnement. Les valeurs possibles sont :
  • left : les lignes de texte sont restituées poussées à gauche ;
  • center : les lignes de texte sont centrées ;
  • right: les lignes de texte sont restituées poussées à droite ;
  • justify : les lignes de texte sont justifiées des deux côtés.

La valeur par défaut est tributaire de la direction de base du texte. Pour un texte de gauche-à-droite, la valeur par défaut est align=left, tandis que pour un texte de droite-à-gauche c'est align=right.

EXEMPLE DÉCONSEILLÉ :
Cet exemple centre un titre sur le canevas.

<H1 align="center"> Comment tailler le bois </H1>

En utilisant le langage CSS, par exemple, on pourrait obtenir le même effet par :

<HEAD>
 <TITLE>Comment tailler le bois</TITLE>
 <STYLE type="text/css">
  H1 { text-align: center}
 </STYLE>
<BODY>
 <H1> Comment tailler le bois </H1>

Remarquez que cela centrerait tous les éléments H1. On pourrait réduire la portée du style en plaçant un attribut class sur l'élément :

<HEAD>
 <TITLE>Comment tailler le bois</TITLE>
 <STYLE type="text/css">
  H1.bois {text-align: center}
 </STYLE>
<BODY>
 <H1 class="bois"> Comment tailler le bois </H1>

EXEMPLE DÉCONSEILLÉ :
De la même façon, pour aligner un paragraphe à droite sur le canevas avec l'attribut HTML align, on pourrait avoir :

<P align="right">...Beaucoup de texte...

ce qui donnerait avec CSS :

<HEAD>
 <TITLE>Comment tailler le bois</TITLE>
 <STYLE type="text/css">
  P.monparagraphe {text-align: right}
 </STYLE>
<BODY>
 <P class="monparagraphe">...Beaucoup de texte...

EXEMPLE DÉCONSEILLÉ :
Pour aligner un ensemble de paragraphes à droite, regroupez-les avec un élément DIV :

<DIV align="right">
 <P>...texte du premier paragraphe...
 <P>...texte du deuxième paragraphe...
 <P>...texte du troisième paragraphe...
</DIV>

Avec CSS, la propriété « text-align » est héritée de l'élément parent ; on peut donc utiliser :

<HEAD>
 <TITLE>Comment tailler le bois</TITLE>
 <STYLE type="text/css">
  DIV.mesparagraphes {text-align: right}
 </STYLE>
<BODY>
 <DIV class="mesparagraphes">
  <P>...texte du premier paragraphe...
  <P>...texte du deuxième paragraphe...
  <P>...texte du troisième paragraphe...
 </DIV>

Pour centrer le document entier avec CSS :

<HEAD>
 <TITLE>Comment tailler le bois</TITLE>
 <STYLE type="text/css">
  BODY {text-align: center}
 </STYLE>
<BODY>
 ...le corps est centré...
</BODY>

L'élément CENTER équivaut exactement à la spécification de la valeur "center" sur l'attribut align de l'élément DIV. L'élément CENTER est déconseillé.

15.1.3 Les objets flottants

Les images et les objets peuvent apparaître directement « en-ligne » ou peuvent flotter vers un côté de la page, altérant temporairement les marges du texte qui peut s'écouler sur l'un ou l'autre bord de l'objet.

Faire flotter un objet 

L'attribut align des objets, des images, des tables, des cadres, etc., entraîne l'objet à flotter vers la marge gauche ou celle de droite. Les objets flottants commencent en général une nouvelle ligne. Cet attribut admet les valeurs suivantes :

errata-16

EXEMPLE DÉCONSEILLÉ :
L'exemple suivant montre comment faire flotter un élément IMG vers la marge gauche courante du canevas.

<IMG align="left" src="http://foo.com/animage.gif" alt="mon chat">

Certains attributs d'alignement admettent également la valeur "center", qui n'entraîne aucun flottement, mais centre l'objet à l'intérieur des marges courantes. Cependant, pour les éléments P et DIV, la valeur "center" entraîne le centrage de leur contenu.

Faire flotter le texte autour d'un objet 

Un autre attribut, défini sur l'élément BR, contrôle l'écoulement du texte autour des objets flottants.

Définition des attributs

clear = none|left|right|all [CI]
Déconseillé. Spécifie où la prochaine ligne devrait apparaître, dans un navigateur visuel, après le saut de ligne provoqué par cet élément. Cet attribut prend en compte les objets flottants (images, tables, etc.). Les valeurs possibles sont :
  • none : la ligne suivante commencera normalement. C'est la valeur par défaut ;
  • left : la ligne suivante commencera à la ligne la plus proche en-dessous d'éventuels objets flottants sur la marge de gauche ;
  • right : la ligne suivante commencera à la ligne la plus proche en-dessous d'éventuels objets flottants sur la marge de droite ;
  • all : la ligne suivante commencera à la ligne la plus proche en-dessous d'éventuels objets flottants sur l'une ou l'autre marge.

Considérons la situation visuelle suivante, où le texte s'écoule à la droite d'une image juqu'à un saut de ligne provoqué par l'élément BR :

*********  -------
|       |  -------
| image |  --<BR>
|       |
*********

Si la valeur de l'attribut clear est "none", la ligne suivant l'élément BR commencera imédiatement en-dessous de celui-ci, sur la droite de l'image :

*********  -------
|       |  -------
| image |  --<BR>
|       |  ------
*********

EXEMPLE DÉCONSEILLÉ :
Si la valeur de l'attribut clear est "left", ou "all", la ligne suivante apparaîtra comme suit :

*********  -------
|       |  -------
| image |  --<BR clear="left">
|       |  
*********
-----------------

En faisant appel aux feuilles de style, on pourrait spécifier que tous les sauts de ligne devraient se comporter de cette façon pour les objets (images, tables, etc.) flottant contre la marge gauche. Avec CSS, on pourrait obtenir cet effet comme suit :

<STYLE type="text/css">
BR { clear: left }
</STYLE>

Pour spécifier ce comportement sur une instance particulière de l'élément BR, on pourrait combiner l'indication de style et l'attribut id :

<HEAD>
...
<STYLE type="text/css">
BR#monbr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
*********  -------
|       |  -------
| table |  --<BR id="monbr">
|       |  
*********
-----------------
...
</BODY>

15.2 Les polices

Les éléments HTML suivants spécifient des informations de police. Bien qu'ils ne soient pas tous déconseillés, on décourage leur utilisation en faveur des feuilles de style.

15.2.1 Les éléments de style de police : les éléments TT, I, B, BIG, SMALL, STRIKE, S et U

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Attribus définis ailleurs

La restitution des éléments de style de police dépend de l'agent utilisateur. Ce qui suit n'est qu'une description informative.

TT : restitué sous la forme d'un texte de téléimprimeur ou à chasse fixe [ndt. monospaced].
I : restitué sous la forme d'un texte en italique.
B : restitué sous la forme d'un texte en caractères gras.
BIG : restitue le texte dans une « grande » taille de police.
SMALL : restitue le texte dans une « petite » taille de police.
STRIKE et S : Déconseillé. Restituent un texte barré.
U : Déconseillé. Restitue un texte souligné.

La phrase suivante montre divers types de texte :

<P> <b>gras</b>, <i>italique</i>, <b><i>gras italique</i></b>,
<tt>t&eacute;l&eacute;imprimeur</tt>, texte <big>grand</big> et <small>petit</small>.

Cette phrase pourrait être restituée comme suit :

Un exemple de restitution de divers styles de police

Il est possible d'obtenir une bien plus grande diversité d'effets de police en utilisant les feuilles de style. Pour spécifier un texte italique en bleu dans un paragraphe avec CSS :

<HEAD>
<STYLE type="text/css">
P#mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">...Beaucoup de texte en italique de couleur bleue...

Les éléments de style de police doivent être correctement imbriqués. La restitution des éléments de style de police imbriqués dépend de l'agent utilisateur.

15.2.2 Les éléments modificateurs de police : les éléments FONT et BASEFONT

Les éléments FONT et BASEFONT sont déconseillés.

Voir le DTD transitoire pour leur définition formelle.

Définition des attributs

size  = cdata [CN]
Déconseillé. Cet attribut établit la taille de la police. Les valeurs possibles sont :
  • Un entier entre 1 et 7. Cela donne à la police une certaine taille fixe dont la restitution dépend de l'agent utilisateur. Les agents utilisateurs ne peuvent pas tous restituer les sept tailles ;
  • Un accroissement relatif en taille de police. La valeur "+1" signifie la taille au-dessus. La valeur "-3" signifie trois tailles en-dessous. Toutes les tailles se trouve sur une échelle allant de 1 à 7.
color = couleur [CI]
Déconseillé. Cet attribut établit la couleur du texte.
face = cdata [CI]
Déconseillé. Cet attribut définit une liste de noms de police, séparés par des virgules, que l'agent utilisateur devrait chercher par ordre de préférence.

Attribus définis ailleurs

L'élément FONT change la taille de la police et la couleur du texte qu'il contient.

L'élément BASEFONT établit la taille de police de base (en utilisant l'attribut size). Les changements de taille de police obtenus avec l'élément FONT sont relatifs à la taille de police de base établie par l'élément BASEFONT. Si l'élément BASEFONT n'est pas présent, alors la taille de police de base vaut "3".

EXEMPLE DÉCONSEILLÉ :
L'exemple suivant illustre les différences entre les sept tailles de police disponibles avec l'élément FONT :

<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>

Ceci pourrait être restitué par :

Exemple de restitution de diverses tailles de police

L'illustration suivante montre l'effet des tailles de police relatives par rapport à une taille de police de base valant "3" :

Exemple de restitution de diverses tailles de police avec un élément basefont

La taille de police de base ne s'applique pas aux titres, sauf quand ceux-ci sont modifiés par un élément FONT avec un changement de taille de police relatif.

15.3 Les règles : l'élément HR

<!ELEMENT HR - O EMPTY -- règle horizontal -->
<!ATTLIST HR
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Définition des attributs

align = left|center|right [CI]
Déconseillé. Cet attribut spécifie l'alignement horizontal de la règle par rapport au contexte englobant. Les valeurs possibles sont :
  • left : la règle est restituée poussée à gauche ;
  • center : la règle est centrée ;
  • right : la règle est restituée poussée à droite.

La valeur par défaut est "align=center".

noshade [CI]
Déconseillé. Quand il est présent, cet attribut booléen demande à l'agent utilisateur de restituer la règle dans une couleur pleine plutôt que la traditionnelle « cannelure » bi-colore.
size = pixels [CI]
Déconseillé. Cet attribut spécifie la hauteur de la règle. La valeur par défaut de cet attribut dépend de l'agent utilisateur.
width = longueur [CI]
Déconseillé. Cet attribut spécifie la largeur de la règle. La largeur par défaut est de 100%, i.e., la règle traverse le canevas entier.

Attribus définis ailleurs

L'élément HR entraîne la restitution d'une règle horizontale par l'agent utilisateur.

La quantité d'espace vertical inséré entre une règle et le contenu qui l'entoure dépend de l'agent utilisateur.

EXEMPLE DÉCONSEILLÉ :
Cet exemple centre les règles, en les dimensionnant à la moitié de la largeur disponible entre les marges. La règle du haut a une épaisseur par défaut tandis que les deux du bas sont fixées à 5 pixels. La règle du bas devrait être restituée dans une couleur pleine sans ombrage :

<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">

La restitution de ces règles pourraient être la suivante :

Exemple de restitution de diverses règles horizontales