HTML (HyperText Markup Language)

Auteur: Mohamed CHINY Durée necessaire pour le cours de HTML (HyperText Markup Language) Niveau recommandé pour le cours de HTML (HyperText Markup Language) Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 6: Balises de formatage du texte - Partie 2

Toutes les pages

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>. Elle doit sa notoriété aux effets qu'elle peut apporter aux textes qu'elle inclue.

La balise <font> 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
18pt
210pt
3 (par défaut)12pt
414pt
518pt
624pt
736pt
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'à 224 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:

couleurCode 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>.
Quiz (Pour tester vos connaissances)
  1. La balise <strong> peut-elle remplacer:
La balise <u>
La balise <s>
La balise <b>
La balise <i>
  1. Parmi les codes proposés, lequel permet d'avoir un affichage similaire à celui généré par la balise <h2>?
<b><font size="18">
<b><font size="5">
<b><font size="6">
<i><font size="5">
  1. Le commentaire HTML est-il visible dans le code source?
Oui
Non
  1. Les codes #FF8800 et #F80 donnent-ils la même couleur?
Oui
Non
  1. Quelle est l'erreur commise dans ce code?
    <html>
       <head>
       </head>
       <body>
          <b>Texte en gras</b><br>
          <u>Texte souligné</u></br>
       </body>
    </html>
La balise <title> a été oubliée
La balise <body> ne contient pas assez de contenu
La balise <br> ne doit pas être fermée