Prog-Info > (X)HTML/CSS > Cours de HTML 4 > Mise en forme des caractères.

Mise en forme des caractères

Note : Un certain nombre de balises (font, basefont, center, s, u, b, i, ...) et propriétés (align, width & height (associées à certaines balises), size, color, border, background, bgcolor, face, name, target, ...) sont dépréciées. Il est fortement recommandé de ne pas les utiliser car elles pourraient devenir obsolètes dans un futur proche. En fait, ils ne sont plus pris en charge par les normes actuelles du langage HTML (W3C) donc plus sous garantie. L'objectif des Standards est de séparer le contenu de la mise en forme dans les sites Web en utilisant les feuilles de style CSS. Il est donc recommandé de les utiliser au maximum.

Mise en forme logique

En HTML, les documents doivent être mis en page d'une manière structurée et logique, ce qui donne aux utilisateurs un maximum de flexibilité.
- <cite>Citation...</cite> : Cette balise est utilisée pour indiquer une citation, un titre, une référence de livre, ... Ce texte est généralement en italique.
- <code>Lignes de code...</code> : Il est utilisé pour insérer une petite quantité de code informatique généralement pas trop long sinon la balise <pre> sera plus appropriée.
- Votre texte : L'élément d'emphase permet de faire ressortir une partie du texte. Il est généralement en italique.
- <kbd> Elément </kbd> : est utilisé pour indiquer une commande d'utilisateur. Le texte est affiché généralement avec la police courrier.
- <samp> Caractères </samp> : il permet d'indiquer des caractères de manière littérale. Ce sont des caractères que l'on veut identifier.
- Texte : permet de faire ressortir une partie de votre texte. Le texte apparaît en gras.
- <var> Variable </var> : cette balise est utilisée pour indiquer le nom d'une variable qui est habituellement affiché en italique.
- <dfn> Texte </dfn> : cet élément est utilisé pour créer une sous définition dans une liste. Ces variables sont en italique.
- Beaucoup de styles utilisent la même mise en forme. L'intérêt est que ce sont des éléments logiques qui indiquent l'intention de l'auteur.

Exemple :

Source	Résultat
`<cite>Citation de texte...</cite>`	Citation de texte...
`<code>Lignes de code en C++ par ex...</code>`	`Lignes de code en C++ par ex...`
`<em>Ce texte ressort du reste du paragraphe.</em>`	Ce texte ressort du reste du paragraphe.
`<kbd>Fichier > Enregistrer</kbd>`	`Fichier > Enregistrer`
`Voyelles : <samp>A E I O U Y</samp>`	Voyelles : `A E I O U Y`
`<strong>Texte mis en valeur.</strong>`	Texte mis en valeur.
`Variables : <var>i, j</var>`	Variables : `i, j`
`<dfn>Texte... </dfn>`	Texte...

Elément <blockquote>

- Cet élément permet de citer un long passage. Cet élément fonctionne sur le même principe que l'élément <body>. Vous pouvez utilisez différentes balises à l'intérieur. La plupart des navigateurs éloignent un peu le texte de la marge de gauche.

Exemple :

Source	Résultat
`<blockquote>Citation d'un passage de livre par exemple.</blockquote>`	Citation d'un passage de livre par exemple.

Mise en forme physique

- Utilise une police en gras pour afficher le texte.
- L'élément italique met le texte en italique.
- <tt> L'élément télétype affiche son contenu en police style machine à écrire.
- Souligne le texte entre les balises.
- <strike> Barre le texte.
- <big> Augmente d'un écran la taille du texte.
- Diminue d'un cran la taille du texte.
- Déplace le texte légèrement vers le bas(indice) et diminue les caractères d'un cran.
- Déplace le texte légèrement vers le haut(exposant) et diminue les caractères d'un cran.

Exemples :

Source	Résultat
`Ce texte est en <b>gras</b>.`	Ce texte est en gras.
`Ce texte est en <i>italique</i>.`	Ce texte est en italique.
`Ce texte est en <tt>teletype</tt>.`	Ce texte est en `teletype`.
`Ce texte est <u>souligné</u>.`	Ce texte est souligné.
`Ce texte est <strike>barré</strike>.`	Ce texte est barré.
`Ce texte en mis en <big>gros</big>.`	Ce texte en mis en gros.
`Ce texte est mis en <small>petit</small>.`	Ce texte est mis en petit.
`Ce texte est en <sub>indice</sub>.`	Ce texte est en _indice.
`Ce texte est en <sup>exposant</sup>.`	Ce texte est en ^exposant.

Les polices

Lorsque vous créez un document, vous pouvez contrôler l'apparence qu'aura votre texte. Le petit problème c'est que vous ne pouvez utiliser que les polices de caractères disponibles sur l'ordinateur de l'utilisateur.
Aucun moyen ne permet de les connaître. Il n'existe pas de véritable solution à ce problème. Cependant, vous pouvez toujours essayer d'utiliser plusieures polices convenant pour vos pages web dont des communes pour être sûr que presque n'importe quel utilisateur en possède une.

Elément font

Cet élément permet de modifier l'apparence du texte. La balise utilisée est la suivante : et . Plusieurs attributs peuvent être utilisés avec cette balise : face, size et color.

- L'attribut face:
Il permet de préciser la police que vous voulez afficher dans votre page web. Le paramètre pour cet attribut est le nom de la police choisie.
Comme vous ne pouvez pas connaître les polices disponibles chez les internautes, cet attribut accepte une liste de polices (à séparer par des virgules). Cela peut se révéler très utile parceque certaines polices changent peu l'une de l'autre. Le navigateur essaiera de trouver une police présente chez l'internaute en commençant dans la liste par la gauche. Si aucune police de caractères ne correspond alors la police par défaut du navigateur sera utilisée.

Exemple :

Source	Résultat
`<font face="Verdana, Arial, Helvetica, sans-serif">Exemple de police de caractères. </font>`	Exemple de polices de caractères.

- L'attribut size :
Cet attribut permet de définir la taille des caractères du texte. La taille de la police est une échelle relative de 1 à 7, basée sur la taille "normale" qui est de 3. Cet attribut peut être utilisé de deux manières : size="5" est la même chose que size="+2".

Exemple :

Source	Résultat
`<font size="1">Taille 1.</font><br> <font size="3">Taille 3.</font><br> <font size="+2">Taille 5.</font>`	Taille 1. Taille 3. (taille normale) Taille 5.

- L'attribut color :
Cet attribut permet de modifier la couleur du texte. Il accepte une valeur hexadécimale RGB ou un nom de couleur standard. (comme il a été vu auparavant)

Exemple :

Source	Résultat
`<font color="#FF0000">Ce texte est en rouge.</font><br> <font color="green">Ce texte est en vert.</font>`	Ce texte est en rouge. Ce texte est en vert.

Balise basefont

Elle est utilisée pour définir la police standard, sa taille et sa couleur dans le document. Les paramètres choisis sont valables pour la page entière. Mais d'autres éléments font peuvent modifier des parties de texte. (basefont n'a pas de balise de fin.)

Exemple :

Source	Résultat
`Ce texte précède la balise basefont.<br> <basefont size="5" face="Georgia"> Ce texte est après la balise basefont.<br> Les changements de taille sont relatifs à la taille <font size="-3">définie dans basefont</font>.<br>`	Ce texte précède la balise basefont. Ce texte est après la balise basefont. Les changements de taille sont relatifs à la taille définie dans basefont.

Astuces

- Les documents ne doivent pas utiliser plus de 2 ou 3 polices différentes.
- En général, si le corps du texte est en police avec empattement, comme Times New Roman, les titres doivent apparaître dans une police sans empattement, telle qu'Arial.
- Les caractères en italique sont moins lisibles que les caractères en gras qui devront être réservés pour les points très importants.
- N'abusez pas du soulignement. Lorsque de longues lignes de texte sont soulignées, les yeux de l'utilisateur se fatiguent rapidement.
- La taille des titres doit décroître en même temps que leur importance. C'est ce qui permet à vos lecteurs de consulter rapidement vos documents.

Caractères spéciaux

Dans vos documents, vous allez devoir insérer des caractères spéciaux tel qu'un signe de copyright. Il existe plusieures sortes de caractères spéciaux : les caractères accentués, les symboles mathématiques (y compris les lettres grecques) et la liste Symbol d'Adobe (ex : arobase, copyright, croix, ...)

Quelques exemples :

Entités (source)	Symboles
`© ® £ ¥ € ¢ > < § ¶ & " « » ± ÷ ° à ç è â é ê î ï ô ù`	© ® ™ £ ¥ € ¢ † • > < … § ¶ & " « » “ ” ± ÷ ‰ ° à ç è â é ê î ï ô ù

Remarque : le symbole de l'espace inséquable est :  
Tous les caractères spéciaux ne sont pas représentés ici car la liste est très longue.
Le célèbre logiciel Dreamweaver est très pratique pour insérer des caractères spéciaux.
L'aide de votre navigateur web doit sûrement lister un certain nombre de caractères spéciaux.
Une autre solution est d'aller voir une liste complète et très longue sur le site de W3C mais en anglais.