Apprendre le langage HTML (HyperText Markup Language)

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre le langage HTML (HyperText Markup Language) Niveau recommandé pour le cours de Apprendre le langage HTML (HyperText Markup Language) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 4: Les balises HTML de base

Toutes les pages

Les balises <html>, <head> et <body>

Tout document HTML doit contenir au minimum 3 balises. Sans ces balises, le document sera quand même exécuté par le navigateur mais il ne sera pas valide de point de vue de W3C, et peut présenter des problèmes lors de son référencement sur les outils de recherche. Il faut donc avoir la bonne habitude de les déclarer en premier avant d'inclure du contenu.

Les trois balises HTML minimales sont: <html>, <head> et <body>.

Balise <html>

La balise <html> est la balise de premier niveau. Elle renferme tout le contenu de la page Web. Elle est déclarée au début du document. La balise fermante </html> vient clôturer le document en la déclarant à la fin.

Balise <head>

La balise <head> représente l'entête du document. Elle contient des donnés supplémentaires qui ne sont pas nécessairement affichées sur le navigateur, mais elle peuvent fournir des informations complémentaires à l’exécution de la page par celui-ci, ou des informations utiles aux outils de recherche en vu de référencement.

Une des balises les plus utilisées dans la balise <head> est la balise <title>. Cette balise indique le titre du document. Celui-ci sera affiché sur la barre de titre du navigateur. C'est une balise qui doit être fermée pour indiquer la fin du titre.

On trouve aussi la balise <meta> qui fournit des informations supplémentaires sur le contenu. (Il existe plusieurs balises <meta> qu'on va voir en détail dans ce cours).
Les balises <meta> sont des balises orphelines et ne sont, par conséquent, pas fermées.
L'entête peut contenir aussi la balise <script> qui évoque un script externe (généralement écrit en Javascript), et la balise <link> qui appelle une ressource externe comme une feuille de style CSS ou une icone à afficher sur la barre des titre du navigateur. (Ces deux balises seront aussi vues en détail un peu plus loin).

Balise <body>

C'est la plus importante parmi les balises vues précédemment. En effet, la balise <body> renferme le contenu du corps. C'est ce qui sera réellement visible sur le navigateur par les internautes.

La balise <body> doit aussi être fermée pour indiquer la fin du corps du document. Elle peut contenir des attributs, mais la plupart d'ente elles ne sont pas compatibles.
On parle de code non compatible s'il ne produit pas le même résultat sur les différents moteurs de rendu.
Cependant <body> peut contenir un attribut plus au moins utilisé, il s'agit de bgcolor qui permet de colorer l'arrière-plan de la page Web en entier. La balise est donc déclarée ainsi:

<body bgcolor="orange"></body>

La couleur d'arrière plan sera donc orange. Il suffit de mentionner le nom de la couleur en anglais pour que celle ci soit reconnue en HTML. Cependant il existe une manière plus efficace pour déclarer les couleurs qu'on va voir après.

Code HTML minimal

Voici un exemple de code minimal qu'on peut éditer:
<html>
   <head>
      <title>Titre de ma page Web</title>
   </head>
   <body>

   </body>
</html>
Essayer de reproduire ce code sur votre éditeur, enregistrez le à n'importe quel endroit sur votre ordinateur (n'oubliez pas l'extension .html) et exécutez le par votre navigateur préféré. Pas de surprise, le document est vide, à part le message "Titre de ma page Web" qui s'affiche sur la barre de titre, il n'y a absolument aucun contenu. C'est normal après tout, car la balise <body> qui est sensée accueillir du contenu est vide.

Voilà, vous savez maintenant comment écrire un document HTML. Dans la page suivante nous allons voir les balises de formatage du texte.