5. Le navigateur

Bon… Nous voilà bien, on a du code HTML et CSS. C’est super, mais qu’est-ce qu’on peut bien faire avec ? Ce serait pas mal de transformer tout ce code barbant en une belle page web !

Heureusement, on ne vas pas faire cela tout seul. C’est le rôle d’un autre outil qui doit vous être familier… le navigateur !

En effet, le rôle du navigateur est de “traduire” le code HTML et CSS qu’on lui donne en page Web. D’ailleurs, vous pouvez vous amuser à modifier une page en l’inspectant (F12 ou clic droit > Inspecter). Ensuite, changer le texte qui est écrit entre les balises <…>

Prenons comme exemple la page wikipédia de Tim Berners-Lee. Au début, nous avons la page originale :

Le fondateur d’Internet a bien sûr droit a sa page sur Wikipédia.

Et c’est là que, en appuyant sur F12 (ou clic droit > Inspecter), vous allez tomber sur une horrible montagne de code à laquelle nous ne comprenons rien pour le moment. En tous cas, vous avez devant vous le code HTML de Wikipédia, que des développeurs ont écrit à un moment ou à un autre !

Dans l’encadré rouge, le code de la page Wikipédia que des développeurs ont écrits !

Et si vous êtes d’humeur joueuse, vous pouvez même vous amuser à modifier le texte qui est écrit entre les balises <p>, que vous trouverez en dépliant les petites flèches grises à gauche du code). En effet, ce sont souvent les paragraphes qui contient le plus de texte sur une page web :

Nous venons de modifier le contenu de la page Wikipédia, en modifiant le code d’entrée ! Du coup, la page est différente. 😉

Ensuite, en appuyant sur la touche Entrée, vous vous rendrez compte que le texte a changé  sur la page Wikipédia. De mon côté, j’ai remplacé le premier paragraphe par « Tim Berners-Lee aime les patates ! » dans le code :

Apparemment, des rigolos se sont amusés à changer le code original de cette page !

Le résultat est sans appel. Il y a bien une erreur dans ce texte :

Cherchez l’erreur dans ce texte…

En fait, ce qu’on a fait là, c’est qu’on a modifié le code HTML du site que le navigateur affichait. Ce dernier a alors adapté la page affichée, en fonction du nouveau code que nous lui avons donné :

HTML & CSS => Navigateur => Page Web

Nouveau HTML & CSS => Navigateur => Nouvelle Page Web

Bien entendu, le site n’est pas modifié pour de vrai. Dans le serveur, une machine que l’on verra dans la prochaine étape, le code du site est resté intact. Dès que vous actualisez la page, toutes les modifications s’effaceront, mais bon, vous pouvez dès à présent faire le dark hacker auprès de vos collègues en faisant croire que vous avez piraté le site du FBI. 😈

Il existe plusieurs navigateurs différents, comme Google Chrome et Mozilla Firefox par exemple. Cependant, certains navigateurs, comme les anciennes versions d’Internet Explorer, ne sont pas à jour par rapport à certaines fonctionnalités de HTML5 et CSS3. On peut savoir quel navigateur prend en charge quoi sur le site caniuse.org. Cela pourra vous être utile pour plus tard.