US

Police de caractère

On a déjà vu comment changer la présentation du texte dans la seconde section de ce chapitre. On va maintenant voir comment modifier la police de caractère utilisée pour un texte. On peut spécifier la police que l'on souhaite en utilisant l'élément FONT. Trois paramètre peuvent être changés avec cet élément : la couleur, la taille et la police. Voici tout d'abord un exemple qui montre différents effets qu'on peut obtenir :

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
<HTML>
<HEAD>
    <TITLE>Police de caractère</TITLE>
 
<BODY>
    <P>
        <FONT color="#ff0000">Texte en rouge</FONT><BR>
        <FONT color="#00ff00">Texte en vert</FONT><BR>
        <FONT color="#0000ff">Texte en bleu</FONT><BR>
        <FONT color="#5a98f7">Texte en couleur quelconque</FONT>
 
    <P>
        <FONT size="1">Texte en 8 points</FONT><BR>
        <FONT size="2">Texte en 10 points</FONT><BR>
        <FONT size="4">Texte en 14 points</FONT>
 
    <P>
        <FONT face="Verdana">Texte en Verdana</FONT><BR>
        <FONT face="Times New Roman">Texte en Times New Roman</FONT>
Listing 2.12 Changer la police de caractère utilisée pour du texte.
Changer la police de caractère utilisée pour du texte
Figure 2.13 Changer la police de caractère utilisée pour du texte.

Les balises ouvrantes et fermantes sont toutes deux obligatoires pour l'élément FONT. Il s'agit d'un élément de niveau texte. Le texte placé entre les balises est celui sur lequel l'effet doit s'appliquer.

Couleur

Pour spécifier une couleur de texte différente de la couleur par défaut, il faut utiliser l'attribut color de l'élément FONT. Les couleurs sont données dans le modèle RGB (Red-Green-Blue), c'est-à-dire qu'une couleur est vue comme une combinaison des trois couleurs rouge, vert et bleu. Pour chacune des ces composantes, il faut spécifier une quantité qui est un nombre entier variant entre 0 (0%) et 255 (100%). La figure suivante vous montre ces variations, vous voyez donc bien que tout à gauche, il n'y a rien et c'est noir et en allant vers la droite, la couleur apparait de plus en plus.

Le système RGB
Figure 2.14 Le système RGB.

Format hexadécimal

Les valeurs à donner aux composantes rouge, vert et bleue ne sont pas données comme des nombres compris entre 0 et 255, qui sont des nombres décimaux, mais ils doivent être donnés au format hexadécimal. De quoi s'agit-il ? Il faut avant tout bien comprendre notre système qui est le format décimal. Dans ce système, il existe 10 chiffres qui sont 0, 1, ..., 8 et 9. Pour représenter un nombre, on va écrire une suite de chiffres, chacun de ceux-ci représentant une puissance de 10 dépendant de leur position dans le nombre. Par exemple, le nombre 6012 correspond à six milliers, zéro centaine, une dizaine et 2 unités :

6012 = (6 × 1000) + (0 × 100) + (1 × 10) + (2 × 1)
     = (6 × 103) + (0 × 102) + (1 × 101) + (2 × 100)

Dans le système hexadécimal, il y a 16 chiffres notés 0, 1, ..., 8, 9, A, B, C, D, E et F. On construit un nombre hexadécimal comme on construit un nombre décimal, c'est-à-dire comme une suite de chiffres. Chaque chiffre représente une puissance de 16 selon sa position. Par exemple, le nombre hexadécimal F7 représente le nombre décimal 112 :

F7 = (F × 16) + (7 × 1)
   = (F × 161) + (7 × 160)

Définir une couleur

La valeur d'une couleur se donne entre 0 et 255 en décimal, ce qui correspond à une valeur hexadécimale comprise entre 0 et FF. La valeur de l'attribut color a la forme suivante : #RRGGBB, c'est-à-dire que la quantité de rouge, vert et bleu est donnée en hexadécimal sur deux chiffres. Ainsi pour avoir du rouge, on mettra #FF0000, pour le vert #00FF00 et pour le bleu, #0000FF. Le noir équivaut à l'absence de couleur (#000000) et le blanc est la somme des trois couleurs (#FFFFFF).

Vous ne devez pas connaitre toutes les couleurs par cœur car les programmes vous proposent une palette de couleur et vous donnent automatiquement le code couleur correspondant. Vous pouvez par exemple utiliser l'outil en ligne ColorSchemer qui vous offre de nombreuses possibilités.

Il est également possible de préciser une couleur avec un nom usuel, comme par exemple red pour le rouge. Le tableau suivant liste quelques-uns de ces noms usuels et vous pouvez trouver une liste plus complète sur ce site web. Sachez que l'on préfère utiliser la notation hexadécimale pour être assuré que le document s'affiche de la même manière partout. En effet, il revient à chaque navigateur de reconnaitre et d'afficher des couleurs représentées par un nom usuel.

Nom Couleur
red rouge
green vert
blue bleu
aquamarine bleu marine
chocolate brun chocolat
ForestGreen vert forêt
Tableau 2.1 Noms usuels de quelques couleurs.

L'exemple suivant vous montre les deux façons différentes de spécifier la couleur grâce à l'élément FONT. Remarquez également qu'on a combiné l'élément avec les éléments B et I pour avoir le texte en gras et italique.

1 
2 
3 
4 
5 
6 
 
7 
8 
 
<HTML>
<HEAD>
    <TITLE>Définir des couleurs pour le texte</TITLE>
 
<BODY>
    <P>Vous devez remettre votre travail pour <FONT color="red"><b>demain à 10h30</b></FONT> !
 
    <P><I>En cas de problème, veuillez contactez <FONT color="#668FFF">Mr. Jones</FONT></I>
Listing 2.13 Définir des couleurs pour le texte.
Définir des couleurs pour le texte
Figure 2.15 Définir des couleurs pour le texte.

Taille

Pour faire varier la taille d'un texte, il faut utiliser l'attribut size de l'élément FONT. La valeur de cet attribut est un chiffre compris entre 1 et 7 pour avoir un texte allant d'une petite taille (1) vers une grande taille (7). Le tableau suivant reprend la conversion en terme de points, mieux connu pour certain.

Taille 1 2 3 4 5 6 7
Points 8 10 12 14 18 24 36
Tableau 2.2 Conversion de la taille du texte en points.

Taille relative

On peut également spécifier une taille relative par rapport à la taille courante en donnant comme valeur à l'attribut size un incrément ou un décrément. La taille par défaut est 3, ainsi, si on spécifie +2, on se retrouve avec une taille de 5, si on spécifie -1, on se retrouve avec une taille de 2. Les tailles doivent rester comprises entre 1 et 7 et si vous faites un incrément ou décrément trop grand, la valeur sera arrondie pour rester comprises entre 1 et 7. La taille est relative par rapport à la taille de base du document et pas par rapport à la taille courante du texte comme vous pouvez l'observer sur l'exemple suivant.

1 
2 
3 
4 
5 
6 
 
7 
8 
 
<HTML>
<HEAD>
    <TITLE>Taille du texte</TITLE>
 
<BODY>
    <P>Taille de base 3, <FONT size="+2">En +2 = 5</FONT>, <FONT size="-1">En -1 = 2</FONT>
 
    <P><FONT size="7">Taille = 7, <FONT size="+2">En +2 = 5</FONT>, <FONT size="-4">En -4 = 1</FONT></FONT>
Listing 2.14 Taille du texte.
Taille du texte
Figure 2.16 Taille du texte.

Vous voyez donc bien que, dans le second paragraphe, même si tout son contenu est fixé à une taille de 7, les deux taille relative +2 et -4 se sont faites par rapport à la taille de base pour le document qui est de 3 par défaut. On verra à la fin de cette section comment changer la taille de base.

Police

Pour utiliser une police différente que la police par défaut, il faut utiliser l'attribut face de l'élément FONT. La valeur de cet attribut est le nom de la famille de police à utiliser, par exemple Verdana. Si la police n'existe pas chez le client, soit une police ressemblante la remplacera ou alors ce sera la police par défaut qui sera utilisée (assez souvent Times ou Arial). Vous pouvez également spécifier plusieurs polices séparées par des virgules, dans ce cas, le navigateur va les essayer une après l'autre en commençant par la gauche. Vous pouvez ainsi spécifier différentes alternatives.

Ce dernier exemple illustre l'utilisation de l'attribut face en combinaison avec les autres attributs qu'on a vu dans cette section.

1 
2 
3 
4 
5 
6 
<HTML>
<HEAD>
    <TITLE>Police du texte</TITLE>
 
<BODY>
    <P><FONT face="Verdana" color="#6cf71d" size="5">Texte mis en forme</FONT>
Listing 2.15 Modification de la couleur, taille et police du texte.
Modification de la couleur, taille et police du texte
Figure 2.17 Modification de la couleur, taille et police du texte.
  • Espace membre
  • Learning Center
  • Les forums
  • Livre d'or
  • Imprimer
  • Boutique
  • Info
  • Règlement
  • Erreur
  • Newsletter

MyPagerank.Net

Firefox 3.6

Browse Happy logo

Open Clip Art Library

Join our Facebook Group

Twitter

Copyright © 2000-2017 UKO. Toute reproduction strictement interdite sans autorisation du webmaster

Valid XHTML 1.1 !
Valid CSS2 !
Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0
ICRA Internet Content Rating Association
Creative Commons License
Site optimisé pour Firefox avec une résolution 1024x768 --- Page chargée en 0.0623631 secondes --- This site uses Thumbshots previews