Chapitre 03 : Un zeste de coloriage

Télécharger ce chapitre au format *.pdf en cliquant ici (138 ko).

Introduction

A présent, vos pages devraient commencer à prendre forme. Seulement, il y a un petit problème : votre site est un peu tristounet, non ? En effet, rien n'est plus déprimant que de lire des pages et des pages d'écriture noire sur des pages blanches. Certes, sur un livre, cela peut passer sans problèmes, mais sur un écran d'ordinateur. Or, cela pose un problème majeur : l'ennui de vos visiteurs. Et, comme le Web est un monde impitoyable, les Internautes chercheront sûrement d'autres sites un peu plus gais.

C'est là que joue le rôle de la couleur. Même si vous n'êtes pas obligé de colorier chaque lettre d'une couleur différente, comme ceci, il est parfois intéressant de mettre divers titres en une couleur différente. Ou alors, de mettre un fond de page noir pour un site sur l'astronomie par exemple (noir, la couleur de l'univers...). A travers ce chapitre, nous verrons donc quelques petites choses concernant la couleur.

Dans une première partie, nous expliquerons ce qu'est le code RGB. Puis, nous verrons comment l'utiliser pour modifier la couleur du texte ou du fond d'une page. Commençons sans plus attendre !

Rêver la vie en couleurs, c'est le secret du bonheur.
Walt Disney

Code RGB - Red Green Blue :

Compter en base 16

Rien qu'à voir le titre, vous savez ce que signifie RGB. C'est déjà une bonne chose. Pour les non-anglophones (même si là, il ne faut quand même pas exagérer), je traduis : RGB signifie Red Green Blue, soit Rouge Vert Bleu.

Mais, avant de rentrer dans le vif du sujet, il va nous falloir faire (encore) un petit détour, du côté du comptage héxadécimal... Pas de panique, ce n'est pas bien difficile.

Notre civilisation compte, dans la vie de tous les jours, dans un système décimal, ou de base 10. Cela signifie que nous comptons de la manière suivante :

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Une fois arrivé au chiffre 9, on ajoute un chiffre à gauche, et on recommence :

10, 11, 12, 13, 14, 15, 16, 17, 18, 19

Puis, on augmente alors le chiffre qu'on vient de rajouter d'une unité pour obtenir les vingtaines. Je ne vais pas m'amuser à vous écrire la liste des nombres de 0 à 100, car je pense que vous savez (ou du moins, je l'espère...) compter. Et, une fois arriver à 99, rebelote, on ajoute un autre chiffre devant le tout, pour obtenir 100, 101, etc...

Voilà pour ce qui est de la base 10. Mais, il existe d'autres systèmes de numérations : le binaire, l'octal et l'héxadécimal. Nous ne verrons pas les deux premiers, et nous nous contenterons du dernier. Il est à noter que cette liste n'est nullement exhaustive.

L'héxadécimal est un système de numération en base 16. On procède exactement de même que ci-dessus :

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Mais, pourquoi il y a des lettres maintenants ? On se calme. Ce sont des lettres comme cela aurait pu être autre chose. En effet, notre système de numération ordinaire est décimal : par conséquent, il n'existe que 10 chiffres : à quoi cela servirait-il d'en inventer plus s'ils ne servent pas ? On aurait très bien pu choisir d'autres symboles, mais les lettres étaient plus simples.

Donc, en reprenant la même logique que précédemment, on écrit d'abord les 16 chiffres de la base individuellement. Puis, une fois que l'on arrive à 16, on ajoute un autre symbole devant, pour obtenir :

10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F,
20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F,
..................................................................................................
F0, F1, F2, F3, F4, F5, F6, F7, F8, F9, FA, FB, FC, FD, FE, FF

Et on continue de la même manière une fois arrivé au maximum FF : on ajoute un troisième caractère devant. Pas bien compliqué, n'est-ce pas ?

Certes, je pourrai expliquer la conversion héxadécimal – décimal, mais cela n'apporterai rien à ce chapitre. Donc, je préfère m'abstenir. Mon but était uniquement de vous apporter une première approche de ce système de numération.

Le code RGB

Dorénavant, nous pouvons sérieusement nous pencher sur le code RGB. Celui-ci sert à définir des couleurs, selon leur composantes de rouge, de vert, et de bleu (d'où le nom). La structure générale d'une couleur en code RGB est la suivante :

#RRGGBB

A présent que vous connaissez les bases du comptage en base 16, vous pouvez utiliser ce code. En effet, les composantes sont indiquées en héxadécimal. Afin d'éviter de me lancer dans des explications où l'on risque très facilement de se perdre, voici une série d'exemples commentés :

Par la suite, j'éviterai de m'amuser à colorier comme ci-dessus. C'est relativement pénible : il faut sans cesse changer la couleur d'écriture. C'est donc par pure fainéantise que j'arrête. Mais aussi car les éditeurs de texte (que ce soit NotePad ou tout autre) ne le font pas.

Ca y est ! Toute la partie théorique est terminée : passons aux choses sérieuses !

<body bgcolor="#BB00BB">

Pour obtenir cette couleur, je me suis tout simplement souvenu que le magenta avait pour code #FF00FF. Or, le violet est du magenta foncé. Donc, on diminue les différentes composantes, les faisant passer de FF à BB. D'où le résultat suivant : lien.

Voyons maintenant la deuxième et dernière chose pratique de ce chapitre : le changement de couleur du texte. Comment faire ? Vous vous souvenez de la balise <font> ? Eh bien, elle admet un autre argument que ceux que je vous ai déjà dévoilé. Celui-ci est l'argument (attention l'originalité) color. Il prend comme valeur le code héxadécimal de la couleur désirée, tout comme précédemment. Un petit exemple donc :

<body bgcolor="#000000">

         <font color="#FFFFFF" size="2" > Maintenant, on écrit blanc sur noir ! </font>

</body>

On remarque au passage la possibilité de mettre plusieurs arguments à la suite dans une seule et même balise. Cela donne :

Une petite mise en garde, qui est loin d'être superflue à la vue de certains sites : attention à la lisibilité de vos pages. Dans l'exemple ci-dessus, tout va bien. Mais, si vous prenez un fond de page vert fluo sur lequel vous écrivez en jaune fluo (voir exemple ci-dessous), inutile de dire que vos visiteurs viendront et repartirons aussitôt... Evitez donc des sites trop flashy...

Enfin, avant de clore ce chapitre (eh oui, c'est déjà la fin), il existe certains noms, qui permettent de remplacer le code hexadécimal de certaines couleurs. Ainsi, si vous mettez red ou darkblue, il comprendra respectivement rouge et bleu foncé. Essayez certains termes, vous verrez bien. A noter que ça ne marche qu'en anglais. En voici une liste que j'espère la plus complète possible :

Nom	Couleur	Aperçu
black	noir
maroon	marron / rouge foncé
green	vert
olive	vert olive
navy	bleu marine
purple	violet
teal	cyan foncé
gray	gris
silver	argent
red	rouge
lime	vert clair
yellow	jaune
blue	bleu
fuchsia	fuchia
aqua	bleu clair
white	blanc
azure	bleu azur
bisque	beige
brown	brun
chocolate	brun clair
cornsilk	rose clair
darkgreen	vert foncé
darkorange	orange foncé
darkorchid	violet foncé
deepskyblue	bleu clair
gold	doré
ivory	ivoire
orange	orange
lavander	lavande
pink	rose
plum	prune
salmon	saumon
snow	neige
turquoise	bleu turquoise
wheat	jaune paille
blueviolet	bleu violacé
chartreuse	vert clair

Un exemple, sans lien associé (ce n'est pas bien compliqué à comprendre) :

<body bgcolor="orange">

Ce qui clôture ce chapitre assez bref. Dans le suivant, nous verrons comment afficher des images sur nos pages, ainsi que la manière de les interconnecter entres elles, à l'aide des liens hypertextes.