Cours de HTML - Mise en forme de texte

version 1.10, dernière mise à jour le 18 juillet 2005.

  

Table des matières (TdM)

  1. I. Introduction
  1. II. Formatage logique
    1. Titre et sous-titre
    2. Paragraphes
      1. La balise <p>
      2. Rupture de ligne: la balise <br>
    3. Les balises <div> et <span>
    4. Autres balises
    5. La balise <hr>
    6. Exercice : Formatage logique
  1. III. Formatage physique
    1. Mise en forme de la police
      1. Police par défaut
      2. La balise <font>
      3. La balise <basefont>
      4. Autres balises
  1. IV. Les entités de caractères
    1. Rappel
    2. Nécessité d'un codage supplémentaire: les diacritiques
    3. Présentation d'une entité de caractère
    4. Les caractères réservés
    5. L'entité &nbsp;
  1. V. Codage de la couleur
    1. Par son nom
    2. Par le triplet RGB
    3. Les seize couleurs simples
    4. Exercice : Mise en forme de texte

Retour au menu

Contenu du cours

I. Introduction

À l'origine, HTML devait décrire la structure du texte sans imposer sa représentation physique qui devait rester le choix de l'utilisateur et de son navigateur (voir le premier chapitre). Pour décrire la structure du texte, c'est à-dire la nature du contenu (nom, adresse...) on parle de formatage logique. Pour décrire la représentation physique du texte (gras, italique, taille des caractères...) on parle de formatage physique. Ce second type de formatage, on le rappelle, n'est pas à conseiller, sauf s'il faut assurer la compatibilité avec les plus vieux navigateurs.

Ce cours va présenter ces deux types de formatage et les balises qui leur sont associées.

II. Formatage logique

1. Titre et sous-titre

Il s'agit ici des titres qui s'afficheront dans la page (et non dans la barre de titre comme la balise <title> précédemment) : ce sont les en-têtes de sections ou paragraphes.

Il existe six niveaux de titres d'importance décroissante : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

>Retour à la TdM

Exemple et code source avec chaque balise TITRE :

Niveau de titre

Effet en Times New Roman

<h6>Titre de niveau 6</h6>

Titre 6

<h5>Titre de niveau 5</h5>

Titre 5

<h4>Titre de niveau 4</h4>

Titre 4

<h3>Titre de niveau 3</h3>

Titre 3

<h2>Titre de niveau 2</h2>

Titre 2

<h1>Titre de niveau 1</h1>

Titre 1

Table 1. Les niveaux de titre.

>Retour à la TdM

2. Paragraphes

a. La balise <p>
  1. Fonction : Un paragraphe comme celui que vous lisez est délimité par les balises <p> et </p> (voir le source de cette page). La balise <p> provoque un saut de ligne avant le paragraphe. Un paragraphe ne peut en contenir un autre (le navigateur les interprète comme des paragraphes successifs...).

  2. Attributs : Attributs de la balise <p>

    Attribut

    Valeur(s)

    align

    left(par défaut)

    right

    center

    justify

    Table 2. Attribut de la balise <p>. Cet attribut n'est pas conforme au HTML strict.

>Retour à la TdM

b. Rupture de ligne: la balise <br>
  1. Fonction : Force un retour en début de ligne suivante à l'intérieur d'un même paragraphe. La balise fermante est facultative.

  2. Attributs : Attributs de la balise <br>

    Attribut

    Effet

    Valeur(s)

    clear

    répartit le texte autour d'une image flottante ou d'un autre objet

    all

    left

    right

    Table 3. Attribut de la balise <br>. Cet attribut n'est pas conforme au HTML strict.

>Retour à la TdM

3. Les balises <div> et <span>

Ces balises jouent un rôle particulier. Elles permettent de découper l'information en unités logiques, et sont fortement utilisées avec des feuilles de style. Par exemple, on peut scinder un document HTML avec deux balises <div> en deux parties, une présentant... une table des matières, et l'autre présentant un contenu de cours (cf. le code source de cette page !). La balise span permet quant à elle une structuration interne à un paragraphe. Par exemple, on peut indiquer un changement momentané de langage utilisé avec l'exemple suivant :

<p>Hamlet a dit <span lang="en">"To be or not to be"</span>.</p>

>Retour à la TdM

4. Autres balises

Balise

Signification

Effet

<em>

emphasis

emphasis

<strong>

fort

strong

<cite>

citation brève

cite

<dfn>

définition

dfn

<code>

extrait de programme

code

<samp>

sample : échantillon

samp

<kbd>

Keyboard(clavier)

kbd

<var>

variable ou argument

var

<abbr>

abréviation

abbr

<acronym>

acronyme

acronym

<sub>

subscript/indice

sub

<sup>

superscript/exposant

sup

<pre>

preformatted

pre

Table 4. Balises de formatage logique.

La touche "Entrée" (le "retour chariot" du temps des machines à écrire) est codée en ASCII par 13. Le navigateur ne le considère pas comme un retour à la ligne mais comme un simple séparateur comme un blanc. Sans demande particulière, le navigateur ignore votre formatage initial.

<PRE> force le navigateur à respecter les retours à la ligne et les blancs consécutifs.

>Retour à la TdM

5. La balise <hr>

Elle est destinée à séparer différentes parties d'un document au moyen d'un trait horizontal de longueur et d'épaisseur variables, et généralement pourvu d'un ombrage. Il s'agit d'un conteneur vide dont la balise fermante est facultative (et même jamais utilisée en HTML).

Cette balise possède des attributs, mais leur emploi est déconseillé par le W3C :

attribut

effet

valeur(s)

noshade

suppression de l'ombrage

booléen, sa présence seule supprime l'ombrage

align

alignement

left (valeur par défaut)

right

center

justify

size

épaisseur du trait

nombre en pixels

width

largeur du trait

en pixels ou en pourcentage de la fenêtre du navigateur (ajouter le symbole %)

Table 5. Les attributs (obsolètes) de la balise <hr>.

>Retour à la TdM

Exercice 1. Formatage logique

Énoncé
Correction

III. Formatage physique

Toutes les balises de cette partie sont obsolètes dans le HTML 4.01 strict.

1. Mise en forme de la police

a. Police par défaut

Les navigateurs utilisent par défaut une police proportionnelle : Times Roman sur les Macintosh, et Times New Roman sur les PC. En tant qu'utilisateur (surfeur !), il vous est possible de modifier cette police par défaut. Cela rend la tâche des développeurs de site d'autant plus ardue...

>Retour à la TdM

b. La balise <font>

Cette balise est déconseillée, utiliser plutôt les feuilles de style.

Pour modifier une partie du texte, on écrira par exemple :

<font face="Verdana, Arial, Helvetica, sans-serif" size="5" color="red">mon exemple</font>

qui produira l'effet suivant :

Utilisation de la balise font

>Retour à la TdM

c. La balise <basefont>

Elle est à déconseiller. Elle définit la taille du texte du conteneur dans laquelle elle est citée (seul attribut size).

>Retour à la TdM

d. Autres balises

Balise

Signification

Effet

<b>

gras

b

<i>

italique

i

<tt>

télétype : police à pas fixe

tt

<big>

taille supérieure à la taille courante

big

<small>

taille inférieure à la taille courante

small

<s>

ou <strike>

s

<u>

underline/soulignement

u

Table 6. Balises de formatage physique.

La balise <center> permet de centrer son contenu. Il est recommandé d'utiliser plutôt l'attribut align="center" ou, mieux, une feuille de style.

<blockquote>, prévu pour des citations de plusieurs lignes, cette balise permet de produire un effet d'indentation sur les deux marges latérales.

>Retour à la TdM

IV. Les entités de caractères

1. Rappel

Il existe plusieurs codifications des caractères : ASCII sous MS-DOS, ANSI sous Windows ; les Macintosh ont leur propre système et les grosses machines IBM se servent de l'EBCDIC.

>Retour à la TdM

2. Nécessité d'un codage supplémentaire: les diacritiques

Les diacritiques sont les caractères constitués d'une lettre modifiée par un signe particulier : accent, tréma, cédille comme é, ï, ç etc.

HTML utilise la codification ASCII qui ne comporte aucun caractère accentué. Il faut donc définir une convention de codage supplémentaire pour faire apparaître ces caractères.

>Retour à la TdM

3. Présentation d'une entité de caractère

Une entité de caractère débute par "&", et finit par ";". Exemple le "é" est codé "&eacute;".

Voici une petite liste des principaux caractères accentués :

Caractère

Entité

Caractère

Entité

à

&agrave;

â

&acirc;

ä

&auml;

æ

&aelig;

é

&eacute;

è

&egrave;

ê

&ecirc;

ë

&euml;

ù

&ugrave;

û

&ucirc;

ü

&uuml;

ö

&ouml;

ï

&iuml;

î

&icirc;

ç

&ccedil;

œ

&oelig;

Table 7. Principales entités de caractères utilisées en français.

>Retour à la TdM

4. Les caractères réservés

Les caractères comme "<", ">" et "&" ont une signification spécifique : le inférieur désigne le début d'une balise, etc. Codés tels quels, le navigateur est incapable de les faire apparaître. Il a donc fallu leur adjoindre une codification supplémentaire : "<" est codé &lt;, ">" est codé &gt;, "&" est codé &amp;.

>Retour à la TdM

5. L'entité &nbsp;

Ce caractère permet d'interdire la césure entre deux mots, par exemple : "100&#160;&euro;" ou d'ajouter des blancs contigus.

>Retour à la TdM

V. Codage de la couleur

HTML propose deux façons de coder unecouleur :

1. Par son nom

Il existe une liste de couleurs reconnues par la plupart des navigateurs. Les seize couleurs simples sont données dans le tableau ci-dessous donné dans la section "Les seize couleurs simples". Il en existe d'autres aux noms plus poétiques comme :

exemples de couleurs complexes

Cependant, le rendu de ces couleurs dépend parfois fortement du navigateur et de la plateforme utilisée.

>Retour à la TdM

2. Par le triplet RGB

Toute couleur peut être décomposée en trois couleurs : rouge, vert, bleu (Red, Green, Blue d'où RGB) d'intensité convenable. Cette intensité est exprimée en un nombre compris entre 0 et 255. Ce nombre est codé en hexadécimal : il est alors compris entre 0 et FF.

Nuancier

Par exemple, #BA1B85 code une intensité de BA (186) pour le rouge, 1B (27) pour le vert, 85 (133) pour le bleu qui donne :

Melange de couleurs

>Retour à la TdM

3. Les seize couleurs simples

Voici les seize couleurs de base :

Couleurs simples

Vous aurez noté la couleur noire !

>Retour à la TdM

Exercice 1. Mise en forme de texte

Énoncé
Correction

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu