[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>
texteavec sup
mise en indice
texte<sub>avec sub </sub>
texteavec 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
© Tous les textes et documents disponibles sur ce site, sont, sauf mention contraire, protégés par une licence Creative Common
(diffusion et reproduction libres avec l'obligation de citer l'auteur original et l'interdiction de toute modification et de toute utilisation commerciale sans autorisation préalable).