Protocole HTTP &
Module Programmation Web 1
Lotfi NAJDI
Faculté Polydisciplinaire de Taroudant
Licence Génie Informatique
2025-2026
Pourquoi Comprendre HTTP ?
Nécessaire pour le développement web (front-end, back-end, full-stack)
Permet de diagnostiquer et résoudre des problèmes (erreurs 404, 500…)
Indispensable pour tester et intégrer des APIs (via Postman, cURL…)
Comprendre comment le web fonctionne réellement
2
HTTP, c’est quoi ? (définition simple)
HTTP = HyperText Transfer Protocol
Un protocole = des règles de communication
HTTP est le protocole pour le web
Il permet à :
→ un client (navigateur, app, script…)
→ un serveur (site web, API)
de s’échanger :
→ des requêtes (requests)
→ des réponses (responses)
Communication Client-Serveur
Unsupported markdown:
list
👤 Client
🖥️ Serveur Web
(Navigateur)
Unsupported markdown:
list
4
Analogie : la lettre 📬
💡 Pense à une lettre postale
Tu écris une lettre à une entreprise → requête HTTP
L’entreprise lit et renvoie une réponse
Chaque page / image / fichier téléchargé = une nouvelle “lettre”
HTTP standardise :
comment écrire l’adresse (URL)
comment présenter la demande (méthode, headers…)
comment formuler la réponse (statut, contenu…)
Client & serveur
Client :
→ ton navigateur (Chrome, Firefox…)
→ ou un script (JS, Python, Postman, curl…)
Serveur :
→ machine qui héberge le site / l’API
Cycle :
1. Client envoie une requête HTTP
2. Serveur renvoie une réponse HTTP
6
Vue d’ensemble : requête & réponse
Requête HTTP (client → serveur) :
Ligne de début (méthode, chemin, version)
Headers (métadonnées)
Ligne vide
Body (optionnel)
Réponse HTTP (serveur → client) :
Ligne de statut (version, code, message)
Headers
Ligne vide
Body (souvent le contenu : HTML, JSON, image…)
7
Anatomie complète : Requête & Réponse
📤 REQUÊTE HTTP
Ligne de requête En-têtes Corps (optionnel)
GET /users HTTP/1.1 Host, User-Agent, Accept... Données formulaire, JSON...
📥 RÉPONSE HTTP
En-têtes
Ligne de statut Corps
Content-Type, Content-
HTTP/1.1 200 OK HTML, JSON, Images...
Length...
8
Anatomie d’une requête HTTP
Exemple :
1 GET /profile?tab=posts HTTP/1.1
2 Host: [Link]
3 User-Agent: Firefox
4 Accept: text/html
🎯 Composants :
Ligne de requête : GET /profile?tab=posts HTTP/1.1
Headers : Host, User-Agent, Accept, etc.
Ligne vide
Body (facultatif) : pour certaines méthodes (POST, PUT…)
Ligne de requête
1 GET /profile?tab=posts HTTP/1.1
Méthode : GET
→ ce que le client veut faire (GET, POST, PUT, DELETE…)
Chemin + query : /profile?tab=posts
→ ressource cible sur ce serveur
Version : HTTP/1.1
→ version du protocole
10
Les méthodes HTTP (vision débutant)
GET → récupérer une ressource (lecture)
POST → envoyer des données (form, création)
PUT / PATCH → modifier une ressource (plus tard)
DELETE → supprimer (plus tard)
👉 Pour démarrer, pense surtout à :
GET = “donne-moi”
POST = “je t’envoie ça”
11
Chemin & query string
Dans :
1 GET /search?q=chatgpt&page=2 HTTP/1.1
Chemin = /search
Query string = ?q=chatgpt&page=2
→ paires clé=valeur
→ séparées par &
📝 Analogie
Chemin = le service (“Service Client”)
Query string = les détails de ta demande (mot-clé, page…)
12
Headers : c’est quoi ? (définition)
📝 C’est quoi un en-tête ?
Un header HTTP est une ligne Nom: Valeur qui donne une information supplémentaire sur la requête ou
la réponse.
Ils sont toujours avant le body
Ils décrivent :
→ qui envoie la requête
→ ce qu’il accepte
→ le type de contenu envoyé
→ authentification, cookies, etc.
13
Analogie : étiquette sur un colis 📦
Headers = étiquette sur un colis
Adresse, expéditeur, type de contenu → headers
Ce qu’il y a dans le colis → body
Les headers sont des métadonnées (= informations sur les données)
14
Types de headers (vision simple)
15
Headers de requête importants
Host: [Link]
→ le site demandé
User-Agent: Mozilla/5.0 ...
→ info sur le client (navigateur, OS…)
Accept: text/html, application/json, ...
→ ce que le client préfère recevoir
Accept-Language: fr,en;q=0.8
→ langues préférées
Content-Type: ...
→ si on envoie un body (form, JSON…)
16
Headers de réponse importants
Content-Type: text/html
→ type du contenu envoyé (HTML, JSON, image…)
Content-Length: 1234
→ taille du body en octets
Set-Cookie: ...
→ le serveur demande au client de stocker un cookie
Cache-Control: ...
→ comment et combien de temps on peut mettre en cache
Location: ...
→ pour les redirections (avec code 3xx)
17
Le body (corps de message)
Le body est la partie qui contient les données :
Côté requête :
→ souvent pour POST, PUT, PATCH
→ ex : données de formulaire, JSON, fichier…
Côté réponse :
→ souvent le contenu demandé
→ ex : HTML, JSON, image, CSS…
⚠️ Important
Il faut indiquer le type avec Content-Type, sinon l’autre côté ne sait pas comment le lire.
18
Anatomie d’une réponse HTTP
Exemple :
1 HTTP/1.1 200 OK
2 Content-Type: text/html; charset=UTF-8
3 Content-Length: 1234
4
5 <html>...</html>
Ligne de statut : HTTP/1.1 200 OK
Headers : Content-Type, Content-Length, etc.
Ligne vide
Body : contenu (HTML ici)
19
Ligne de statut & codes
1 HTTP/1.1 200 OK
Version : HTTP/1.1
Code de statut : 200
Message : OK (texte humain)
Familles de codes :
2xx → succès
3xx → redirection
4xx → erreur côté client
5xx → erreur côté serveur
20
Exemples de codes
200 OK → tout va bien
201 Created → ressource créée (POST réussi)
301 Moved Permanently → redirection permanente
302 Found → redirection temporaire
400 Bad Request → requête mal formée
401 Unauthorized → problème d’authentification
403 Forbidden → interdit
404 Not Found → ressource inexistante
500 Internal Server Error → bug côté serveur
21
Question 💡
En tes mots :
404 Not Found signifie :
→ “Le serveur a été contacté, mais … ?”
500 Internal Server Error signifie :
→ “Le serveur a essayé de répondre, mais … ?”
👉 Laisser les apprenants répondre avant d’expliquer.
22
GET vs POST (vision simple)
GET
→ Demande de lecture
→ “Donne-moi cette ressource”
→ Paramètres dans l’URL (query string)
→ Ne doit pas modifier de données (en théorie)
POST
→ Envoi de données au serveur
→ Formulaires, création de compte, login
→ Données dans le body
→ Peut modifier l’état du serveur
23
Exemple : login (GET ou POST ?)
Formulaire de login (email + password) :
Tu enverrais ça en GET ou en POST ?
Pourquoi ?
Réponse attendue : POST
pas dans l’URL (moins exposé)
body adapté à l’envoi de données
action qui peut changer l’état (session, connexion…)
24
GET avec paramètres (query string)
URL :
1 [Link]
Après ? → query string
→ q=chatgpt
→ page=2
Séparateur → &
Requête :
1 GET /search?q=chatgpt&page=2 HTTP/1.1
2 Host: [Link]
25
Formulaire HTML → GET
1 <form method="get" action="/search">
2 <label>
3 Search:
4 <input type="text" name="q">
5 </label>
6
7 <label>
8 Page:
9 <input type="number" name="page" value="1">
10 </label>
11
12 <button type="submit">Go</button>
13 </form>
Le navigateur construit l’URL :
→ /search?q=VAL&page=VAL
Paramètres visibles dans l’URL.
26
POST simple (form urlencoded)
Formulaire :
1 <form method="post" action="/signup">
2 <input type="text" name="name">
3 <input type="email" name="email">
4 <input type="date" name="birthdate">
5 <button type="submit">Sign up</button>
6 </form>
Requête (simplifiée) :
1 POST /signup HTTP/1.1
2 Host: [Link]
3 Content-Type: application/x-www-form-urlencoded
4
5 name=Alice&email=alice%[Link]&birthdate=2000-01-01
27
Content-Type : définition
Content-Type = header qui précise le format des données dans le body.
Exemples :
text/html → page HTML
application/json → JSON
image/png → image
application/x-www-form-urlencoded → form encodé
multipart/form-data → form + fichiers
👉 Il permet à l’autre côté de savoir comment lire / parser le body.
28
Content-Type dans les réponses
Exemples :
1 HTTP/1.1 200 OK
2 Content-Type: text/html
1 Content-Type: text/css
2 Content-Type: application/javascript
3 Content-Type: image/png
4 Content-Type: application/json
Le client choisit le bon traitement :
→ afficher HTML
→ interpréter CSS
→ exécuter JS
→ parser JSON…
29
Content-Type dans les requêtes (POST)
Les cas les plus fréquents :
application/x-www-form-urlencoded
→ formulaires simples (sans fichier)
multipart/form-data
→ formulaires avec fichiers (<input type="file">)
application/json
→ appels d’API depuis du code (fetch JS, Python…)
30
POST + fichier (CV)
Formulaire :
1 <form method="post" action="/apply"
2 enctype="multipart/form-data">
3 <input type="text" name="name">
4 <input type="email" name="email">
5 <input type="file" name="cv">
6 <button type="submit">Send</button>
7 </form>
Le navigateur envoie (simplifié) :
1 POST /apply HTTP/1.1
2 Content-Type: multipart/form-data; boundary=----XYZ
3
4 ------XYZ
5 Content-Disposition: form-data; name="name"
6
7 Alice
8 ------XYZ
9 Content-Disposition: form-data; name="cv";
10 filename="[Link]"
11
12 ...données du fichier...
13 ------XYZ--
31
Analogie : multipart/form-data
💡 Imagine une boîte à compartiments 🧺
Chaque compartiment = un champ (name, email, cv)
Le boundary = les cloisons entre les compartiments
Le serveur ouvre la boîte et lit chaque compartiment
32
Fiche mémo Content-Type (débutant)
Réponses serveur :
text/html → page web
application/json → données d’API
image/png → image
Requêtes POST :
Form simple → application/x-www-form-urlencoded
Form + fichier → multipart/form-data
API JSON → application/json
33
🎯 Exercice 1 : Identifier les composants
Regarde cette requête :
1 POST /api/users HTTP/1.1
2 Host: [Link]
3 Content-Type: application/json
4 Content-Length: 45
5
6 {"name":"Alice","email":"alice@[Link]"}
Questions :
1. Quelle est la méthode ?
2. Quel est le chemin ?
3. Quel est le Content-Type ?
4. Que contient le body ?
34
🎯 Exercice 2 : GET ou POST ?
Pour chaque cas, choisis GET ou POST :
1. Afficher la page d’accueil d’un site
2. Soumettre un formulaire de contact
3. Télécharger une image
4. Créer un nouveau compte utilisateur
5. Rechercher des articles par mot-clé
6. Uploader un fichier
35
🎯 Exercice 3 : Construire une URL GET
Tu as un formulaire de recherche avec :
query = “javascript”
category = “tutorials”
sort = “recent”
Construis l’URL complète pour :
1 [Link]
Réponse : [Link]
query=javascript&category=tutorials&sort=recent
36
🎯 Exercice 4 : Choisir le Content-Type
Quel Content-Type pour chaque cas ?
1. Envoyer {"user":"alice","age":25} via POST
2. Soumettre un form avec nom + email (sans fichier)
3. Envoyer un form avec CV en PDF
4. Réponse serveur contenant du HTML
Réponses :
1. application/json
2. application/x-www-form-urlencoded
3. multipart/form-data
4. text/html
37
💻 Exercice 5 : DevTools Challenge
💡 Mission
Ouvre les DevTools de ton navigateur (F12) et trouve :
1. L’onglet Network (Réseau)
2. Recharge une page web et observe les requêtes
3. Clique sur une requête et trouve :
Le code de statut HTTP
L’en-tête Content-Type
Le temps de réponse
La taille de la réponse
💡 Astuce : Essaye sur [Link] pour voir de nombreuses
requêtes ! 38
Mini projet : 3 forms → 1 serveur test
On utilise [Link] pour tester :
Service éducatif simple pour tester HTTP
Renvoie ce qu’on lui envoie (echo)
3 formulaires :
1. Form GET → [Link]
2. Form POST simple → [Link]
3. Form POST + fichier → [Link]
39
Mini projet – structure du fichier
Fichier : [Link]
1 <!DOCTYPE html>
2 <html lang="fr">
3 <head>
4 <meta charset="UTF-8">
5 <title>Mini projet HTTP + forms</title>
6 <style>
7 body {
8 font-family: system-ui, sans-serif;
9 max-width: 800px;
10 margin: 2rem auto;
11 padding: 0 1rem;
12 line-height: 1.6;
13 }
14 section {
15 margin-bottom: 2rem;
16 padding: 1.5rem;
17 border: 2px solid #e0e0e0;
18 border-radius: 8px;
19 background: #f9f9f9;
40
Mini projet – structure (suite)
1 label {
2 display: flex;
3 flex-direction: column;
4 gap: 0.25rem;
5 }
6 input, button {
7 padding: 0.5rem;
8 font-size: 1rem;
9 border: 1px solid #ccc;
10 border-radius: 4px;
11 }
12 button {
13 background: #007bff;
14 color: white;
15 border: none;
16 cursor: pointer;
17 font-weight: 600;
18 }
19 button:hover { background: #0056b3; }
41
Mini projet – form 1 : GET (recherche)
1 <section id="search">
2 <h2>1️⃣ Recherche (GET avec paramètres)</h2>
3 <p>
4 Ce formulaire envoie une requête <code>GET</code> vers
5 <code>[Link]
6 </p>
7
8 <form method="get" action="[Link]
9 <label>
10 Terme de recherche (<code>q</code>) :
11 <input type="text" name="q"
12 placeholder="javascript" required>
13 </label>
14
15 <label>
16 Page (<code>page</code>) :
17 <input type="number" name="page"
18 value="1" min="1">
19 </label>
42
Mini projet – form 2 : POST simple
1 <section id="signup">
2 <h2>2️⃣ Inscription (POST simple, urlencoded)</h2>
3 <p>
4 Ce formulaire envoie une requête <code>POST</code> vers
5 <code>[Link]
6 </p>
7
8 <form method="post"
9 action="[Link]
10 <label>
11 Nom complet (<code>name</code>) :
12 <input type="text" name="name"
13 placeholder="Alice Durand" required>
14 </label>
15
16 <label>
17 Email (<code>email</code>) :
18 <input type="email" name="email"
19 placeholder="alice@[Link]" required>
43
Mini projet – form 2 : POST simple (suite)
1 <label>
2 Date de naissance (<code>birthdate</code>) :
3 <input type="date" name="birthdate" required>
4 </label>
5
6 <button type="submit">
7 ✅ S'inscrire (POST)
8 </button>
9 </form>
10
11 <p><small>
12 👀 Observe : Content-Type =
13 application/x-www-form-urlencoded
14 </small></p>
15 </section>
44
Mini projet – form 3 : POST + fichier
1 <section id="apply">
2 <h2>3️⃣ Candidature (POST + fichier CV)</h2>
3 <p>
4 Ce formulaire envoie une requête <code>POST</code> avec
5 un fichier (<code>multipart/form-data</code>).
6 </p>
7
8 <form method="post"
9 action="[Link]
10 enctype="multipart/form-data">
11 <label>
12 Nom complet (<code>name</code>) :
13 <input type="text" name="name"
14 placeholder="Bob Martin" required>
15 </label>
16
17 <label>
18 Email (<code>email</code>) :
19 <input type="email" name="email"
45
Mini projet – form 3 : POST + fichier (suite)
1 <label>
2 CV (<code>cv</code>, fichier PDF/DOC) :
3 <input type="file" name="cv"
4 accept=".pdf,.doc,.docx" required>
5 </label>
6
7 <button type="submit">
8 📤 Envoyer la candidature
9 </button>
10 </form>
11
12 <p><small>
13 👀 Observe : Content-Type = multipart/form-data
14 + boundary
15 </small></p>
16 </section>
17 </body>
18 </html>
46
Mini projet – que regarder dans DevTools ?
Pour chaque formulaire :
1. Ouvre DevTools (F12 ou Ctrl+Shift+I / Cmd+Option+I)
2. Va dans l’onglet Network
3. Soumets le formulaire
4. Clique sur la requête correspondante
Regarde :
Request Method (GET / POST)
Request URL (avec ou sans query string)
Request Headers → Content-Type
Onglet Payload (données envoyées)
Response (JSON renvoyé par httpbingo)
47
Avantages de DevTools
Accessibilité : Aucun besoin d’installer des outils supplémentaires
Interactivité : Modifie les requêtes en temps réel
Visualisation complète : Tous les aspects des échanges HTTP
→ Timings (temps de réponse)
→ Headers complets
→ Contenu du body
48
curl : qu’est-ce que c’est ?
cURL est un outil en ligne de commande permettant de transférer des
données via URLs.
📝 Pourquoi utiliser curl ?
Interagir avec des ressources web depuis un terminal
Tester des API
Télécharger des fichiers
Automatiser des requêtes HTTP
Syntaxe de base :
1 curl [options] [URL]
49
curl : exemple basique
Récupérer une page web :
1 curl [Link]
Récupère le contenu HTML de la page Wikipédia “React”
Affiche le code HTML brut dans le terminal
50
curl : voir les headers (-v)
1 curl -v [Link]
L’option -v (verbose) affiche :
→ Requête envoyée (headers)
→ Réponse reçue (status, headers, body)
Exemple de sortie :
1 > GET /wiki/React HTTP/1.1
2 > Host: [Link]
3 > User-Agent: curl/7.68.0
4 > Accept: */*
5
6 < HTTP/1.1 200 OK
7 < Content-Type: text/html; charset=UTF-8
8 < Date: Thu, 05 Dec 2024 12:34:56 GMT
51
curl : voir seulement les headers (-I)
1 curl -I [Link]
L’option -I (HEAD request) :
→ Ne récupère que les headers
→ Pas le body (plus rapide)
Utile pour :
Vérifier qu’une ressource existe
Voir le Content-Type
Vérifier les codes de statut
52
curl : même requête, en ligne de commande
GET avec paramètres :
1 curl "[Link]
POST form simple :
1 curl -X POST "[Link] \
2 -H "Content-Type: application/x-www-form-urlencoded" \
3 --data "name=Alice&email=alice@[Link]"
53
curl : POST avec fichier
Supposons un fichier [Link] :
1 curl -X POST "[Link] \
2 -F "name=Bob" \
3 -F "email=bob@[Link]" \
4 -F "cv=@[Link]"
-F → envoie un formulaire multipart
cv=@[Link] → attache le fichier
curl gère les headers automatiquement
54
💻 Exercice 6 : Explorer avec cURL
Essaye ces commandes dans ton terminal :
⚠️ Note Windows PowerShell
Sur PowerShell, les guillemets dans le JSON doivent être échappés avec \"
1 # 1. Récupérer des données utilisateur
2 curl [Link]
3
4 # 2. Voir uniquement les headers
5 curl -I [Link]
6
7 # 3. Créer un nouveau post (Windows PowerShell)
8 curl -X POST [Link] `
9 -H "Content-Type: application/json" `
10 -d '{\"title\":\"Test\",\"body\":\"Contenu\",\"userId\":1}'
55
Postman : qu’est-ce que c’est ?
Postman est un outil graphique pour tester les API.
💡 Avantages de Postman
Interface visuelle (plus simple que curl)
Sauvegarde des requêtes
Collections organisées
Tests automatisés
Documentation API
56
Postman : exemple GET
Étapes :
1. Créer une nouvelle requête
2. Choisir la méthode : GET
3. URL : [Link]
4. Cliquer sur Send
5. Observer la réponse JSON
57
Postman : exemple POST
Étapes :
1. Méthode : POST
2. URL : [Link]
3. Onglet Body → raw → JSON
4. Corps :
1 {
2 "title": "Mon premier article",
3 "body": "Contenu de l'article",
4 "userId": 1
5 }
5. Cliquer sur Send
6. Vérifier le code 201 Created
58
💻 Exercice 7 : Postman API Challenge
Utilise Postman pour tester l’API [Link] :
1. GET /posts - Récupère la liste des articles
2. GET /posts/1 - Récupère un article spécifique
3. POST /posts - Crée un nouvel article
4. PUT /posts/1 - Modifie un article existant
5. DELETE /posts/1 - Supprime un article
📝 Note : Les codes de statut pour chaque opération (200, 201, etc.)
59
4 façons de voir la même chose
1. Navigateur + formulaire HTML
2. DevTools Network (requête brute)
3. curl (ligne de commande)
4. Postman (interface graphique)
Mais toujours les mêmes concepts :
méthode (GET / POST…)
URL (chemin + query)
headers (dont Content-Type)
body
code de statut
60
Quiz final 🧠 (1/2)
Pour chaque cas, choisis GET ou POST :
1. Chercher un article par mot-clé (lecture seule)
2. Créer un compte utilisateur
3. Télécharger un PDF public (pas d’auth)
4. Envoyer un message via formulaire de contact
5. Envoyer un CV avec un formulaire
Réponses : 1. GET, 2. POST, 3. GET, 4. POST, 5. POST
61
Quiz final 🧠 (2/2)
Relie les éléments :
application/json
multipart/form-data
application/x-www-form-urlencoded
à:
A. Formulaire avec upload de CV
B. Formulaire simple sans fichier
C. Requête API envoyée par JavaScript
Réponses :
application/json → C
multipart/form-data → A
application/x-www-form-urlencoded → B
62
Récap pour débutants ✅
Tu connais maintenant :
HTTP = protocole client ↔︎ serveur
Anatomie d’une requête (ligne, headers, body)
Anatomie d’une réponse (statut, headers, body)
GET vs POST
Content-Type et pourquoi il est crucial
Forms HTML & fichiers
7 exercices progressifs pour pratiquer
Mini projet HTML avec 3 types de forms
Observation avec DevTools, curl, Postman
63
Prochaine étape 🚀
Faire des requêtes API JSON en JavaScript avec fetch()
Compétences acquises aujourd’hui :
✅ Comprendre HTTP
✅ Créer des formulaires
✅ Utiliser les DevTools
✅ Tester avec curl & Postman
64
Ressources complémentaires 📚
Sites de test académiques :
[Link] (simple, éducatif)
[Link] (API REST fictive)
[Link] (API REST de test)
Documentation :
MDN Web Docs : HTTP
MDN : Formulaires HTML
Outils :
Chrome DevTools
Postman / Insomnia
curl
65