Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

16. Arrière-Plans Colorés et Textures

Ne vous contentez pas de cette triste page blanche ! Ajoutez une audacieuse c o u L e U r ou un modèle de texture derrière le texte.

Objectifs

Après cette leçon, vous pourrez :

Créer un arrière-plan coloré pour une page web.
Calculer le code hexadécimal d'une couleur.
Changer la couleur du texte et des liens hypertexte.
Créer un arrière-plan avec la texture d'un fichier graphique.

Leçon

Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.

L'arrière-plan de votre page doit rester -- en arrière-plan. En ajoutant différentes couleurs ou même des motifs, gardez à l'esprit que cela ne doit pas impacter la lisibilité du texte. Mais ne prenez pas cela comme parole d'évangile, faites-vous votre propre opinion en regardant un exemple de ce qui peut arriver quand vous ne pensez pas aux conséquences d'un arrière-plan chargé.

Pour les pages de ce didacticiel, nous avons opté pour un fond blanc tout simple (même si ce n'est pas très original). Non, ce n'est pas très excitant, mais c'est lisible.

Avec quelques modifications dans la balise <body> (présentée il y a bien longtemps dans la leçon 1), vous pouvez ajouter un fond avec une couleur unique à votre page web. Mais, avant de vous montrer le truc des couleurs, nous devons d'abord parler des valeurs RVB et de leurs représentations "hexadécimales".

Généralités sur les couleurs et les "Hex-Dec"

Dans un navigateur web, vous avez à votre disposition une palette de couleurs système pour colorer le texte et les fonds d'écran. Chaque teinte est représentée par ses valeurs

Rouge- Vert- Bleu (RVB), trois nombres, allant de 0 à 255, représentant l'intensité du composant Rouge, Vert ou Bleu dans la couleur désirée. Les valeurs maximales des trois nombres (R=255, V=255, B=255) produisent la couleur blanc et les valeurs minimales (R=0, V=0, B=0) affichent du noir. Toutes les autres couleurs sont représentées par différents triplets RVB.

Voici la partie trompeuse. Plutôt que d'identifier une couleur par quelque chose comme "102,153,255" chaque nombre est converti de sa représentation en base 10 (nombres de tous les jours, chiffres dans le groupe 0,1,2,3,4,5,6,7,8,9) en hexadécimal, base 16 (chiffres dans l'ensemble 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Pourquoi ? L'hexadécimal est compris plus facilement et de manière plus efficace par les ordinateurs. Donc, pour l'exemple ci-dessus, nous l'écririons en hexadécimal sous la forme "6699FF". Dans cet exemple, "66" est la valeur pour le Rouge, "99" pour le Vert et "FF" pour le Bleu.

Voici quelques exemples de valeurs hexadécimales pour différentes couleurs :

Couleur	Code Hexa	Couleur	Code Hexa
`xx oo xx`	`FFCCCC`	`xx oo xx`	`3300FF`
`xx oo xx`	`33FF66`	`xx oo xx`	`AA0000`
`xx oo xx`	`663300`	`xx oo xx`	`9900FF`
`xx oo xx`	`000077`	`xx oo xx`	`FFFF00`
`xx oo xx`	`EEEEEE`	`xx oo xx`	`888888`
`xx oo xx`	`444444`	`xx oo xx`	`000000`
Attendez, ne croyez pas que vous allez avoir à faire un tas de conversions numériques ! Il y a plusieurs outils gràce auxquels vous pourrez cliquer sur une couleur et obtenir sa représentation hexadécimale. Plusieurs sont disponibles chez les gars de Yahoo. Mais, encore mieux, plusieurs navigateurs supportent les mots-clefs standards pour ces 16 couleurs (les favorites de Windows en VGA) :
Couleur	Nom	Couleur	Nom
`xx oo xx`	`aqua`	`xx oo xx`	`black`
`xx oo xx`	`blue`	`xx oo xx`	`fuchsia`
`xx oo xx`	`gray`	`xx oo xx`	`green`
`xx oo xx`	`lime`	`xx oo xx`	`maroon`
`xx oo xx`	`navy`	`xx oo xx`	`olive`
`xx oo xx`	`purple`	`xx oo xx`	`red`
`xx oo xx`	`silver`	`xx oo xx`	`teal`
`xx oo xx`	`white`	`xx oo xx`	`yellow`

Couleurs uniques d'arrière-plans

NOTE : Vous pouvez essayer le test pour voir si votre navigateur supporte les couleurs d'arriére-plans.

Pour notre Web Volcan, la première chose à faire est d'ajouter un arrière-plan en couleur dans le fichier index.html. Le code HTML pour ajouter un fond d'écran coloré inplique la modification du tag <body> comme ceci :

    <body bgcolor=#XXXXXX>

où XXXXXX est la représentation hexadécimale (précédée du signe #) de la couleur désirée.

Vous vous souvenez peut-être que l'image que nous avons utilisé pour la page d'accueil représente des volcans sur un fond de couleur noire -- donc, si nous utilisons la même couleur pour l'arrière-plan de la page web, l'image se fondra très bien dans la page :

Ouvrez le fichier index.html dans votre éditeur de texte.
Cherchez le tag <body> et changez-le en :

    <body bgcolor=#000000>

Sauvegardez et Ouvrez votre fichier HTML dans votre navigateur web

Si vous avez tout fait correctement, votre navigateur devrait avoir changé le fond de la page en noir. Mais vous avez peut-être remarqué que vous ne voyez plus le texte ! Pourquoi ? Eh bien, la couleur par défaut du texte est également le noir, vous avez donc maintenant du texte noir sur un fond noir ! Heureusement, nous devons ajouter d'autres options à la balise body pour colorer le texte et les liens hypertextes :

    <BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>

où les valeurs XXXXXX déterminent :

BGCOLOR = la couleur d'arrière-plan (gris par défaut)
TEXT = la couleur du texte normal (noir par défaut)
LINK = la couleur d'un élément qui est un lien hypertexte (bleu par défaut)
VLINK = la couleur d'un lien hypertexte récemment visité (violet par défaut)

Vous pouvez maintenant ajouter certaines de ces autres couleurs en changeant la balise de la manière suivante :

  <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>

Cela définira un arrière-plan noir, du texte jaune pâle, des liens hypertexte bleu ciel et de l'hypertexte rouge pour les liens visités.

NOTE : l'ordre des éléments dans le tag <BODY> n'a pas d'importance

Vous devez maintenant modifier les balises <BODY> dans tous vos fichiers HTML (rapide et facile à faire en copiant et collant l'exemple ci-dessus pour le nouveau tag <body>).

Textures de fond d'écran

NOTE : vous pouvez essayer le test pour voir si votre navigateur supporte les textures de fond d'écran.

Les couleurs d'arrière-plans ajoutent de la fantaisie aux pages web -- mais vous pouvez aller encore plus loin en ajoutant des textures de fond d'écran. Vous utilisez un petit fichier image (GIF or JPEG) et le navigateur va "remplir" la page web avec des copies répétées de cette image. Quelques points à garder à l'esprit :

taille du fichier : Ajouter une texture de fond d'écran peut nécessiter le téléchargement d'un fichier graphique supplémentaire. Nous vous recommandons d'utiliser des fichiers de taille inférieure à 10k.
lisibilité : Soyez sélectifs ! Bien des fichiers de textures sont plus génants qu'attrayants pour la lisibilité. Essayez d'utiliser des textures très claires (avec du texte foncé) ou très foncé (avec du texte clair). Sélectionnez des couleurs de texte et de fond d'écran contrastées.
effet : Dans les premiers navigateurs web utilisant des fonds d'écran, la page n'apparaissait pas tant que le fichier d'arrière-plan n'était pas chargé. Cela pouvait vouloir dire que, pour une connexion lente, votre lecteur doive attendre longtemps le fichier image avant même de voir le contenu de la page ! Pourtant, les navigateurs les plus récents téléchargent l'arrière-plan en dernier, ce qui fait que la page est tout d'abord grise, puis le texte et les graphiques apparaissent et enfin le fond d'écran. SOUVENEZ-VOUS ! Le temps de chargement de vos pages sera sûrement plus long (considérablement pour les modems les plus anciens) quand elles seront lues depuis un serveur web.

Dans cette partie de la leçon, nous allons vous donner la possibilité d'expérimenter trois fichiers d'arrière-plans différents. Le HTML pour ajouter un fichier image d'arrière-plan est :

  <body background="bgfile.gif">

où bgfile.gif est le nom du fichier image (ca peut être un URL ou un chemin de fichier relatif -- voir la leçon 8a).

Ci-dessous se trouve une liste de trois fichiers de fond d'écran. Vous pouvez télécharger chaque fichier (si vous ne savez pas comment téléchager les graphiques d'une page web, consultez notre section aide). Mettez chaque fichier graphique dans le répertoire/dossier pictures de votre espace de travail web :

Blue Tile [bg.gif]: un modèle répétitif de carré :
HTML : <body background="../pictures/bg.gif">
Fichier exemple avec le fond d'écran en mosa�que bleue
Texte Volcan[vtext.gif]: Gros texte gris clair :
HTML: <body background="../pictures/vtext.gif">
Fichier exemple avec le fond d'écran en texte Volcan
Papier [paper.gif]: Longue bande de papier de calepin
HTML : <body background="../pictures/paper.gif">
Fichier exemple avec le fond d'écran en papier

Vous pouvez aussi modifier les couleurs du texte de votre page comme nous l'avons fait dans l'exemple précédent. Par exemple, si nous voulons du texte ROUGE pour le fond d'écran en Papier, nous pourrions écrire :

  <body background="../pictures/paper.gif" text=#CC0000>

ce qui nous donne du texte rouge sur du papier jaune.

NOTE : La majorité des navigateurs web vous offrent la possibilité de changer les couleurs de texte par défaut -- parfois, un utilisateur préfèrera des couleurs qui ne s'accorderont pas avec celles que vous avez choisies. Nous vous suggérons donc, quand vous utilisez les balises de fond d'écran (couleur pleine ou fichier texture) d'inclure les couleurs "normales" -- noir pour le texte, bleu pour les liens hypertexte et violet pour les liens récents : <BODY TEXT=#000000 VLINK=#660099 LINK=#0000FF>

Si vous cherchez d'autres exemples de fichiers textures, consultez la liste de liens de Yahoo

Vérifiez Votre Travail

Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Nous allons garder les fichiers exemple avec l'arridu document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte.Nous allons garder les fichiers exemple avec le noir que nous avons ajout� dans une partie prdu document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Nous allons garder les fichiers exemple avec le noir que nous avons ajout� dans une partie précédente de la leçon.

Révision

Revoyons les grandes lignes de cette leçon :

Comment ajouter un fond d'écran à vos pages web ?
Pourquoi les codes couleur sont-ils écrits en code cryptique comme #FF66CC ?
Comment colorer le texte d'une page web ?

Quelle est la différence entre

  <body bgcolor=#FFFFFF>

  <body background="tiles.gif">

Informations Supplémentaires

Si vous voulez vous assurer que les couleurs que vous choisissez pour vos pages web seront les mêmes sur d'autres ordinateurs, utilisez les codes hexadécimaux. Avec les différentes combinaisons de lettres et de chiffres, il y a réellement des millions de couleurs disponibles, e.g. #FD6A2C, #06E293 ou #55A92B. Pourtant, ces couleurs ne seront pas exactement les mêmes suivant les ordinateurs. De plus, si votre visiteur n'a pas un ordinateur récent capable d'afficher des "millions" de couleurs, le navigateur web cherchera la couleur la plus "proche", avec parfois des résultats indésirables.

Heureusement, il y a une solution à ce problème... n'utilisez que les codes hex des couleurs inclues dans la palette de 216 couleurs de Netscape. "Qu'est-ce que c'est que ça ?" vous demandez-vous. C'est un ensemble de 216 couleurs uniques et communes aux systèmes d'exploitation Macintosh ET Windows. Ces couleurs peuvent donc être affichées sur pratiquement n'importe quel ordinateur.

Si vous voulez utiliser ces couleurs magiques, choisissez simplement les combinaisons des codes couleurs suivants : 00 33 66 99 CC FF. Par exemple, ces couleurs font toutes partie de la palette dont nous venons de parler : #FF6600, #00FF66 ou #669933.

Travail Indépendant

Ajoutez une couleur de fond d'écran ou un fichier de texture à vos pages. Demandez à d'autres personnes si elles trouvent le texte facilement lisible avec les éléments d'arrière-plan que vous avez choisis.

A Suivre....

Deux des tags HTML les plus hideux et les plus exécrables jamais créés...

ALLER A.... | Index des Leçons | précédent : "HTML Standard et Etendu" | suivant : "Ne Clignotez pas, Ne Défilez pas" |

Ecrire le HTML : Leçon 16 : Arrière-Plans Colorés et Textures
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut16.html