HTML, la mise en forme du texte

[sommaire]

Remarque préalable

Cette mise en forme du texte via du html est de nos jours déconseillé par les instances d’uniformisation du web. Il est recommandé de dissocier structure et style.
Cependant pour ceux qui voudraient rapidement réaliser quelques pages uniquement en html voici quelques indications sur le style en html.
Ces quelques notions pourront de plus vous être utiles pour améliorer une annonce ebay, rajouter quelques touches personnelles dans un article spip sans recourir à des plugins, etc.

Nous verrons par ailleurs des balises qui sont à la fois structurantes et générant un style particulier.

La typographie appliquée à un mot ou à un ensemble de mots

Il s’agira alors de mettre le ou les mots voulus entre certaines balises

 Le gras

<b> Le texte à mettre en gras </b>

le "b" de la balise renvoyant au terme anglais "bold"

Le texte à mettre en gras

 L’italique

<i> Le texte à mettre en italique </i>

le "i" de la balise renvoyant à "italic"

Le texte à mettre en italique

 Le souligné

<u> Le texte à souligner </u>

le "u" de la balise renvoyant au terme anglais "underline" signifiant "souligner"

Le texte à souligner

 le télétype

<tt> Le texte télétype </tt>

Le texte télétype

Les balises qui entraînent un style particulier mais qui sont à considérer comme structurantes

 <strong></strong> :

En règle générale, les navigateurs affichent le texte situé entre cette balise en gras.
Cependant, <strong> est différente de <b>.

Alors que la première est purement un effet de style, l’usage en est donc un peu dépassé puisque remplacé par un équivalent en CSS, on considère que la balise strong est aussi une balise structurante.

Elle indique l’importance d’un mot ou d’un groupe de mots, à l’auteur du code ou du contenu de préciser ensuite de quelle manière cette portion de texte doit être mise en valeur.

Il est parfaitement imaginable que des navigateurs changent la valeur par défaut de cette balise, ne générant plus un texte en gras mais un texte avec une police plus grande ou bien générant un enregistrement vocal, etc.

<strong> Texte mis en valeur</strong>

Texte mis en valeur

 <em></em> :

L’effet actuel est la mise en italique. La balise vise une mise en valeur du texte, mais un peu moins que dans le cas de la balise "strong"

<em>Texte mis en valeur</em>

Texte mis en valeur

Balises à formatage thématique

 Citation, référence d’un ouvrage :

<cite>texte avec la balise cite</cite>

texte avec la balise cite

 Citation, texte extrait d’un ouvrage :

<blockquote>texte avec la balise blockquote</blockquote>

texte avec la balise blockquote

 Adresse

<address>28 boulevard des anges-gardiens, 128000 La Terre</address>

28 boulevard des anges-gardiens, 128000 La Terre

 texte préformaté

<pre>texte avec la balise
                           pre

</pre>

texte avec la balise
                            pre

La balise "pre" permet de maintenir les espaces, les tabulations et les sauts de ligne du texte.

Les typographies techniques

 mise en exposant

texte<sup>avec sup </sup>

texte^{avec sup}

 mise en indice

texte<sub>avec sub </sub>

texte_{avec sub}

Modifier la police des caractères

Pour modifier directement la police dans le code html, même si nous le rappelons, ce n’est plus conseillé avec l’avènement du CSS, on peut utiliser la balise <font></font> auquel on applique l’attribut « face »

<font face="xxxxxx">texte dont on veut modifier la police</font>

 Pour changer la police elle-même

<font face="police choisie">texte</font>

Attention à ne pas choisir n’importe quelle police car pour que le texte s’affiche chez l’internaute, il faut que la police soit disponible sur l’ordinateur qui affichera votre page html. Le plus souvent on utilise les polices courantes du type Times, Verdana, Arial.

Par exemple

<p><font face="Arial, Verdana">Texte avec la police modifiée</font></p>

Texte avec la police modifiée

Pourquoi deux polices cette fois ? C’est une manière de s’assurer qu’au final le texte s’affiche bien. Si la police « Arial » n’existe pas sur l’ordinateur d’affichage, le navigateur passera à la police suivante de la liste, ici « Verdana » et affichera le texte en verdana si elle est disponible.

 Pour modifier la taille de la police

On utilisera également la balise <font></font> avec un attribut différent, l’attribut « size » :

<font size="taille choisie">texte</font>

La taille peut se définir de deux manières :

• En taille absolue avec une valeur comprise entre 1 et 7, 1 pour la taille la plus petite et 7 pour la taille la plus grande

Exemple

<p><font size=’1’>texte avec la taille la plus petite</font></p>
<p><font size=’7’>texte avec la taille la plus grande</font></p>

texte avec la taille la plus petite

texte avec la taille la plus grande

• De façon relative : pour diminuer la taille de police d’un cran, utilisez la valeur -1 pour augmenter la taille de police d’un cran, utilisez la valeur +1
  On peut passer avec des crans plus importants d’une taille à l’autre. On peut très bien choisir -2 comme +2

Exemple

<p><font size="+3">texte avec une taille augmentée de trois niveaux</font></p>
<p><font size="-1">texte avec une taille diminuée d'un niveau</font></p>

texte avec une taille augmentée de trois niveaux

texte avec une taille diminuée d’un niveau

Articles relatifs :

 Les codes couleurs HTML

 Faire défiler un texte en HTML

 Optimiser son contenu pour le référencement