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.
Petite précision de vocabulaire. En toute rigueur, nous parlons d’élément HTML pour désigner un mot qui a un sens particulier dans ce langage et s’écrit sous la forme d’une balise unique pour un élément vide et d’une balise fermante et d’une ouvrante sinon. On emploie souvent le terme balise au lieu d’élément, pour dire par exemple j’utilise la balise <pre>
. Nous emploierons indistinctement les deux termes, éléments ou balises.
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 :
- Le contenu entre les balises
<p>
et</p>
est considéré comme un paragraphe avec un retour à ligne avant et après - le paragraphe a un espacement vertical au dessus et en dessous
- 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.
balise | signification | effet | exemple | résultat |
<p> |
paragraphe | retour à la ligne avant et après, espacement au-dessous et au-dessous |
Bilan <p>Le retour est très positif</p> Conclusion |
Bilan
Le retour est très positif Conclusion |
<h1> <h2> <h3> <h4> <h5> <h6> |
titre | comme un paragraphe avec en plus du gras et une très grande police pour <h1> , de plus en plus petite jusqu’à <h6> |
<h1>Titre 1</h1> <h2>Titre 2</h2> <h3>Titre 3</h3> <h4>Titre 4</h4> <h5>Titre 5</h5> <h6>Titre 6</h6> |
Titre 1Titre 2Titre 3Titre 4Titre 5Titre 6 |
<pre> |
code informatique ou texte dactylographié | tous les caractères à l’intérieur sont affichés en respectant les tabulations, espaces et retour à la ligne |
Bilan annuel <pre> Effectifs : * équipe Alha : 26 * équipe Gagarine : 47 </pre> |
Bilan annuel
Effectifs : * équipe Alha : 26 * équipe Gagarine : 47 |
<br/> |
retour à la ligne |
Les couleurs primaires des écrans sont :<br/><br/> - Rouge<br/> - Vert<br/> - Bleu |
Les couleurs primaires des écrans sont :
– Rouge |
|
<hr/> |
séparation horizontale |
Titre <hr/> Paragraphe |
Titre
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.
balise | signification | effet | exemple | résultat |
<b> |
gras |
Le petit <b>train</b> |
Le petit train | |
<i> |
italique |
Le <i>petit</i> train |
Le petit train | |
<strong> |
renforcement | gras |
Le petit <strong>train</strong> |
Le petit train |
<em> |
emphase | italique |
Le <em>petit</em> train |
Le petit train |
<s> |
mot annulé | barré |
Couleur <s>rouge</s> |
Couleur |
<u> |
mot à part | souligné |
L'effet est <u>dévastateur</u> |
L’effet est dévastateur |
<small> |
plus petit |
Population : 25 000<br/> <small>Source : INSEE</small> |
Population : 25 000 Source : INSEE |
|
<sup> |
en exposant |
François 1<sup>er</sup> |
François 1er | |
<sub> |
en indice |
x<sub>1</sub> = 3 |
x1 = 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 :
balise | signification | effet | exemple | résultat |
<ul> |
Liste à puce | déclare une liste à puce (non ordonnée), doit contenir des <li> |
Ingrédients : <ul> <li>Beurre</li> <li>Farine</li> </ul> |
Ingrédients :
|
<ol> |
Liste ordonnée | déclare une liste ordonnée, doit contenir des <li> |
Ingrédients : <ol> <li>Beurre</li> <li>Farine</li> </ol> |
Ingrédients :
|
<li> |
Élément de liste | affiche le texte avec une puce ou un numéro |
Nom | Adresse | Description |
jsfiddle | https://jsfiddle.net | Tester rapidement une combinaison HTML, CSS et Javascript (ou simplement un morceau de code HTML à notre niveau) |
Html Cheat Sheet | https://htmlcheatsheet.com | Un site sympathique pour visualiser un résumé des balises HTML (valable aussi pour CSS et Javascript, le langage de programmation) avec quelques outils pratiques |
Alsacréations | https://alsacreations.com | LE site historique pour s’informer et apprendre les technos web, des articles très bien écrits régulièrement mis à jour |
L’écriture des éléments vides comme <br/>
avec le slash à la fin fait parti d’une norme qui s’appelle XHTML. Elle oblige une page web a être conforme à la syntaxe XML qui offre de nombreuses possibilités de traitement automatisé, par exemple pour transformer un document en un autre. Avant HTML 5, les deux standards HTML et XHTML avançaient indépendamment avec une bataille féroce. Pour simplifier (voir historique sur Wikipédia) on peut dire que c’est HTML 5 qui a gagné mais en intégrant la syntaxe XHTML. Celle-ci oblige notamment à écrire les balises vides avec un slash à la fin, à mettre des guillemets autour des valeurs d’attributs, à écrire le nom des balises en minuscules, etc.
En pratique, vous écrivez souvent un document HTML 5 qui ne sera pas transformé mais seulement affiché par un navigateur. Vous pouvez donc opter pour la syntaxe purement HTML en écrivant <br>
ou <img>
au lieu de <br/>
ou <img/>
. L’important est de ne pas mélanger les deux, d’en choisir une et de s’y tenir. Personnellement je reste par habitude sur XHTML, n’en soyez pas perturbé et faites comme vous voulez !
One Comment