🎞️ Voir le diaporama

Introduction et fondamentaux du Web¶

Avant d’écrire la moindre ligne de code, il faut comprendre dans quel environnement on travaille. Ce chapitre répond à des questions que l’on se pose rarement parce que tout semble « marcher tout seul » : qu’est-ce qu’une page web au juste ? Que se passe-t-il entre le moment où l’on tape une adresse et celui où la page s’affiche ? Et quel est exactement le rôle du navigateur ?

Qu’est-ce qu’une page web ?¶

« Une page web est une unité de consultation du World Wide Web. Conçue pour être consultée avec un navigateur web et identifiée par une adresse web, elle peut être statique ou dynamique. » (Wikipedia)

Derrière cette définition un peu formelle se cache quelque chose de très simple. En pratique, une page web est un fichier — ou plus souvent un ensemble de fichiers — que le navigateur récupère via Internet et qu’il « rend » sous forme de texte, d’images, de vidéos ou d’interactions. Le navigateur ne reçoit donc pas une image figée de la page : il reçoit une description qu’il doit lui-même transformer en affichage. Cette distinction est fondamentale, et c’est elle qui explique tout le reste.

Architecture simplifiée du Web¶

Le Web repose sur un échange permanent entre deux acteurs : celui qui demande du contenu et celui qui le fournit. On parle de modèle client-serveur. Trois éléments suffisent à décrire ce fonctionnement.

Élément	Rôle	Exemple concret
Client	Navigateur qui demande et affiche le contenu	Firefox, Chrome, Safari, Edge
Serveur	Machine qui héberge les fichiers et les renvoie	Serveur web Apache, Nginx
URL	Adresse unique qui identifie la ressource	https://exemple.com/index.html

Le client formule une demande, le serveur y répond en envoyant les fichiers correspondants, et l’URL joue le rôle d’adresse postale : elle désigne sans ambiguïté la ressource voulue.

Statique ⟷ Dynamique¶

Toutes les pages ne sont pas fabriquées de la même manière. On distingue deux grandes familles, selon la façon dont leur contenu est produit.

Type	Description	Fichiers
Statique	Le contenu ne change pas sans intervention manuelle	Un fichier `index.html` + `style.css` livrés tels quels
Dynamique	Le contenu est généré à la volée	Scripts côté serveur (PHP, Node.js, Python)

Une page statique est livrée telle qu’elle a été écrite : le serveur se contente de renvoyer les fichiers. Une page dynamique, à l’inverse, est assemblée au moment de la demande, souvent à partir d’une base de données — c’est ce qui permet d’afficher votre fil d’actualité ou votre panier d’achats, différents pour chaque visiteur.

Pour ce cours, nous ne traiterons que le statique : uniquement HTML + CSS. C’est la base indispensable, et tout ce que vous apprendrez ici reste valable lorsque l’on passe au dynamique.

HTML et CSS : décrire la page¶

Des rôles complémentaires¶

Les deux langages se partagent le travail de manière étanche, et c’est précisément ce qui rend le code propre et maintenable.

Le HTML décrit la structure : titres, paragraphes, images, liens…
Le CSS décrit la présentation : couleurs, marges, polices, dispositions…

L’intérêt de cette séparation est qu’on peut entièrement changer l’apparence d’un site sans toucher à son contenu, et inversement. C’est l’un des grands principes du Web moderne, sur lequel nous reviendrons.

Le navigateur interprète ces fichiers¶

Quand le navigateur reçoit ces fichiers, il les traite en plusieurs étapes :

Il analyse (parse) le HTML et en construit le DOM (Document Object Model), une représentation arborescente de la structure.
Il analyse le CSS et en construit le CSSOM (CSS Object Model), l’équivalent pour les styles.
Il combine DOM + CSSOM pour produire le Render Tree, l’arbre de ce qui sera réellement affiché.
Il calcule le layout (positions et tailles), puis procède au paint (la peinture des pixels) et enfin à l’affichage.

Vous n’avez pas besoin de retenir ce mécanisme dans le détail dès maintenant, mais gardez en tête cette idée : le navigateur reconstruit la page à partir d’une description. C’est cette reconstruction que nous allons apprendre à piloter.

Le navigateur : un exécutant¶

Le navigateur agit comme un exécutant d’une description. On lui fournit un plan — voici les éléments, voici leur apparence — et il le réalise fidèlement.

⚠️ Point important : il n’y a pas de contrôle de flux (boucles, conditions) comme dans un programme classique. On ne dit pas au navigateur « tant que… fais… », on lui décrit un état final.

C’est pourquoi HTML et CSS sont des langages déclaratifs, et non impératifs : on déclare ce que l’on veut obtenir au lieu de détailler la suite d’instructions pour y parvenir. La logique de programmation, avec ses boucles et ses conditions, viendra plus tard avec JavaScript.

Cycle de vie d’une page web¶

On peut maintenant relier tout ce qui précède en suivant le parcours complet, depuis le clic de l’utilisateur jusqu’à l’affichage.

1. Utilisateur demande une page (URL)
   ↓
2. Navigateur contacte le serveur (DNS → IP)
   ↓
3. Requête HTTP envoyée
   ↓
4. Serveur renvoie la réponse (HTML)
   ↓
5. Téléchargement des ressources (CSS, images, JS)
   ↓
6. Construction du DOM et du CSSOM
   ↓
7. Création du Render Tree
   ↓
8. Calcul du layout (positions, tailles)
   ↓
9. Peinture (painting) → Affichage final

L’étape 2 mérite un mot : l’URL contient un nom de domaine (comme exemple.com), mais le réseau, lui, fonctionne avec des adresses numériques (les adresses IP). Le DNS est l’annuaire qui fait la traduction de l’un vers l’autre, à la manière d’un répertoire téléphonique.

Les langages du Web¶

Le HTML et le CSS ne travaillent pas seuls. Ils s’inscrivent dans un petit écosystème de langages, chacun avec un rôle bien défini.

Catégorie	Langage(s)	Rôle
Langage de balisage	HTML	Décrit la structure du document
Langage de feuille de style	CSS	Décrit la présentation
Langage de script côté client	JavaScript	Ajoute de la logique interactive
Langage de description de données	JSON, XML	Transporte des données structurées

Une comparaison classique aide à fixer les idées : si une page web était une maison, le HTML en serait les murs et la charpente, le CSS la peinture et la décoration, et JavaScript l’électricité et la plomberie — tout ce qui réagit quand on appuie sur un interrupteur.

Les standards du W3C¶

Qu’est-ce que le W3C ?¶

Le W3C (World Wide Web Consortium) est une organisation internationale fondée en 1994 par Tim Berners-Lee, l’inventeur du Web lui-même. Sa mission : développer des standards ouverts pour le Web, afin que celui-ci reste un espace commun et interopérable plutôt qu’une collection de technologies propriétaires incompatibles.

Pourquoi respecter les standards ?¶

Écrire du code conforme aux standards n’est pas une coquetterie : c’est ce qui garantit que votre travail fonctionnera partout et durera dans le temps.

Compatibilité entre navigateurs : votre page s’affiche de la même façon sous Firefox, Chrome ou Safari.
Pérennité du code : un code standard reste lisible et fonctionnel des années plus tard.
Accessibilité pour tous et toutes, y compris les personnes utilisant des technologies d’assistance.
SEO amélioré : les moteurs de recherche comprennent mieux un code propre.
Maintenance facilitée, pour vous comme pour celles et ceux qui reprendront le projet.

Validation : vous pouvez vérifier la conformité de vos pages avec l’outil officiel, https://validator.w3.org/.

Historique rapide — HTML & CSS¶

Connaître les grandes étapes aide à comprendre pourquoi certaines pratiques sont aujourd’hui découragées et d’autres recommandées.

HTML :

HTML 1.0 (1991) : 18 balises de base, le strict minimum pour relier des documents.
HTML 4.01 (1999) : on commence à séparer structure et présentation.
HTML5 (2014) : arrivée des balises sémantiques et de la vidéo/audio natifs, sans plug-in.
HTML Living Standard (2019+) : le standard évolue désormais en continu, sans numéro de version.

CSS :

CSS 1 (1996) : les propriétés de base.
CSS 2 (1998) : le positionnement.
CSS 3 (2011+) : une organisation en modules (Flexbox, Grid, animations…) qui continuent d’évoluer indépendamment.

💡 Aujourd’hui : plutôt qu’une grande version monolithique, le Web progresse par évolutions modulaires et continues. C’est une bonne nouvelle : les nouveautés arrivent régulièrement, sans tout casser.

Protocoles HTTP vs HTTPS¶

L’échange entre le client et le serveur suit un protocole : un ensemble de règles de communication. Il en existe deux variantes, dont une seule est aujourd’hui acceptable.

Caractéristique	HTTP	HTTPS
Sécurité	Données en clair	Données chiffrées (TLS/SSL)
Port	80	443
Certificat	Aucun	Certificat SSL/TLS requis
Usage	⚠️ Déprécié	✅ Standard actuel
Navigateur	« Non sécurisé »	Cadenas 🔒

La différence tient en un mot : le chiffrement. En HTTP, les données circulent en clair et peuvent être interceptées et lues ; en HTTPS, elles sont chiffrées de bout en bout. C’est pourquoi les navigateurs signalent désormais les sites en HTTP comme « non sécurisés » et affichent un cadenas pour ceux en HTTPS.

Structure d’un document HTML¶

Tout document HTML repose sur le même squelette. Le voici dans sa forme minimale, celle que vous recopierez au début de chaque nouvelle page :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon titre</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
</body>
</html>

Ce gabarit n’a rien d’arbitraire : chaque ligne a une fonction précise, que nous détaillons ci-dessous.

Décryptage de la structure HTML¶

<!DOCTYPE html> indique au navigateur qu’il a affaire au standard HTML5. Cette ligne se place toujours en tête de fichier.
<html lang="fr"> est le conteneur racine : tout le document tient à l’intérieur. L’attribut lang précise la langue, ce qui aide les lecteurs d’écran et les moteurs de recherche.
<head> regroupe les métadonnées : le titre, l’encodage, les liens vers les feuilles de style. Rien de ce qui s’y trouve n’apparaît directement dans la page.
<meta charset="UTF-8"> fixe l’encodage des caractères. UTF-8 gère les accents et la quasi-totalité des alphabets : sans lui, vos « é » et « à » risquent de s’afficher de travers.
<title> donne le titre affiché dans l’onglet du navigateur (et repris dans les résultats de recherche).
<link rel="stylesheet"> relie la feuille de style CSS au document.
<body> contient enfin le contenu visible : tout ce que verra l’internaute.

La règle à retenir : le <head> concerne le navigateur et les machines, le <body> concerne l’humain qui consulte la page.

Balises de base¶

Quelques balises reviennent dans presque toutes les pages. En voici les plus courantes.

Balise	Usage	Exemple
`<h1>` à `<h6>`	Titres hiérarchisés	`<h1>Bienvenue</h1>`
`<p>`	Paragraphe	`<p>Texte...</p>`
`<ul>` / `<ol>`	Listes non ordonnées / ordonnées	`<ul><li>Item</li></ul>`
`<a>`	Lien hypertexte	`<a href="https://exemple.fr">Site</a>`
`<img>`	Image	`<img src="photo.jpg" alt="Description">`

Deux règles importantes méritent qu’on s’y arrête dès maintenant, car elles touchent à l’accessibilité :

L’attribut alt de <img> est obligatoire. Il décrit l’image pour les personnes qui ne peuvent pas la voir et s’affiche si l’image ne charge pas. Une image sans alt est une image muette.
Il faut respecter la hiérarchie des titres (h1, puis h2, puis h3…), sans sauter de niveau. Cette hiérarchie n’est pas qu’une question de taille de texte : c’est le plan du document, celui que suivent les lecteurs d’écran et les moteurs de recherche.

Introduction au CSS¶

Une page constituée uniquement de HTML est parfaitement fonctionnelle, mais austère : texte noir sur fond blanc, tout aligné à gauche. Le CSS entre en jeu pour la mettre en forme. Voici un premier exemple, lié au HTML précédent par la balise <link> :

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #fafafa;
    margin: 20px;
}

h1 {
    color: #2c3e50;
}

p {
    line-height: 1.5;
}

Lisez ce fichier comme une suite de consignes : « pour le body, utilise telle police, tel fond, telle marge ; pour les h1, applique telle couleur ; pour les p, tel interligne ». Le navigateur applique ces consignes à chaque élément concerné.

Structure d’une règle CSS¶

Toute règle CSS suit le même moule, qu’il faut bien avoir en tête car on le retrouvera des centaines de fois :

sélecteur {
    propriété: valeur;
}

Le sélecteur cible les éléments HTML à styliser (body, h1, p…).
La propriété désigne l’aspect que l’on veut modifier (color, margin…).
La valeur précise ce que l’on applique (#2c3e50, 20px…).

Une règle peut contenir autant de couples propriété : valeur que nécessaire, chacun terminé par un point-virgule. Cette simplicité apparente est la force du CSS : tout repose sur cette brique élémentaire.

Mise en forme simple¶

Pour commencer à donner du caractère à une page, quelques propriétés suffisent.

Propriété	Exemple	Effet
`color`	`color: #333;`	Couleur du texte
`background-color`	`background-color: #e0e0e0;`	Couleur de fond
`margin`	`margin: 10px;`	Espaces externes
`padding`	`padding: 10px;`	Espaces internes
`text-align`	`text-align: center;`	Alignement du texte

La distinction entre margin et padding est une source classique de confusion, alors fixons-la tout de suite : la frontière de référence est la bordure de l’élément.

Margin : l’espace à l’extérieur de la bordure, qui éloigne l’élément de ses voisins.
Padding : l’espace à l’intérieur de la bordure, qui éloigne le contenu de cette bordure.

Nous y reviendrons longuement avec le Box Model : ces notions sont au cœur de la mise en page.

En résumé¶

Vous savez désormais ce qu’est une page web, comment elle circule sur le réseau, et quel est le rôle respectif du HTML et du CSS. Vous avez aussi rencontré vos premières balises et vos premières règles de style. La suite consiste à approfondir le HTML, en commençant par une question essentielle : comment structurer un document pour qu’il ait du sens, pour les humains comme pour les machines.