Conception & Réalisation de sites Web

Mettre en forme du texte

Les titres

Il est possible de mettre des titres en avant grâce aux balises <h1>, <h2>, <h3>, <h4>, <h5> et <h6>. Chacune de ces balises correspond à un niveau de titre, allant du titre principal <h1> aux titres secondaires <h2> et en descendant jusqu'au titres les moins importants <h6> (rarement utilisé, le plus souvent 4 niveaux de titres suffisent largement pour une même page).

Balise Indication donnée au navigateur
<h1> Début d'un titre de niveau 1.
</h1> Fin d'un titre de niveau 1.
<h2> Début d'un titre de niveau 2.
</h2> Fin d'un titre de niveau 2.
<h3> Début d'un titre de niveau 3.
</h4> Fin d'un titre de niveau 4.
<h5> Début d'un titre de niveau 5.
</h5> Fin d'un titre de niveau 5.
<h6> Début d'un titre de niveau 6.
</h6> Fin d'un titre de niveau 6.

Exemple, si vous saisissez ceci entre les balises <body> et </body> :

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Vous aurez dans votre navigateur :

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 6

Choisir l'alignement du texte

Les balises p, h1, h2(...) supportent un attribut "align" qui permet de modifier l'alignement horizontal du texte. Il peut prendre les valeurs suivantes :

  • left : aligné à gauche (par défaut),
  • right : aligné à droite,
  • center : centré,
  • justify : justifié (aligné à droite et à gauche).

Il est à noter que le texte justifié est assez peu utilisé sur le web car son implémentation n'est pas très poussée (les navigateurs ne gèrent pas les césures de texte !).

Différents exemples :

<h2>Titre aligné à gauche</h2>
<h3 align="right">Titre aligné à droite</h3>
<p align="center">Paragraphe centré</p>

Ce qui donne dans le navigateur, le résultat suivant :

Titre aligné à gauche

Titre aligné à droite

Paragraphe centré

Modifier la police de caractère

Il est possible de modifier la police de caractère d'un texte avec la balise <font>.

Utiliser <font> Mon texte </font> seul n'aura aucun effet : ce sont les attributs de cette balise qui sont intéressants :

  • l'attribut size permet de préciser la taille du texte allant de "1", le plus petit à "7" le plus grand.
  • l'attribut face permet de préciser la police utilisée, par exemple "verdana", "times", etc..
  • l'attribut color permet de préciser la couleur du texte, par exemple "red".
    Cliquez-ici pour en savoir plus sur les couleurs en HTML.

Exemple, si vous saisissez ceci entre les balises <body> et </body> :

<p>Mon texte <font size="3" face="georgia" color="red">en plus gros, en rouge et en georgia ici</font>.</p>

Vous aurez dans votre navigateur :

Mon texte en plus gros, en rouge et en georgia ici.

Autres balises de mise en forme

Il existe d'autres balises de mise en forme en voici 3 exemples qui peuvent s'avérer utiles.

  • La balise <blockquote> généralement utilisée pour des citations. Elle se comporte comme un paragraphe avec un décalage horizontal en plus.
  • La balise <sup> pour mettre un mot en exposant
  • La balise <sub> pour mettre un mot en indice

Exemple, si vous saisissez ceci entre les balises <body> et </body> :

<p>Les balises indices et exposants sont souvent utilisées avec des nombres : 9<sup>3</sup> ou 9<sub>3</sub>.</p>
<blockquote>Notez la différence d'espacements entre un blockquote et un paragraphe.</blockquote>
<p>Autre paragraphe.</p>

Vous aurez dans votre navigateur :

Les balises indices et exposants sont souvent utilisées avec des nombres : 93 ou 93.

Notez la différence d'espacements entre un blockquote et un paragraphe.

Autre paragraphe.

Balise Indication donnée au navigateur
<font> Début d'un texte mis en forme. Cette balise propose les attributs suivants :
size="Val", Val étant un nombre de 1 à 7. Précise la taille du texte.
face="Val", Val étant le nom d'une police. Précise la police de caractère.
color="Val", Val étant une indication de couleur. Précise la couleur du texte.
</font> Fin d'un texte mis en forme.
<blockquote> Début d'une citation
</blockquote> Fin d'une citation.
<sup> Début d'un texte en exposant. Exemple : texte normal texte en exposant
</sup> Fin d'un texte en exposant.
<sub> Début d'un texte en indice. Exemple : texte normal texte en indice
</sub> Fin d'un texte en indice.
Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!