Le texte

Les caractères

Le jeu de caractères utilisé par HTML est la standard ASCII ISO 8859-1. Cet ensemble ne comporte aucun caractère accentué, diacritique ou symbole spécial.   Pour remédier à cette lacune on a défini des entités de caractères qui sont représentés par des éléments HTML spéciaux compris entre les caractères '&' et ';'.  Le symbole utilisé est soit un nom en clair ou un code numérique.   Voici, par exemple quelques symboles en clair:

é é è è î î
÷ ÷ ë ë × ×
© © ¢ ¢ ¥ ¥
&plusmm; &plusmm; ¾ ¾ ® ®
&shy césure &frac12 ½ &ntilde ñ

évidemment, pour que ce genre de codification fonctionne il faut bien un moyen de représenter les caractères spéciaux utilisés!

Symbole Code mnémonique Code numérique Symbole Code mnémonique Code numérique
< &lt; &#60; > &gt; &#62;
& &amp; &#38; " &quot; &#34;

Si vous le désirez, j'ai préparé un tableau des codes numériques des caractères.

Affichage et séparateurs

Lorsqu'un élément HTML n'est pas reconnu par un navigateur, il est ignoré.  Le texte normal est affiché de façon continue entre les limites de la fenêtre de navigation sans considération des "fins de lignes" (RETURN) contenues dans le fichier.  Pour obtenir une réelle fin de ligne on utilise le marqueur <BR>.   Par exemple:

Code HTML Affichage
Voici un texte dont les premières lignes sont affichées en utilisant l'espace total disponible.<BR>Ce texte sera, par contre affiché sur la ligne suivante. Voici un texte dont les premières lignes sont affichées en utilisant l'espace total disponible.
Ce texte sera, par contre affiché sur la ligne suivante.

Dans certains cas nous désirons conserver le plein contrôle sur le formatage du texte.  On utilise alors le conteneur <PRE>...</PRE>.

		Cette dernière nous laisse le plein
contrôle sur le texte; avec tous les inconvénients
que celà comporte évidemment.

Vous avez sûrement remarquez que les navigateurs utilisent une polices de caractères non-proportionnelle pour afficher le texte pré-formaté.

 

Le paragraphe

Il est possible de contrôler la présentation du texte en utilisant le conteneur <P> ... </P> ou le marqueur <P>.   Le texte sera alors présenté sous forme de paragraphes séparés par des lignes blanches.  On peut aussi indiquer la justification du texte à l'aide d'un attribut.

Code HTML Affichage
<P>Voici un paragraphe qui sera affiché par le navigateur.</P><P>En voici un autre.</P> Voici un paragraphe qui sera affiché par le navigateur.

En voici un autre.

<P align=left>Ce paragraphe sera justifié à gauche.</P>

Ce paragraphe sera justifié à gauche.

<P align=right>Ce paragraphe sera justifié à droite.</P>

Ce paragraphe sera justifié à droite.

<P align=center>Ce paragraphe sera centré.</P>

Ce paragraphe sera centré.

<P align=justify>Ce paragraphe sera justifié à gauche et à droite en même temps.  C'est ce qu'on utilise normalement pour du texte technique ou des romans.</P>

Ce paragraphe sera justifié à gauche et à droite en même temps.  C'est ce qu'on utilise normalement pour du texte technique ou des romans.

Le conteneur <DIV>...</DIV> permet de faire la même chose avec plusieurs éléments HTML regroupés ensemble.   Voici d'autres exemples:

Le conteneur <P> possède un attribut (ALIGN) qui permet l'alignement du texte.  Voici un paragraphe normal c'est-à-dire justifié à gauche et non aligné sur la marge de droite.  On aurait pu obtenir le présent paragraphe comme ceci: <P align="left">le texte du paragraphe</P>.  Ici c'est un tantinet redondant mais enfin...

Il est aussi possible, à l'aide de l'attribut ALIGN="RIGHT" d'obtenir un texte qui sera cadré à droite.

Pour certains documents techniques on aimerait pouvoir justifier le texte sur les deux marges à la fois.  Et bien, qu'à cela ne tienne, l'attribut ALIGN="JUSTIFY" est à notre disposition.  Le navigateur tentera alors de présenter le texte sous une forme qui ressemble plus à celle des volumes édités en insérant des espaces à divers endroits.

On pourrait aussi centrer notre texte avec ALIGN="CENTER".

Le conteneur <DIV> permet d'obtenir les mêmes résultats sur un ensemble d'éléments.

Le "vieux" conteneur <CENTER>...</CENTER> permet aussi de centrer du texte mais la plupart des éditeurs HTML le remplace par le conteneur <P>...</P> ou carrément par le conteneur <DIV>...</DIV>.

D'autres balises sont aussi disponibles.  Je vous laisse le soin de les examiner vous-même.

 

Les enrichissements

Beaucoup de balises HTML sont disponibles pour formater le texte.   Certaines sont plus ou moins utilisées, d'autres sont carrément à bannir.   Nous avons classé les enrichissements en deux catégories: le formatage logique (qui laissent une certaine liberté au navigateur) et le formatage physique (en termes précis).

Formatage logique

Code HTML Affichage
<STRONG>Texte en évidence</STRONG> Texte en évidence
<EM>Texte incliné</EM> Texte incliné
<CITE>Une citation</CITE> Une citation
<DFN>Une définition</DFN> Une définition
 <CODE>Extraits de programmes</CODE> Extraits de programmes
<SAMP>Exemple</SAMP> Exemple
<VAR>Nom d'une variable<VAR> Nom d'une variable
<ACRONYM title="World Wide Web">WWW</ACRONYM> WWW
<KBD>Le "look" clavier</KBD> Le "look" clavier

Formatage physique

Code HTML Affichage
<B>Texte en gras</B> Texte en gras
<I>Texte italique</I> Texte italique
<U>Texte souligné</U> Texte souligné
<STRIKE>Texte à éliminer</STRIKE> Texte à éliminer
Un <BIG>gros</BIG> mot Un gros mot
Un <SMALL>petit</SMALL> mot Un petit mot
<S>Texte barré</S> Texte barré
<PRE>
Du
            texte
      préformaté
</PRE>
Du
        texte
    préformaté
<TT>Le "look" machine à écrire</TT> Le "look" machine à écrire
<BLINK>Clignotement</BLINK> Clignotement

Indices et exposants

HTML nous offre aussi la possibilité d'écrire des exposants et des indices.

Code HTML Affichage
Je suis en 1<SUP>ière</SUP> année Je suis en 1ière année
L'acide sulfurique: H<SUB>2</SUB>SO<SUB>4</SUB> L'acide sulfurique: H2SO4

Les enrichissements permettent de mettre en évidence certaines parties du texte.  Nous les avons regroupés en deux classes selon la "liberté" laissée au navigateur.

On peut, par exemple mettre du texte en évidence à l'aide du conteneur <STRONG>...</STRONG>.  On pourra de même faire du texte incliné avec <EM>...</EM> ou barré avec <STRIKE>...</STRIKE>.  Que diriez-vous de demander au navigateur du texte qui ressemble aux caractères affichés dans nos fenêtres normales comme dans NotePad par exemple.  On pourrait aussi créer des caractères de plus en plus gros ou alors de plus en plus petits avec les balises <BIG> ...</BIG> et <SMALL>..</SMALL>.  Quelques fois, certains mots sont très importants et il faut les souligner avec <U>...</U>.   On peut aussi faire de courte citation avec <CITE>...</CITE>.

Mais lorsqu'on a de longue citation à faire, il est préférable d'utiliser le conteneur <BLOCKQUOTE>...</BLOCKQUOTE> comme il est mentionné dans votre manuel de référence.  Le texte sera alors mis en retrait par rapport à la marge de gauche.

On peut aussi présenter des abbréviations comme le WWW ou le cours IFT1945 par exemples avec les conteneurs <ABBR title="...">...</ABBR> (qui ne fonctionne pas toujours avec Internet Explorer!) et <ACRONYM title="...">...</ACRONYM>.

On pourrait évidemment s'amuser longtemps avec toutes ces balises.   Si vous le désirez, allez fouiner du coté du chapitre sur le formatage du texte du W3C.

Les titres et les sous-titres

En HTML, 6 «grosseurs» de titres sont disponibles.

Code HTML Affichage
<H1>Titre de niveau 1</H1>

Titre de niveau 1

<H2>Titre de niveau 2</H2>

Titre de niveau 2

<H3>Titre de niveau 3</H3>

Titre de niveau 3

<H4>Titre de niveau 4</H4>

Titre de niveau 4

<H5>Titre de niveau 5</H5>
Titre de niveau 5
<H6>Titre de niveau 6</H6>
Titre de niveau 6

Dans la pratique il est plutôt rare que l'on utilise des titres de niveau 5 ou 6 parce que les polices de caractères de ces niveaux sont plus petite que que la police standard du texte normal.  Nous remarquerons que les conteneurs de titres provoquent des fins de ligne automatique.  On ne peut donc pas les utiliser partout.   Ces conteneurs supportent l'attribut ALIGN comme nous pouvons le constater.

Grosseur 1

Grosseur 2

Grosseur 3

Grosseur 4

Grosseur 5
Grosseur 6

Qu'arrive-t-il lorsqu'on exagère et qu'on utilise la grosseur 7?

Et bien rien sinon que le navigateur fait simplement à sa tête! 

 

Polices de caractères

Le conteneur <FONT> permet de choisir le type et les caractéristiques de la police de caractères qui sera utilisée pour afficher le texte. Il supporte plusieurs attributs dont voici quelques exemples.

Code HTML Affichage
<FONT face="Lucida sans Unicode">La fonte Lucida sans Unicode</FONT> La fonte Lucida sans Unicode
<FONT face="Courier" size="3">La fonte Courier de grosseur 3</FONT> La fonte Courier de grosseur 3
<FONT size="+1" color="red">Une fonte un peu plus grosse en rouge</FONT> Une fonte un peu plus grosse en rouge

Il permet de modifier la grosseur (attribut SIZE), la couleur (attribut COLOR) et les polices de caractères (attribut FACE) utilisées.  On pourra par exemple avec du texte bleu, en gras et italique dans la fonte "Continuum Light" avec une grosseur de 4 (14 points ) ou bien alors du texte rouge dans la fonte "Wonton ICG" avec une grosseur de 5 (18 points).  Fait intéressant, l'attribut SIZE peut être exprimé en terme relatif à la fonte courante ce qui nous permet de faire quelque chose comme: size="0", size="1", size="+1", size="+2", size="+3", size="+4", size="+5", size="+6", size="+7", size="-1".

Autres éléments

Le conteneur <BLINK>...</BLINK> permet de faire clignoter le texte.  Ça ne fonctionne qu'avec Netscape!

D'autres éléments, balises et conteneurs sont décrits dans le document sur le formatage du texte du W3C.

La balise <HR> permet de tracer une ligne horizontale dans la fenêtre.  Utilisons-la pour terminer cette page.  Le code HTML utilisé est:

<HR width="60%" size=3 align="left">


<HR width="40%" size=8 align="right">


<HR width="80%" size=5 noshade>


 On pourrait aussi se permettre d'insérer des images dans notre texte.  Nous verrons cela bientôt.  smiley.gif (89 bytes)

warp_speed.gif (496 bytes)

Lectures suggérées