Premiers pas en Html

Dans cet article, vous trouverez les informations élémentaires pour créer votre première page en Html. Pour réaliser ces premiers pas, vous n'aurez besoin que du programme Bloc-notes de Windows et d'un navigateur web (Mozilla Firefox, ou Internet Explorer, ou Google Chrome, ou Safari, ou Opera, etc).

Bonjour le monde !

Lorsqu'on fait ses premiers pas dans l'apprentissage d'un langage de programmation, il est une habitude qui consiste à écrire un code affichant ces quelques mots : « Bonjour le monde ! » Ne dérogeons pas à cette coutume et proposons une première page Html que vous lirez ensuite avec un navigateur.

Commençons par créer un fichier vide intitulé "premier.html" avec le Bloc-notes de Windows ou avec Notepad++.

Une fois créé, encodez ce simple texte :

Bonjour le monde ! 

Enregistrez ce fichier et ouvrez-le avec un navigateur (puisque son extension est html, il suffira de double-cliquer dessus — sinon, il faudra faire un clic droit pour appeler votre menu contextuel et activer la commande Ouvrir avec...). Si tout ce passe bien, vous verrez s'afficher votre première phrase en haut à gauche de la page affichée par votre navigateur.

Voici ce que cela donne avec Mozilla Firefox :

C'est simple comme bonjour !

Tirons plusieurs enseignements de ce premier pas :

D'abord, vous constaterez que dans la barre d'adresse du navigateur, le lecteur traditionnel "http://" a cédé la place à "file:///". Celui-ci est suivit du nom de votre fichier Html précédé de son chemin d'accès sur votre PC. Cela signifie que votre navigateur a chargé une page située sur votre PC et qu'il n'a pas pris la peine de retourner le web dans tous les sens.

Ensuite, vous pouvez constater que le navigateur affiche le contenu de votre fichier sans sourciller. Il n'exige rien de plus. Nous n'avons pas besoin d'insérer notre phrase dans une fonction spécifique ou l'entourer d'un code compliqué. En ce sens, le navigateur fonctionne un peu comme un Bloc-notes. Nous verrons que cette comparaison n'ira pas plus loin.

Persévérons !

Étoffons un peu le contenu notre fichier et voyons comment celui-ci sera affiché par notre navigateur. Pour cela, continuons à écrire du texte à l'état brut, c'est-à-dire sans encodage superflu.

Ré-ouvrons notre fichier "premier.html" avec le Bloc-notes et ajoutons une seconde phrase :

Bonjour le monde !
Comment allez-vous ? 

Enregistrons nos modifications et affichons le résultat. Si vous avez fermé le navigateur web, vous devez à nouveau double-cliquer sur "premier.html". Par contre, si votre fichier est encore ouvert dans votre navigateur, vous pouvez en afficher le contenu modifié en cliquant simplement sur le bouton "Actualiser la page courante" :

Première grande déconvenue, nous découvrons que nos deux phrases ne s'affichent pas dans notre navigateur telles qu'elles ont été écrites dans le Bloc-notes. Dans ce dernier, nos deux phrases étaient situées l'une en dessous de l'autre, tandis que dans Mozilla Firefox elles apparaissent l'une à côté de l'autre.

Bref, il faudra quelque chose en plus si nous voulons que notre navigateur web affiche nos phrases l'une en dessous de l'autre. Ce supplément d'âme, nous le trouverons dans le balisage Html.

Première balise

En effet, le Html est un langage particulier qui permet de mettre en forme une page dans un navigateur web. Pour ce faire, le Html utilise un système de balisage ou de marquage.

Pour être précis, une balise ou un marquage est une instruction normalisée que vous encodez dans votre page Html. Elle se présente sous la forme d'une instruction ou d'une série d'instructions commençant par le caractère "<" et se terminant par ">". Ensuite, lorsque vous chargez votre page dans un navigateur, celui-ci se chargera d'interpréter cette balise en vue de produire l'action associée à celle-ci.

Concrétisons et reprenons notre fichier "premier.html". Nous allons ajouter une balise assez simple. Par exemple, et puisque nous souhaitons afficher la seconde phrase en dessous de la première, nous allons insérer la balise <br> :

Bonjour le monde !<br>
Comment allez-vous ?

Et voici ce que notre navigateur affiche :

Eureka ! Cette fois, notre navigateur accepte d'afficher nos deux phrases sur deux lignes.

Comme nous le constatons dans ce premier exemple, la balise <br> n'est pas affichée telle quelle par le navigateur. Elle est traduite par le navigateur et transformée en un saut de ligne accompagné d'un retour à la ligne.

Ouvrons une parenthèse pour préciser que si cette façon d'écrire la balise <br> est conforme aux règles du Html, elle est incorrecte si nous souhaitons nous conformer à la norme Xhtml. En effet, alors que le Html est un langage assez laxiste et peu regardant aux normes, le Xhtml est beaucoup plus stricte. Ainsi, selon ses critères, la balise <br> doit être écrite comme ceci : <br />.

Nous verrons les détails de cette norme Xhtml ultérieurement.

Autres balises

Égayons un peu notre code en ajoutant d'autres balises.

Au hasard, nous allons ajouter une ligne en dessous de nos phrases et nous allons modifier l'apparence de celles-ci.

Ré-écrivons notre page avec ce code :

<h1>Bonjour le monde !</h1>
<h3>Comment allez-vous ?</h3>
<hr />

Et, toujours sans sourciller, notre navigateur affichera ceci :

Dans cette nouvelle version de notre première page, la balise <hr /> affiche une ligne en dessous de nos deux phrases (soulignons que cette balise est écrite en respectant les normes Xhtml).

Ensuite, vous constatez que les deux phrases de cette page sont chacune entourées de deux balises : deux balises ouvrantes (<h1> et <h3>) et deux balises fermantes (</h1> ou </h3>). En fait, ces balises permettent de formater le texte qu'elles entourent avec un style prédéfinit. Il existe six balises de ce type (de <h1> à <h6>) correspondant à six types de format de titres.

Notons que les balises fermantes contiennent une barre oblique (slash). Celle-ci indique au navigateur qu'il s'agit d'une balise fermante.

Ainsi donc, nous constatons qu'il existe deux formes de balises en Html. Il y a les balises que nous pourrions appelées orphelines (<br />, <hr /> , etc) et celles qui fonctionnent par paire (<h1> et </h1>, <h2> et </h2>, etc). Les premières ont pour fonction d'insérer une instruction ou un objet dans la page, tandis que les secondes permettent d'imposer un style particulier au texte qu'elles encadrent.

Pour finir, amusons-nous en testant ces six formats de titre :

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

Ce qui nous donne à l'affichage :

Rassurez-vous, les styles de ces balises sont modifiables (notamment grâce aux feuilles de style CSS). D'autre part, le Html ne se réduit pas à ces seules balises. Il en reste beaucoup d'autres à découvrir.

Pour conclure, il est clair que, dans cet article, nous n'avons qu'effleuré la construction d'une page au format Html, mais j'espère que cet aperçu rudimentaire aidera celles et ceux qui souhaitent commencer à apprendre.

Bon amusement !