Balises de formatage de texte avec attributs

Avec la même balise on peut réussir plusieurs effets différents. C'est grâce aux attributs que celle ci renferme. Une des balises les plus populaires de HTML est la balise <font>.

Balise <font>

La balise de formatage de texte la plus connue est sans doute la fameuse <font>. Bien qu'elle a été rendue obsolète par W3C, les navigateurs continuent encore à la prendre en charge.

La balise <font> doit sa notoriété aux effets qu'elle peut apporter aux textes qu'elle inclue.

Elle dispose de trois attributs principaux qui permettent d'appliquer des effets non négligeables aux textes. Ces trois attributs sont: face, size, et color.

L'attribut face:

L'attribut face permet de spécifier la police à utiliser pour afficher le texte inclus dans la balise <font>. Par défaut c'est la police "Times New Roman" qui est appliquée par la plupart des navigateurs si aucune police n'est spécifiée. "Times New Roman" est une police de la famille "Sérif" et elle n'est pas très adaptée aux pages Web. Cependant d'autres polices pourront bien faire l'affaire comme "verdana" ou "arial" qui sont assez populaires et sont supportés par de nombreux systèmes d'exploitation.
L'attribut size:

Vous l'avez sûrement deviné. L'attribut size change la police du texte. Par défaut le navigateur applique la taille 12 points (écrit 12pt) aux polices, sauf quelques exceptions comme "Netscape Navigator" qui applique par défaut la taille 10pt. (Le point est l'unité de mesure des polices. Il en existe d'autres, mais je préfère laisser ce volet fermé jusqu'au cours de CSS).

HTML ne supporte (malheureusement) que 7 tailles de police seulement, elle sont déclarées par des indices allant de 1 à 7. Le tableau suivant détaille la valeur de chaque indice:

Indice (valeur de l'attribut size)	Valeur réelle en pt
1	8pt
2	10pt
3 (par défaut)	12pt
4	14pt
5	18pt
6	24pt
7	36pt

L'attribut color:

Dans un texte, il n'y a pas que la police et la taille, il y a aussi la couleur. L'attribut color sert à appliquer une couleur au texte entouré par la balise <font>. La méthode la plus simple pour définir une couleur c'est par son nom anglais (red pour rouge, yellow pour jaune...). Bonjour les anglophones!

Un problème surgit aussitôt à la surface. Combien de couleurs peut on définir de cette manière? sans doute pas beaucoup (un peu plus de 100 couleurs). Cependant un écran peut afficher environ 16 millions de couleurs. Pour couvrir toutes ces nuances, la seule solution consiste à utiliser les codes des couleurs.

Gestion des couleurs en HTML (codes des couleurs)

Pour qu'un écran affiche une image en couleur, il combine 3 couleurs dites primaires. Ces couleurs sont Rouge, Vert et Bleu. On parle alors de la base RVB (RGB en anglais). Le fait de mélanger ces trois couleurs à des proportions différentes donne naissance aux 16 millions de couleurs dont on a parlé au paragraphe précédent.

Techniquement, chaque couleur primaire est codée sur un octet (8 bits) (si vous ne voyez pas ce que cela veut dire allez jeter un coup d’œil sur cette page https://fr.wikipedia.org/wiki/Bit). Les trois couleurs sont donc codées sur 24 bits et du coup on peut avoir jusqu'à 2²⁴ nuances différentes (ce qui donne 16777216 couleurs).

Alors, pour avoir du rouge parfait à partir de la base RVB on doit prendre la maximum du rouge, le minimum du vert et et le minimum du bleu. En codant cela en binaire on obtient:

• Rouge: 11111111
• Vert: 00000000
• Bleu: 00000000

Il faut alors 24 caractères combinant des 0 et des 1. C'est un peu long non? Heureusement, il existe le système hexadécimal (https://fr.wikipedia.org/wiki/Système_hexadécimal) qui regroupe les bits 4 par 4. Le code précédent décrivant le rouge devient alors FF pour le rouge, 00 pour le vert et 00 pour le bleu. L'attribut HTML color aura donc la valeur #FF0000 (le # est là pour dire au navigateur qu'il s'agit du système hexadécimal).

De la même manière, le vert parfait est codé #00FF00, le bleu #0000FF, le blanc #FFFFFF (le blanc est le mélange des trois couleurs primaires au maximum), le noir #000000 (le noir désigne qu'il n'y a aucune couleur), le gris moyen #888888 (pour obtenir du gris, il faut mélanger les trois couleurs primaires aux même proportions. Un gris claire est obtenu par des valeurs élevées et un gris foncé est le résultat de faibles valeurs).

Le tableau suivant illustre les couleurs basiques:

couleur	Code HTML
Rouge	#FF0000
Vert	#00FF00
Bleu	#0000FF
Blanc	#FFFFFF
Noir	#000000
Jaune	#FFFF00
Magenta	#FF00FF
Cyan	#00FFFF
Gris moyen	#888888
Orange	#FF8800

Exemple de formatage du texte avec la balise <font>

Supposons qu'on veut écrire la phrase suivante "Ce texte a été formaté grâce à la balise font" en rouge, avec la police "verdana" et la taille 10pt. Le code HTML ressemblerait à ceci:
Le résultat obtenu est: