SUPPORT DE COURS — HTML & CSS
Niveau : Première année universitaire
Prof : Mr Jimmy
Objectif : découvrir le Web et créer ses premières pages Web professionnelles.
MODULE 1 — Introduction Générale au Web
🎯 Objectifs d’apprentissage
À la fin de ce module, l’étudiant doit être capable de :
● Comprendre l’origine et l’évolution du Web.
● Expliquer comment fonctionne le Web (client ↔ serveur).
● Comprendre les protocoles HTTP / HTTPS.
● Identifier le rôle d’un navigateur et son moteur de rendu.
● Expliquer ce qu’est un fichier HTML et CSS.
● Comprendre l’importance des normes W3C et de la validation.
I. Histoire du Web
A. Contexte historique
Le Web (World Wide Web) a été inventé par Tim Berners-Lee au CERN en 1989.
Objectif initial: permettre aux chercheurs d’échanger facilement des documents.
B. Évolution en 4 grandes étapes
1. Web 1.0 (1991 – 2004)
● Pages statiques en HTML.
● Très peu d'interactions.
● Navigation simple, textes + images.
2. Web 2.0 (2004 – 2014)
● Apparition des réseaux sociaux. (facebook(2004), YouTube(2005), Twitter(2006),
Linkedin (2003 mais popularisé vers 2010), instagram(2010), etc)
● Sites interactifs. (L’utilisateur n’est plus passif — il devient acteur du site.)
● HTML + CSS + JavaScript.
● Participation de l’utilisateur (blogs, forums…).
3. Web 3.0 (2014 – aujourd'hui)
● Données connectées, IA, personnalisation.
● Sites et applications Web complexes.
4. Web mobile
● Optimisation mobile obligatoire (responsive design).
● Navigation plus rapide et expérience adaptative.
II. Comment fonctionne le Web ?
Le Web fonctionne grâce à un échange entre un client (ordinateur ou smartphone de l’utilisateur) et
un serveur (ordinateur distant qui héberge un site).
A. Le cycle complet d’une requête Web :
1. L’utilisateur saisit une adresse (URL) dans son navigateur.
2. Le navigateur envoie une requête HTTP au serveur.
3. Le serveur reçoit la requête et renvoie une réponse HTTP.
4. La réponse contient :
○ un fichier HTML,
○ parfois des fichiers CSS, images, scripts.
5. Le navigateur interprète ces fichiers et affiche la page.
B. Exemple réel : accéder à [Link]
● Requête envoyée :
GET / HTTP/1.1
● Serveur renvoie :
Un document HTML + feuilles CSS + images + scripts.
● Navigateur affiche :
La page stylisée.
Décomposition simple : GET / HTTP/1.1
✔ GET C’est le type de requête.
● GET = « Je veux récupérer quelque chose »
● Le navigateur demande simplement au serveur :
👉 « Donne-moi cette page pour que je l’affiche. »
Il existe d’autres types de requêtes (POST, PUT, DELETE…), mais GET est la
plus courante.
✔ "/" (la ressource demandée)
Le / signifie :
La page principale du site, c’est-à-dire la page d’accueil, généralement
[Link].
Donc / = « page d’accueil ».
✔ HTTP/1.1
C’est la version du protocole HTTP utilisée.
C’est la langue / règle de communication utilisée entre le navigateur et le
serveur.
● HTTP/1.1 : longtemps la version standard
● HTTP/2 et HTTP/3 sont plus rapides
Explication pour bien visualiser :
Imagine :
● Toi (navigateur) = un client dans une boutique
● Le serveur = un vendeur
👉
Tu dis :
"Je voudrais l’article numéro 1 (la page d’accueil), s’il vous plaît."
C’est GET /.
Le vendeur te répond :
👉 "Voilà !" et te donne la page HTML.
III. HTTP et HTTPS
A. HTTP : HyperText Transfer Protocol
● Protocole principal du Web.
● Permet la communication entre client et serveur.
● Non sécurisé : les données circulent en clair.
Requêtes courantes :
Méthode Utilisation
GET demander une page
POST envoyer des données (formulaire)
PUT modifier
DELETE supprimer
B. HTTPS : HyperText Transfer Protocol Secure
➡️ C’est simplement la version sécurisée de HTTP.
HTTP = envoie les données en clair
HTTPS = envoie les données chiffrées (cryptées)
1. Comment HTTPS sécurise ?
HTTPS utilise deux technologies :
● SSL (ancien nom)
● TLS (nom actuel)
Ces technologies chiffrent la communication entre :
👉 le navigateur (client)
👉 le serveur du site web
✔ Qu’est-ce que “chiffrée” veut dire ?
Cela signifie que :
● les données sont codées
● personne d’autre ne peut les lire
● même si quelqu’un intercepte les données, il voit seulement un texte incompréhensible
Comme si tu mettais la conversation dans une boîte fermée avec un cadenas.
Qu’est-ce qu’un certificat SSL ?
Un certificat SSL est un document numérique installé sur un serveur web.
Il sert à deux choses :
✔ 1. Prouver l’identité du site
→ Comme une carte d’identité pour un site.
Il garantit que tu es en train de parler au vrai site, pas à un pirate.
✔ 2. Activer le chiffrement HTTPS
→ Il permet de créer une connexion sécurisée entre le navigateur et le serveur.
➡️ Sans certificat SSL → impossible d’avoir HTTPS.
Clé publique vs clé privée : explication simple
Le certificat utilise un système appelé cryptographie asymétrique :
🗝️ 2 clés différentes, mais mathématiquement liées :
● Clé publique → peut être distribuée à tout le monde
● Clé privée → gardée secrète par le serveur uniquement
Imagine une boîte aux lettres :
Pour comprendre facilement :
Clé publique = la fente de la boîte aux lettres
Tout le monde peut glisser un message dedans.
Clé privée = la clé de la boîte
Seul le propriétaire peut ouvrir la boîte et lire les messages.
➡️ Tout le monde peut envoyer des données,
➡️ Seul le serveur peut lire les données.
Comment ça fonctionne en vrai ?
1️⃣ Le navigateur arrive sur un site (ex : [Link]
Il demande : “Montre-moi ton certificat SSL !”
2️⃣ Le serveur envoie :
● son certificat SSL
● sa clé publique
3️⃣ Le navigateur vérifie :
● que le certificat n’est pas faux
● qu’il vient d’une autorité de confiance (ex : Google Trust, Let’s Encrypt…)
Si tout est bon → cadenas vert activé.
4️⃣ Ensuite, le navigateur crée une clé secrète temporaire
Il chiffre cette clé avec la clé publique du serveur.
→ Comme mettre un message dans la boîte aux lettres.
5️⃣ Le serveur reçoit la clé chiffrée
Il utilise sa clé privée pour la déchiffrer.
→ Comme ouvrir la boîte avec la clé.
6️⃣ Maintenant, les deux côtés ont la même clé secrète
Cette clé servira à chiffrer toutes les données de la session.
➡️ La communication HTTPS est établie.
Comment ça fonctionne en vrai ?
● Personne ne peut lire les messages → ils sont chiffrés.
● Même si un pirate intercepte la connexion → il ne peut rien faire.
● Personne ne peut imiter le site → certificat validé par une autorité.
La clé privée n’est jamais transmise → elle reste sur le serveur.
Schéma simple (version texte)
Navigateur ───► Demande certificat
Serveur ───► Envoie certificat + clé publique
Navigateur ───► Vérifie le certificat
Navigateur ───► Chiffre une clé secrète avec la clé publique
🔒
Serveur (clé privée) ───► Déchiffre la clé secrète
Connexion sécurisée établie
Résumé:
● Le certificat SSL = la carte d’identité du site
● La clé publique = tout le monde peut l’utiliser
● La clé privée = reste secrète sur le serveur
● Ensemble → ils permettent d’établir une connexion HTTPS sécurisée
2. HTTPS empêche 3 choses importantes
1️⃣ L’interception de données
Sans HTTPS, quelqu’un peut voir :
● ton mot de passe
● tes messages
● les pages que tu visites
● tes informations personnelles
Avec HTTPS ➤ ce n’est pas possible (les données sont illisibles).
2️⃣ La modification des échanges
Sans HTTPS, un pirate pourrait :
● modifier une page web avant qu’elle arrive à ton navigateur
● injecter des publicités
● ajouter des scripts dangereux
HTTPS empêche cela :
➡️ la page qui arrive chez toi est 100% authentique.
3️⃣ L’usurpation
HTTPS prouve que tu parles au vrai serveur, grâce au certificat SSL.
Donc impossible qu’un pirate te fasse croire qu’il est le vrai site.
3.Pourquoi HTTPS est obligatoire aujourd’hui ?
a.Sécurité des utilisateurs
Les sites doivent protéger les données (RGPD, bonnes pratiques).
b.Confiance
Le petit cadenas 🔒 dans la barre d’adresse rassure les visiteurs
.
c.SEO (référencement)
Google pénalise les sites en HTTP.
Les sites en HTTPS sont mieux classés dans les résultats.
d.Navigateurs modernes refusent HTTP
Chrome, Firefox… affichent : ⚠️ "Site non sécurisé"
Résumé :
HTTP HTTPS
Pas sécurisé ❌ Sécurisé ✔
Données en clair Données chiffrées
Peut être intercepté Impossible à lire
Peut être modifié Intégrité garantie
Mauvais pour SEO Bon pour SEO
Déconseillé Obligatoire
IV. Serveur vs Client
A. Le CLIENT (navigateur)
● Envoie des requêtes.
● Affiche le résultat.
● Ne stocke pas le site, seulement une copie temporaire (cache).
B. Le SERVEUR (hébergeur)
● Stocke les fichiers du site.
● Exécute du code si nécessaire (PHP, Python…).
● Renvoie les fichiers demandés.
Interaction Client ↔ Serveur (schéma expliqué)
Client :
→ Demande [Link]
Serveur :
→ Cherche le fichier
→ Renvoie [Link]
Client :
→ Télécharge les fichiers liés (CSS, images, JS)
V. Rôle du navigateur Web
Le navigateur (Chrome, Firefox, Safari…) a 4 missions :
1. Interpréter le HTML c’est à dire définir la structure d’une page
2. Appliquer le CSS c’est à dire donner la mise en forme
3. Exécuter le JavaScript c'est-à-dire permettre les interactions (menus, animations…)
4. Rendre graphiquement la page grâce au moteur de rendu.
Moteurs de rendu célèbres
Navigateur Moteur
Chrome / Edge Blink
Firefox Gecko
Safari WebKit
Ces moteurs :
● lisent le HTML,
● analysent le CSS,
● construisent le DOM,
● affichent le résultat à l’écran.
DOM (Document Object Model) ?
● Le DOM est une version organisée de la page HTML
● Construire le DOM = transformer le code HTML en une arborescence logique
● C’est cette version que le navigateur utilise pour afficher le site
● Chaque balise HTML devient un élément du DOM
Exemple simple :
→ HTML écrit par le développeur :
<body>
<h1>Titre</h1>
<p>Bonjour !</p>
</body>
→ Le navigateur transforme ça en un arbre :
Document
└── html
└── body
├── h1
│ └── "Titre"
└── p
└── "Bonjour !"
➡️ Cet arbre = le DOM
VI. Qu’est-ce qu’un fichier HTML / CSS ?
A. HTML — HyperText Markup Language
C’est le langage de structure :
Il permet de définir :
● titres,
● paragraphes,
● images,
● liens,
● sections,
● formulaires…
⚠️ HTML ne gère pas l’apparence, seulement la structure.
Exemple minimal :
<h1>Bienvenue</h1>
<p>Ceci est un texte.</p>
B. CSS — Cascading Style Sheets
C’est le langage de style.
Il permet :
● les couleurs,
● les polices,
● les marges,
● le positionnement,
● la mise en page.
Exemple :
h1 {
color: blue;
text-align: center;
}
VII. Normes W3C et validation
A. W3C (World Wide Web Consortium)
Organisation internationale qui :
● définit les standards Web,
● garantit la compatibilité entre navigateurs,
● gère HTML, CSS, SVG, API Web…
Objectif :
➡️ un Web ouvert, accessible, fonctionnel pour tous.
B. Pourquoi respecter les normes ?
● Meilleure compatibilité entre navigateurs.
● Meilleur référencement.
● Accès facilité pour les personnes handicapées (accessibilité).
● Moins d’erreurs et de comportements imprévisibles.
C. Outil de validation ?
W3C Validator ([Link]
Permet de vérifier si votre HTML est correct.
Détecte :
● erreurs de balises,
● attributs incorrects,
● structure non conforme.
🎯 Résumé du Module 1
Concept Description
Web Réseau de documents accessibles par URL
HTTP Protocole non sécurisé
HTTPS Protocole sécurisé
Client Navigateur de l’utilisateur
Serveur Machine qui héberge le site
HTML Structure
CSS Mise en forme
W3C Standards et vérification