Le web et les navigateurs

Plan du chapitre

• Comment fonctionne le web (requête/réponse)
• Le rôle de HTML, CSS et JavaScript
• Inspecter une page avec les DevTools

Comment fonctionne le web

Un navigateur Web (Chrome, Firefox, …) est un simple lecteur de fichier HTML (et autres avec les navigateurs modernes). Dans notre utilisation quotidienne, ce fichier vient d’un serveur qui nous l’héberge ou nous le génère et on y accède via une URL.

Lorsque l’on tape une URL dans le navigateur et que l’on souhaite accéder à une page, il se passe plusieurs choses.

• L’URL est transformée en adresse IP via une requête vers un serveur DNS qui garde une liste de tous les domaines existant avec leur(s) adresse IP.
• Une requête HTTP (GET) est faite vers le serveur qui héberge ou génère la page HTML. Cette requête passe en général par plusieurs couches de sécurités et d’infrastructures (pare-feu, load balancer, gateway, …)
• Le serveur va retrouver ou générer la page HTML et la renvoyer au navigateur.
• Le navigateur va ensuite l’interpréter, balise par balise.
• Certaines de ces balises peuvent contenir des liens vers des autres fichiers (CSS, Javascript, images, …). Si c’est le cas, il va également les télécharger au fur et à qu’il interprète la page.
• Techniquement, le navigateur n’attend pas d’avoir lu toute la page et télécharger les autres fichiers avant qu’il l’affiche à l’écran.

Le rôle de HTML, CSS et JavaScript

On a évoqué trois principaux types de fichiers : HTML, CSS et Javascript. Ces 3 types de fichiers (en langages) sont les briques qui construisent tous (ou presque) les sites web que nous utilisons tous les jours. Ils ont chacun des rôles et responsabilités bien distincts

HTML (HyperText Markup Language)

C’est le coeur de la page. Il contient et organise le contenu dans des balises (tag) qui ont chacun une signification (et un style) différent. C’est entre autres grâce à ces balises que les robot d’indexation (Google, …) comprennent vos pages et les indexent correctement.

Les balises contiennent le contenu de la page, mais servent également à le décrire pour les robots d’indexations mais également pour les appareils servant aux personnes ayant des handicaps (malvoyance, daltonisme…,)

CSS (Cascading Style Sheet)

C’est le langage qui vous permet de donner un style et un layout à votre page. Il permet de définir les couleurs, tailles de police, espacements, … Mais également de définir l’agencement des élements et de les “paramètrer” en fonction de l’affichage sur grand ou petit écran (responsive) mais aussi sur papier et autre média plus spécifiques.

Javascript

C’est la partie ou vous aller donner vie à votre page et la rendre interactive. De nos jours, tous les sites ont du javascript, ce qui n’était pas forcément le cas à l’époque. Javascript va vous permettre de réagir à chaque action de l’utilisateur, mais également de mettre à jour votre page avec des données qui viennent d’une API.

Javascript est également la partie la plus dangereuse d’un site web : c’est souvent grâce à du code Javascript malveillant que vous pouvez vous faire voler vos identifiants, sessions et autres données.

Inspecter une page avec les DevTools

Contenu à rédiger.

Points à couvrir :

• Ouvrir les DevTools (F12 ou clic droit → Inspecter)
• L’onglet Elements : voir le HTML d’une page
• L’onglet Styles : voir le CSS appliqué à un élément
• Modifier temporairement une page en direct pour expérimenter

Sur n’importe quelle page web, il est possible de voire l’HTML, les CSS et le Javascript (souvent minifié). Pour cela, il faut ouvrir l’**Inspecteur Web. Pour ce faire, le plus simple est d’utiliser le click droit sur la page et de rechercher un menu qui ressemble à “Inspecter” ou “Inspecter l’élément”.

Une fois l’inspecteur ouvert, vous apercevrez plusieurs onglets et panneaux d’affichage. Celui qui nous intéresse plus particulièrement ici est l’onglet sur lequel l’inspecteur s’ouvre : “Elements” (Chrome) / “Inspecteur” (Firefox) Cet onglet vous permet de voir l’HTML et le style de la page. Non seulement il vous permet de le voir, mais vous pouvez également éditer (temporairement) le code HTML et CSS (les modifications disparaissent après avoir rafraichi la page). L’inspecteur permet également de “simuler” plusieurs tailles d’écran (mobile, tablette, …) et effets sur des éléments (hover, focus, …)

Voici une liste de quelques autres onglets et leur utilité

• Degug/Source : permet de voir le code javascript de la page et de le débugger (point d’arrêt, …)
• Network : sert à voir toutes les requêtes faite par une page web (AJAX/XHR, fichiers, Websocket, …)
• Performance : permet d’analyser les performances du navigateur pour identifier les points de lenteurs
• Lighthouse (Chrome seulement) : permet d’analyser les performances, l’accessibilité, le SEO, … et de générer un rapport. (disponible sur Firefox, mais en plusieurs onglets)
• Recorder (Chrome seulement) : permet d’enregistrer des séries d’actions (scénario) et de les rejouer (utiliser pour du test automatiser en général)

Pour aller plus loin

• MDN Web Docs : « Comment fonctionne le Web »
• Chrome DevTools : documentation officielle