{"id":1169,"date":"2015-10-19T09:34:32","date_gmt":"2015-10-19T09:34:32","guid":{"rendered":"http:\/\/xnumerik.com\/?p=1169"},"modified":"2015-10-19T09:34:32","modified_gmt":"2015-10-19T09:34:32","slug":"5-minutes-pour-comprendre-html","status":"publish","type":"post","link":"https:\/\/xnumerik.com\/blog\/5-minutes-pour-comprendre-html.php","title":{"rendered":"5 minutes pour comprendre HTML"},"content":{"rendered":"

HTML, c’est quoi ? Est ce le web ? …<\/span><\/h3>\n

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.<\/p>\n

Rassurez vous, ce n’est pas compliqu\u00e9, donnons nous cinq minutes et essayons de comprendre de quoi il s’agit concr\u00e8tement.<\/p>\n

HTML, est un acronyme de \u00ab HyperText Markup Language \u00bb ou \u00ab Langage de marquage, de structuration ou de balisage \u00bb. Dit simplement, c’est un ensemble d’\u00e9l\u00e9ments de marquage, ou de balises, que nous utilisons dans la construction des pages web pour pr\u00e9ciser qu’une phrase repr\u00e9sente le titre de la page, qu’une autre repr\u00e9sente un lien qui doit mener vers telle ou telle page, etc.<\/p>\n

Une page web se compose g\u00e9n\u00e9ralement de deux types d’\u00e9l\u00e9ments : du contenu et des balises HTML pr\u00e9cisant ce que chaque \u00e9l\u00e9ment de contenu signifie dans la page. On pourrait dire alors qu’HTML d\u00e9crit le contenu d’une page web.
\nVisualisons ensemble cette page et essayons d’abord de voir ce qu’elle contient :<\/p>\n

\"screen_ma_page\"<\/a><\/p>\n

Nous remarquons que :<\/p>\n

    \n
  1. Le texte Ceci est le titre de ma page HTML<\/u><\/i> est d’une taille plus importante que le reste du contenu car il s’agit d’un titre.<\/li>\n
  2. Le texte qui est juste apr\u00e8s n’a rien de sp\u00e9cial, il s’agit d’un simple paragraphe.<\/li>\n
  3. La page int\u00e8gre une image<\/li>\n
  4. La page d\u00e9finit en bas un texte faisant office de lien entre cette page et le site web de XNUMERIK.<\/li>\n<\/ol>\n

    Alors, qu’est ce qui fait qu’un texte apparait comme un titre ? un autre texte apparait comme un simple paragraphe ? et un troisi\u00e8me apparait comme un lien ? La r\u00e9ponse est simple, c’est HTML qui en est responsable, allons d\u00e9couvrir le code HTML de cette page :<\/p>\n

    Nous voyons que tout le contenu est plac\u00e9 au sein de la balise m\u00e8re HTML (i.e, entreet), c’est cette balise qui d\u00e9limite le corps de la page web. Cette balise m\u00e8re contient deux balises filles : HEAD et BODY, la premi\u00e8re repr\u00e9sente l’ent\u00eate de la page et d\u00e9finit des informations qui ne sont g\u00e9n\u00e9ralement pas visibles dans la page web (et qu’on verra dans un prochain article) alors que la deuxi\u00e8me d\u00e9finit le corps de la page, qui est le contenu visible dans la page web. Nous voyons aussi que cette balise d\u00e9finit les \u00e9l\u00e9ments que nous avons visualis\u00e9s auparavant, entour\u00e9s dans d’autres balises HTML :<\/p>\n

      \n
    1. Le texte ceci est le titre de ma page HTML<\/u><\/i> entour\u00e9 de la balise H1<\/u><\/i>,<\/li>\n
    2. Le texte ceci est un exemple de paragraphe<\/u><\/i> entour\u00e9 de la balise P<\/u><\/i>,<\/li>\n
    3. Une balise IMG<\/u><\/i> avec un attribut src<\/u><\/i> qui a pour valeur https:\/\/xnumerik.com\/wp-content\/uploads\/2015\/10\/5_min_HTML_logo.png<\/u><\/i>,<\/li>\n
    4. Le texte Ceci est un lien qui m\u00e8ne vers le site de XNUMERIK<\/u><\/i> entour\u00e9 par la balise A<\/u><\/i> avec un attribut href<\/u><\/i> ayant pour valeur http:\/\/www.xnumerik.com.<\/u><\/i><\/li>\n<\/ol>\n

      Nous concluons donc que c’est gr\u00e2ce aux balises H1<\/u><\/i>, P<\/u><\/i>, IMG<\/u><\/i> et A<\/u><\/i> que nous pouvons respectivement d\u00e9finir des titres, des paragraphes, des images et des liens entre les pages web.<\/p>\n

      Et ce n’est pas tout, HTML ne d\u00e9finit pas uniquement ces \u00e9l\u00e9ments, il d\u00e9finit un ensemble tr\u00e8s riche d’\u00e9l\u00e9ments permettant de construire des pages beaucoup plus complexes.<\/p>\n

      J’ai compris, mais … attendez ! comment ce code HTML est-il transform\u00e9 en une page WEB ?<\/span><\/h3>\n

      Une bonne question !<\/p>\n

      Dans ce qui pr\u00e9c\u00e8de, nous avons regard\u00e9 ensemble notre exemple de page web, avec son code HTML. La question est comment un simple code donnerait-il lieu \u00e0 une page web ? Avec des couleurs et des images ? Avec des liens, des textes de diff\u00e9rentes tailles ?<\/p>\n

      Ce n’est pas magique, nous avons tous la r\u00e9ponse dans nos machines. Dans chaque machine est install\u00e9 au moins un logiciel sp\u00e9cialis\u00e9 en HTML, dont le r\u00f4le est de lire le code HTML (interpr\u00e9ter) 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\u00e8s connus, tr\u00e8s r\u00e9pandus et tr\u00e8s utilis\u00e9s :<\/p>\n