Accueil > Technicité > HTML, la mise en forme du texte

HTML, la mise en forme du texte

dimanche 19 octobre 2008, par Claire Mélanie, Lucien impression

Mots-clefs :: HTML :: Tutoriels :: Tutoriels pour débutant ::

Pour faire suite à nos articles de présentation de la structure d’une page HTML, des balises et de la hiérarchisation HTML, voici la présentation de quelques balises HTML de formatage 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>

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).

carre_trans Avec les mêmes mots-clefs
puce Recherche avancée sur Google
puce Vie privée : sécurisez votre navigation internet
puce Sécurisez vos échanges sous Android : chatter protégé
puce Sécurisez vos échanges : chatter protégé
puce Vie privée : sécurisez vos recherches internet
puce Gérer ses adresses e-mail d’envoi sous Gmail.com
puce Recherche avancée ou de l’usage des booléens
puce Apprendre à taper au clavier grâce à Dactylo 6.0
puce HTML, organiser le contenu de votre page : les balises de hiérarchisation
puce HTML, organiser le contenu de votre page : notions de base
puce La structure générale d’une page (X)HTML
puce Comment prendre une capture d’écran sous Windows XP et Vista
puce Comment faire un copier coller ?
puce Comment utiliser sa souris ?
puce Faire défiler un texte en HTML
puce Test du lecteur multimedia
puce Optimiser son contenu pour le référencement
puce HTML 5 un premier brouillon publié.
puce Codes couleurs HTML
puce Android et vie privée : Applications, permissions et localisation
puce Du vélo sous la pluie ou de l’art d’affronter les éléments
puce Microsoft étudiant : état des lieux des offres éducation 2013
puce 5 applications pour améliorer l’ergonomie de votre mobile Android.
puce Utiliser Python 101 : prise en main
puce Android : 5 applications pour améliorer votre productivité mobile.
puce Android : supprimer les sons de l’appareil photo du Galaxy Note 2.
Equipe Eclairement L'association
La lettre S'abonner
Facebook Twitter
Windows   Windows Vista   Firefox   Culture générale   Microsoft Office   arts visuels   Android   Recherche d’information bibliographique   BD   Installation   HTML   sport   Tutoriels   Peinture   Windows 7   Europe   Musique   Photographie   Linux   Windows Mobile   Manga   Education   Poésie   Cours   Anime   Techniques   Droit   Vie privée   Urbanisme   Roman   Bases de données   Fable   Histoire   Cinéma   Théâtre   Société   Spectacle   Pages Ouvertes   Tutoriels pour débutant   Littérature   Métier   Edito   Séries TV  
Eclairement © 1998 - 2012
Mentions légales - Contact - Partenaires