À la fin de ce chapitre, vous aurez perçu la différence entre un texte balisé et un texte qui ne l'est pas.
Éditez le fichier test.html dans Bloc-notes. Faites deux retours à la ligne après le mot Bonjour, ajoutez Bienvenue sur ma page Web et enregistrez votre travail. Ne fermez pas Bloc-notes car vous en aurez encore besoin.
Pour éditer un fichier dans Bloc-notes, faites Fichier > Ouvrir…, sélectionnez le fichier à éditer et appuyez sur Ouvrir. Pour enregistrer, faites Fichier > Enregistrer.
Visualisez le contenu du fichier test.html dans votre navigateur et observez.
Si le fichier test.html est déjà ouvert dans votre navigateur, il suffit d'actualiser la page courante pour que les dernières modifications apportées au fichier soient prises en compte. Pour actualiser l'affichage de votre navigateur, faites Affichage > Actualiser.
Le navigateur affiche tout à la suite et c'est normal. Je vous expliquerai pourquoi. Mais avant, ne fermez pas votre navigateur et retournez à Bloc-notes. Ajoutez ce qui manque à votre texte pour qu'il ressemble à ceci :
<h1>Bonjour</h1>
<h2>Bienvenue sur ma page Web</h2>Enregistrez votre travail, retournez à votre navigateur, actualisez la page et constatez le changement.
Il se peut que vous n'aimiez pas les styles par défaut dont les éléments h1 et h2 sont assortis. Ces styles pourront éventuellement être modifiés, mais pour le moment, je vous invite à mettre toute considération esthétique de côté.
Les signes tel <h1> et </h1> sont des balises. En l'absence de balises, le navigateur n'a aucun point de repère ni aucune indication sur la manière de traiter telle ou telle portion de texte. Et c'est pourquoi il affiche tout à la suite.
Vous auriez beau multiplier les retours à la ligne, les espaces et les tabulations que cela ne changerait rien, car les navigateurs sont réglés pour ne pas tenir compte de ces mises en forme.
Par contre, en balisant Bonjour avec l'élément h1, vous vous trouvez à avoir dit au navigateur : « cette portion de texte est un en-tête de niveau 1 ». Et en balisant la suite avec l'élément h2, vous lui avez dit qu'il s'agissait d'un en-tête de niveau 2. Et là, le navigateur s'est comporté en conséquence.
L'expression <h1>…</h1> contient deux balises, mais un seul élément, à savoir l'élément h1. Le nom des éléments HTML vient de l'anglais. Ici, la lettre h vaut pour « header », qui signifie « en-tête ».
Vous percevez maintenant la différence entre un texte balisé et un texte qui ne l'est pas. Vous vous souvenez : HTML vaut pour HyperText Markup Language, qui signifie : langage de balisage hypertexte. Retenez maintenant ceci : apprendre le HTML, c'est d'abord apprendre à structurer le contenu d'un texte avec des balises.
À jour le 4 mars 2006