Sommaire
Cette section de la spécification traite d'éléments et d'attributs du HTML qui peuvent être utiisés pour la mise en forme visuelle. Globalement, concernant tous ces éléments, vous aurez toujours avantage à passer à la forme "feuille de style", exception faite lorsque vous traitez avec des agents utilisateurs qui soit ne comprennent pas du tout les feuilles de style ou qui ne reconnaissent pas telle ou telle définition de style qui serait nécessaire. Un certain nombre d'éléments et d'attributs traitant des aspects visuels et provenant des versions antérieures d'HTML sont aujourd'hui obsolètes, et deviendront périmés dans des prochaines versions d'HTML.
Définition des attributs
Cet attribut définit la couleur de fond de la zone graphique associée au corps de document (dans l'élément BODY) ou pour une cellule de tableau (dans l'un des éléments TABLE, TR, TH, and TD). Des attributs additionnels définissant la couleur du texte pourront être utilisés dans l'élément BODY.
Cet attribut est aujourd'hui obsolète, et cèdera sa place aux attributs de feuille de style qui permettent de spécifier les couleurs de fond.
Les éléments de niveau bloc peuvent être alignés sur le canvas (tableaux, images, objets, paragraphes, etc.) grâce à l'attribut align. Bien que cet attrbut puisse être associé à de très nombreux éléments du HTML, la plage de valeurs qu'il accepte diffère parfois d'un élément à l'autre.
Définition des attributs
EXEMPLE OBSOLETE :
Cet exemple centre un titre dans la fenêtre.
<H1 align="center"> Comment couper du bois </H1>
En utilisant des feuilles de style incluses, par exemple, on obtiendrait le même résultat ainsi :
<HEAD>
<STYLE>
H1 { text-align: center}
</STYLE>
</HEAD>
<H1> Comment couper du bois </H1>
Notez que ceci centrerait toutes les déclarations H1. Vous pourriez réduire la portée de ce style en précisant l'attribut id sur l'élément :
<HEAD>
<STYLE type="text/css">
H1.wood {text-align: center}
</STYLE>
</HEAD>
<H1 id="wood"> Comment couper du bois </H1>
De même, pour justifier à droite et à gauche un paragraphe par l'attribut HTML align :
<P align="justify">...un grand nombre de paragraphes de texte...
ce qui, avec des feuilles de stryle incluses, donnerait :
<HEAD>
<STYLE type="text/css">
P.mypar {text-align: justify}
</STYLE>
</HEAD>
<P id="mypar">...un grand nombre de paragraphes de texte...
Pour grouper une série de paragraphes adjacents, groupez les avec un élément DIV :
<DIV align="justify"> <P>...texte du premier paragraphe... <P>...texte du deuxième paragraphe... <P>...texte du troisième paragraphe... </DIV>
Ce qui avec des feuilles de style, donnerait :
<HEAD>
<STYLE type="text/css">
DIV.mypars {text-align: justify}
</STYLE>
</HEAD>
<DIV id="mypars">
<P>...texte du premier paragraphe...
<P>...texte du deuxième paragraphe...
<P>...texte du troisième paragraphe...
</DIV>
Pour justifier l'intégralité du document avec des feuilles de style :
<HEAD>
<STYLE type="text/css">
BODY {text-align: justify}
</STYLE>
</HEAD>
<BODY>
...c'est le "body" qui est justifié...
</BODY>
L'élément CENTER est équivalent à un élément DIV associé à l'attribut align fixé à "center". L'élément CENTER est périmé.
Les images et les objets peuvent être insérées directement dans le texte ("en ligne") ou peuvent flotter d'un côté ou l'autre de la page (ou au centre), en modifiant temporairement les marges du texte qui peut se mettre à écouler" sur les côtés de l'objet.
L'attribut align des objets, images, cadres, etc., rend l'objet flottant sur la marge de gauche ou de droite. En général, les objets flottants provoquent un début de ligne. Les valeurs suivantes sont admises pour faire flotter un objet :
L'exemple suivant montre comment faire flotter un objet IMG sur la marge gauche du canvas.
<IMG align="left" src="http://foo.com/animage.gif">
Un autre attribut, défini pour l'élément BR, contrôle le flux de texte autour des objets flottants.
Définition des attributs
Considérons le scénario graphique suivant, dans lequel le texte coule à droite d'une image jusqu'à ce qu'intervienne un BR :
********* ------- | | ------- | image | --<BR> | | *********
Si l'attribut clear est fixé à none, la ligne de texte suivant l'élément BR commencerait immédiatement en dessous de la ligne précédente, toujours soumise au décalage dû à l'image :
********* ------- | | ------- | image | --<BR> | | ------ *********
Si l'attribut clear est fixé à left ou all, la ligne suivant le saut de ligne commencera comme indiqué ci-dessous :
********* ------- | | ------- | image | --<BR clear="left"> | | ********* -----------------
Avec des feuilles de style, vous pourriez spécifier que tous les sauts de ligne explicites se comporteraient de cette manière avec les objets (images, tableaux, etc.) flottants sut la marge gauche. En cascadant des feuilles de style, vous obtiendriez ceci ainsi : follows:
<STYLE type="text/css">
BR {clear: left}
</STYLE>
Pour n'attribuer ce comportement qu'à une seule instance particulière de l'élément BR, vous combineriez l'information de style et l'attribut id :
<HEAD>
...
<STYLE type="text/css">
BR.monbr {clear: left}
</STYLE>
</HEAD>
<BODY>
...
********* -------
| | -------
| table | --<BR id="monbr">
| |
*********
-----------------
...
</BODY>
Les éléments HTML qui suivent caractérisent l'usage des polices de caractères. Bien qu'ils ne soient pas tous obsolètes, nous en déconseillons l'utilisation au profit des feuilles de style.
<!ENTITY % font "TT | I | B | U | S | STRIKE | BIG | SMALL"> <!ELEMENT (%font|%phrase) - - (%inline)*> <!ATTLIST (%font|%phrase) %attrs; -- %coreattrs, %i18n, %events -- >
Balise de début : requise, Balise de fin : requise
Attributs définis par ailleurs
L'effet des éléments d'attributs de texte dépend de l'agent utilisateur. Ce qui suit n'est donné qu'à titre indicatif.
Les diverses phrases ci-dessous montrent différentes variations de texte :
<b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and <big>big</big> and <small>small</small> text.
Votre anvigateur affichera ces variations ainsi :
bold, italic, bold italic, teletype text, and big and small text.
Les feuilles de style permettront d'obtenir une gamme d'effets bien plus riche pour moins d'effort. Pour indiquer une écriture bleue en italiques dans un paragraphe à l'aide des feuilles de style en cascade :
<HEAD>
<STYLE>
P.mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">...Du texte italiques bleu, bleu , bleu...
Les éléments d'attribut de texte peuvent être imbriqués, mais doivent l'être correctement. L'effet obtenupar cette imbrication dépends toujours de l'agent utilisateur employé.
FONT et BASEFONT sont obsolètes.
<!ELEMENT FONT - - (%inline)* -- local change to font --> <!ATTLIST FONT size CDATA #IMPLIED -- [+]nn ex. size="+1", size=4 -- color CDATA #IMPLIED -- #RRGGBB en hexa, ex. rouge : "#FF0000" -- face CDATA #IMPLIED -- liste de noms de polices séparée par des virgules -- >
Balise de début : requise, Balise de fin : requise
<!ELEMENT BASEFONT - O EMPTY> <!ATTLIST BASEFONT size CDATA #REQUIRED -- Taille de base pour les éléments FONT -- color CDATA #IMPLIED -- #RRGGBB en hexa, ex. rouge: "#FF0000" -- face CDATA #IMPLIED -- liste de noms de polices séparée par des virgules -- >
Balise de début : requise, Balise de fin : interdite
Définition des attributs
L'élément FONT permet de modifier la taille de police et la couleur pour son contenu.
L'élément BASEFONT définit la taille de police de base (par son attribut size). Les changements de taille obtenus par des éléments FONT sont toujours calculés relativement à la taille définie par BASEFONT. Si l'élément BASEFONT est absent, la taille de base par défaut vaut 4.
EXEMPLE OBSOLETE :
L'exemple qui suit montre les textes obtenus selon les sept tailles qu'il est possible d'obtenir via des déclarations FONT:
<P><font size=1>size=1</font><BR> <font size=2>size=2</font><BR> <font size=3>size=3</font><BR> <font size=4>size=4</font><BR> <font size=5>size=5</font><BR> <font size=6>size=6</font><BR> <font size=7>size=7</font><BR>
Votre agent utilisateur afficherait ceci ainsi :
size=1
size=2
size=3
size=4
size=5
size=6
size=7
Ce qui suit est le même code, mais obtenu après un passage en taille de base 3 :
size=-3
size=-2
size=-1
size=+1
size=+2
size=+3
size=+4
Même chose avec une taille de base 6:
size=-3
size=-2
size=-1
size=+1
size=+2
size=+3
size=+4
La taille de police de base ne s'applique pas aux éléments de titrage, excepté lorsque ceux-ci sont altérés par des éléments FONT affichant une modification de taille relative.
<!ELEMENT HR - O EMPTY> <!ATTLIST HR %coreattrs; -- id, class, style, title -- %events; align (left|right|center) #IMPLIED noshade (noshade) #IMPLIED size %Pixels #IMPLIED width %Length #IMPLIED >
Balise de début : requise, Balise de fin : interdite
Définition des attributs
Attributs définis par ailleurs
L'élément HR provoque l'affichage d'une gouttière horizontale agissant comme séparateur de texte.
L'espace vertical libre qui sépare la gouttière du texte environnant dépend de l'agent utilisateur.
EXAMPLE OBSOLETE :
Cet exemple centre la gouttière, tout en définissant sa taille à la moitié de la taille disponible entre les marges. La règle du haut est de largeur standard, tandis que celle des deux inférieure est fixée à 5 pixels. La règle inférieure sera affichée en couleur opaque sans ombrage :
<HR width="50%" align="center"> <HR size="5" width="50%" align="center"> <HR noshade size="5" width="50%" align="center">
Votre navigateur affiche ces gouttières ainsi :