Le but de ce chapitre est de comprendre les différences entre l'édition d'un document à partir d'un langage de balisage et d'un traitement de texte. N'oubliez jamais que HTML est uniquement un langage de balisage. Ce n'est pas un langage de programmation tel java, C++ ou Visual Basic. Son intérêt est de pouvoir gérer la mise en page de documents ayant à contenu à diffuser..
Ouvrez le fichier test.html dans le Bloc-notes. Faites deux retours à la ligne après le mot hello world, ajoutez HTML est facile à apprendre et enregistrez votre travail. Ne fermez pas le Bloc-notes.
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, vous pouvez aussi utiliser la touche raccourcie F5.
Le navigateur affiche tout à la suite et c'est normal. Nous allons comprendre progressivement pourquoi. Mais avant, ne fermez pas votre navigateur et retournez au Bloc-notes. Ajoutez les balises suivantes à 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. Les phrases sont l'une en dessous de l'autre, sur 2 lignes.
Les balises H1et H2 sont des balises de titre. le navigateur prévoit pour elles un affichage par défaut. Cependant si ce style ne vous convient pas, vous pourrez le modifier par la suite. L'important pour le moment est de comprendre le rôle des balises dans un langage de balisage.
Les signes tel <h1> et </h1> sont des balises. Sans balise, le navigateur affiche le texte sans le caractériser, il affiche les caractères les uns derrière les autres sans tenir compte du formatge de l'éditeur de texte. Il met les mots les uns dèrrière les autres sans tenir compte des espaces et sauts de ligne fait dans l'éditeur de texte.
Dans un langage de balisage, chaque action de formatage doit être spécifiée par une balise : un saut de ligne, un espace, la mise en gras...
C'est pourquoi, 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.