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 compliquA?, donnons nous cinq minutes et essayons de comprendre de quoi il s’agit concrA?tement.

HTML, est un acronyme de A? HyperText Markup Language A? ou A? Langage de marquage, de structuration ou de balisage A?. Dit simplement, c’est un ensemble d’A?lA?ments de marquage, ou de balises, que nous utilisons dans la construction des pages web pour prA?ciser qu’une phrase reprA?sente le titre de la page, qu’une autre reprA?sente un lien qui doit mener vers telle ou telle page, etc.

Une page web se compose gA?nA?ralement de deux types d’A?lA?ments : du contenu et des balises HTML prA?cisant ce que chaque A?lA?ment de contenu signifie dans la page. On pourrait dire alors qu’HTML dA?crit le contenu d’une page web.
Visualisons ensemble cette page et essayons d’abord de voir ce qu’elle contient :

screen_ma_page

Nous remarquons que :

  1. 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.
  2. Le texte qui est juste aprA?s n’a rien de spA?cial, il s’agit d’un simple paragraphe.
  3. La page intA?gre une image
  4. La page dA?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 troisiA?me apparait comme un lien ? La rA?ponse est simple, c’est HTML qui en est responsable, allons dA?couvrir le code HTML de cette page :

Nous voyons que tout le contenu est placA? au sein de la balise mA?re HTML (i.e, entreet), c’est cette balise qui dA?limite le corps de la page web. Cette balise mA?re contient deux balises filles : HEAD et BODY, la premiA?re reprA?sente l’entA?te de la page et dA?finit des informations qui ne sont gA?nA?ralement pas visibles dans la page web (et qu’on verra dans un prochain article) alors que la deuxiA?me dA?finit le corps de la page, qui est le contenu visible dans la page web. Nous voyons aussi que cette balise dA?finit les A?lA?ments que nous avons visualisA?s auparavant, entourA?s dans d’autres balises HTML :

  1. Le texte ceci est le titre de ma page HTML entourA? de la balise H1,
  2. Le texte ceci est un exemple de paragraphe entourA? de la balise P,
  3. Une balise IMG avec un attribut src qui a pour valeur http://xnumerik.com/wp-content/uploads/2015/10/5_min_HTML_logo.png,
  4. Le texte Ceci est un lien qui mA?ne vers le site de XNUMERIK entourA? par la balise A avec un attribut href ayant pour valeur http://www.xnumerik.com.

Nous concluons donc que c’est grA?ce aux balises H1, P, IMG et A que nous pouvons respectivement dA?finir des titres, des paragraphes, des images et des liens entre les pages web.

Et ce n’est pas tout, HTML ne dA?finit pas uniquement ces A?lA?ments, il dA?finit un ensemble trA?s riche d’A?lA?ments permettant de construire des pages beaucoup plus complexes.

J’ai compris, mais … attendez ! comment ce code HTML est-il transformA? en une page WEB ?

Une bonne question !

Dans ce qui prA?cA?de, nous avons regardA? ensemble notre exemple de page web, avec son code HTML. La question est comment un simple code donnerait-il lieu A? une page web ? Avec des couleurs et des images ? Avec des liens, des textes de diffA?rentes tailles ?

Ce n’est pas magique, nous avons tous la rA?ponse dans nos machines. Dans chaque machine est installA? au moins un logiciel spA?cialisA? en HTML, dont le rA?le est de lire le code HTML (interprA?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 trA?s connus, trA?s rA?pandus et trA?s utilisA?s :

C’est bon, j’ai compris, comment puis-je alors construire ma premiA?re page moi aussi ?

Il n y a pas plus simple que A?a ! Ouvrez un simple A?diteur de texte comme a??bloc notea??, A?crivez le code HTML de votre page code suit :

codeHTML

Enregistrez-le dans un fichier avec l’extension a??.htmla??, exemple : mapage.html, mapremierepage.html, etc. Puis placez-le dans un endroit connu dans votre machine (le bureau par exemple). Une fois enregistrA?, rendez vous A? l’endroit de votre fichier HTML et double-cliquez simplement dessus, si tout se passe bien, le navigateur utilisA? par dA?faut dans votre machine va comprendre ce fichier et va afficher votre premiA?re page web qui ressemble A? celle de cet article.

Vous pouvez tA?lA?charger le code source de la page web prA?sentA?e dans cet article en cliquant ici.

VoilA?, j’espA?re que ces 5 minutes A?taient bA?nA?fiques et que vous avez maintenant une idA?e claire sur ce qu’est HTML. Rendez-vous dans un prochain article. A bientA?t !