ACCUEIL |  PAGE PRECEDENTE |  PAGE SUIVANTE |  FIN DE PAGE |  INDEX

Unités de mesure HTML/CSS1


Les spécifications HTML ont toujours été discrètes sur les unités de mesure susceptibles d'être employées pour définir des grandeurs HTML (largeur d'une image ou d'une règle, hauteur d'une cellule dans un tableau, dimensions d'une police, etc..).

L'introduction des styles s'accompagne d'une profusion d'unités de mesures, comme en témoigne la table ci-dessous, permettant de définir des grandeurs à l'aide de différentes unités (en particulier typographiques) en valeur absolue ou relative. Mais ces facilités restent cantonnées aux déclarations de style. Les unités utlisées en-dehors des styles sont : le pixel, le pourcentage et la notation hexadécimale pour les couleurs.

Unités de mesure en usage et en projet
  UNITES DE MESURE HTML/CSS1
Généralités Une grande variété d'unités de mesure peuvent être utilisées. Ces unités peuvent être exprimées :
  • en valeur absolue : inch (in), centimètre (cm), millimètre (mm), point et pica (pc);
  • en valeur relative: hauteur de la fonte (em), pixel (px), hauteur de caractère (ex);
  • en pourcentage :
Unités de mesure absolues
Pica : pc La typographie classique définie au XVIIIe siècle par le français Didot repose sur un système en base 12. L'unité de base est le Cicero qui vaut 12 points, soit 4.513 mm

Dans le système anglo-saxon, également en base 12, l'unité standard est le Pica. Un Pica vaut 12 Points. Sa longueur est égale à 4.212 mm soit 1/6 d'Inch.

Du fait de la diffusion des logiciels de PAO d'origine américaine, le Pica est universellemnt accepté comme unité de mesure typographique.

Point : pt C'est l'unité la plus petite en typographie. Elle correspond à 1/12 pc ou à 1/72 in. Exprimé dans le système métrique, un point vaut 0.351mm
Inch : in L'Inch correspond au Pouce en français et mesure 2.54 cm. Cette unité de mesure est très largement répandues dans les pays anglo-saxons qui ne connaissent pas le système métrique.
Un Inch correspond à 6 Pica et 72 Points.
Centimètre: cm Cette unité de mesure métrique peut être utilisée dans la définition des marges, des hauteurs de ligne.
Millimètre: mm Le millimètre peut être utilisé pour définir une marge, l'espace entre les mots, l'espace entre le lettres.
Exemple :
H3 {word-spacing: 3mm }
Unités de mesure relatives
Pixel : px Pixel signifie Picture Element. C'est une unité de mesure relative qui dépend des dimensions de la zone utile de l'écran et du mode vidéo utilisé.
Selon les définitions vidéo, le nombre de pixels varie grandement pour un même écran:
  • Mode VGA : 640x480 pixels
  • Mode SVGA-I : 800x600 pixels
  • Mode SVGA-II: 1024x768 pixels.
Cette unité de mesure est largement utilisée en HTML, en particulier dans la définition de dimensions d'images.

Définition des dimensions d'une image :
<IMG src="images/logo.gif" width=200 height=125>
Fixe la largeur et la hauteur de l'image à respectivement 200 et 125 pixels

Exemple de déclaration de table :
<TABLE width=600>
Définit la largeur d'une table à 600 pixels

Hauteur de lettre :
em		 Cette unité de mesure est relative à la hauteur des caractères de la police utilisée dans l'élément HTML spécifié.
Exemple :
BODY {font-size: 12 pt; text-indent: 3em; }
Dans cet exemple, la taille des caractères est de 12 points et l'indentation du texte est de 36 points.
Pourcentage: % Les valeurs en pourcentage sont toujours relatives à une unité de longueur.

Exemple de style :
P {line-height: 120% }
Si la taille des caractères, définie par "font-size", est de 10 Points, la hauteur de ligne sera de 12 Points (120% de 10 points).

Exemple de déclaration de table :
<TABLE width=80% >
Définit la largeur d'une table à 80% de la largeur de l'écran

Exemple de déclaraton de frames :
<FRAMESET rows="25%,50%,25%">
Définition d'un système de frames à trois colonnes dont la largeur est définie en pourcentage par rapport à la largeur de l'écran.

Notation hexadécimale Les trois couleurs fondamentales (rouge, vert, bleu) sont codées séparément en base 16, une couleur pouvant prendre les valeurs de 00 à FF (soit 0 à 255 en base 10). Les combinaisons des trois couleurs donnent des triplets.
Chaque triplet correspond à une couleur composite. Il y a au total 16 777 216 couleurs possibles.

Exemples :

Notation des couleurs dans HTML :
<BODY bgcolor=#FFFFFF text=#000080>
Définition de la couleur de fond (blanc) et de caractères (bleu) d'un document.

Notation standard dans des styles :
H1 { color: #ff0000 } /* Couleur rouge */
Notation simplifiée :
H1 { color: #f00 } /* Couleur rouge */
On passe de la notation simplifiée à la notation complète en dédoublant les chiffres:
#f00 est équivalent à #ff0000
#f69 est équivalent à #ff6699

Notation décimale La notation décimale est strictement identique à la notation hexadécimale à la base près.
Les couleurs RVB sont notées de 0 à 255, ce qui correspond à 16.7 millions de couleurs.

Exemple:
EM { color: rgb(255,0,0) } /* Couleur rouge */
On notera la présence de la virgule comme séparateur des trois couleurs fondamentales et l'indication rgb (red, green, blue)

Notation en % La notation en pourcentage est strictement identique à la notation hexadécimale ou à la notation décimale.
Les couleurs RVB sont notées de 0 à 100%, ce qui correspond à 1 million de couleurs possibles.

Exemple:
EM {color: rgb(100%,0%,0%) } /* Couleur rouge */
On notera la présence de la virgule comme séparateur des trois couleurs fondamentales et l'indication rgb (red, green, blue)

   

Les spécifications 3.0 avaient prévu un attribut générique UNIT, permettant de définir pour la plupart des éléments du langage une unité de mesure adaptée. Cet attribut n'a pas été retenu par la suite.

Actuellement, l'auteur d'une page HTML peut définir une grandeur de la manière suivante :
ACCUEIL |  PAGE PRECEDENTE |  PAGE SUIVANTE |  DEBUT DE PAGE |  INDEX