Internet, HTTP et le web

Section 11.1.2 : Internet, HTTP et le web

🎯 Objectif pédagogique

Comprendre comment internet fonctionne — du câble physique au protocole HTTP — et comment un navigateur affiche une page web. Vous serez capable d'expliquer la différence entre internet et le web, de décrire le parcours d'une requête HTTP, et de comprendre pourquoi ces concepts sont fondamentaux pour tout développeur web.

Le jour où Marc a compris internet

Quand Marc travaillait en finance, il considérait internet comme une boîte noire : il tapait une URL, la page s'affichait. Point. Le jour où un collègue développeur lui a dit "ton navigateur envoie une requête GET au serveur qui répond avec du HTML", il n'a rien compris. Cette section démystifie tout cela — parce qu'on ne peut pas construire des applications web sans comprendre comment le web fonctionne.

Internet ≠ le web

C'est la confusion la plus courante :

• →Internet : Le réseau physique mondial (câbles, routeurs, satellites) qui connecte des milliards de machines. Inventé dans les années 1960 (ARPANET).
• →Le Web (World Wide Web) : Un service qui fonctionne sur internet. Inventé en 1989 par Tim Berners-Lee au CERN. C'est le système de pages liées par des hyperliens.

D'autres services utilisent internet sans être "le web" :

• →Email (protocole SMTP) — existe depuis 1971
• →Messagerie instantanée (protocoles XMPP, Signal)
• →Streaming vidéo (protocoles RTMP, HLS)
• →Transfert de fichiers (protocole FTP)
• →Jeux en ligne (protocoles UDP custom)

Le parcours d'une requête web

Quand Marc tape https://learn-prompting.fr dans son navigateur, voici ce qui se passe :

Étape 1 : Résolution DNS

Votre navigateur ne comprend pas learn-prompting.fr. Il a besoin d'une adresse IP (comme un numéro de téléphone). Le DNS (Domain Name System) est l'annuaire d'internet qui traduit les noms en adresses :

learn-prompting.fr  →  76.223.105.42
google.com          →  142.250.179.110
github.com          →  20.27.177.113

Étape 2 : Connexion TCP/TLS

Le navigateur établit une connexion sécurisée avec le serveur :

1. →TCP (Transmission Control Protocol) : garantit que les données arrivent complètes et dans l'ordre
2. →TLS (Transport Layer Security) : chiffre la connexion (le "s" de https://)

Étape 3 : Requête HTTP

Le navigateur envoie une requête HTTP au serveur. HTTP (HyperText Transfer Protocol) est le langage que parlent les navigateurs et les serveurs web.

GET / HTTP/2
Host: learn-prompting.fr
Accept: text/html
User-Agent: Chrome/124.0
Accept-Language: fr-FR

Les méthodes HTTP définissent l'action demandée :

Étape 4 : Réponse du serveur

Le serveur traite la requête et renvoie une réponse :

HTTP/2 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 52847

<!DOCTYPE html>
<html lang="fr">
  <head><title>LearnIA</title></head>
  <body>...</body>
</html>

Les codes de statut HTTP indiquent le résultat :

Astuce de Marc : "Les codes 4xx = c'est ma faute (mauvaise URL, pas les droits). Les codes 5xx = c'est la faute du serveur (bug, panne)."

Étape 5 : Rendu dans le navigateur

Le navigateur reçoit le HTML et construit la page visible :

1. →Parser le HTML → construire le DOM (Document Object Model)
2. →Parser le CSS → appliquer les styles visuels
3. →Exécuter le JavaScript → ajouter l'interactivité
4. →Afficher le résultat → pixels à l'écran

Frontend vs Backend

URLs et anatomie d'une adresse web

https://learn-prompting.fr/guides/generative-ai-introduction?tab=learn#section-3
└─┬──┘  └──────┬─────────┘└──────────┬──────────────────┘ └───┬───┘ └───┬────┘
protocole    domaine              chemin (path)           paramètre   ancre

• →Protocole : https:// — communication sécurisée
• →Domaine : learn-prompting.fr — le "nom" du serveur
• →Chemin : /guides/generative-ai-introduction — quelle page
• →Paramètre : ?tab=learn — données supplémentaires
• →Ancre : #section-3 — position dans la page

🏋️ Exercice pratique (15 minutes)

Objectif : Observer une vraie requête HTTP avec les DevTools du navigateur.

1. →Ouvrez Chrome et allez sur https://learn-prompting.fr
2. →Appuyez sur F12 pour ouvrir les DevTools
3. →Cliquez sur l'onglet "Network" (Réseau)
4. →Rechargez la page (Ctrl+R)
5. →Observez la cascade de requêtes :
   • →La première ligne est la requête HTML principale
   • →Cliquez dessus → onglet "Headers" : trouvez la méthode (GET), le code de statut (200)
   • →Onglet "Response" : c'est le HTML brut reçu du serveur
6. →Comptez le nombre total de requêtes et la taille totale transférée
7. →Trouvez au moins une requête avec un code différent de 200

Marc a été stupéfait de voir que charger une simple page web générait 47 requêtes HTTP. "En finance, une requête Bloomberg = un résultat. Sur le web, une page = des dizaines de fichiers téléchargés en parallèle."