2. La mise en forme globale

Qu'est ce que c'est encore que ce truc ?
Je n'ai pas trouvé d'autre titre, désolé !
Ce que j'entends par là est simple : il s'agit de la couleur de fond de page, éventuellement la mise d'une image en fond de page (comme pour ce texte et les précédents).

Pour le fond de page, ça se définit par un paramètre dans la commande <BODY> que nous avons déjà vue au chapitre précédent.


Et une couleur de fond pour la un !

Pour la couleur de fond, le paramètre est BGCOLOR (pour "BackGround COLOR") :

<BODY BGCOLOR="WHITE">

Ou :

<BODY BGCOLOR="#RRGGBB">

La première forme est assez simple à utiliser (pour le blanc ou pour le noir, par exemple) mais limitée : seule quelques couleurs sont définies, de plus le "RED" par exemple est assez pétant !

La deuxième forme vous permet d'indiquer n'importe quelle couleur : RRGGBB est à remplacer par le code hexadécimal de la couleur. NE VOUS ENFUYEZ PAS ! C'est pas si compliqué...
N'importe quel logiciel de dessin vous permet de récupérer ce code.
Voyons la démarche à suivre avec Paintbrush :

0) Démarrer PaintBrush.
1) Double-cliquer sur une des couleurs dans la palette en bas.
2) Dans la fenêtre "Modifier les couleurs", il y a 3 curseurs Rouge, Vert et Bleu, déplacer les jusqu'à ce que vous trouviez la couleur de vos rêves.
3) Noter les codes Rouge, Vert et Bleu.
3bis) Vous pouvez sortir de Paintbrush, nous n'en avons plus besoin.
4) Démarrer la calculatrice, et mettez la en affichage "Scientifique" si ce n'est pas déjà fait.
5) Taper le 1er code (le Rouge), puis cliquer sur "Hex" en haut à gauche, noter l'affichage. On vient de traduire un nombre décimal (base 10) en hexadécimal (base 16).
6) Cliquer sur "Déc" pour remettre la calculatrice en mode décimal.
7) Faites de même (étapes 5-6) pour le 2ème et 3ème code.
8) Collez bout à bout les 3 codes obtenus et vous avez ce qu'il faut mettre dans le "#RRGGBB".
8bis) Vous pouvez sortir de la calculatrice, nous n'en avons plus besoin.

Exemple, j'ai obtenu dans Paintbrush pour un superbe bleu pale : Rouge = 73, Vert = 220, Bleu = 240.
Avec la calculatrice, je traduis ces codes décimaux en : 49, DC, F0.
[NB: Ca parait un peu bizarre, mais en base 16, les nombres sont codées 0, 1, 2, ..., 8, 9, puis A, B, C, D, E, F, puis 10, 11, etc..., 19, 1A, 1B, etc..., etc...].
Je vais donc coder ma commande BODY avec le paramètre BGCOLOR="#49DCF0".

J'ai tapé ce code dans un fichier essai2 essai2.htm que vous pouvez visualiser dans votre navigateur. Appuyer sur le bouton précédent ou sur les touches ALT + "flèche gauche" pour revenir sur cette page.
Le changement avec ESSAI1.HTM, c'est la couleur !

Attention, dans le choix des couleurs. Le texte doit toujours être lisible (par défaut le texte est en noir).


Et une image de fond pour la deux !

Bon, là c'est plus simple.
Quoique !?
Dans la navigateur, on peut afficher 2 standards d'image : le GIF (extension des fichiers .GIF) et le JPEG (extension .JPG).

Le GIF est un peu comme le format Bitmap, chaque point est défini précisément, mais le fichier est compressé.
Une image BMP (BitMap) et GIF apparaitront dans votre programme de dessin (comme Paint Shop Pro par exemple) exactement de la même manière, mais le fichier GIF sera plus petit que le fichier BMP. Ce format est bon pour les dessins, schémas, capture d'écrans car il garde précisément les points qui composent l'image, mais il est limité à 256 couleurs simultanées.

Le JPEG est un fichier image compressé avec des algorithmes complexes qui permet surtout de stocker des photos dans un fichier raisonnablement petit. Les photos sont composées de points très différents les uns des autres, car avec beaucoup de variations de nuances. La compression GIF n'est pas efficace sur ce type d'image car elle est basée sur la répétition des couleurs, par exemple, si j'ai une ligne de 100 points blancs, je vais stocker en quelques octets (2 !) la répétition de 100 points de même couleurs, alors que le BMP stocke 100 octets. Le JPEG, selon le taux de compression choisit, va prendre des petits bouts de l'image et prendre la couleur moyenne avant de compresser. L'image globale garde le même aspect mais point par point elle est modifiée. Cas pratique : les textes passent assez mal en JPEG, qui est réservé surtout aux photographies numérisées.

Pour la mise en oeuvre d'une image que vous aurez choisit selon vos gouts, c'est hyper simple ! C'est également un paramètre dans la commande BODY :

<BODY BACKGROUND="nom de fichier">

Le nom de fichier est le nom standard DOS, "papier.gif" par exemple. On peut indiquer le répertoire. Par exemple, dans le magazine FNS, il y a plein d'image de fonds d'écrans dans le répertoire MAGAZINE\IMGDIVER, si vous êtes dans le répertoire MAGAZINE\RUBRIQUE\ARTICLE vous pouvez faire coder votre commande :

<BODY BACKGROUND="..\..\commun/images\papier.gif">

Comme pour la couleur de fond, attention au choix du fond, le texte doit toujours être visible !

Comme tout à l'heure, zieuter le fichier essai3.htm dans votre navigateur. Appuyer sur le bouton précédent ou sur les touches ALT + "flèche gauche" pour revenir sur cette page.

Le cadre est posé, y'a plus qu'à mettre en forme le texte.
A moins qu'on arrête là aujourd'hui et qu'on retourne au
menu.