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.
Pour que la police soit exécutée correctement, il faut qu'elle soit disponible sur le système d'exploitation du client. Par exemple la police "Rondalo" n'est pas populaire et par conséquent elle n'est pas disponible que chez peu d'utilisateurs (comme les designers ou les infographistes) et le fait de la déclarer comme valeur de l'attribut face incitera le navigateur du client à charger la police par défaut qui est "Times New Roman".
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 |
La limitation des possibilités de redimensionner un texte à sa guise n'est qu'un des nombreux problème de design de HTML. En effet, HTML sert essentiellement à la création du contenu. Cependant, pour réussir un design attrayant et absolument personnalisable, une autre technologie s'offre à vous; c'est CSS (Cascading Style Sheets) dont un cours détaillé est disponible sur ce site.
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
24 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 |
Si les deux chiffres de chaque octet sont égaux, on peut raccourcir le code HTML de la couleur en ne déclarant qu'un seul chiffre pour chaque couleur primaire. Exemple #FF8800 peut devenir #F80.
Notez que la casse n'est pas prise en compte pour les codes. Vous pouvez donc les écrire en minuscule ou en majuscule.
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:
<font color="#FF0000" face="verdana" size="2">
Ce texte a été formaté grâce à la balise font
</font>
Le résultat obtenu est:
Ce texte a été formaté grâce à la balise font
Il n'y a pas que la couleur des polices qu'on peut changer avec du code des couleurs, mais aussi les arrière-plans comme c'est le cas pour l'attribut bgcolor qu'on a vu pour la balise <body>.