Comment fonctionne le web ?

Vous cliquez sur un lien et, une seconde plus tard, une page apparaît. Ce petit miracle quotidien repose sur un mécanisme simple à comprendre, et le comprendre vous évitera bien des mystères quand vous construirez votre premier site. Dans ce cours, vous allez réaliser le portfolio de Camille Morel, une photographe fictive : une vitrine en ligne avec présentation, galerie de projets et formulaire de contact. Commençons par voir ce qui se passe dans les coulisses.

Deux acteurs : le client et le serveur

Quand vous visitez un site, deux ordinateurs dialoguent. Le premier, c’est le vôtre (ou votre téléphone) : il fait tourner un navigateur, que l’on appelle le client. Le second est un serveur : un ordinateur connecté en permanence à Internet, dont le travail consiste à stocker les fichiers d’un site et à les envoyer à qui les demande.

Imaginez une bibliothèque municipale. Vous, le lecteur, vous remplissez une fiche de demande ; le bibliothécaire, lui, va chercher le livre dans les rayons et vous le remet. Le navigateur est le lecteur, le serveur est le bibliothécaire, et les pages web sont les livres.

Le trajet d’une page, étape par étape

Vous tapez https://www.camille-morel.example/index.html dans la barre d’adresse. Voici ce qui se déroule, généralement en moins d’une seconde :

1. Le navigateur découpe l’adresse (l’URL) pour en extraire le nom de domaine, le chemin du fichier et le protocole.
2. Il demande à un service d’annuaire, le DNS, quelle est l’adresse numérique (l’adresse IP) de la machine qui porte ce nom de domaine.
3. Il ouvre une connexion avec ce serveur, de façon chiffrée si l’adresse commence par https.
4. Il envoie une requête HTTP : « Peux-tu m’envoyer le fichier index.html ? »
5. Le serveur répond avec le contenu du fichier, accompagné d’un code de statut.
6. Le navigateur lit ce HTML, repère qu’il lui faut aussi une feuille de style et des images, envoie de nouvelles requêtes pour les récupérer, puis dessine la page à l’écran.

Cette dernière étape est importante : une seule page est presque toujours le résultat de plusieurs échanges. Le fichier HTML arrive en premier, puis chaque ressource qu’il mentionne (CSS, images, polices, scripts) est demandée à son tour.

Les codes de statut HTTP

La réponse du serveur contient un nombre qui résume ce qui s’est passé. Vous en croisez sans le savoir :

Retenez surtout le 404 : vous le rencontrerez souvent pendant vos débuts, lorsqu’un nom de fichier sera mal orthographié dans un lien.

Anatomie d’une URL

Une adresse web n’est pas un bloc magique : elle se lit par morceaux.

https://www.camille-morel.example/portfolio/index.html#contact
\___/   \_______________________/\______________/ \______/
  |                |                    |            |
protocole        domaine              chemin        ancre

• Le protocole (https) précise comment dialoguer ; la version avec « s » chiffre l’échange.
• Le nom de domaine désigne le serveur de manière lisible pour un humain.
• Le chemin indique quel fichier ou quelle page demander.
• L’ancre (après le #) pointe vers un endroit précis de la page ; elle reste côté navigateur et n’est pas envoyée au serveur.

Si le chemin se termine par un dossier, par exemple https://www.camille-morel.example/portfolio/, le serveur renvoie en général par convention le fichier nommé index.html de ce dossier. C’est pourquoi la page d’accueil d’un site s’appelle quasiment toujours ainsi.

Site statique ou site dynamique

Un site statique est composé de fichiers fixes : le serveur les envoie tels quels, et chaque visiteur reçoit exactement la même chose. Un site dynamique fabrique ses pages à la demande, à partir de données (un panier d’achats, un fil d’actualité personnalisé). Le travail se partage alors entre le front-end, ce que vous voyez dans le navigateur, et le back-end, ce qui se passe sur le serveur.

Dans ce cours, vous construirez un site statique. C’est le meilleur point de départ : aucun logiciel serveur à installer, et tout ce que vous apprenez (HTML et CSS) sert aussi, tel quel, dans les sites dynamiques.

Les trois langages du front-end

Une page web repose sur trois technologies qui collaborent. Pour les retenir, pensez à une maison.

Nous travaillerons uniquement avec les deux premiers : ils suffisent pour réaliser un vrai site, et ils sont un préalable à JavaScript. La documentation de référence de HTML et de CSS sur MDN vous accompagnera tout au long du parcours.

Le fil rouge du cours : le portfolio de Camille

Pour apprendre, rien ne vaut un projet concret. Tout au long du cours, vous allez construire le site de Camille Morel, photographe indépendante. Ce site comportera un en-tête avec navigation, une présentation, des cartes de projets, un formulaire de contact et un pied de page. Chaque chapitre ajoutera une brique : structure et contenu au chapitre 2, mise en forme au chapitre 3, mise en page adaptable au chapitre 4, qualité et accessibilité au chapitre 5, puis finalisation et mise en ligne au chapitre 6.

Si vous préférez, remplacez Camille par vous-même, une association que vous connaissez ou une activité qui vous passionne : les techniques seront identiques. L’important est de travailler sur un sujet qui vous plaît.

À vous de jouer

Sans ordinateur, juste avec un papier : décrivez, en cinq lignes maximum, ce qui se passe entre le moment où vous appuyez sur Entrée après avoir saisi une URL et le moment où la page s’affiche. Utilisez au moins les mots « DNS », « requête », « serveur » et « HTML ». Puis, dans votre navigateur, essayez volontairement une adresse fausse sur un site que vous connaissez (par exemple en ajoutant /page-qui-nexiste-pas à la fin) et notez ce que vous voyez.

Dans la prochaine leçon, nous préparons votre atelier : choisir un éditeur, organiser vos dossiers et découvrir les outils intégrés au navigateur.