Texte

Le texte est la matière première de tout document Web. Dans ce chapitre, nous allons passer en revue les éléments HTML principaux qui concernent le texte. Ces éléments sont de deux natures :

Entités HTML

La syntaxe du langage HTML s'appuie sur un certain nombre de caractères appelés caractères réservés. Par exemple, les caractères < et > sont utilisés pour insérer la balise d'un élément HTML.

Afin d'utiliser ces caractères réservés dans le corps de votre document Web et de les voirs'afficher dans la fenêtre du navigateur, il convient de les remplacer par leur entité HTML. Une entité HTML est définie par une suite de lettres ou un nombre, précédée du caractère & et suivie de ;. Certaines de ces entités sont listées dans le tableau ci-dessous.

Affichage Description Nom de l'entité Code de l'entité
  espace insécable &nbsp; &#160;
< plus petit &lt; &#60;
> plus grand &gt; &#62;
& esperluette &amp; &#38;
" guillemet &quot; &#34;
euro &euro; &#8364;
© copyright &copy; &#169;

Pour accéder à la liste exhaustive des toutes les entités HTML, vous pouvez consulter le Character Entity Reference Chart du W3C.

Exercice 5

Convertissez le document texte code.txt en HTML en prenant soin de remplacer les caractères réservés par leur entité HTML.

Si le contenu du fichier code.txt ne s'affiche pas correctement dans votre navigateur, pensez à changer le système de codage des caractères.

Correction

Éléments HTML de structuration

h1

Titre de niveau 1. Il existe jusqu'à 6 niveaux de titres de h1 à h6. L'élément h1 représente un titre principal, h2 un sous-titre, h3 un sous-sous-titre et ainsi de suite.

<h1>1. Approche intégrale des équations de Lagrange</h1>
<h2>1.1 Définition du Lagrangien</h2>
<h2>1.2 Principe de moindre action</h2>
<h2>1.3 Équations de Lagrange</h2>
<h3>1.3.1 Expression intégrale du Lagrangien</h3>
<h3>1.3.2 Gestion des contraintes holonomes</h3>

1. Approche intégrale des équations de Lagrange

1.1 Définition du Lagrangien

1.2 Principe de moindre action

1.3 Équations de Lagrange

1.3.1 Expression intégrale du Lagrangien

1.3.2 Gestion des contraintes holonomes

p

Paragraphe de texte.

<p>
  Il était une fois, dans une contrée lointaine...
</p>
<p>
  Ils se marièrent et eurent beaucoup d'enfants.
</p>

Il était une fois, dans une contrée lointaine...

Ils se marièrent et eurent beaucoup d'enfants.

hr

Ligne horizontale de séparation (balise auto-fermante : balise fermante inexistante).

<p>Au-dessus</p>
<hr>
<p>Au-dessous</p>

Au-dessus


En-dessous

br

Saut de ligne (balise auto-fermante : balise fermante inexistante).

En effet, même si vous utilisez des sauts de ligne au sein de votre code source HTML, ils seront ignorés par le navigateur lors de l'affichage de votre document. Utilisez cet élément avec parcimonie et jamais pour des considérations de présentation : rappelez-vous, c'est le rôle de CSS.

<p>
  Olivier Nocent<br>
  Tél : +33 (0)3 26 91 84 58<br>
  Fax : +33 (0)3 26 91 30 49
</p>

Olivier Nocent
Tél : +33 (0)3 26 91 84 58
Fax : +33 (0)3 26 91 30 49

pre

Zone de texte préformaté, affiché avec une police à chasse fixe (caractères de largeur identique). Les espaces et les retours à la ligne sont reproduits fidèlement par le navigateur.

<p>Triangle de Penrose</p>
<pre>
          _____
         /    /\
        /    /  \
       /    /    \
      /    /  /\  \
     /    /  /  \  \
    /    /  /\   \  \
   /    /  /  \   \  \
  /    /__/____\   \  \
 /              \   \  \
/________________\   \  \
\_____________________\ /</pre>

Triangle de Penrose

          _____
         /    /\
        /    /  \
       /    /    \
      /    /  /\  \
     /    /  /  \  \
    /    /  /\   \  \
   /    /  /  \   \  \
  /    /__/____\   \  \
 /              \   \  \
/________________\   \  \
\_____________________\ /

sup

Texte en exposant.

Théorème de Pythagore : a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
Théorème de Pythagore : a2 + b2 = c2

sub

Texte en indice.

Formule chimique de l'eau : 2H<sub>2</sub> + O<sub>2</sub> &rarr; 2H<sub>2</sub>O
Formule chimique de l'eau : 2H2 + O2 → 2H2O

Exercice 6

Convertissez le document texte conditions_generales_itunes.txt en HTML en prenant soin de hiérarchiser les titres.

Le titre général est de niveau 1, les titres commençant par une lettre sont de niveau 2 et les titres commençant par + sont de niveau 3. Chaque saut de ligne correspond au début d'un nouveau paragraphe.

Correction

Éléments HTML d'annotation

em

Mise en emphase d'un bloc de texte.

<em>J'adore</em> regarder danser les gens.
J'adore regarder danser les gens.

strong

Délimite un bloc de texte important.

J'adore, j'adore, <strong>j'adore</strong>.
J'adore, j'adore, j'adore.

code

Fragment de code informatique.

La fonction JavaScript <code>Math.sqrt()</code> évalue la racine carrée.
La fonction JavaScript Math.sqrt() évalue la racine carrée.

blockquote

Délimite une citation de plusieurs lignes. L'attribut cite permet de renseigner la source de la citation.

<p>Tim Berners-Lee a écrit :</p>
<blockquote cite="http://www.w3.org/People/Berners-Lee/Kids.html">
  <p>I just had to take the hypertext idea and connect it to the TCP and DNS ideas and -- ta-da! -- the World Wide Web</p>
</blockquote>

Tim Berners-Lee a écrit :

I just had to take the hypertext idea and connect it to the TCP and DNS ideas and -- ta-da! -- the World Wide Web

q

Délimite une citation courte au sein d'un paragraphe.

Jacques Tati a dit <q>Trop de couleur distrait le spectateur</q>.
Jacques Tati a dit Trop de couleur distrait le spectateur.

cite

Référence à un document externe (livre, film, site, ...).

Douglas Adams a écrit <cite>le guide du routard intergalactique</cite>.
Douglas Adams a écrit le guide du routard intergalactique.

abbr

Abréviation ou acronyme. L'attribut title est utilisé pour expliciter la définition complète.

Bienvenue à l'<abbr title="Université de Reims Champagne-Ardenne">URCA</abbr>
Bienvenue à l'URCA

dfn

Définition d'un nouveau terme.

Un <dfn>triangle rectangle</dfn> est un triangle avec un angle droit.
Un triangle rectangle est un triangle avec un angle droit.

time logo HTML5

Délimite un bloc de texte correspondant à une date. L'attribut datetime permet de renseigner la date au format UTC (YYYY-MM-DDTHH:MM+HH:MM).

L'entretien est fixé au <time datetime="2013-09-20T15:30+02:00">20 septembre à 15h30</time>
L'entretien est fixé au

Exercice 7

Convertissez le document texte figaro.txt en HTML en utilisant des éléments de structuration (h1, p, ...) et d'annotation (q, cite, time, ...).

Correction

Propriétés CSS

font-family

Cette propriété a pour valeur une liste, par ordre de préférence, de polices de caractères désignées par leur nom et séparées par une virgule. Dans la mesure où une police de caractères spécifique risque d'être absente du système d'exploitation de l'internaute qui consulte votre page Web, il est recommandé de finir la liste des polices de caractères par le nom d'une des cinq familles de polices prédéfinies.

serif
Polices de caractères avec empattement (décorations aux extrémités des lettres).
Exemples : Georgia, Times, Times New Roman.
sans-serif
Polices de caractères sans empattement.
Exemples : Arial, Verdana, Helvetica
monospace
Polices de caractères à chasse fixe : la largeur de chaque caractère est identique.
Exemples : Courrier, Courrier New
cursive
Polices de caractères imitant l'écriture manuelle.
Exemples : Comic Sans MS, Monotype Corsiva
fantasy
Polices de caractères fantaisistes.
Exemples : Impact, Haettenschweiller

Le code CSS ci-dessous illustre l'utilisation de la propriété font-family pour l'élément body. De cette manière, tous les éléments HTML hériteront de cette propriété et utiliseront par défaut la police sélectionnée.

body {
  font-family: Helvetica, Arial, sans-serif;
}

@font-face logo CSS3

Mais on peut désormais utiliser la règle CSS3 @font-face afin de forcer le navigateur à utiliser une police de caractères fournie par le site Web. L'inconvénient de cette méthode réside dans le temps de chargement du fichier contenant les différentes variantes (gras, italique, petites capitales, ...) de la police de caractères.

@font-face {
  font-family: myFont;
  src: url("fonts/lovelyFont.ttf")
}

h1 {
  font-family: myFont;
}

Il existe un certain de nombre de sites Web mettant à disposition des polices de caractères, en téléchargement ou en hébergement à distance.

font-size

Taille de la police de caractères. La taille peut être exprimée en unités absolues ou relatives. Les unités absolues sont utilisées pour des documents ayant vocation à être imprimés. Pour des documents destinés à être consultés sur écran, on privilégiera les unités relatives.

Unités absolues
mm millimètres
cm centimètres
in pouces (inches en anglais). 1 in = 2.54 cm
pt points. 1 pt = 1/72ème in
pc picas. 1 pc = 12 pt
Unités relatives
px pixels. Cette unité est considérée comme relative car elle dépend de la résolution de l'écran.
% pourcentages. 100% correspond à la taille de la police de l'élément parent.
em proportion. 1 em correspond à la taille de la police de l'élément parent.

Il est recommandé d'utiliser une taille de police de référence pour l'élément body (en px pour un document Web destiné à être consulté sur écran ou en cm, in, pt pour un document destiné à être imprimé). Les tailles des éléments enfants de body sont exprimées en unités relatives % ou em. De cette manière, il est possible de modifier la taille du texte du document grâce au sélecteur body tout en respectant les proportions des différents éléments.

body {
  font-size: 16px;
}

h1 {
  font-size: 3em;
}

p {
  font-size: 1.5em;
}

span {
  font-size: 2em;
}
<h1>Un titre</h1>
<p>
  Un texte avec un mot en <span>grand</span>.
</p>

Un titre

Un texte avec un mot en grand.

Les valeurs des unités relatives % et em sont cumulatives. En effet, 100% ou 1em correspondent à la taille du texte de l'élément courant. Ainsi, dans l'exemple ci-dessous, la taille du mot grand est de 16px × 1.5em × 2em = 16px × 3em = 48px !

font-style

Posture de la police de caractères. Cette propriété a pour valeur normal, italic ou oblique.

normal

italic

oblique

font-weight

Graisse de la police de caractères. Cette propriété a pour valeur lighter, normal, bold ou bolder.

lighter

normal

bold

bolder

font-variant

Affichage de la police de caractères en petites capitales (si la police de caractères le permet). Cette propriété a pour valeur normal ou small-caps.

normal

small-caps

text-transform

Casse du texte. Cette propriété a pour valeur none, uppercase, lowercase ou capitalize.

none Trop de couleur distrait le spectateur. (Jacques Tati)
uppercase Trop de couleur distrait le spectateur. (Jacques Tati)
lowercase Trop de couleur distrait le spectateur. (Jacques Tati)
capitalize Trop de couleur distrait le spectateur. (Jacques Tati)

text-decoration

Ligne de décoration du texte. Cette propriété a pour valeur none, overline, line-through ou underline.

none

overline

line-through

underline

text-align

Alignement du texte. Cette propriété a pour valeur left, center, right ou justify.

Texte aligné à gauche.


Texte centré.


Texte aligné à droite.


Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié. Texte justifié.

text-indent

Décalage horizontal de la première ligne d'un bloc de texte. Le décalage peut être exprimé en unités absolues ou relatives.

p { text-indent: 6em; }

En 1878, reçu médecin à l’Université de Londres, je me rendis à Netley pour suivre les cours prescrits aux chirurgiens de l’armée ; et là, je complétai mes études. On me désigna ensuite, comme aide-major, pour le 5e régiment de fusiliers de Northumberland en garnison aux Indes.

Exercice 8

Créez une feuille de style CSS, au sein du document Web, pour les fichiers des exercices 6 et 7. Expérimentez les différentes propriétés CSS relatives au texte. Enfin, incorporez une police de caractères de votre choix dans votre feuille de style et observez les conséquences sur le chargement du document Web grâce aux outils de développement du navigateur.