Client, serveur : qui parle à qui

Le web tient en un aller-retour

Quand tu ouvres une page, deux ordinateurs se parlent. Le tien, avec son navigateur, s'appelle le client. En face, une machine allumée en permanence quelque part dans un centre de données stocke les fichiers du site : c'est le serveur. Le client demande, le serveur répond. Tout le web repose sur cette conversation.

Concrètement, tu tapes une adresse, le navigateur envoie une demande ("donne-moi la page d'accueil"), et le serveur renvoie un fichier texte. Ce texte, c'est du HTML. Le navigateur le lit et le transforme en la page que tu vois. Rien de magique : un fichier part d'un côté, s'affiche de l'autre.

Un serveur, ça ressemble à quoi

Oublie l'image du superordinateur clignotant des films. Un serveur est un ordinateur comme le tien, souvent moins puissant, sans écran ni clavier, rangé par milliers dans des armoires de centres de données. Sa seule particularité : il reste allumé et connecté 24 h sur 24, et un logiciel spécialisé (nginx et Apache sont les deux plus répandus) y écoute les demandes qui arrivent pour distribuer les fichiers correspondants.

Tu peux en louer un pour le prix d'un café : un petit serveur virtuel chez OVH ou Hetzner coûte entre 4 et 6 € par mois. Et pour le site que tu vas construire ici, tu n'auras même pas à payer ça : des services comme Netlify ou GitHub Pages hébergent gratuitement les sites de ce type, on le fera ensemble à la dernière leçon.

Détail qui surprend souvent : ta propre machine peut jouer les deux rôles à la fois. Quand tu développeras avec l'extension Live Server de VS Code, ton ordinateur sera à la fois le client (l'onglet du navigateur) et le serveur (l'extension qui sert tes fichiers sur l'adresse locale 127.0.0.1). La conversation client/serveur a lieu quand même, elle ne quitte juste pas ta machine.

Pourquoi ça compte pour toi

Beaucoup de débutants imaginent qu'un site web est un logiciel installé quelque part. Faux. Un site, dans sa forme la plus simple, c'est un dossier de fichiers texte (.html, .css) posés sur un serveur. C'est exactement ce que tu vas fabriquer dans ce cours, sur ta propre machine d'abord, puis mis en ligne à la fin.

Ce type de site s'appelle un site statique : les fichiers sont livrés tels quels, sans base de données ni traitement côté serveur. C'est parfait pour un portfolio, une landing page, un blog, une doc. Les sites plus complexes (une boutique, un réseau social) ajoutent des couches, mais le socle reste ce même échange client/serveur.

D'ailleurs, tu peux vérifier tout ça sans rien installer : sur n'importe quelle page, fais Ctrl+U (ou clic droit puis « Afficher le code source de la page »). Ce que tu vois, c'est exactement le texte que le serveur a envoyé. Fais l'essai sur example.com, un site de démonstration volontairement minimal : une cinquantaine de lignes en tout. Puis sur la page d'accueil de YouTube : des centaines de milliers. Dans les deux cas, même principe, même langage, celui que tu commences aujourd'hui.

Les trois langages, trois rôles

• HTML décrit le contenu et sa structure : un titre, un paragraphe, une image, un lien.
• CSS décrit l'apparence : couleurs, espacements, disposition, polices.
• JavaScript ajoute le comportement : réagir à un clic, charger des données.

Une bonne image mentale : le HTML est le squelette, le CSS l'habillage, le JavaScript les muscles. Ce cours se concentre sur les deux premiers, qui suffisent déjà à construire un vrai site.

Cette séparation en trois fichiers n'est pas une lubie de puriste. La page d'accueil de Wikipédia, par exemple, c'est d'abord un document HTML d'une centaine de kilooctets ; sa mise en forme vit dans des fichiers CSS à part. Résultat : on peut refaire entièrement le design d'un site sans toucher une ligne de son contenu, et inversement. Tu en profiteras dès la partie 5, quand tu relookeras ta page de la partie 2 sans modifier son HTML.

À toi

Pour chaque situation, dis qui est le client et qui est le serveur : 1) tu regardes une vidéo YouTube sur ton téléphone ; 2) une application météo affiche la température du jour ; 3) tu ouvres ton fichier index.html en local, en double-cliquant dessus.

Correction : 1) ton téléphone est le client, les machines de YouTube forment le serveur. 2) pareil : l'application est un client qui interroge un serveur météo. Pas besoin de navigateur, le modèle client/serveur dépasse largement le web. 3) piège : il n'y a aucun serveur du tout. Le navigateur lit le fichier directement sur ton disque, et c'est le sens du file:// que tu verras dans la barre d'adresse à la leçon 3.

À retenir : le client demande, le serveur répond, et ce qui voyage entre les deux c'est d'abord du HTML. Garde ce trajet en tête, tout le reste en découle.