Le Web/Structure d'une page web

Structure d'une page web

20 min Cours 4/10

Le modèle Client-Serveur

Quand tu visites un site web, deux acteurs entrent en jeu :

Le Client

Ton navigateur

  • -Envoie des requêtes (demandes)
  • -Reçoit et affiche les pages
  • -Chrome, Firefox, Safari, Edge...

Le Serveur

Machine distante

  • -Stocke les fichiers du site
  • -Répond aux requêtes
  • -Allumé 24h/24, 7j/7

Communication Client-Serveur

CLIENT
Ton navigateur
Requête HTTP
Réponse HTML
SERVEUR
Machine distante

Analogie : C'est comme commander au restaurant. Tu es le client (tu commandes), le serveur est le serveur (il apporte le plat).

Que se passe-t-il quand tu visites un site ?

Étape 1Tu tapes l'URL

Tu écris www.example.com dans ton navigateur

Étape 2Résolution DNS

Le DNS traduit le nom en adresse IP (ex: 93.184.216.34)

Étape 3Connexion au serveur

Ton navigateur contacte le serveur via Internet

Étape 4Requête HTTP

Le navigateur demande la page (GET /index.html)

Étape 5Réponse du serveur

Le serveur renvoie le fichier HTML + CSS + images

Étape 6Affichage

Le navigateur interprète le code et affiche la page

Le DNS : l'annuaire du Web

Le DNS (Domain Name System) traduit les noms de domaine en adresses IP. Car les machines ne comprennent que les chiffres !

www.google.com
DNS
142.250.185.78

C'est comme un annuaire téléphonique : tu cherches "Google" (nom) et tu trouves le numéro (adresse IP) pour appeler.

Les fichiers sur le serveur

Un site web est composé de plusieurs types de fichiers :

.html

Structure et contenu de la page

index.html, contact.html...

.css

Mise en forme et style

style.css, theme.css...

.js

Interactivité et animations

script.js, app.js...

.jpg/.png

Images

logo.png, photo.jpg...

.mp4/.webm

Vidéos

intro.mp4, demo.webm...

.woff/.ttf

Polices de caractères

roboto.woff, arial.ttf...

À toi de jouer !

Utilise les outils développeur de ton navigateur pour voir les échanges client-serveur :

  1. 1Ouvre un site web (ex: wikipedia.org)
  2. 2Appuie sur F12 (ou clic droit → Inspecter)
  3. 3Va dans l'onglet Réseau (Network)
  4. 4Recharge la page et observe tous les fichiers téléchargés !

Question : Combien de requêtes sont nécessaires pour afficher la page d'accueil de Wikipedia ?

Quiz : Teste tes connaissances

5 questions sur le modèle client-serveur

À retenir

  • Le Web fonctionne sur le modèle client-serveur
  • Le client (navigateur) demande, le serveur répond
  • Le DNS traduit les noms de domaine en adresses IP
  • Un site = plusieurs fichiers : HTML, CSS, JS, images...
Pixel