Cours World Wide Web en PDF (Intermédiaire)

World Wide Web : Ce qu'il faut savoir. Le World Wide Web (WWW) désigne l'ensemble des ressources accessibles via des serveurs et consultables avec un navigateur grâce aux protocoles et aux langages du Web. Il repose sur le triptyque technique URL / HTTP / HTML et sur le paradigme client‑serveur pour l'échange de documents et d'objets hypermédias. Le document présente ces fondements, des exemples de code HTML/XHTML et des pistes pratiques (TP) pour être opérationnel.

🎯 Ce que vous allez apprendre

• URL et ressources

  Définition formelle de l'URL et des types de ressources adressables (pages, images, programmes, fichiers). Distinction entre chemins relatifs et absolus et raisonnement sur la résolution DNS pour localiser une ressource, utile pour anticiper les comportements de chargement et le référencement.

• Protocole HTTP et transactions

  Fonctionnement request/response du protocole HTTP et implications opérationnelles. Méthodes pour analyser une transaction HTTP, diagnostiquer une erreur et comprendre les conséquences d'un protocole sans état sur la conception d'applications Web.

  Codes de statut HTTP courants

  Code	Signification
  200	Requête traitée avec succès (OK)
  403	Accès refusé (Forbidden)
  404	Ressource introuvable (Not Found)

• Le concept d'Hypertexte

  Présentation du système hypertexte et du rôle des liens hypertextes pour relier des documents répartis sur des machines distinctes. Exemples de navigation entre ressources, résolution via URI/URL et impact sur l'architecture documentaire et le référencement.

• HTML / XHTML et composition de pages

  Structure déclarative d'une page, balises essentielles et intégration d'objets (images, liens, formulaires). Exercices pratiques pour écrire une page simple conforme au modèle présenté et optimiser l'ordre de chargement des ressources afin d'améliorer l'affichage progressif. Un fichier HTML référence des objets externes via des attributs tels que src ou href pour inclure images, scripts et feuilles de style ; ces références conditionnent le rendu et la performance de la page.

  Accessibilité : utiliser des attributs alt descriptifs pour les images, des libellés explicites () pour les champs de formulaire et des éléments sémantiques (header, nav, main, footer) pour améliorer la navigation assistive. La table des codes HTTP utilise une <caption> et des <th scope="col"> pour clarifier la structure aux lecteurs d'écran.

• Aspects client et serveur

  Rôle du navigateur (client HTTP) et du serveur Web, distinction entre application serveur et machine hébergeant le serveur. Présentation pratique de serveurs populaires (Apache, Nginx), interactions entre modules (scripting, sécurité, redirections) et configuration d'un flux de requêtes simples vers un serveur local.

• Pages dynamiques, PHP et liaison BD

  Principes de génération dynamique et introduction à la programmation côté serveur avec PHP ainsi que l'articulation avec une base de données. Identification des étapes pour générer une page dynamique et préparation des requêtes côté serveur pour interroger une base de données.

• Performance et optimisation de chargement

  Facteurs influençant le temps d'affichage : nombre et volume des ressources, charge serveur, réseau et chiffrement. Règles pratiques pour réduire le temps de rendu (priorisation du texte, chargement asynchrone) et méthodes d'évaluation de l'impact des assets sur la latence.

📑 Sommaire du document

• Introduction au Web
• Architecture Client-Serveur
• Protocole HTTP
• Langage HTML/XHTML
• Initiation PHP/BD

Fonctionnement du système hypertexte

Le système hypertexte repose sur des références croisées (liens hypertextes) qui permettent de naviguer entre documents hébergés sur des machines différentes. Un lien contient une URI/URL servant d'identifiant unique pour localiser la ressource ; le navigateur web résout cette adresse via DNS puis établit une transaction HTTP ou HTTPS. Ce mécanisme distribué facilite la structuration documentaire, le maillage sémantique et le référencement naturel, tout en introduisant des considérations de sécurité et de performance lors de la conception des contenus.

L'architecture Client-Serveur du Web

Le modèle client‑serveur organise l'échange d'informations entre un client (généralement un navigateur) et un serveur Web. Le cycle classique se compose d'une requête émise par le client et d'une réponse fournie par le serveur ; ce schéma est à la base du fonctionnement de HTTP et des services Web.

• Requête (Client) : le navigateur construit une requête HTTP contenant méthode, URI, en-têtes et parfois un corps (POST). Les développements frontaux et outils d'inspection réseau permettent d'analyser ces échanges.
• Traitement (Serveur) : le serveur reçoit la requête, exécute la logique applicative (scripts, accès BD), et génère une réponse. Des composants intermédiaires (reverse proxy, cache, PHP‑FPM) peuvent modifier ou optimiser ce flux.
• Réponse (Serveur) : en-têtes, code de statut et corps retournent la ressource demandée ou une erreur. Les en-têtes contrôlent la mise en cache, le type de contenu et les directives de sécurité.

Installation et rôle du serveur Web

Le serveur Web reçoit les requêtes HTTP/S et sert des ressources statiques ou dynamiques. Les implémentations courantes incluent le serveur Apache et Nginx ; Apache est souvent employé pour sa compatibilité avec des modules et configurations riches, tandis que Nginx est privilégié pour la gestion efficace des connexions et le reverse proxy. L'installation minimale consiste à configurer l'écoute sur un port, définir les répertoires racine et les règles de sécurité, puis lier le serveur à un moteur d'exécution (PHP-FPM, par exemple) pour les pages dynamiques. Ces éléments ancrent la théorie dans la pratique opérationnelle.

Différence entre le World Wide Web et Internet

Le World Wide Web est un système d'information hypermédia distribué reposant sur des ressources accessibles via des URI/URL et consultées par un navigateur web. Internet, en revanche, est l'infrastructure réseau globale (liaisons, routeurs, fournisseurs d'accès) qui permet l'échange de paquets entre machines. Autrement dit, le Web est un service parmi d'autres tournant sur l'Internet : l'architecture distribuée du Web utilise l'Internet comme couche physique et de transit des données.

Cette distinction aide à comprendre pourquoi des problèmes réseau (latence, DNS, routage) peuvent impacter l'expérience Web sans être liés aux standards applicatifs comme HTTP ou HTML.

Prérequis techniques

Avant d'aborder les exercices et TP, vérifiez ces compétences pratiques de base ; elles facilitent la mise en œuvre et la compréhension des exemples fournis.

• Usage d'un navigateur web (inspecteur réseau, console développeur)
• Éditeur de texte (édition et enregistrement de fichiers HTML/CSS/JS)
• Notions de base sur le protocole TCP/IP (adresses IP, DNS, ports)

Standardisation et W3C

Le Web s'est développé grâce à des standards définis pour assurer compatibilité et évolutivité. Tim Berners‑Lee a initié le projet puis le W3C (World Wide Web Consortium) a structuré la normalisation des technologies (HTML, CSS, URI). Les recommandations du W3C guident les navigateurs et les éditeurs d'outils pour garantir l'interopérabilité entre plateformes et clients.

HTTP est un protocole de la couche application (couche 7) du modèle OSI : il s'appuie typiquement sur TCP (couche Transport) pour l'établissement de connexions fiables, tandis que les couches réseau et liaison (IP, Ethernet) assurent le routage et la transmission des paquets. Comprendre cette hiérarchie — modèle OSI, couche application, requête HTTP, réponse HTTP — aide à diagnostiquer des problèmes qui peuvent être liés soit à la pile applicative, soit à des couches réseau inférieures.

💡 Pourquoi choisir ce cours ?

Le support provient d'une Licence professionnelle (DIST) de l'Université Claude Bernard Lyon 1 et a été rédigé par Lionel Médini, garantissant une perspective pédagogique ancrée en enseignement supérieur. Le document combine historique et fondements techniques — URL, HTTP, HTML/XHTML — avec des exemples pratiques et des TP permettant un passage rapide de la théorie à l'expérimentation. Sa concision le rend adapté comme ressource de révision ou d'introduction technique avant d'aborder PHP et l'intégration avec une base de données.

👤 À qui s'adresse ce cours ?

• Public cible : étudiants en licence professionnelle et techniciens Web consolidant les fondamentaux du WWW, ainsi que développeurs front‑end souhaitant comprendre les implications réseau et l'architecture client‑serveur.
• Prérequis : notions élémentaires d'informatique (usage d'un éditeur de texte et d'un navigateur), bases sur les réseaux (notions de TCP/IP et de DNS) et connaissance minimale de la logique de programmation pour aborder les exemples PHP.

❓ Foire Aux Questions (FAQ)

HTTP est‑il un protocole avec état ?

Non. HTTP est conçu comme un protocole sans état : chaque requête est indépendante ; l'état applicatif se gère via des mécanismes externes (cookies, sessions serveur, tokens), ce qui influe sur la conception côté serveur.

Pourquoi utiliser HTTPS au lieu de HTTP pour un site ?

HTTPS encapsule HTTP dans TLS pour assurer chiffrement, intégrité et authentification du serveur. Son usage est recommandé dès que des données sensibles ou des identifiants transitent, car il protège contre l'écoute passive et les attaques de type « man‑in‑the‑middle ».