Les bases du langage HTML

Photo de Jackson SOPHAT publiée sur Unsplash

Le lagage HTML est le langage utilisé pour créer les pages web. Vous avez l'habitude de consulter des pages web qui sont des pages riches de graphismes, voire d'animations ou de vidéo. Mais à la base, une page web, c'est constitué de texte. Uniquement de texte même. Et c'est une invention assez géniale : pour fabriquer une page web, un simple éditeur comme le bloc note de windows peut suffire pour fabriquer la page web, pour peu que l'on connaisse le langage qui n'est pas si compliqué que cela.

Vous voulez une preuve ? Vous pouvez afficher le code source de la page que vous êtes en train de consulter. Tous les navigateurs web le permettent sur un ordinateur. Par exemple, avec Firefox, dans le menu "outils", vous avez les "outils du navigateur" dont "afficher le code source".

Première page web...

Dans la suite de ce cours, vous allez pouvoir vous même créer du code HTML et l'afficher dans le navigateur. La plus grande partie se fera en ligne et vous pourrez faire votre travail intégralement dans le navigateur. Nous allons commencer immédiatement. Vous allez créer une page web qui affichera juste un texte qui indique "Ceci est ma première page web.". Pour cela, vous allez cliquez sur le bouton ci dessous et suivre les consignes.

Nous allons maintenant faire plus fort et essayer de faire une page avec deux paragraphes. Ça doit être simple, il suffit de rajouter une ligne vide non ? Essayons...

Vous avez essayé, et ça ne marche pas du tout. C'est normal. L'une des caractéristiques du HTML, c'est que les espaces multiples (aussi bien plusieurs espaces, que les tabulations et les sauts à la ligne) sont considérés comme un seul et unique espace. Nous verrons que cela a de grands avantages. Mais alors comment faire des paragraphes ?

Les didascalies

Vous savez sans doute, grâce à vos cours de français, ce qu'est une didascalie ? Ce sont des instructions données par un auteur dramatique aux acteurs sur la manière d'interpréter leur rôle. Par exemple, vous verrez dans une pièce "Arpagon, entrant furibond" qui indique que le personnage arrive et qu'il est en colère. Normal, on en veut à sa cassette...

Ces indications, de même que le nom du personnage qui parle, ne sont pas dîtes lorsque l'on joue la pièce. Elles servent à construire la représentation

En HTML, c'est la même chose. Il y a le texte qui est affiché à l'écran, et les indications sur la façon dont il doit être affiché. On distingue le fond de la forme.

Pour votre code, vous avez du taper quelque chose qui ressemblait à cela :

Ceci est ma première page WEB.

Avec deux paragraphes.

Les espaces multiples n'étant pas gérés, il faut indiquer au navigateur que l'on souhaite avoir des paragraphes. Pour tout ce qui concerne l'organisation de la page, on va utiliser ce que l'on appelle des balises. Les balises en HTML, ce sont des indications sur le texte. Elles sont délimités par les symboles inférieur et supérieur.

Pour donner les indications, il y a en général deux balises (on verra des exceptions). Une première balise qui indique un début, et une seconde balise qui indique la fin.

La seconde balise est la même que la première, mais avec un antislash au début pour dire que l'on a une balise de fin.

Par exemple, pour indiquer que l'on a un paragraphe, la balise est p. Le code que l'on va utiliser est donc :

<p>Ceci est ma première page WEB.</p>

<p>Avec deux paragraphes.</p>

Le M et le L de HTML

Nous venons en fait de parler du M de HTML. Ce M est l'initiale de Markup, qui en anglais signifie balise. Le L de HTML signifie Language, ce qui en anglais signifie langage. Le HTML est un langage de balises.

<p> Un paragraphe </p>

Mais que signifie HT dans HTML ? C'est ce que nous allons voir.