Tutorial HTML
Couleurs et caractères spéciaux
Utilité de la représentation codée des caractères
Devinette : comment afficher "<body>" alors qu'il s'agit d'une balise HTML destinée à l'interprétation par le "navigateur", et non pas à être affichée telle-quelle ? L'insertion de ces caractères risquerait de mettre en difficulté le navigateur. Réponse : en utilisant une représentation symbolique des caractères "<" (plus petit que) et ">" (plus grand que). Dans le fichier source on a, en réalité, ce qui suit.
<body>
On appelle"entités" ces symboles précédés par "&" et terminés par ";". Une entité intéressante est le caractère blanc (espace) : &nbsp;, utile par exemple dans les tableaux, si une case est vide. "lt" est l'abréviation de "lower than" (inférieur à) ; et "gt" de "greater than" (supérieur à).
Mais alors, comment peut-on faire apparaître "<" ci-dessus, alors que cette valeur devrait amener l'affichage de "<" ? Explication : parce qu'à la place du "&", on a utilisé le code qui définit ce caractère pour l'ordinateur : 38 en décimal ou 26 en code hexadécimal. Le code décimal est inclu comme ceci dans le fichier source html :
&lt;body&gt;
Caractères accentués et entités
Une page conçue pour Internet doit pouvoir être lisible sur tout ordinateur du monde entier. Or, ils ne sont pas tous configurés, loin s'en faut, pour afficher nos caractères accentués comme "é", "è", "à". L'anglais ignore les accents, l'allemand a son "umlaut", l'espagnol son tilde ("ñ"). Il est donc préférable d'utiliser les entités ad-hoc, que les navigateur savent reconnaître. Ceci n'est pas si contraignant qu'il y paraît : certains éditeurs, comme Jext, assistent la saisie en complètant automatiquement les entités (ainsi que les balises html) dès qu'on commence à en saisir une. Si on ne dispose pas d'une telle fonctionalité, ce n'est pas un problème : il suffit de saisir dans un premier temps avec les caractères accentués normaux ; quand la saisie du texte est terminée, on utilise simplement la fonction rechercher/remplacer qu'offrent les plus simples éditeurs de texte, comme Notepad.
Quelques caractères spéciaux et leurs "entités"
HE XA | Deci mal | Affichage | Entité |
22 | " | " | " |
26 | & | & | & |
3C | < | < | < |
3E | > | > | > |
A0 |   | | |
A3 | £ | £ | £ |
A7 | § | § | § |
E0 | à | à | à |
E2 | â | â | â |
E4 | ä | ä | ä |
E6 | æ | æ | æ |
E7 | ç | ç | ç |
E8 | è | è | è |
E9 | é | é | é |
EA | ê | ê | ê |
EB | ë | ë | ë |
ED | í | í | í |
EE | î | î | î |
EF | ï | ï | ï |
F1 | ñ | ñ | ñ |
F2 | ò | ò | ò |
F3 | ó | ó | ó |
F4 | ô | ô | ô |
F6 | ö | ö | ö |
F9 | ù | ù | ù |
FA | ú | ú | ú |
FB | û | û | û |
FC | ü | ü | ü |
Codes couleurs R-V-B
Les couleurs s'expriment par une combinaison de ROUGE-VERT-BLEU (red-green-blue : rgb). Chacune est quantifiée sur 256 niveaux de 0 à 255, ou 00 à FF en hexadécimal. FF0000 est le rouge, 00FF00 le vert et 0000FF le bleu. 000000 signifie aucune couleur (noir) et FFFFFF toutes les couleurs, c'est-à-dire blanc. Avec FFFF00, par exemple, on aura l'inverse du bleu, c'est-à-dire jaune. Voir le nuancier ci-dessous. Exemple : pour afficher une page avec un fond bleu clair, on intègrera la couleur de la façon suivante dans le tag "BODY":
<body bgcolor="#ddddff" >
Nuances de gris | 000000 | |||||
3F3F3F | ||||||
7F7F7F | ||||||
BFBFBF | ||||||
FFFFFF | ||||||
Nuances de rouge | 3F0000 | 3F2F1F | 3F1F2F | |||
7F0000 | 7F3F2F | 7F2F3F | ||||
FF0000 | FF7F5F | FF5F7F | ||||
FF7F7F | FF9F6F | FF6F9F | ||||
FFBFBF | FFBF9F | FF9FBF | ||||
Nuances de vert | 003F00 | 2F3F1F | 1F3F2F | |||
007F00 | 3F7F2F | 2F7F3F | ||||
00FF00 | 7FFF5F | 5FFF7F | ||||
7FFF7F | 9FFF6F | 6FFF9F | ||||
BFFFBF | BFFF9F | 9FFFBF | ||||
Nuances de bleu | 00003F | 2F1F3F | 1F2F3F | |||
00007F | 3F2F7F | 2F3F7F | ||||
0000FF | 7F5FFF | 5F7FFF | ||||
7F7FFF | 9F6FFF | 6F9FFF | ||||
BFBFFF | BF9FFF | 9FBFFF | ||||
Opposé à rouge (cyan) | 003F3F | 001F2F | 002F1F | |||
007F7F | 002F3F | 003F2F | ||||
00FFFF | 005F7F | 007F5F | ||||
7FFFFF | 7FBFDF | 7FDFBF | ||||
BFFFFF | BFDFFF | BFFFDF | ||||
Opposé à vert (magenta) | 3F003F | 1F002F | 2F001F | |||
7F007F | 2F003F | 3F002F | ||||
FF00FF | 5F007F | 7F005F | ||||
FF7FFFF | BF00BF | DF7FBF | ||||
FFBFFF | DFBFFF | FFBFDF | ||||
Opposé à bleu (jaune) | 3F3F00 | 1F2F00 | 2F1F00 | |||
7F7F00 | 2F3F00 | 3F2F00 | ||||
FFFF00 | 5F7F00 | 7F5F00 | ||||
FFFF7F | BFDF7F | DFBF7F | ||||
FFFFBF | DFFFBF | FFDFBF |