Réaliser sa page Web
   Leçon 11 : Les fonds d'écran et les couleurs de votre page

L'instruction BODY en détail

Les pages HTML permettent d'insérer des fonds d'écran afin d'améliorer l'aspect visuel d'une page. Pour cela nous allons revenir sur l'instruction <BODY>. Comme nous l'avons vu plus haut, dans une balise on peut ajouter des attributs supplémentaires avec chacune un argument. Voici à nouveau la syntaxe :
<nom_du_tag nom_de_l'attribut="argument">
La gestion des couleurs du texte, des couleurs des liens et du fond d'écran se fait dans la balise <BODY>.
Voici la liste des différents attributs :

  • BACKGROUND : nom de l'image de fond d'écran (la syntaxe est BACKGROUND="image.gif").
  • BGCOLOR : couleur du fond d'écran s'il n'y a pas d'image de fond (la syntaxe est BGCOLOR="#rrggbb").
  • TEXT : couleur du texte de la page ( TEXT="#rrggbb").
  • LINK : couleur des liens hypertextes de la page (LINK="#rrggbb").
  • VLINK : couleur des liens hypertextes visités de la page (VLINK="#rrggbb").
  • ALINK : couleur des liens hypertextes actifs (ALINK="#rrggbb").
#rrggbb étant bien évidemment les 3 couleurs Rouge, Verte et Bleue. Les valeurs pour chacune des couleurs s'expriment en hexadécimal de 00 à FF.
Quelques exemples de couleur : Le noir = #000000, le blanc = #FFFFFF, le gris clair = #C5C5C5, le gris foncé = #303030, le rouge = #FF0000, le vert = #00FF00, le bleu = #0000FF, le rose = #FF7070, le jaune = #00FFFF etc....

La syntaxe complète est donc :
<BODY BACKGROUND="nom_de_l'image.gif" BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">

Voici un exemple :
<BODY BACKGROUND="backwhit.jpg" BGCOLOR="#EEEEEE" TEXT="#006600" LINK="#cc0000" VLINK="#aa2277" ALINK="#C900FF">

A noter: L'image de fond peut bien entendu être au format Gif ou Jpeg. Vous pouvez aussi utiliser des liens relatifs comme BACKGROUND="images/image.jpg" ou absolus comme BACKGROUND="http://www.machin.fr/images/pic.gif".
Les dernières normes HTML permettent d'utiliser directement le nom des couleurs pour les instructions vues plus haut. La syntaxe est, par exemple, LINK="green". Les couleurs possibles sont par exemple Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow ou Aqua (il existe 140 noms différents).
Internet Explorer et Netscape Navigator proposent des options supplémentaires à l'instruction <BODY>.

L'instruction BACKGROUND et BGCOLOR peuvent s'utiliser en attribut dans des tableaux au sein des instructions <TD>, <TH> ou <TABLE>.


L'exemple du tableau coloré

On peut donc combiner les effets vus précédemment et réaliser un tableau coloré

         
     
     
     
     


Voici le code correspondant :

Copier-coller ce texte

Notez que les cellules "vides" ne s'affichent pas, donc ici pour les remplir "sans texte" nous utilisons le caractère &nbsp; qui correspond à un espace.

   On résume :
  • Il vaut mieux coder les couleurs en hexadécimal car les vieux navigateurs ne connaissent que ce système.
  • Noter la façon de présenter le tableau, avec des décalages dans le code, il est plus lisible.