Table des matières
Cette section des spécifications HTML traite d'éléments et d'attributs qui peuvent être employés pour la mise en forme visuelle. Nombre d'entre eux sont dépréciés.
Définition des attributs
Cet attribut détermine la couleur de l'arrière-plan du corps du document (l'élément BODY) ou de fonds de tableaux (éléments TABLE, TR, TH et TD). Des attributs additionnels, utilisés dans l'élément BODY, permettent de définir des couleurs de texte.
Cet attribut est déprécié en faveur des feuilles de styles.
Il est possible d'aligner des groupes d'éléments (tableaux, images, objets, paragraphes, etc.) par rapport à la page grâce à l'élément align. Bien que cet attribut puisse être employé avec beaucoup d'éléments HTML, ses valeurs autorisées diffèrent parfois d'un élément à l'autre. On traite ici du sens de l'attribut align en fonction de textes uniquement.
Définition des attributs
L'alignement par défaut dépend de la direction de base de lecture du texte. Pour un texte écrit de la gauche vers la droite, la valeur par défaut est align=left, tandis que pour un texte lu de droite à gauche, la valeur par défaut est align=right.
EXEMPLE DÉPRÉCIÉ :
Cet exemple centre un titre par rapport à la page.
<H1 align="center"> Comment sculpter le bois </H1>
Avec une feuille de styles CSS, par exemple, on obtient le même résultat comme ceci :
<HEAD>
<TITLE>Comment sculpter le bois</TITLE>
<STYLE type="text/css">
H1 { text-align: center}
</STYLE>
<BODY>
<H1> La sculpture du bois </H1>
Notons que toutes les déclarations H1 du document seront centrées. On peut réduire l'étendue du style en utilisant l'attribut class avec l'élément :
<HEAD>
<TITLE>Comment sculpter le bois</TITLE>
<STYLE type="text/css">
H1.wood {text-align: center}
</STYLE>
<BODY>
<H1 class="wood"> La sculpture du bois </H1>
De la même manière, pour aligner à droite un paragraphe à l'aide de l'attribut align, on a :
<P align="right">... paragraphes de texte...
ce qui donne en CCS :
<HEAD>
<TITLE>Comment sculpter le bois</TITLE>
<STYLE type="text/css">
P.mypar {text-align: right}
</STYLE>
<BODY>
<P class="mypar">... paragraphes de texte...
Pour aligner à droite une série de paragraphes, on peut les grouper avec l'élément DIV :
<DIV align="right"> <P>... texte du premier paragraphe... <P>... texte du second... <P>...et du troisième... </DIV>
En CSS, la propriété d'alignement à droite est héritée de l'élément parent, de telle sorte que l'on peut écrire :
<HEAD>
<TITLE>Comment sculpter le bois</TITLE>
<STYLE type="text/css">
DIV.mypars {text-align: right}
</STYLE>
<BODY>
<DIV class="mypars">
<P>... texte du premier paragraphe...
<P>... texte du second...
<P>... et du troisième...
</DIV>
Pour centrer, en CSS, un document entier :
<HEAD>
<TITLE>Comment sculpter le bois</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE>
<BODY>
... le corps du document est centré...
</BODY>
L'élément CENTER est identique à l'élément DIV avec un attribut align dont la valeur est "center". L'élément CENTER est déprécié.
Des images et autres objets peuvent être insérés directement au fil du texte dans la page, ou encore "flottants" en marge de paragraphe, modifiant de ce fait les marges entre lesquelles "coule" le texte, sur les côtés des objets.
L'attribut align, appliqué à un objet, une image, un tableau, une frame, etc., "aimante" l'objet sur la marge gauche ou droite courante. Les objets flottants provoquent généralement un saut de ligne. Cet attribut prend les valeurs suivantes :
EXEMPLE DÉPRÉCIÉ :
L'exemple suivant montre un élément IMG flottant en marge gauche courante du document.
<IMG align="left" src="http://foo.com/animage.gif" alt="mon bateau">
Certans attributs d'alignement acceptent aussi la valeur "center", qui ne définit pas un objet flottant mais centre l'objet entre les marges courantes. Quoi qu'il en soit, pour les éléments P et DIV, la valeur "center" provoque le centrage du contenu de l'élément.
Un autre attribut, définit pour l'élément BR, permet de contrôler l'habillage d'objets par le texte courant.
Définition des attributs
L'exemple suivant montre un texte habillant le côté droit d'une image flottante, jusqu'au saut de ligne provoqué par un BR:
********* ------- | | ------- | image | --<BR> | | *********
Si l'attribut clear est none, la ligne suivant l'élément BR commencera immédiatement au-dessous, sur la marge droite de l'image :
********* ------- | | ------- | image | --<BR> | | ------ *********
EXEMPLE DÉPRÉCIÉ :
Si l'attribut clear est renseigné avec left ou all, la ligne suivante apparaîtra comme suit :
********* ------- | | ------- | image | --<BR clear="left"> | | ********* -----------------
Avec les feuilles de styles, on peut forcer cet effet pour les objets flottants en marge gauche (images, tableaux, etc.) lors de tous les sauts de lignes du document. En CSS, on l'obtient ainsi :
<STYLE type="text/css">
BR { clear: left }
</STYLE>
Pour limiter l'effet à des éléments BR précis, on peut combiner une information de style et l'attribut id :
<HEAD>
...
<STYLE type="text/css">
BR.mybr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
********* -------
| | -------
| table | --<BR id="mybr">
| |
*********
-----------------
...
</BODY>
Les éléments HTML suivants spécifient des informations de polices de caractères. Ils ne sont pas tous dépréciés, mais l'emploi des feuilles de styles est encouragé à leur place.
<!ENTITY % fontstyle "TT | I | B | U | S | STRIKE | BIG | SMALL"> <!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*> <!ATTLIST (%fontstyle;|%phrase;) %attrs; -- %coreattrs, %i18n, %events -- >
Balise de début : requise, Balise de fin : requise
Attributs définis par ailleurs
L'interprétation des éléments de styles de polices dépend du logiciel client. Les descriptions suivantes sont uniquement informatives.
Les exemples suivants montrent l'emploi de quelques styles de texte :
<P><b>gras</b>, <i>italique</i>, <b><i>gras italique</i></b>, <tt>texte Télétype</tt>, texte <big>agrandi</big> et <small>rétréci</small>.
que le logiciel client interprète ainsi :
gras, italique, gras italique, texte Télétype, texte agrandi et rétréci.
L'usage des feuilles de styles offre une plus grande variété de mises en forme des polices de caractères. Par exemple, pour spécifier en CSS un paragraphe en texte bleu et italique :
<HEAD>
<STYLE type="text/css">
P.mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">... texte italique bleu...
Les éléments de styles de polices doivent être imbriqués correctement. L'interprétation des imbrications dépend des logiciels clients.
Les éléments FONT et BASEFONT sont dépréciés.
<!ELEMENT FONT - - (%inline;)* -- modification locale appliquée à la police --> <!ATTLIST FONT %coreattrs; -- id, class, style, title -- %i18n; -- lang, dir -- size CDATA #IMPLIED -- [+|-]nn ex. : size="+1", size="4" -- color %Color; #IMPLIED -- "#RRGGBB" en hexa., ex., rouge : "#FF0000" -- face CDATA #IMPLIED -- liste de noms de polices, séparés par des virgules -- >
Balise de début : requise, Balise de fin : requise
<!ELEMENT BASEFONT - O EMPTY -- police de base --> <!ATTLIST BASEFONT id ID #IMPLIED -- identifiant unique dans le document -- size CDATA #REQUIRED -- corps de base pour les éléments FONT -- color %Color; #IMPLIED -- "#RRGGBB" en hexa., ex., rouge : "#FF0000" -- face CDATA #IMPLIED -- liste de noms de polices, séparés par des virgules -- >
Balise de début : requise, Balise de fin : interdite
Définition des attributs
Attributs définis par ailleurs
L'élément FONT modifie le corps et la couleur du texte qu'il encadre.
L'élément BASEFONT détermine le corps de base (avec l'attribut size). Les changements de corps obtenus grâce aux éléments FONT sont relatifs au corps de police de base spécifié par l'élément BASEFONT. Si l'élément BASEFONT n'est pas employé, le corps de police de base par défaut est 3.
EXEMPLE DÉPRÉCIÉ :
L'exemple suivant montre les différences entre les sept corps de police disponibles via 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>
et le logiciel client interprète comme ceci :
size=1 size=2 size=3 size=4 size=5 size=6 size=7
L'exemple suivant utilise des incréments et décréments relatifs au corps de base par défaut (de 3) :
Même exemple mais avec un corps de base de 6 :
Le corps de police de base n'influe pas sur les titres, sauf si ces derniers sont modifiés par un élément FONT dont le corps est spécifié en relatif.
<!ELEMENT HR - O EMPTY -- trait horizontal --> <!ATTLIST HR %coreattrs; -- id, class, style, title -- %events; align (left|center|right) #IMPLIED noshade (noshade) #IMPLIED size %Pixels; #IMPLIED width %Length; #IMPLIED >
Balise de début : requise, Balise de fin : interdite
Définition des attributs
la valeur par défaut est align=center.
Attributs définis par ailleurs
L'élément HR dessine un trait horizontal dans la page.
La quantité d'espace inséré au-dessus et au-dessous du trait, et le séparant du reste du contenu, dépend du logiciel client.
EXEMPLE DÉPRÉCIÉ :
Cet exemple centre les traits horizontaux et les dimensionne à la moitié de la longueur disponible entre les marges. le premier trait a une épaisseur par défaut tandis que les deux derniers sont larges de 5 pixels. Le dernier trait n'est pas en relief :
<HR width="50%" align="center"> <HR size="5" width="50%" align="center"> <HR noshade size="5" width="50%" align="center">
Le browser interprète ainsi :