Texte brut

Une page web est avant tout un fichier texte, de type HTML et d’extension .html (plus rarement .htm). A ce titre, nous avons besoin d’un éditeur de fichier texte comme le bloc-note (Notepad) sous Windows, emacs ou nano sous Linux ou TextEdit sous Macintosh. Nous verrons dans la leçon suivante toute la puissance d’éditeurs plus spécialisés.

Prenons le code HTML suivant qui ne contient que du texte.

Nuits de juin
Victor Hugo

   L’été, lorsque le jour a fui, de fleurs couverte
   La plaine verse au loin un parfum enivrant ;
   Les yeux fermés, l’oreille aux rumeurs entrouverte,
   On ne dort qu’à demi d’un sommeil transparent.

   Les astres sont plus purs, l’ombre paraît meilleure ;
   Un vague demi-jour teint le dôme éternel ;
   Et l’aube douce et pâle, en attendant son heure,
   Semble toute la nuit errer au bas du ciel.

Victor Hugo, Les rayons et les ombres

Oui, le texte apparaît dans le navigateur comme un flot continu sans respect des retours à la ligne ni des espaces multiples pour décaler le texte. C’est la première règle que nous devons retenir.

Il va donc falloir se débrouiller pour explicitement demander un retour à la ligne. C’est là qu’interviennent les « balises » du langage HTML. Il s’agit de mots qui ont un sens particulier et que l’on insère dans le code HTML, n’importe où dans le texte, entouré par des chevrons « < » et « > ».

Par exemple ici, la balise <br> insère à l’endroit où vous l’écrivez un retour à la ligne. Cela veut dire que la navigateur, qui interprète le code HTML, va provoquer un retour à la ligne en affichant la page, chaque fois qu’il verra un <br>. Voici le code HTML obtenu :

Nuits de juin<br>
Victor Hugo<br>
<br>
   L’été, lorsque le jour a fui, de fleurs couverte<br>
   La plaine verse au loin un parfum enivrant ;<br>
   Les yeux fermés, l’oreille aux rumeurs entrouverte,<br>
   On ne dort qu’à demi d’un sommeil transparent.<br>
<br>
   Les astres sont plus purs, l’ombre paraît meilleure ;<br>
   Un vague demi-jour teint le dôme éternel ;<br>
   Et l’aube douce et pâle, en attendant son heure,<br>
   Semble toute la nuit errer au bas du ciel.<br>
<br>
Victor Hugo, Les rayons et les ombres

OK, c’est lourd, mais on a pas le choix. En même temps, on écrit pas souvent des poèmes en HTML, le <br> n’est pas si fréquent en principe.

Et si je veux absolument que mon texte soit respecté avec ces espaces et retour à la ligne, sans avoir à mettre des <br> ?

Un autre type de balise est utile ici. Elle permet d’englober du texte, avec un début et une fin, pour lui donner soit un sens particulier qui n’aura aucune conséquence sur l’affiche, soit un formatage particulier qui se verra à l’affichage. Pour faire ce que l’on souhaite, la balise <pre> est indispensable, et elle s’utilise avec une balise ouvrante <pre>, suivi du texte, suivi de la balise fermante </pre>, comme ceci :

Nuits de juin<br>
Victor Hugo<br>
<pre>
   L’été, lorsque le jour a fui, de fleurs couverte
   La plaine verse au loin un parfum enivrant ;
   Les yeux fermés, l’oreille aux rumeurs entrouverte,
   On ne dort qu’à demi d’un sommeil transparent.

   Les astres sont plus purs, l’ombre paraît meilleure ;
   Un vague demi-jour teint le dôme éternel ;
   Et l’aube douce et pâle, en attendant son heure,
   Semble toute la nuit errer au bas du ciel.
</pre>
Victor Hugo, Les rayons et les ombres

Testez ce code et observez le résultat dans un navigateur. Vos espaces sont respectés mais la police du texte entre les balises <pre> a changé. C’est une police dite fixe où chaque caractère occupe la même largeur, comme sur les machines à écrire d’autrefois.

Balises en HTML

Faisons le point sur ce que nous avons vu. Une balise en HTML est un mot entre « < » et « > » qui a un sens particulier. En fait, on parle d’élément HTML pour désigner chaque mot entre « < » et « > » qui est reconnu par la norme HTML comme ayant un sens et une action sur l’affichage.

Nous avons vu <br> qui s’écrit aussi <br/> (attention, le « slash » à la fin indique que c’est un élément vide, à ne pas confondre avec le slash au début pour une balise fermante) et <pre>...</pre>. Nous verrons petit à petit d’autres éléments, qui tous s’écrivent de la même façon.

Titres et paragraphes

Nous voulons que le poème, écrit en HTML, s’affiche comme ceci dans un navigateur :

Comme nous l’avons vu, le texte brut ne s’affiche pas « naturellement » comme ceci dans le navigateur, il faut placer des balises HTML pour le mettre en forme. commençons pas noter toutes les particularités par rapport à un texte brut qui s’afficherait comme un flux sans retour à la ligne :

Nous allons voir comment ces mises en forme sont réalisables, en faisant le tour des principales balises d’abord pour les caractères (taille de police, gras, etc) et ensuite pour les paragraphes.

La principale balise pour représenter un paragraphe, d’un usage très courant, est <p>...contenu...</p>. Elle provoque les effets visuels suivants :

1. Le contenu entre les balises <p> et </p> est considéré comme un paragraphe avec un retour à ligne avant et après
2. le paragraphe a un espacement vertical au dessus et en dessous
3. le texte dans le paragraphe suit le flux normal du texte en HTML en s’écoulant vers la droite jusqu’au bord droit puis vers le bas.

Dans notre exemple de poème, les strophes sont des paragraphes idéaux avec leurs séparations. Pour le titre, une des balises de titre <h1>, <h2>, …, <h6> convient très bien, avec pour effet de s’afficher comme un paragraphe avec en plus un texte en gras très grand pour <h1>, un peu moins pour <h2>, etc. Ces balises servent à différents niveaux de titres, du premier au sixième, en donnant toujours un texte un peu plus grand que le texte normal de paragraphe.

L’idée première est de choisir la balise dont la taille nous convient. Prenons plutôt l’habitude de bien structurer un document. Nous avons un titre de premier niveau, c’est le seul d’ailleurs, donc <h1> est préférable non pas par rapport à la taille de texte correspondante, mais par rapport au sens de h1 comme titre de premier niveau. Par la suite, avec les CSS, nous pourrons à notre guise changer l’aspect du titre.

Le code et le résultat donne ceci :

<h1>Nuits de juin</h1>
<p>
    L’été, lorsque le jour a fui, de fleurs couverte<br/>
    La plaine verse au loin un parfum enivrant ;<br/>
    Les yeux fermés, l’oreille aux rumeurs entrouverte,<br/>
    On ne dort qu’à demi d’un sommeil transparent.<br/>
</p>
<p>
    Les astres sont plus purs, l’ombre paraît meilleure ;<br/>
    Un vague demi-jour teint le dôme éternel ;<br/>
    Et l’aube douce et pâle, en attendant son heure,<br/>
    Semble toute la nuit errer au bas du ciel.<br/>
</p>
Victor Hugo, Les rayons et les ombres

Bien sûr, les retour à ligne explicite par <br> sont inévitable après chaque vers.

Résumons les balises pour les titres et paragraphes, en y insérant <pre>, <br/> et <hr/> qui ont des rôles très particulier.

Bilan
<p>Le retour est très positif</p>
Conclusion

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

Bilan annuel
<pre>
Effectifs :
  * équipe Alha     : 26
  * équipe Gagarine : 47
</pre>

Effectifs :
* équipe Alha : 26
* équipe Gagarine : 47

Les couleurs primaires des écrans sont :<br/><br/>
- Rouge<br/>
- Vert<br/>
- Bleu

Titre
<hr/>
Paragraphe

Il reste dans notre exemple à mettre du gras et de l’italique, qui sont des mises en formes au niveau des caractères.

Caractères

Voici les principales balises qui s’appliquent aux caractères, c’est-à-dire que le flux n’est pas changé (le texte s’écoule vers la droite puis vers le bas) mais le texte entourée par une de ces balises change d’aspect.

Le petit <b>train</b>

Le <i>petit</i> train

Le petit <strong>train</strong>

Le <em>petit</em> train

Couleur <s>rouge</s>

L'effet est <u>dévastateur</u>

Population : 25 000<br/>
<small>Source : INSEE</small>

François 1<sup>er</sup>

x<sub>1</sub> = 3

Vous constatez étrangement des balises (<b> et <strong> par exemple) qui ont le même effet. Ceci d’une évolution progressive de la norme HTML qui aboutit dans la dernière version majeure d’HTML, la version 5, à une séparation plus nette entre le fond en HTML et la forme en CSS. Historiquement, HTML a démarré en mélangeant les deux, les balises <b> et <i> en étant l’exemple parfait. HTML 5 recommande désormais, et cette tendance devrait être stable dans les versions futures, d’utiliser <strong> et <em> à la place, car ces balises donnent du sens sans connoter une mise en forme précise. C’est un gros sujet, que nous fermons tout de suite pour le ré-ouvrir aux chapitres 3 et 4.

Voici donc le code final pour notre poème.

<h1>Nuits de juin</h1>
<p>
    L’été, lorsque le jour a fui, de fleurs couverte<br/>
    La plaine verse au loin un parfum enivrant ;<br/>
    Les yeux fermés, l’oreille aux rumeurs entrouverte,<br/>
    On ne dort qu’à demi d’un sommeil transparent.<br/>
</p>
<p>
    Les astres sont plus purs, l’ombre paraît meilleure ;<br/>
    Un vague demi-jour teint le dôme éternel ;<br/>
    Et l’aube douce et pâle, en attendant son heure,<br/>
    Semble toute la nuit errer au bas du ciel.<br/>
</p>
<b>Victor Hugo</b>, <i>Les rayons et les ombres</i>

Énumérations

Terminons le tour d’horizon des mises en formes en HTML par les listes à puces et numérotées. Les balises sont les suivantes :

Ingrédients :
<ul>
  <li>Beurre</li>   
  <li>Farine</li>
</ul>

Ingrédients :
<ol>
  <li>Beurre</li>   
  <li>Farine</li>
</ol>