Fonctionnement du Web : navigateurs, serveurs et HTTP

Une page web affichée à l’écran résulte d’un travail effectué à deux endroits. Ton navigateur demande des ressources et un serveur envoie des réponses. Ces rôles expliquent aussi bien le fonctionnement d’un simple site personnel que celui d’une page assemblée à partir de plusieurs services.

Qui demande et qui répond

Un client est un appareil et un programme qui demandent quelque chose. Chrome, Edge, Firefox et Safari sont des navigateurs clients. Un serveur est un ordinateur qui exécute un logiciel acceptant les requêtes et renvoyant des fichiers stockés ou du contenu qu’il produit. Apache et nginx sont des exemples de logiciels de serveur web. Le mot « serveur » peut désigner l’ordinateur ou ce logiciel.

Dans un échange HTTP, le client envoie une requête qui précise ce qu’il souhaite. Le serveur envoie une réponse à cette requête. Imagine une commande de nourriture au comptoir : le bon de commande demande quelque chose et le plateau est la réponse. Le navigateur lance l’échange ; une réponse ordinaire contenant une page répond à une requête.

Client et serveur sont des rôles, pas des types de machines fixes. Un ordinateur portable peut exécuter à la fois ton navigateur et un serveur de test. Un site est hébergé lorsqu’un serveur accessible met ses ressources à disposition. Un serveur accessible par localhost fonctionne sur ton propre ordinateur ; cette adresse ne mène pas le navigateur d’une autre personne vers ton ordinateur portable.

Une page est un ensemble de ressources

Une ressource est un élément qu’une adresse peut identifier : une page, une feuille de style, un script, une image, une police, une vidéo ou une donnée. La première requête de page récupère généralement du HTML. Le navigateur lit ce HTML pour découvrir les autres ressources nécessaires et demande chacune séparément.

Par exemple, un article indique deux feuilles de style, un script et cinq images. Compte aussi le HTML :

• Une ressource HTML constitue le point de départ de la page.
• Deux ressources CSS fournissent ses styles.
• Une ressource JavaScript fournit des comportements.
• Cinq ressources image fournissent les images.

Cela fait neuf ressources et, si le cache du navigateur est vide, neuf requêtes HTTP pour ces ressources. Un cache stocke des copies téléchargées pour les réutiliser. Des fichiers frais dans le cache peuvent réduire le nombre de requêtes qui passent par le réseau lors d’une autre visite.

Les ressources ne proviennent pas nécessairement du même serveur. Le HTML peut venir de www.example.com, les images de images.example.net et une vidéo d’un autre service. L’adresse de chaque ressource indique au navigateur où la demander. La réussite de la requête du HTML ne prouve donc pas que toutes les images ou tous les scripts ont aussi été chargés.

Fichiers stockés et réponses produites

Dans les deux cas, le navigateur reçoit des ressources qu’il peut lire ou afficher. Une page HTML produite par un programme reste du HTML lorsqu’elle arrive dans le navigateur. Le navigateur détient des copies téléchargées, tandis que le serveur conserve les fichiers originaux du site ou le programme qui les produit.

Le Web fonctionne sur Internet

Internet est le réseau mondial qui transporte les données entre les ordinateurs. Le Web est un service qui utilise ce réseau : des ressources reliées, désignées par des URL et échangées par HTTP. Le courrier électronique, les jeux en ligne et les appels vidéo utilisent aussi Internet. Le Web est un usage du réseau, et non le nom de toutes les activités qui s’y déroulent.

Appuyer sur Entrée après avoir saisi une adresse web déclenche plusieurs tâches. Chacune a un rôle différent : une défaillance à une étape laisse donc des indices différents d’une défaillance à une autre.

Lire l’adresse et trouver le serveur

Prenons https://www.example.com/news.html. Le navigateur lit https comme schéma d’URL, www.example.com comme hôte et /news.html comme chemin demandé. Un texte comme « météo demain » est normalement traité comme une recherche et envoyé au moteur de recherche par défaut.

Le navigateur a besoin d’une adresse IP, une adresse réseau numérique comme 203.0.113.10 ou l’exemple IPv6 2001:db8::1. Le DNS, ou système de noms de domaine, trouve les adresses associées aux noms de domaine. Le navigateur et le système d’exploitation peuvent réutiliser une réponse DNS récente conservée dans un cache : chaque visite d’une page ne nécessite donc pas une nouvelle recherche.

Se connecter et protéger l’échange

Le navigateur se connecte au serveur. Pour HTTPS, il établit une connexion chiffrée à l’aide de TLS. Le serveur présente un certificat qui permet au navigateur de vérifier son identité pour le domaine demandé. Le chiffrement empêche les autres personnes présentes sur le réseau de lire ou de modifier les messages. Un indicateur de connexion sécurisée décrit cette protection ; un site frauduleux peut lui aussi avoir un certificat valide.

Les données traversent le réseau en petits morceaux appelés paquets, par l’intermédiaire d’appareils appelés routeurs, puis sont réassemblées à destination. Le navigateur et le système d’exploitation assurent ce transport pendant que le navigateur traite les messages HTTP.

Demander, recevoir et construire

1. Le navigateur envoie une requête HTTP pour /news.html.
2. Le serveur répond avec un code de statut HTTP, des champs d’en-tête qui décrivent la réponse et, généralement, un corps contenant le HTML.
3. Le navigateur lit le HTML et demande les feuilles de style, scripts, images et autres ressources qu’il indique.
4. Il construit la page, applique les styles, exécute les scripts et dessine le contenu à l’écran.

Plusieurs requêtes de ressources peuvent se chevaucher. Le navigateur peut afficher le texte avant la fin du téléchargement de toutes les images ; la page est assemblée progressivement.

Pour une petite page à https://example.org/, supposons que le HTML indique uniquement style.css et logo.png, tous deux sur le même hôte. Si aucune entrée pertinente ne se trouve dans le cache, l’hôte nécessite une recherche DNS et les trois ressources nécessitent trois requêtes HTTP. Lors d’une visite ultérieure, une réponse DNS en cache évite cette recherche. Les copies fraîches des ressources peuvent être réutilisées et les copies plus anciennes peuvent être vérifiées auprès du serveur. Une réponse 304 Not Modified signifie qu’une copie stockée est toujours à jour et que le corps du fichier n’a pas besoin d’être renvoyé.

Situer une défaillance grâce aux indices

Une défaillance DNS ne comporte aucun code de statut HTTP, car aucune réponse HTTP n’est arrivée. Un 404 est différent : le serveur a répondu. Chrome peut afficher une erreur de nom comme DNS_PROBE_FINISHED_NXDOMAIN, mais ce texte est un message du navigateur, pas une réponse du serveur.

Une URL, ou localisateur uniforme de ressource, donne l’adresse d’une ressource. Le nom de domaine n’est qu’une partie de cette adresse. La forme complète est scheme://host:port/path?query#fragment, mais de nombreuses adresses omettent des parties facultatives.

Décomposer une adresse

Lis cette adresse partie par partie :

https://shop.example.com:8443/products/shoes.html?color=blue&size=42#reviews

Les signes de ponctuation séparent les parties : : suit le schéma d’URL, ? commence la chaîne de requête et # commence le fragment. Les séparateurs ne font pas partie des valeurs de la chaîne de requête ou du fragment.

Schéma d’URL, hôte et port

Le schéma d’URL détermine comment l’adresse est traitée. http utilise HTTP non chiffré ; https utilise HTTP chiffré. mailto:info@example.com demande à un logiciel de messagerie de rédiger un message, tandis que file:/// désigne un fichier local.

Le port sélectionne un service sur l’hôte. S’il est omis, HTTP utilise le port 80 et HTTPS le port 443. Ainsi, https://example.com/ et https://example.com:443/ désignent la même destination et le même chemin. Les serveurs de test locaux utilisent souvent les ports 3000, 5500 ou 8080 ; http://localhost:5500/ indique son port parce que ce n’est pas le port par défaut de HTTP.

Le schéma d’URL et l’hôte ne tiennent pas compte de la casse. L’hôte www.example.com est un nom différent de example.com ; les deux ne mènent à un site que si son responsable les a configurés ainsi.

Chemin, chaîne de requête et fragment

Sur un site statique simple, un chemin suit les dossiers et les fichiers du serveur. Sur d’autres sites, le logiciel serveur décide de ce que renvoie un chemin : celui-ci ne désigne donc pas nécessairement un fichier sur le disque. Une adresse de dossier se terminant par / sert souvent une page par défaut comme index.html.

Une chaîne de requête transmet des données après ?. Dans /search?q=web+basics&page=2, & sépare deux champs : les mots recherchés et le numéro de page. Ces champs sont transmis au serveur dans la cible de la requête.

Un fragment reste dans le navigateur. Le suffixe #reviews fait généralement défiler la page jusqu’à un élément dont l’attribut est id="reviews". Le navigateur demande le chemin et la chaîne de requête sans le fragment. Remplacer uniquement #top par #reviews ne demande pas un fichier différent au serveur.

Conserver les caractères exacts

Les chemins web utilisent des barres obliques /. Une espace peut être remplacée par un encodage en pourcentage, %20. L’encodage des formulaires utilise + pour une espace et %40 pour @ ; un chemin ou une chaîne de requête ordinaire peut contenir un @ littéral. Les règles d’encodage des formulaires et d’écriture générale des URL ne sont donc pas identiques.

Les chemins peuvent être sensibles à la casse, même si les hôtes ne le sont pas. /Images/Logo.png peut être différent de /images/logo.png. Copier correctement l’hôte tout en modifiant les majuscules d’un chemin peut quand même conduire à demander la mauvaise ressource.

Un nom de domaine donne aux personnes un nom lisible à utiliser à la place d’une adresse IP numérique. Ses parties séparées par des points montrent aussi comment le nom est organisé. Il est important de les lire correctement lorsque deux adresses contiennent des mots similaires.

Commencer par la droite

Chaque partie entre les points est un label DNS. Dans blog.example.org, le label le plus à droite, org, est le domaine de premier niveau. Le domaine enregistré est example.org, et blog est un sous-domaine contrôlé par l’intermédiaire de ce domaine.

Les domaines de premier niveau génériques comprennent .com, .org, .net, .dev et .shop. Les domaines de premier niveau nationaux comportent deux lettres, comme .nl, .de, .jp, .br et .ca. Certains sont soumis à des conditions d’admissibilité : .gov est réservé aux organismes gouvernementaux américains vérifiés. Les nouveaux enregistrements institutionnels sous .edu exigent généralement que les établissements américains d’enseignement postsecondaire soient admissibles et accrédités au niveau institutionnel ; certains organismes remplissent les conditions d’autres règles et les anciens enregistrements peuvent bénéficier d’exceptions. L’ICANN coordonne les noms de premier niveau du système de noms de domaine.

Un nom enregistré ne se limite pas toujours aux deux derniers labels. Sous .co.uk, par exemple, le nom enregistré dans news.example.co.uk est example.co.uk. Lis d’abord la terminaison publique, puis identifie le nom enregistré sous celle-ci.

Des mots familiers peuvent figurer dans le nom d’une autre personne

Compare ces hôtes :

Dans le second hôte, example.com est constitué de labels situés à gauche de example.net. Ils ne donnent pas au titulaire de example.com le contrôle de l’adresse. Identifie l’hôte avant de le lire depuis la droite ; un nom familier dans un chemin n’est pas non plus l’hôte.

www est un label de sous-domaine ordinaire. Le responsable d’un site peut l’utiliser, l’omettre ou configurer une redirection entre les noms. Sa présence n’est pas exigée par le Web.

L’enregistrement et l’hébergement sont distincts

Un bureau d’enregistrement gère les enregistrements de domaines pour ses clients. Un registre tient les enregistrements d’un domaine de premier niveau. Enregistrer un domaine te donne le droit d’utiliser ce nom pendant une période généralement égale à un ou plusieurs ans. Tu renouvelles l’enregistrement pour conserver ce droit ; un nom expiré peut finir par devenir disponible pour une autre personne.

Le titulaire configure ensuite des enregistrements DNS pour associer le nom à l’adresse d’un serveur d’hébergement. Le domaine n’est pas constitué des fichiers du site web. Le même nom peut pointer vers un autre serveur et un serveur peut servir plusieurs domaines. Les réponses DNS en cache expliquent pourquoi une adresse modifiée peut mettre des minutes ou des heures à être visible partout.

Règles de nommage et noms locaux

Les labels d’hôte ordinaires utilisent des lettres, des chiffres et des traits d’union, sans trait d’union à chaque extrémité. Chaque label peut comporter jusqu’à 63 caractères et un nom complet ordinaire jusqu’à 253 caractères. Les noms ne tiennent pas compte de la casse. Les noms de domaine internationalisés prennent en charge d’autres systèmes d’écriture ; leurs labels encodés en ASCII commencent par xn--.

Le nom spécial localhost désigne l’ordinateur qui effectue la requête. Ses adresses de bouclage comprennent 127.0.0.1 et ::1. Si un apprenant ouvre http://localhost:3000/, le navigateur cherche un service sur l’ordinateur de cet apprenant.

Un lien peut contenir une adresse complète ou des indications pour trouver une ressource à partir de la page courante. Pour prévoir où il mène, pars de l’adresse de la page et suis le chemin partie par partie.

Choisir le point de départ

Une URL absolue indique son propre hôte et fonctionne depuis n’importe quelle page. Elle est utile pour un autre site web. Une URL relative omet le début de l’adresse et est complétée à partir de l’adresse de la page. Pour les fichiers à l’intérieur d’un site, cela permet de déplacer l’ensemble du dossier d’un ordinateur portable vers un serveur.

Parcourir une arborescence de dossiers

Supposons qu’un site contienne ces fichiers :

my-site/
  index.html
  about.html
  images/logo.png
  styles/main.css
  blog/first-post.html

Depuis index.html, about.html reste dans le même dossier. images/logo.png entre dans le sous-dossier images, et styles/main.css entre dans styles.

Depuis blog/first-post.html, le dossier de départ est blog. Pour atteindre le logo, utilise ../images/logo.png : remonte d’abord au dossier du site, puis entre dans images. Le lien images/logo.png chercherait à la place dans blog/images, où cette arborescence ne contient pas de logo. Pour atteindre la page d’accueil depuis cet article, utilise ../index.html.

Suivre des adresses imbriquées

Sur https://example.com/blog/2026/post.html :

• photo.jpg devient https://example.com/blog/2026/photo.jpg.
• ../index.html devient https://example.com/blog/index.html.
• /about.html devient https://example.com/about.html.
• #comments reste sur ce document et désigne son élément comments.

Un / initial remplace le chemin courant à partir de la racine du site. Il ne signifie pas « remonter d’un dossier ». Répéter ../ permet de remonter plusieurs niveaux de dossiers : ../../about.html depuis l’article imbriqué remonte par 2026 et blog avant de trouver about.html.

Prévisualiser les liens dans le bon environnement

Un chemin relatif à la racine fonctionne avec un serveur HTTP, y compris un serveur local. Sur une page file:///, / pointe vers la racine du système de fichiers de l’ordinateur, pas vers ton dossier de projet. Utilise un serveur local pour tester ce type de lien.

Un chemin comme C:\Users\sam\site\logo.png ou file:///Users/sam/site/logo.png désigne un emplacement sur un seul ordinateur. Les autres visiteurs ne disposent pas de ce dossier. Crée un lien avec un chemin web qui reste à l’intérieur de la structure du site.

Faire correspondre exactement les noms

Utilise des noms en minuscules, des traits d’union à la place des espaces et les bonnes extensions : contact-form.html permet de créer un lien fiable plus facilement que Contact Form.HTML. Windows et macOS ignorent généralement la casse des noms de fichiers, tandis que de nombreux serveurs web la distinguent. Un lien local vers Logo.png peut échouer en ligne si le nom réel est logo.png.

Une page d’accueil nommée index.html est une valeur par défaut courante sur les serveurs. Demander un dossier comme /blog/ sert généralement son fichier index.html lorsque le serveur est configuré avec cette valeur par défaut.

HTTP, le protocole de transfert hypertexte, définit comment les clients web demandent des ressources et comment les serveurs répondent. HTTPS transmet ces messages sur une connexion chiffrée. La lecture d’une requête montre ce que le navigateur a demandé au serveur de faire.

Lire le message dans l’ordre

Voici une requête présentée sous forme textuelle HTTP/1.1 :

GET /products/shoes.html?color=blue HTTP/1.1
Host: shop.example.com
Accept: text/html
Accept-Language: en-US,en;q=0.9

La première ligne contient la méthode, la cible de la requête et la version de HTTP. GET demande de récupérer une ressource. La cible comprend le chemin et la chaîne de requête ; elle exclut tout fragment. L’hôte apparaît dans le champ d’en-tête Host, qui permet à un serveur de distinguer les sites qu’il sert.

Un champ d’en-tête est un champ nommé comme Accept: text/html qui transmet des informations sur la requête ou son contenu. Une ligne vide marque la fin des champs d’en-tête. Certaines requêtes transmettent ensuite un corps, c’est-à-dire les données envoyées. Cet exemple de requête GET n’a pas de corps.

HTTP/2 et HTTP/3 encodent les messages différemment, mais conservent les méthodes, les cibles, les champs d’en-tête et les corps. Les outils de développement les présentent sous une forme lisible : ces parties des messages restent donc utiles d’une version à l’autre.

Choisir une méthode selon l’action

Suivre un lien ordinaire ou saisir une adresse HTTP déclenche une requête GET. Un formulaire HTML utilise GET par défaut et POST lorsqu’il indique method="post".

Avec un formulaire GET, les champs vont dans la chaîne de requête de l’URL. Cela convient à une recherche dont tu souhaites ajouter les résultats aux favoris ou les partager. POST place les champs soumis dans le corps de la requête et convient aux actions comme la création d’un compte ou la publication d’un commentaire.

POST ne chiffre rien par lui-même. En HTTP simple, les données de la chaîne de requête et celles du corps peuvent être lues pendant leur transfert. HTTPS protège les deux. Les mots de passe doivent figurer dans les corps des requêtes POST sur HTTPS, car les URL apparaissent aussi dans l’historique du navigateur et peuvent être stockées dans des journaux.

Lire l’envoi d’un formulaire

POST /signup HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 38

name=Ana+Silva&email=ana%40example.com

La cible est /signup. Content-Type indique l’encodage des données de formulaire dans le corps. Le corps contient le nom « Ana Silva » et l’adresse électronique « ana@example.com » : + se décode en une espace et %40 en @. Il y a ici 38 octets, ce qui correspond à Content-Length.

Lire, répéter et identifier les requêtes

Une méthode sûre est conçue pour lire sans modifier l’état du serveur ; GET, HEAD et OPTIONS sont sûres. Une méthode idempotente a le même effet prévu si elle est répétée. Les méthodes sûres, PUT et DELETE sont idempotentes. POST ne l’est pas nécessairement : répéter un envoi peut créer un second commentaire ou une seconde commande.

Parmi les autres champs d’en-tête de requête figurent User-Agent pour les informations sur le client, Accept pour les formats acceptés et Accept-Language pour les préférences linguistiques. Cookie renvoie les valeurs des cookies stockés. Referer, avec son orthographe historique, peut identifier la page d’origine ; les navigateurs peuvent l’omettre ou en réduire le contenu selon la politique appliquée.

La réponse est la réponse du serveur à une requête. Son code indique le résultat, ses champs d’en-tête décrivent la réponse et son corps transporte le contenu renvoyé lorsqu’un corps est autorisé.

Distinguer les parties

Une réponse sous forme textuelle HTTP/1.1 peut commencer ainsi :

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1534
Cache-Control: max-age=600

<!DOCTYPE html>
<html lang="en">
...

La ligne de statut indique la version, le code 200 et le texte explicatif OK, destiné aux personnes. Les programmes utilisent le nombre. HTTP/2 et HTTP/3 ne transmettent pas ce texte explicatif. Après les champs d’en-tête et une ligne vide, le corps commence par le HTML.

Content-Length indique un nombre d’octets, et non un nombre de caractères ou une taille de page visible. Pour une réponse contenant une image avec Content-Length: 24576, le corps contient 24 576 octets : 24,576 ko, soit environ 24,6 ko avec 1 ko = 1 000 octets.

Identifier le corps grâce à son type MIME

Le type MIME est envoyé dans Content-Type.

Le champ d’en-tête indique au navigateur comment traiter le corps ; l’extension d’un nom de fichier ne suffit pas. Si l’URL d’une feuille de style renvoie une page d’erreur HTML avec Content-Type: text/html, le navigateur refuse de la traiter comme du CSS. Cela explique souvent pourquoi une page affiche le texte sans la mise en forme prévue.

Les corps peuvent contenir du texte ou des octets de données binaires. Une réponse à HEAD n’a pas de corps, même lorsque ses champs d’en-tête décrivent la ressource qu’une requête GET renverrait. 204 No Content et 304 Not Modified n’ont pas non plus de corps.

Transmettre une identité entre des requêtes distinctes

HTTP est sans état : un échange ne se souvient pas automatiquement d’un échange précédent. Un cookie fournit des informations qui relient les requêtes à une session en cours.

1. Le serveur répond avec Set-Cookie: session=abc123.
2. Le navigateur stocke le cookie.
3. Dans les requêtes ultérieures correspondantes, il envoie Cookie: session=abc123.
4. Le serveur peut utiliser cette valeur pour retrouver la session, par exemple la connexion ou le panier de l’apprenant.

La portée du cookie et les règles du navigateur déterminent les requêtes qui le reçoivent.

Réutiliser du contenu sans le télécharger à nouveau

Cache-Control: max-age=600 permet au navigateur de considérer une réponse stockée comme fraîche pendant 600 secondes, soit 10 minutes. Pendant cette période, il peut réutiliser la copie sans contacter le serveur. Une fois la copie périmée, le navigateur peut demander si elle a changé. Un 304 indique de réutiliser le corps en cache ; un 200 peut fournir un remplacement.

Si les modifications CSS enregistrées n’apparaissent pas, vérifie si le navigateur a réutilisé une copie. Un rechargement forcé, généralement Ctrl+Shift+R sous Windows et Linux ou Cmd+Shift+R sous macOS, ou l’option Désactiver le cache des outils de développement aide à récupérer des ressources fraîches. Cette case à cocher s’applique lorsque les outils de développement sont ouverts.

Parmi les autres champs d’en-tête de réponse utiles figurent Location pour la destination d’une redirection, Date pour la date de la réponse et Server pour les informations sur le logiciel serveur lorsqu’elles sont fournies.

Un code de statut HTTP est un nombre à trois chiffres qui indique le résultat dans une réponse HTTP. Ce nombre décrit une requête : une même page peut donc avoir simultanément un HTML reçu avec succès, une image manquante et un script redirigé.

Commencer par le premier chiffre

200 OK est le résultat habituel d’une requête GET réussie. 201 Created indique la création d’une nouvelle ressource, souvent après POST. 204 No Content indique un succès sans corps de réponse.

Suivre une redirection sans la confondre avec un échec

301 Moved Permanently et 308 Permanent Redirect donnent une nouvelle adresse permanente. 302 Found et 307 Temporary Redirect donnent une adresse temporaire. Le champ d’en-tête Location de la réponse indique la prochaine adresse.

Par exemple, une requête vers http://example.com/ peut renvoyer 301 avec Location: https://example.com/. Le navigateur envoie alors une nouvelle requête à l’adresse HTTPS, qui renvoie 200. Il s’agit de deux échanges, et non d’une seule réponse avec deux codes.

307 et 308 conservent la méthode lorsque le navigateur répète la requête. Après 301 ou 302, un navigateur peut transformer POST en GET. 304 Not Modified est un autre type de résultat 3xx : il valide une copie en cache et n’envoie pas de corps de remplacement.

Associer le code à la vérification suivante

Un 503 peut inclure Retry-After pour indiquer quand réessayer. La différence entre 401 et 403 est particulièrement utile : une authentification absente ou invalide est différente d’un refus d’autorisation. Une réponse 4xx indique qu’il faut examiner la requête, mais un lien cassé ou un problème de configuration du site peut aussi en être la cause.

Diagnostiquer la ressource concernée

Supposons que le HTML et le CSS renvoient 200, tandis que images/Logo.PNG renvoie 404. Le fichier réel du serveur est images/logo.png. Corriger la casse du lien lui permet de désigner le fichier stocké. Un serveur a répondu à la requête échouée ; le site entier n’était pas inaccessible.

Pour une réponse 5xx, la défaillance se situe dans le traitement côté serveur. Un apprenant qui consulte le site d’une autre personne peut réessayer plus tard ou signaler le problème. Un développeur responsable de ce serveur examine son code ou le service en amont.

Lire la réponse, pas seulement l’écran

Un message d’erreur dans le HTML ne détermine pas le statut. Un site peut renvoyer 200 avec un message « introuvable » : c’est une erreur soft 404. À l’inverse, un véritable 404 peut inclure une page d’erreur HTML soignée. Utilise le panneau Réseau pour lire le code réel.

Lorsque le DNS ou la connexion échoue, il peut n’exister aucune réponse HTTP. Une erreur produite par le navigateur ne comporte alors aucun statut de serveur à inspecter. Un 404 isolé pour /favicon.ico, la petite icône d’onglet que les navigateurs peuvent demander, laisse souvent le contenu de la page fonctionner.

Une page combine du contenu, une présentation et des comportements. Reconnaître ces rôles t’aide à choisir le fichier à inspecter lorsque tu veux modifier quelque chose.

HTML décrit la nature du contenu

HTML, le langage de balisage hypertexte, donne au contenu sa structure et son sens : titres, paragraphes, listes, liens, images, tableaux et formulaires. C’est un langage de balisage. Il décrit des éléments au lieu d’effectuer des calculs ou d’exécuter des boucles.

Dans <a href="about.html">About us</a>, la balise ouvrante est <a href="about.html">. L’attribut href indique la destination. « About us » est le contenu et </a> ferme l’élément. Les attributs se placent à l’intérieur de la balise ouvrante.

Certains éléments sont vides et n’ont ni contenu ni balise fermante. Par exemple, <img src="logo.png" alt="Company logo"> fournit une adresse d’image et une alternative textuelle. <br>, <link> et <meta> sont d’autres éléments vides.

Choisis les éléments selon leur sens. Utilise un titre parce que le texte introduit une section ; utilise CSS lorsque tu veux agrandir le texte ou ajouter de l’espace. Plusieurs éléments <br> remplacent mal des règles d’espacement.

CSS contrôle l’apparence du contenu

CSS, les feuilles de style en cascade, définit les couleurs, les polices, l’espacement, la mise en page et l’adaptation aux différentes largeurs d’écran. Lis cette règle :

h1 {
  color: navy;
  font-size: 2rem;
}

Le sélecteur, h1, identifie les éléments à mettre en forme. Chaque déclaration associe une propriété à une valeur. color: navy; donne à la propriété color la valeur navy. Les deux-points séparent la propriété et la valeur ; le point-virgule termine la déclaration.

JavaScript réagit aux actions

JavaScript est un langage de programmation. Il réagit aux clics et à la saisie, modifie la page active, vérifie les données des formulaires et demande d’autres données sans recharger entièrement la page. C’est un langage différent de Java.

Pour un bouton de thème, un script peut trouver le bouton, détecter les clics et activer ou désactiver une classe CSS :

document.querySelector("button").addEventListener("click", () => {
  document.body.classList.toggle("dark");
});

Le script ajoute ou retire la classe dark du corps ; le CSS définit l’apparence associée à cette classe. Une page d’information statique peut fonctionner avec HTML et CSS seuls.

Relier les fichiers dans le HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
    <link rel="stylesheet" href="styles/main.css">
    <script src="scripts/app.js" defer></script>
  </head>
  <body>
    <h1>Hello, web</h1>
    <p>This text is structured by HTML and styled by CSS.</p>
    <button>Switch theme</button>
  </body>
</html>

Le <head> contient les informations sur la page et les liens vers les fichiers. Le <body> contient le contenu affiché. Le navigateur demande styles/main.css et scripts/app.js séparément du HTML. Les trois sont des fichiers texte brut que tu peux ouvrir dans un éditeur de code.

La séparation des préoccupations consiste à garder le contenu dans le HTML, l’apparence dans le CSS et le comportement dans JavaScript. Une feuille de style peut mettre en forme de nombreuses pages. Un titre porteur de sens et un lien ordinaire fonctionnent toujours si le chargement des styles ou des scripts échoue, tandis que les fonctionnalités qui dépendent de JavaScript ont besoin de leur script pour fonctionner.

Le navigateur n’affiche pas le HTML comme une image d’un fichier texte. Il transforme le fichier en objets, détermine leurs styles et leurs positions, puis dessine le résultat. JavaScript peut ensuite modifier ces objets.

Construire un arbre à partir du HTML

Le DOM, ou modèle objet du document, est l’arbre actuel des éléments et du texte dans le navigateur. Prenons cet exemple :

<body><h1>News</h1><p>Hi <a href="/">home</a></p></body>

Le body a deux éléments enfants, h1 et p. Le titre contient « News ». Le paragraphe contient le texte « Hi » suivi d’une espace et un élément a, qui contient « home ». Le lien se trouve dans le paragraphe, pas directement dans le corps.

En lisant le HTML, le navigateur découvre des ressources dans des éléments comme <link>, <script> et <img>. Il demande ces ressources et lit le CSS pour calculer les styles finaux de chaque élément. La mise en page calcule les tailles et les positions. La peinture dessine les pixels. Ces tâches peuvent se répéter lorsque le contenu ou les styles changent.

Laisser les scripts s’exécuter lorsque leurs éléments existent

Un script externe classique sans defer ni async met en pause l’analyse syntaxique du HTML pendant son téléchargement et son exécution. S’il se trouve dans l’en-tête et essaie de trouver un bouton situé plus loin dans le corps, ce bouton n’a pas encore été construit. document.querySelector("button") renvoie null : appeler addEventListener sur ce résultat produit donc une erreur.

Ajoute defer pour permettre à un script de se télécharger pendant que l’analyse syntaxique du HTML se poursuit, puis de s’exécuter une fois cette analyse terminée. Déplacer un script simple juste avant </body> permet aussi aux éléments précédents d’exister d’abord. async ne garantit pas qu’un bouton situé plus loin existe : son téléchargement peut se terminer tôt.

Le HTML source et le DOM actuel peuvent différer

La commande Afficher le code source de la page montre le HTML reçu. Le panneau Éléments, appelé Inspecteur dans Firefox, montre le DOM actuel. JavaScript peut avoir ajouté du contenu, modifié du texte ou supprimé des éléments. Le navigateur peut aussi avoir réparé un HTML mal formé, par exemple en fermant un élément.

Si un titre change après un clic, le panneau Éléments montre le texte modifié. Le code source montre toujours le HTML reçu à l’origine. Une modification du DOM peut déclencher une mise à jour des styles, de la mise en page et de la peinture sans récupérer un nouveau document HTML.

Les erreurs n’ont pas toutes les mêmes effets

Les navigateurs réparent le HTML selon des règles définies et ignorent les déclarations CSS qu’ils ne comprennent pas. Une erreur de syntaxe JavaScript, comme une expression inachevée, empêche le fichier ou le bloc de script de démarrer. Une erreur d’exécution non interceptée met fin à l’exécution en cours et ignore les lignes suivantes de cette exécution. Les autres scripts et les gestionnaires d’événements déjà enregistrés peuvent continuer à fonctionner. Cela explique qu’une page puisse garder son contenu et son style visibles alors qu’une fonctionnalité échoue.

Les moteurs des navigateurs mettent en œuvre des standards communs : Blink dans Chrome et Edge, Gecko dans Firefox et WebKit dans Safari. De petites différences de mise en œuvre rendent utile le test dans plusieurs navigateurs. Les navigateurs construisent aussi un arbre d’accessibilité à partir de la structure de la page pour que les lecteurs d’écran puissent présenter des éléments et des relations porteurs de sens.

Un projet web commence par des fichiers dans un dossier. Un éditeur de code t’aide à écrire ces fichiers et un navigateur te permet de prévisualiser ce qu’ils produisent. Veiller à ce que l’éditeur et le navigateur utilisent la même copie du projet évite de nombreux résultats déroutants.

Choisir un éditeur de code en texte brut

Un éditeur de code enregistre des fichiers texte brut et ajoute la coloration syntaxique, la saisie automatique, des indications d’erreur, une arborescence des fichiers et d’autres aides à la programmation. Les traitements de texte enregistrent la mise en forme du document et peuvent remplacer les guillemets droits par des guillemets courbes : ils ne conviennent donc pas au code source.

Visual Studio Code est une solution gratuite pour Windows, macOS et Linux. Parmi les autres éditeurs figurent Sublime Text, Zed et WebStorm. Un environnement en ligne comme CodePen convient aux essais courts ; les compétences relatives aux fichiers et aux chemins se transfèrent d’un outil à l’autre.

Créer et ouvrir un projet

Pour un premier projet VS Code :

1. Télécharge et installe l’éditeur depuis son site officiel, https://code.visualstudio.com/.
2. Crée un dossier comme web-projects/my-first-site.
3. Choisis Fichier → Ouvrir le dossier et ouvre my-first-site pour que l’arborescence affiche tout le projet.
4. Crée index.html. En mode HTML, saisis ! et choisis la suggestion Emmet pour obtenir une structure HTML de base.
5. Enregistre avec Ctrl+S sous Windows et Linux ou Cmd+S sous macOS.

Utilise une structure de dossiers adaptée aux rôles de tes fichiers :

my-first-site/
  index.html
  styles/main.css
  scripts/app.js
  images/logo.png

Utilise des noms en minuscules et des traits d’union, sans espaces. Garde les extensions visibles pour que index.html ne devienne pas index.html.txt sans que tu t’en aperçoives. Enregistre le texte en UTF-8 et inclus <meta charset="utf-8"> dans l’en-tête HTML pour que le texte, notamment les noms accentués, soit interprété correctement.

Choisir une méthode de prévisualisation

Un serveur web local sert un dossier sur ton ordinateur. Il peut utiliser http://localhost:5500/ ou http://127.0.0.1:3000/ ; utilise l’adresse fournie par ton outil de prévisualisation. Les chemins relatifs à la racine ont besoin d’un serveur pour partir de la racine de ton site. Les fonctionnalités comme les modules JavaScript ou la récupération de données nécessitent aussi une prévisualisation HTTP, car les navigateurs limitent leur utilisation sur les pages ouvertes depuis des fichiers locaux.

Dans VS Code, l’extension Live Preview de Microsoft ou une extension Live Server peut démarrer un serveur et actualiser la prévisualisation après l’enregistrement. Vérifie l’éditeur avant d’installer des extensions, car elles exécutent du code sur ton ordinateur. Le formatage à l’enregistrement, le retour automatique à la ligne et l’enregistrement automatique peuvent faciliter la modification ; un outil comme Prettier permet de conserver une mise en forme cohérente.

Suivre le cycle de modification et de vérification

Modifie, enregistre, recharge ou laisse la prévisualisation se recharger, inspecte le résultat et corrige le fichier. Si le navigateur affiche toujours un ancien contenu, vérifie l’indicateur de fichier non enregistré dans l’éditeur et compare le chemin de la prévisualisation avec le projet ouvert. Tu peux avoir deux dossiers contenant une page de même nom. Vérifie aussi le nom et l’extension exacts du fichier : une extension de fichier texte peut empêcher le navigateur de traiter un fichier comme une page HTML.

Les outils de développement du navigateur donnent accès à la page en cours d’exécution. Utilise-les pour tester un style, lire une erreur ou comparer la page active au fichier dans ton éditeur.

Ouvrir les outils et choisir un panneau

Fais un clic droit sur une partie d’une page sur ordinateur et choisis Inspecter. Les raccourcis courants sont F12 ou Ctrl+Shift+I sous Windows et Linux, et Cmd+Option+I sous macOS. Dans Safari, il faut d’abord activer les fonctionnalités pour les développeurs dans Réglages → Avancés ; le libellé de l’option varie selon la version de Safari.

Trouver le style qui l’emporte

Inspecte un titre. Sélectionner son nœud met en évidence sa boîte sur la page, avec le contenu, la marge intérieure, la bordure et la marge extérieure. Le panneau Styles répertorie les règles et leurs emplacements dans les fichiers sources, comme main.css:12. Une déclaration barrée ne s’applique pas à cet endroit : une autre règle peut la remplacer ou la déclaration peut être invalide. Les déclarations invalides peuvent aussi porter un indicateur d’avertissement.

Ouvre l’onglet des styles calculés pour voir les valeurs finales. Si deux règles indiquent des couleurs de texte différentes, la couleur calculée te donne le résultat. Tu peux modifier temporairement une valeur, désactiver une déclaration ou modifier du texte et des attributs pour tester une idée.

Les modifications ordinaires en direct affectent le DOM ou les styles de ton onglet. Le rechargement les remplace par les fichiers chargés. Pour conserver une amélioration, effectue la même modification dans le fichier source, enregistre et recharge. Modifier un prix affiché dans le panneau Éléments change l’affichage local ; cela ne modifie pas le prix stocké par le serveur.

Lire une erreur de console comme un indice

Une erreur comprend un message et généralement un fichier et une ligne. Par exemple :

Uncaught TypeError: Cannot read properties of null
(reading 'addEventListener') at app.js:3

Lis app.js:3 comme l’emplacement du code source à inspecter. Le code a essayé d’utiliser un objet manquant. Si un sélecteur cherchait un bouton, vérifie que son orthographe correspond à un élément et que cet élément existait lorsque le script s’est exécuté. Le message seul ne permet pas de trancher entre ces causes.

La console affiche aussi les échecs de chargement de ressources, comme une requête GET qui se termine par 404, et les messages affichés par console.log(). Une erreur de script peut expliquer qu’un bouton ne fonctionne pas, même si son fichier a été téléchargé avec succès.

Essayer une petite expression et un écran étroit

La console peut évaluer du JavaScript. Saisir 2 + 3 renvoie 5 ; document.title renvoie le titre actuel. L’affectation document.body.style.background = "lightyellow" modifie l’arrière-plan de la page dans l’onglet. Ne colle pas dans la console du code provenant d’une personne en qui tu n’as pas confiance : il s’exécute avec un accès à la page et peut être utilisé abusivement sur un compte.

Utilise l’icône de téléphone et de tablette pour activer le mode adaptatif. Choisis une faible largeur comme 375 pixels CSS pour voir comment la mise en page s’adapte. Cela simule une zone d’affichage, mais pas tous les comportements d’un vrai téléphone ; une vérification sur un appareil réel apporte des informations que le redimensionnement ne peut pas fournir.

Le panneau Réseau montre les échanges distincts qui se produisent pour une page. Il peut révéler pourquoi une image manque, pourquoi la mise en forme a échoué ou pourquoi un rechargement a transféré moins de données que prévu.

Enregistrer avant de recharger

Ouvre les outils de développement, choisis Réseau, assure-toi que l’enregistrement est actif et recharge la page. Le panneau ne peut pas reconstituer les requêtes terminées avant son ouverture. Si la liste est vide, vérifie l’enregistrement et les filtres, puis recharge à nouveau.

Les lignes montrent le nom ou l’URL, la méthode, le statut, le type, la taille et la durée de chaque requête. Le diagramme en cascade montre quand les requêtes ont commencé et comment leurs durées se chevauchent. Il aide à voir le chargement d’une page comme plusieurs récupérations de ressources plutôt que comme une seule action indivisible.

Ouvrir une ligne pour obtenir tous les indices

Sélectionne une requête. En-têtes montre l’URL et la méthode demandées, le statut de la réponse et les champs d’en-tête de la requête et de la réponse. Aperçu affiche une vue utile du contenu des réponses prises en charge. Réponse montre le contenu renvoyé plus directement, tandis que Temps détaille le temps consacré aux phases de la requête.

Pour une image manquante, compare l’adresse complète demandée avec l’emplacement réel de l’image. Un nom de fichier seul peut masquer un dossier parent incorrect.

Diagnostiquer un exemple de chargement

Cinq requêtes ont transféré 31,8 ko au total. La requête pour Hero.jpg a échoué. Son petit corps HTML est la page d’erreur du serveur, ce qui explique le type MIME text/html pour une requête d’image. Si le fichier réel est images/hero.jpg, remplace src="images/Hero.jpg" par src="images/hero.jpg" et recharge pour tester la correction.

Filtre sur Img pour te concentrer sur les images, sur CSS pour les feuilles de style ou sur un nom pour trouver une ressource précise. Lorsqu’une feuille de style échoue, inspecte son statut et son Content-Type. Même un 200 ne peut pas transformer une réponse HTML en CSS utilisable.

Garder les redirections et les réponses en cache visibles

Active Conserver le journal avant de suivre une navigation que tu veux examiner. Une redirection de HTTP vers HTTPS peut alors afficher une ligne 301 et son champ d’en-tête Location, suivis d’une nouvelle requête 200.

Une ligne portant la mention « (memory cache) » ou « (disk cache) » signifie que le navigateur a réutilisé du contenu stocké. Un 304 implique quand même une réponse du serveur, mais seuls les champs d’en-tête sont renvoyés, ce qui évite de transférer à nouveau le corps. Les colonnes Taille et Taille transférée répondent donc à des questions différentes de la seule taille du fichier.

Utilise Désactiver le cache lorsque les outils de développement sont ouverts pour comparer avec de nouvelles récupérations. La limitation du débit réseau simule une connexion plus lente pour que tu puisses observer quel contenu apparaît en premier. Les noms des réglages prédéfinis de vitesse varient selon la version du navigateur.

Une ligne en échec sans statut de réponse peut indiquer une défaillance DNS ou de connexion ; Chrome peut afficher net::ERR_NAME_NOT_RESOLVED. En dehors du navigateur, curl -I https://example.com envoie HEAD et affiche le statut et les champs d’en-tête pour vérifier rapidement la réponse.