CHAPITRE II

LA MISE EN FORME DU TEXTE

 Chapitre II : La mise en forme du texte

Introduction

Ce chapitre aborde la notion de mise en forme du texte dans une page web. Il présente les
types de formatage et les balises qui leurs sont associées.

Objectifs

A la fin de ce chapitre, les étudiants auront les connaissances nécessaires pour :

 Distinguer les outils de production d’une page web

 Comprendre la structure des pages web

Pré requis

 Structure d’une page HTML

 Les balises

Durée

 2 semaines

Eléments de contenu

 Introduction
 La mise en forme du texte
 Les titres et les paragraphes
 Les listes en HTML
 Exercices d’application

Page 2
I. HTML et mise en forme des textes
Avec HTML, on utilisait l'attribut de la balise <font> pour marquer un texte important. Mais
cela était limité au niveau de la forme.
Maintenant, avec HTML, nous insistons surtout sur la valeur du contenu. Ainsi, on a d'autres
balises pour mettre des textes en exergue. Pour cela Il y a 2 balises différentes que l'on
utilise selon le degré d'importance du texte.

1. La balise <em>
La balise em (emphase) permet de mettre en emphase du texte. Il s'agit de marquer qu'un
passage dans le texte est important.
Code HTML :

Il serait <em> avantageux </em> de savoir coder en HTML avant de faire du CSS.

Aperçu :

2. La balise <strong>
Cette balise est pareille que la balise em sauf qu'elle met un accent assez fort. Elle permet
d'interpeler vivement le lecteur.
Exemple d'utilisation :

Page 3
Code HTML :

Il est <strong> indispensable </strong> de savoir coder en HTML avant de faire du CSS.

3. Les extraits, citations, références

Dans des pages HTML, il vous arrive parfois d'insérer des œuvres de quelqu'un : un extrait
d'un livre, d'un article etc. Il est nécessaire dans le contexte légal d'énoncer les sources des
documents, ou de mentionner l'auteur. En HTML, des balises spécifiques sont destinées à
traiter ce genre de contenu.

a. La balise <cite> pour les références:

Lorsque l'on cite une œuvre, un livre, une référence, etc , on utilise la balise <cite>.
Attention, il ne s'agit pas d'une citation. Pour cela, on utilise les balises <q> et <blockquote>.
Exemple d'utilisation :

Code HTML :

Extrait du livre : <cite> Les Fleurs du Mal </cite> de <cite> Charles Baudelaire </cite>

b. La balise <q> pour citations courtes :

On utilise cette balise pour mettre une citation courte. Le texte de citation est donc mis
entre guillemets automatiquement quand on l'insère entre ces balises. Dans le cas des
citations de plusieurs lignes, ou de plusieurs paragraphes, il est préférable d'utiliser la balise
blockquote.
A titre d'information, c'est une balise de type inline et les attributs pouvant être employés
sont : lang, dir, title, cite.

Page 4
Exemple d'utilisation :

Code HTML :
Comme le disait <cite> Rabelais</cite> : <q> Science sans conscience n'est que ruine de
l'âme </q>

c. La balise <blockquote> pour citations de plusieurs lignes :

La balise <blockquote> a le même sens que la balise <q> sauf que celle-ci est utilisée pour les
extraits de plusieurs lignes.

3. Les acronymes, abréviations et définitions

Dans les pages HTML où on emploient souvent des abréviations, des acronymes. Des
balises HTML spécifiques permettent d'indiquer aux utilisateurs leur présence et leur
signification.

a. La balise : <acronym>
La balise acronym sert à mettre un acronyme. Son utilisation n'a vraiment de sens que si l'on
indique sa signification à l'aide de son attribut title.
Exemple d'utilisation :

Page 5
Code HTML :

Le <acronym title=" eXtensible HyperText Markup Language " lang="en"> XHTML

</acronym> est la fusion du <acronym title=" HyperText Markup Language " lang="en">
HTML </acronym> et du <acronym title=" eXtensible Markup Language " lang="en"> XML
</acronym>

On remarque que les mots entre acronym sont légèrement soulignés. Dès qu’on passe la
souris sur les acronymes, leur signification apparaît automatiquement.

b. La balise : <abbr>
Cette balise est utilisée pour indiquer que le texte en question est une abréviation. De même
que pour les acronymes, on indique la signification de l'abréviation en question dans
l'attribut title. Lorsqu’on pointe la souris sur les mots, leur signification apparaît
automatiquement.
Exemple d'utilisation :
Les clts et les frns se sont mis d'accord.
Code HTML :

Les <abbr title="clients">clts</abbr> et les <abbr title="fourniseurs">frns</abbr> se sont mis

d'accord.

5. Les exposants et indices

Dans les sites des Matheux, on utilise souvent des expressions mathématiques. Pour autant,
rien ne nous empêche de voir comment faire des indices et des exposants en HTML.

a. La balise : <sub>
La balise sub est utilisée pour mettre un texte en indice.
Exemple d'utilisation :

Page 6
Code HTML :

Une suite géométrique de raison q est une suite de cette forme : U _n = q *
U₀

b. La balise : <sup>
Cette balise permet de mettre un texte en exposant.
Exemple d'utilisation :

Code HTML :

La dérivée de x³ vaut 3x².

6. Structurer un texte avec les titres

Lorsque les pages HTML contiennent beaucoup de textes, on cherche à bien les structurer
afin de bien aiguiller le visiteur. Pour avoir une idée sur le contenu général de la page, on
peut déjà lui donner un titre en utilisant la balise <TITLE>
Code HTML :

<title>Grand titre de la page</title>

Le contenu de cette balise s'affiche tout en haut de la page, sur le navigateur. Mais les titres
en HTML peuvent aussi servir pour avoir une fonctionnalité similaire aux tables de matière
dans les logiciels de traitement de texte.
Si on veut structurer les titres en plusieurs niveaux. Pour ce faire, on peut spécifier six
niveaux de titres, en numérotant la balise <h>. On a <h1><h2> jusqu'à <h6>. h1 permet donc
de spécifier le grand titre, h2 le sous titre en bas de h1, et ainsi de suite.

Page 7
Exemple sur les titres :

Code HTML :

<h1>[Link]</h1>
<h2>1.1-Les titres</h2>
<h3>1.1.2-Intérêt des titres</h3>
<h3>1.1.3-Entête à plusieurs niveaux</h3>
<h3>1.1.4-Les erreurs à éviter</h3>
<h2>1.2-Les paragraphes</h2>
<h2>1.3-Mettre en valeur des textes</h2>
<h2>....</h2>
<h1>[Link]</h1>

7. Insérer un paragraphe
On a appris à titrer les textes. Ceci étant acquis on veut cette fois-ci diviser les contenus en
paragraphes. Le HTML et sa richesse sémantique nous permettent encore de spécifier tout
cela grâce à de la balise <p>

Page 8
Code HTML :

<body>
<p>
L'ère de la nouvelle technologie implique le fait que le web ne se limite plus à l'interconnexion
entre ordinateurs. La toile d'araignée mondiale s'apprête à accueillir de nouvelles
applications et des nouveaux appareils (téléphone mobile, console de jeux...)
</p>
</body>

Aperçu :

8. Mettre plusieurs paragraphes

Pour faire plusieurs paragraphes, il suffit d'utiliser des balises p les unes à la suite des autres.
Code HTML :

<body>
<p>
…..</p>
<p>….</p>
<p>
…..
</p>
</body>

Page 9
9. Saut de ligne dans un paragraphe
Si on veut juste sauter une ligne dans un paragraphe, sans pour autant changer de
paragraphe, on utilise la balise <br />
Code HTML :

<body>
<p>
Le HTML qui s'avère figé ne pourra pas répondre aux exigences des applications web futures.
Il faut alors un langage plus souple et mieux adapté. XHTML, qui suit la syntaxe XML est
justement conçu pour cela.
<br/> Le but est de reformuler HTML 4 pour le rendre compatible avec XML. En quelque sorte,
XHTML eXtensible HyperText Markup Language est un langage hybride entre le XML et le
HTML.
</p>
</body>

Aperçu :

10. Séparer les paragraphes par des lignes

La balise <hr /> insère un trait horizontal. En l'utilisant pour séparer nos paragraphes, on a :
Code HTML :

<body>
<p>
L'ère de la nouvelle technologie implique le fait que le web ne se limite plus à l'interconnexion

Page 10
entre ordinateurs. La toile d'araignée mondiale s'apprête à accueillir de nouvelles
applications et des nouveaux appareils (téléphone mobile, console de jeux...) Le HTML qui
s'avère figé ne pourra pas répondre aux exigences des applications web futures. </p>
<hr />
<p>
Il faut alors un language plus souple et mieux adapté. XHTML, qui suit la syntaxe XML est
justement conçu pour cela. Le but est de reformuler HTML 4 pour le rendre compatible avec
XML. En quelque sorte, XHTML eXtensible HyperText Markup Language est un langage
hybride entre le XML et le HTML.
</p>
</body>

Aperçu

II. Les Listes ordonnées, numérotées et de définitions

Comme le titre de cette section l'indique, nous allons maintenant apprendre à faire des listes
en HTML. Concrètement, ces derniers nous permettront de classer des données ou
présenter des instructions sous forme de liste dans nos documents. Nous verrons alors 3
façons de faire des listes en XHTML :

 Les listes non ordonnées

 Les listes numérotées
 Les listes de définition

Page 11
1. Les listes non ordonnées
Il s'agit juste d'énumérer des données sous forme de listes à puces. Afin de définir une liste
non ordonnée, on utilise la balise <ul></ul> . Il nous faut encore distinguer chaque élément
de la liste à l'aide de la balise <li>< /li>. C'est-à-dire qu'il faut définir où est le début et la fin
de chacun des items contenus dans la liste. D'où le nom de la balise li qui veut dire List Item.
Code HTML :

<ul>
<li>Jus d'orange</li>
<li>Coca</li>
<li>Café</li>
</ul>

Aperçu :

2. Listes ordonnées
On peut faire des listes numérotées de la même manière que les listes non ordonnées. Sauf
qu'ici, on cherche à classer les données de la liste suivant un ordre bien défini à l'aide des
numéros. Cette fois-ci, on utilise la balise <ol> : Ordored List à la place de la balise <ul>. Pour
délimiter les items, on utilise toujours la balise< li>.
Code HTML :

<ol>
<li>Classe TI1.1</li>
<li> Classe TI1.2</li>
<li> Classe TI1.3</li>
</ol>

Page 12
Aperçu :

3. Les listes de définition

Les listes de définitions servent à indiquer un terme à définir et la définition de ce terme. Le
principe est tout simplement de faire correspondre les termes aux définitions. La structure
d'une liste de définitions est donnée par trois balises:

La balise conteneur <dl> qui délimite la bloc de liste

La balise <dt> ou Definition Term contiendra un terme de définition

La balise <dd> ou Definition Data qui servira à la description de définition

Code HTML :

<dl>
<dt>Ingrédients :</dt>
<dd>
<ul>
<li>8 jaunes d'oeuf </li>
<li>200g de sucre blanc</li>
<li>1l de lait</li>
<li>Parfum et colorant</li>
</ul>
</dd>

Page 13
Aperçu :

On peut mettre plusieurs dd pour un seul dt, et inversement. En effet, toutes les
combinaisons sont réalisables.

Exercices d’application
Exercice 1 :
Ecrire un code html qui permet de réaliser la page Web simple illustrée par la figure ci-
dessous :

Page 14
Exercice 2 :
Créer un document HTML contenant des listes numérotées et des listes à puce comme
illustré ci dessous.

Page 15