Hypertext Markup Language/Mise en forme du texte

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

Introduction

Afin de créer des pages qui soient agréables à lire, il faut savoir présenter le texte. Il y a cependant une remarque préliminaire à faire.

Les navigateurs ne prennent pas en compte les retours à la ligne et les tabulations et quel que soit le nombre d'espaces à la suite que vous tapez, un seul sera affiché. Pour mieux comprendre, le code suivant :

 Bonjour et             Bienvenue
 sur <i>Wikiversité</i>.

affichera

Bonjour et Bienvenue sur Wikiversité.

On remarque que le texte n’est pas passé à la ligne après Bonjour et Bienvenue et que le fait de mettre 10 espaces entre et et Bienvenue n'a eu aucun effet.

Ceci est un avantage car ça permet d'indenter et d'espacer le document sans que cela n'ait d'influence sur le page web finale. L'indentation est le fait d’utiliser la touche tabulation pour mettre en valeur la structure du document. Il est fortement conseillé de bien indenter le document afin d’en faciliter la relecture et la maintenance.

Cependant, il est souvent nécessaire de sauter une ligne. Pour passer à la ligne, il faut utiliser la balise <br />. En ce qui concerne les espaces, nous verrons comment faire lorsque nous aborderons les caractères spéciaux.

Ainsi, il suffit d'ajouter la balise <br /> à l'endroit où l’on veut passer à la ligne.

 Bonjour et Bienvenue <br />
 sur <i>Wikiversité</i>.

affichera

Bonjour et Bienvenue
sur Wikiversité.

Les niveaux de titres

Pour qu'un document soit aisément lisible, il se doit de comporter des titres. Il existe des balises permettant de créer des titres, ce sont <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Il existe bien sûr les balises fermantes associées.

La balise <h1> correspond aux titres les plus gros et la balise <h6> aux titres de la plus petite taille.

Il est à noter que les titres sont toujours en gras et impliquent un retour à la ligne. Ils ne nécessitent donc pas l’utilisation de la balise <br />.

La police du texte

La police du texte se spécifie grâce à la balise <font face="police"> qui est associée à la balise fermante </font>.

police doit être un nom de police comme Arial ou Comic sans MS.

Il existe un problème de compatibilité avec cet attribut puisque la personne qui visite le site doit avoir la police sur son ordinateur pour qu'elle s'affiche. Il faut donc choisir des polices qu'une majorité de personnes possède. Si le visiteur ne possède pas la police sur son ordinateur, c’est la police par défaut qui va s'afficher. La police par défaut dépend du système du visiteur.

Il existe cependant une astuce pour assurer la plus grande compatibilité possible. Si vous voulez être sûr que soit Arial (police très populaire sur PC), soit Chicago (police très populaire sur Macintosh) s'affiche écrivez la chose suivante : <font face="Arial,Chicago">.

Le navigateur recherchera alors la police Arial et s'il ne la trouve pas, il cherchera la police Chicago. S'il n'en trouve aucune des deux, il affichera la police par défaut.

La taille du texte

La taille du texte se spécifie grâce à la balise <font size="taille"> qui est associée à la balise fermante </font>.

taille est un chiffre compris entre 1 et 7, où 1 correspond à la taille la plus petite et 7 à la taille la plus grande. Malheureusement, c’est la numérotation contraire aux titres ce qui ne simplifie pas la mémorisation.

La taille par défaut est 3.

Il existe une autre manière de choisir la taille, c’est en donnant à taille une valeur du type +1, -1, +2, -2… La taille du texte sera alors celle du texte alentour ajoutée de la valeur spécifiée.

Par exemple, <font size="3">Je suis plus <font size="+1">grand</font> que les autres</font> affichera la phrase je suis plus grand que les autres en taille 3 sauf le mot grand qui sera en taille 3+1=4.

Au contraire, <font size="taille">Je suis plus <font size="-1">petit</font> que les autres</font> affichera la phrase je suis plus petit que les autres en taille 3 sauf le mot petit qui sera en taille 3-1=2.

Il est impossible d’utiliser une valeur inférieure à 1 ou supérieure à 7. Ainsi, font size="+10"> équivaut à font size="7">.

Ainsi, le code :

<font size="1">Ceci est un texte de taille 1</font><br />
<font size="2">Ceci est un texte de taille 2</font><br />
<font size="3">Ceci est un texte de taille 3</font><br />
<font size="4">Ceci est un texte de taille 4</font><br />
<font size="5">Ceci est un texte de taille 5</font><br />
<font size="6">Ceci est un texte de taille 6</font><br />
<font size="7">Ceci est un texte de taille 7</font><br />
<font size="3">Je suis plus <font size="+2">grand</font> que les autres</font><br />
<font size="3">Je suis plus <font size="-2">petit</font> que les autres</font><br />

affichera

Ceci est un texte de taille 1
Ceci est un texte de taille 2
Ceci est un texte de taille 3
Ceci est un texte de taille 4
Ceci est un texte de taille 5
Ceci est un texte de taille 6
Ceci est un texte de taille 7
Je suis plus grand que les autres
Je suis plus petit que les autres

La couleur du texte

La couleur du texte se spécifie grâce à la balise <font color="couleur"> qui est associée à la balise fermante </font>.

Il existe deux manières de définir les couleurs.

La première consiste à remplacer couleur par le code hexadécimal de la couleur voulue précédé du signe #. Cette méthode étant fastidieuse, les couleurs « basiques » peuvent être appelées par leur nom en anglais. Ainsi, pour afficher du bleu, on tapera <font color="blue">.

Ainsi, le code :

<font color="black">noir</font><br />
<font color="white">blanc</font><br />
<font color="red">rouge</font><br />
<font color="blue">bleu</font><br />
<font color="green">vert</font><br />
<font color="yellow">jaune</font><br />
<font color="aqua">eau</font><br />
<font color="fuchsia">fuchsia</font><br />
<font color="grey">gris</font><br />
<font color="lime">citron vert</font><br />
<font color="maroon">marron</font><br />
<font color="purple">violet</font><br />
<font color="navy">marine</font><br />
<font color="olive">olive</font><br />
<font color="silver">argent</font><br />

affichera

noir
blanc (blanc)
rouge
bleu
vert
jaune
eau
fuchsia
gris
citron vert
marron
violet
marine
olive
argent

Polices de caractères

<p style="font-family: times, serif; font-size:14pt; font-style:italic">
Lorem ipsum.
</p>

donne :

Lorem ipsum.

Les commentaires

Les commentaires se placent entre les balises <!-- et --> :

<!-- Ceci est un commentaire -->

Les commentaires sont des lignes que le navigateur ne «lira» pas. Ils sont très utiles pour documenter le code, facilitant ainsi la relecture et la maintenance. Ils sont par conséquent fortement recommandés.

Les paragraphes

Les paragraphes sont des blocs de textes compris entre les balises <p> et </p>.

Un paragraphe implique un saut de ligne avant et après celui-ci.

On ajoute parfois à la balise <p> l'attribut align qui permet de définir l'alignement du texte à l'intérieur du paragraphe. align peut prendre les valeurs left pour un alignement à gauche, right pour un alignement à droite, center pour obtenir un texte centré ou justify pour avoir un paragraphe justifié (c'est-à-dire aligné à la fois à droite et à gauche).

Les caractères spéciaux

Certains caractères peuvent être absent du jeu de caractères utilisé par votre éditeur lors de la création du document. On utilise alors les entités commençant par le caractère & et se terminant par un ;.

Pour en savoir plus sur ces entités, consulter la table des caractères.

Par exemple, pour afficher le signe €, il peut être nécessaire d'écrire €.

De même, certains caractères spéciaux peuvent être difficiles à saisir directement ou à retrouver ensuite sous leur forme littérale. Ainsi, pour écrire un espace insécable, on utilise fréquemment l'entité  .