Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :

 

VI. Corps du document

Par Hugo ETIEVANT

  1. Introduction
  2. Le fond d'écran
  3. Le texte
  4. Les liens
  5. Code des couleurs
  6. Les marges
  7. Les marges
  8. Colorier les barres de défilements

Introduction

Le conteneur <BODY> marque le contenu de la page à afficher : texte, images... C'est en propriété à <BODY> qu'on peut aussi décider l'affichage d'une boite de dialogue Alert (JavaScript) lors du chargement de la page et avant son affichage. Les proprétés de corps du document s'appliquent à l'intégralité de la page web. Toutes les proriétés qui vont suivre sont facultatives.


Le fond d'écran

On a le choix entre une couleur de fond et une image en mozaïque.

Couleur de fond

La couleur de fond est spécifiée en son format en hexadécimal ou par son nom comme valeur à la propriété BGCOLOR. Par défaut, une page est de fond blanc.

Exemples :

<BODY BGCOLOR="purple">
</BODY>

<BODY BGCOLOR="#800080">
</BODY>

Image de fond

L'image de fond est spécifiée par son adresse relative ou absolue comme valeur à la propriété BACKGROUND.

Exemples :

<BODY BACKGROUND="../images/fond.gif">
</BODY>

<BODY BACKGROUND="http://www.multimania.com/cyberzoide/images/fond.gif">
</BODY>


Le texte

La couleur du texte par défaut est spécifiée par le navigateur (en général, c'est le noir), mais il est possible d'imposer une couleur pour le texte de la page par l'attribut TEXT dont la valeur est le nom de la couleur ou sa valeur au format hexadécimal. Lorsque vous spécifiez une couleur ou une image de fond, il vous sera souvent nécessaire d'imposer une couleur spécifique pour que votre page soit lisible.

Exemples :

<BODY TEXT="black">
</BODY>

<BODY TEXT="#000000">
</BODY>


Les liens

Les couleurs des liens (texte, soulignement et bordure d'image) sont définies pour toute la page dans la balise <BODY>. Si cette dernière ne contient pas d'information relative aux liens, alors les paramètres par défaut du navigateur (qui peuvent êtres modifiés par l'utilisateur) s'appliquerons. Ainsi il est fortement recommandé de préciser les couleurs des liens dès lors qu'une couleur ou une image de fond est associée à une page.

Liens

La couleur des liens qui n'ont pas encore été visités et qui ne sont pas activés par la souris ou le focus est définie par la propriété LINK dont la valeur est le nom de la couleur ou son code hexadécimal (précédé d'un dièse).

Exemples :

<BODY LINK="navy">
</BODY>

<BODY LINK="#000080">
</BODY>

Liens déjà visités

La couleur des liens qui ont déjà été visités est définie par la propriété VLINK dont la valeur est le nom de la couleur ou son code hexadécimal (précédé d'un dièse).

Exemples :

<BODY VLINK="gray">
</BODY>

<BODY VLINK="#808080">
</BODY>

Liens activés

La couleur des liens qui sont activés (lors du click de souris ou de la pression de la touche ENTRÉE) est définie par la propriété ALINK dont la valeur est le nom de la couleur ou son code hexadécimal (précédé d'un dièse).

Exemples :

<BODY ALINK="red">
</BODY>

<BODY ALINK="#FF0000">
</BODY>

<BODY LINK="navy" VLINK="gray" ALINK="red">
</BODY>

Par défaut, le navigateur affiche (et souligne) en bleu les liens non visités, en pourpre les liens déja visités et en rouge les liens activés.


Code des couleurs

Voici le code des 16 couleurs principales du HTML 3.2.

NomCodeRésultat
Black#000000 
Maroon#800000 
Green#008000 
Olive#808000 
Navy#000080 
Purple#800080 
Teal#008080 
Gray#808080 
NomCodeRésultat
White#FFFFFF 
Red#FF0000 
Lime#00FF00 
Yellow#FFFF00 
Blue#0000FF 
Fuchsia#FF00FF 
Aqua#00FFFF 
Silver#C0C0C0 

Les marges

On peux spécifier des tailles de marge (haut, bas, gauche, droit).
Pour la marge du haut : TOPMARGIN, pour celle du bas : BOTTOMMARGIN, pour celle de gauche : LEFTMARGIN, pour celle de droite : RIGHTMARGIN.

Exemple :

<BODY TOPMARGIN="50" BOTTOMMARGIN="50" LEFTMARGIN="40" RIGHTMARGIN="40" >
</BODY>


Les marges

On peux spécifier des tailles de marge (haut et bas en même temps : MARGINWIDTH et gauche/doite : MARGINHEIGHT).
Pour les marges des côtés gauche et droit : MARGINWIDTH et pour les marges du haut et du bas : MARGINHEIGHT.

Exemple :

<BODY MARGINWIDTH="40" MARGINHEIGHT="50" >
</BODY>


Colorier les barres de défilement

Les couleurs des barres de défilement (scrollbar en anglais) horizontales et verticales (appelées aussi ascenseurs) peuvent être redéfinies.

PropriétéDescription
scrollbar-base-colorcouleur générale de la barre, les autres couleurs étant calculée à partir de celle-ci
scrollbar-face-colorcouleur de face de la barre de défilement
scrollbar-arrow-colorcouleur des fleches de navigation
scrollbar-track-colorcouleur de l'arrière plan
scrollbar-darkshadow-colorcouleur de l'effet 3D du côté sombre de la barre
scrollbar-3dlight-colorcouleur de l'effet 3D du côté éclairé de la barre
scrollbar-highlight-colorcouleur du bord éclairé
scrollbar-shadow-colorcouleur du bord sombre

Exemples de feuille de style :

body { 
scrollbar-face-color: navy; 
scrollbar-arrow-color: blue; 
scrollbar-track-color: pink; 
scrollbar-3dlight-color: silver; 
scrollbar-darkshadow-color: dark; 
scrollbar-shadow-color : red;
scrollbar-highlight-color: color;
} 
body { 
scrollbar-base-color: read; 
} 

Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -