5 minutes pour comprendre HTML
HTML, c’est quoi ? Est ce le web ? …
HTML, on en entend souvent parler, mais on ne sait pas exactement ce que cela signifie, tout ce qu’on sait, c’est qu’il a un lien avec internet.
Rassurez vous, ce n’est pas compliqué, donnons nous cinq minutes et essayons de comprendre de quoi il s’agit concrètement.
HTML, est un acronyme de « HyperText Markup Language » ou « Langage de marquage, de structuration ou de balisage ». Dit simplement, c’est un ensemble d’éléments de marquage, ou de balises, que nous utilisons dans la construction des pages web pour préciser qu’une phrase représente le titre de la page, qu’une autre représente un lien qui doit mener vers telle ou telle page, etc.
Une page web se compose généralement de deux types d’éléments : du contenu et des balises HTML précisant ce que chaque élément de contenu signifie dans la page. On pourrait dire alors qu’HTML décrit le contenu d’une page web.
Visualisons ensemble cette page et essayons d’abord de voir ce qu’elle contient :
Nous remarquons que :
- Le texte Ceci est le titre de ma page HTML est d’une taille plus importante que le reste du contenu car il s’agit d’un titre.
- Le texte qui est juste après n’a rien de spécial, il s’agit d’un simple paragraphe.
- La page intègre une image
- La page définit en bas un texte faisant office de lien entre cette page et le site web de XNUMERIK.
Alors, qu’est ce qui fait qu’un texte apparait comme un titre ? un autre texte apparait comme un simple paragraphe ? et un troisième apparait comme un lien ? La réponse est simple, c’est HTML qui en est responsable, allons découvrir le code HTML de cette page :
Nous voyons que tout le contenu est placé au sein de la balise mère HTML (i.e, entreet), c’est cette balise qui délimite le corps de la page web. Cette balise mère contient deux balises filles : HEAD et BODY, la première représente l’entête de la page et définit des informations qui ne sont généralement pas visibles dans la page web (et qu’on verra dans un prochain article) alors que la deuxième définit le corps de la page, qui est le contenu visible dans la page web. Nous voyons aussi que cette balise définit les éléments que nous avons visualisés auparavant, entourés dans d’autres balises HTML :
- Le texte ceci est le titre de ma page HTML entouré de la balise H1,
- Le texte ceci est un exemple de paragraphe entouré de la balise P,
- Une balise IMG avec un attribut src qui a pour valeur https://xnumerik.com/wp-content/uploads/2015/10/5_min_HTML_logo.png,
- Le texte Ceci est un lien qui mène vers le site de XNUMERIK entouré par la balise A avec un attribut href ayant pour valeur http://www.xnumerik.com.
Nous concluons donc que c’est grâce aux balises H1, P, IMG et A que nous pouvons respectivement définir des titres, des paragraphes, des images et des liens entre les pages web.
Et ce n’est pas tout, HTML ne définit pas uniquement ces éléments, il définit un ensemble très riche d’éléments permettant de construire des pages beaucoup plus complexes.
J’ai compris, mais … attendez ! comment ce code HTML est-il transformé en une page WEB ?
Une bonne question !
Dans ce qui précède, nous avons regardé ensemble notre exemple de page web, avec son code HTML. La question est comment un simple code donnerait-il lieu à une page web ? Avec des couleurs et des images ? Avec des liens, des textes de différentes tailles ?
Ce n’est pas magique, nous avons tous la réponse dans nos machines. Dans chaque machine est installé au moins un logiciel spécialisé en HTML, dont le rôle est de lire le code HTML (interpréter) et de dessiner la page web correspondante. Ce logiciel est connu (par la plupart) comme symbole d’internet et s’appelle navigateur internet (ou browser en anglais). Voici dans ce qui suit 4 navigateurs très connus, très répandus et très utilisés :
C’est bon, j’ai compris, comment puis-je alors construire ma première page moi aussi ?
Il n y a pas plus simple que ça ! Ouvrez un simple éditeur de texte comme “bloc note”, écrivez le code HTML de votre page code suit :
Enregistrez-le dans un fichier avec l’extension “.html”, exemple : mapage.html, mapremierepage.html, etc. Puis placez-le dans un endroit connu dans votre machine (le bureau par exemple). Une fois enregistré, rendez vous à l’endroit de votre fichier HTML et double-cliquez simplement dessus, si tout se passe bien, le navigateur utilisé par défaut dans votre machine va comprendre ce fichier et va afficher votre première page web qui ressemble à celle de cet article.
Vous pouvez télécharger le code source de la page web présentée dans cet article en cliquant ici.
Voilà, j’espère que ces 5 minutes étaient bénéfiques et que vous avez maintenant une idée claire sur ce qu’est HTML. Rendez-vous dans un prochain article. A bientôt !