Mise en forme des caractères



Les caractères

Comme un logiciel de traitement de texte, le HTML possède un grand nombre d'instructions permettant de mette en forme du texte : titres, sous-titres, démarcation visuelle des passages de texte que l'on veut mettre en valeur.

Ces instructions permettent, entre autre, de modifier la taille des caractères, leur casse, leur couleur et leur police de manière à organiser le texte en une structure cohérente.

Caractères d'en-têtes

<H?> ... </H?>
Caractères d'en-tête (Headings), ils sont un moyen de structurer le texte en titres et sous-titres : il en existe six types, qui correspondent chacun à une taille de caractère différente.
Exemple :

<H1>Niveau 1</H1>

<H2>Niveau 2</H2>
<H3>Niveau 3</H3>
<H4>Niveau 4</H4>
<H5>Niveau 5</H5>
<H6>Niveau 6</H6>
<H7>Niveau 7</H7>
Niveau 1
Niveau 2
Niveau 3
Niveau 4
Niveau 5
Niveau 6
Niveau 7
Le texte ainsi mis en forme est interprété de manière relative par le navigateur et dépend donc de sa configuration quant à l'affichage des différents niveaux de titre, la taille physique exacte dépendant de la taille par défaut du programme (niveau 7).
Alignement de l'en-tête
<H? ALIGN="LEFT|CENTER|RIGHT">
Permet d'aligner les caractères d'en-tête dans la largeur de la page, à gauche, au centre ou à droite.
Exemple :
<H2 ALIGN="LEFT">Niveau 1</H1>
<H3 ALIGN="CENTER">Niveau 2</H2>
<H4 ALIGN="RIGHT">Niveau 3</H3>
Niveau 1
Niveau 2

Niveau 3


Caractères de la page

<FONT> ... </FONT>
Police de caractère, joue un rôle très important dans la présentation d'une page HTML en permettant de modifier la taille, l'apparence et la couleur des caractères.

Taille des caractères

L'affichage de la taille des caractères d'une page HTML peut varier en valeur de 1 à 7 : par défaut, cette valeur est égale à 3, les valeurs inférieures à 3 affichent donc des caractères plus petits et les valeurs supérieures à 3 des caractères plus grands.
<FONT SIZE="?">
Change la taille des caractères dans le cours de la page.
Exemple :
<FONT SIZE="1">Taille1</FONT>
<FONT SIZE="2">Taille2</FONT>
<FONT SIZE="3">Taille3</FONT>
<FONT SIZE="4">Taille4</FONT>

<FONT SIZE="5">Taille5</FONT>

<FONT SIZE="6">Taille6</FONT>


<FONT SIZE="7">Taille7</FONT>

Taille1
Taille2
Taille3
Taille4
Taille5
Taille6
Taille7

<FONT SIZE="+|-">
Permet d'augmenter ou de diminuer la valeur de taille par rapport à la taille de caractère en cours.
Exemple :
Mon texte de base
<FONT SIZE="+1">
augmenté d'une taille
</FONT>.
Mon texte de base augmenté d'une taille
Mon texte de base
<FONT SIZE="-2">
diminué de deux tailles
</FONT>.
Mon texte de base diminué de deux tailles

Police de caractère

<FONT FACE="nom de police">
Permet l'affichage d'une police particulière, définie en fonction des polices présentes sur l'ordinateur.
Exemple :
Nouvelle police :<BR>
<FONT FACE="Arial" SIZE="4">Arial</FONT>
Nouvelle police :
Arial
Si une police ainsi définie n'est pas présente sur l'ordinateur de l'utilisateur, son navigateur affichera la police qu'il utilise par défaut; il est donc souhaitable d'éviter de faire appel à cette commande pour l'utilisation de polices peu courantes.

Couleur des caractères

<FONT COLOR="?">
Permet d'attribuer une couleur particulière au texte (indication de couleur introduite à l'aide d'un nom de couleur ou de sa valeur sous forme de chiffres hexadécimaux).
Exemple :
<FONT SIZE="1" COLOR="#red">Mon</FONT> :
<FONT SIZE="4" COLOR="#008F00">texte</FONT> :
<FONT SIZE="6" COLOR="#blue">multicolore</FONT> :
Mon
texte
multicolore

Caractères de base

<BASEFONT SIZE="?">
Taille de base, modifie la taille définie par défaut pour l'ensemble du document à partir de l'endroit où la fonction est insérée.
<BASEFONT COLOR="couleur">
Couleur de base, modifie la couleur définie par défaut pour l'ensemble du document à partir de l'endroit où la fonction est insérée.
<BASEFONT FACE="non de police">
Police de base, modifie la police de caractère définie par défaut pour l'ensemble du document à partir de l'endroit où la fonction est insérée.

Formatage des caractères

Attributs physiques
Les attributs physiques, communs à la plupart des navigateurs, permettent d'afficher du texte de manière à ce qu'il se démarque d'un ensemble par sa mise en forme :
<B> ... </B>
Caractères gras (Bold).
<U> ... </U>
Caractères soulignés (Underline).
<I> ... </I>
Caractères italiques (Italic).
<S> ... </S>
Caractères barrés (Strikeout).
Exemple :
Mon texte <B>en gars</B>. Mon texte en gras.
Mon texte <U>souligné</U>. Mon texte souligné.
Mon texte <I>en italique</I>. Mon texte en italique.
Mon texte <S>rayé</S>. Mon texte rayé.

<SMALL> ... </SMALL>
Caractères abaissés d'une taille par rapport à la taille en cours.
<BIG> ... </BIG>
Caractères augmentés d'une taille par rapport à la taille en cours.
Exemple :
Mon texte <SMALL>plus petit</SMALL>. Mon texte plus petit.
Mon texte <BIG>plus gros</BIG>. Mon texte plus gros.

<SUP> ... </SUP>
Caractères en exposant (Superscript).
<SUB> ... </SUB>
Caractères en indice (Subscript).
Exemple :
Mon texte <SUP>en exposant</SUP>. Mon texte en exposant.
Mon texte <SUB>en indice</SUB>. Mon texte en indice.

Attributs logiques
Les attributs logiques, qui eux ne sont pas communs à tous les navigateurs, et permettent d'afficher du texte de manière à ce qu'il se démarque d'un ensemble par sa mise en forme en laissant au navigateur le choix de sa mise en forme :
Texte mis en valeur
<STRONG>> ... </STRONG>>
Mise en valeur forte de caractères : habituellement en gras.
Exemple :
Mon texte <STRONG>mis en valeur</STRONG>. Mon texte mis en valeur.

<EM>Exemple</EM>
Mise en valeur normale de caractères (Emphasis) :habituellement en italique.
Exemple :
Mon texte <EM>mis en valeur</EM>. Mon texte mis en valeur.

<STRIKE>Exemple</STRIKE>
Mise en valeur de caractères : habituellement en caractères barrés.
Exemple :
Mon texte <STRIKE>mis en valeur</STRIKE>. Mon texte mis en valeur.
Texte préformaté
<PRE> ... </PRE>
Texte préformaté (Preformated), affiche le texte tel qu'il a été saisi dans le code source, sans tenir compte des espaces, des sauts de lignes et des tabulations, qui sont affichés à l'écran sans être interprétés : habituellement en caractères de machine à écrire.
<PRE WIDTH="40|80|132">
Permet de modifier la largeur de la page HTML en lui spécifiant un nombre de colonnes : 40, 80 ou 132 (par défaut, 80 est le nombre colonnes d'une page).
Exemple :
Ici, <BR>
<PRE>
mon texte
préformaté.
</PRE>
Ici,
mon texte
préformaté.
<XMP> ... </XMP>
Texte préformaté (X.M.Preformated), affiche le texte tel qu'il a été saisi dans le code source, sans tenir compte des éléments de code, des espaces, des sauts de lignes et des tabulations, qui sont affichés à l'écran sans être interprétés : habituellement en caractères de machine à écrire.
Exemple :
Ici, <BR>
<XMP>
mon texte
<BR>
préformaté.
</XMP>
Ici,
mon texte
<BR>
préformaté.

Styles d'affichage de texte
<CITE> ... </CITE>
Mise en forme de citation : habituellement en italique.
Exemple :
Mon texte <CITE>de type CITATION</CITE>. Mon texte de type CITATION.

<CODE> ... </CODE>
Présentation de code source : habituellement en caractères de machine à écrire.
Exemple :
Mon texte <CODE>de type CODE SOURCE</CODE>. Mon texte de type CODE SOURCE.

<VAR> ... </VAR>
Présentation de nom de variable : habituellement en italique.
Exemple :
Mon texte <VAR>de type VARIABLE</VAR>. Mon texte de type VARIABLE.

<SAMP> ... </SAMP>
Présentation des exemples (Sample) : habituellement en caractères de machine à écrire.
Exemple :
Mon texte <SAMP>de type EXEMPLE</SAMP>. Mon texte de type EXEMPLE.

<TT> ... </TT>
Caractères à espacement simple (Teletype) : habituellement en caractères de machine à écrire.
Exemple :
Mon texte <TT>de type MACHINE À ÉCRIRE</TT>. Mon texte de type MACHINE À ÉCRIRE.

<DFN> ... </DFN>
Présentation des définitions (Definition) : habituellement en italique.
Exemple :
Mon texte <DFN>de type DÉFINITION</DFN>. Mon texte de type DÉFINITION.

<ADDRESS> ... </ADDRESS>
Présentation d'adresse (Address) : habituellement en italique.
Exemple :
Mon texte <ADDRESS>de type ADRESSE</ADRESS>. Mon texte
de type ADRESSE
.

<KBD> ... </KBD>
Présentation des saisies de l'utilisateur (Keyboard Input) : habituellement en caractères de machine à écrire.
Exemple :
Mon texte <KBD>de type CLAVIER</KBD>. Mon texte de type CLAVIER.

<LISTING> ... </LISTING>
Présentation de texte de type code informatique avec saut de ligne : habituellement en caractères machine à écrire mais actuellement considéré comme obsolète.
Exemple :
Mon texte <LISTING>de type CODE INFORMATIQUE</LISTING>. Mon texte de type CODE INFORMATIQUE.

Spécificité NetScape Spécificité Netscape :
<BLINK> ... </BLINK>
Clignotement du texte (Blinking).
Exemple :
Mon texte <BLINK>clignote</BLINK>. Mon texte clignote.

Spécificité Internet Explorer Spécificité Internet Explorer :
<PLAINTEXT> ... </PLAINTEXT>
Présentation du texte formaté, affiché tel qu'il a été saisi dans le code source, sans tenir compte des éléments de code (Netscape n'accepte pas la balise de fin de la fonction et n'interprète pas le texte qui la suit).
Exemple :
<PLAINTEXT>Mon texte <BR> préformaté</PLAINTEXT>. Mon texte <BR> préformaté.

Caractères spéciaux

La diversité des systèmes d'exploitation utilisés sur Internet impose l'utilisation d'un jeu de caractères standard à tous pour l'affichage de certains caractères, comme les signes < et > ou les caractères accentués.

Le langage HTML a codifié un certain nombre d'entre ces caractères de manière à ce qu'ils soient reconnus par tous les systèmes d'exploitation : on entre une combinaison précédée du caractère & et terminé par un ; (point virgule).

Voici la liste des caractères spéciaux les plus couramment utilisés :
< = &lt;
> = &gt;
"  = &quot;
espace = &nbsp;
é = &eacute;
É = &Eacute;
è = &egrave;
È = &Egrave;
ê = &ecirc;
Ê = &Ecirc;
ë = &euml;
Ë = &Euml;
à = &agrave;
À = &Agrave;
â = &acirc;
 = &Acirc;
û = &ucirc;
Û = &Ucirc;
ù = &ugrave;
Ù = &Ugrave;
ô = &ocirc;
Ô = &Ocirc;
î = &icirc;
Î = &Icirc;
ï = &iuml;
Ï = &Iuml;
 
ç = &ccedil;
Ç = &Ccedil;
Pour ce qui concerne les autres caractères spéciaux, ils peuvent être transcrit dans le mode ISO LATIN1-FR (chaque caractère possédant son propre numéro de code ASCII).



Réalisation : Lise-Emilie Lévy - Dernière modification le 23 août 1999 - © 1997/1998