Objectifs pédagogiques
À l’issue de cet article, l’étudiant sera capable de :
- Comprendre ce qu’est un site web au sens technique et structurel, et savoir le distinguer d’une simple page web.
- Expliquer précisément le rôle et le fonctionnement d’un navigateur web dans l’architecture du Web.
- Comprendre les bases du HTML en tant que langage de structuration fondamental du Web.
- Décrire l’architecture client / serveur et le cheminement complet d’une requête Web.
- Identifier clairement les rôles respectifs de l’hébergement, du nom de domaine, du serveur et du navigateur.
- Utiliser les outils logiciels de base nécessaires au travail Web.
Prérequis :
- Aucun pré-requis technique avancé. Une aisance minimale avec l’ordinateur (Windows ou macOS), la navigation Web et la gestion de fichiers est suffisante.
Comprendre ce qu’est réellement le Web
1.1 Internet et Web : deux notions distinctes
Internet désigne l’infrastructure réseau mondiale permettant l’échange de données entre ordinateurs à l’aide de protocoles standardisés (TCP/IP). Il s’agit d’un réseau de réseaux, composé de câbles, de routeurs, de centres de données et de points d’échange.
Le World Wide Web, ou Web, est l’un des services les plus connus fonctionnant sur Internet. Il repose sur l’utilisation de documents hypertextes reliés entre eux par des liens, accessibles via un navigateur web.
Il repose sur trois piliers fondamentaux :
- Un client : le navigateur (Chrome, Firefox, Safari…)
- Un serveur : une machine qui héberge des fichiers et des applications
- Un protocole : un langage de communication standardisé (HTTP / HTTPS)
Le web fonctionne selon un modèle client–serveur.
Le rôle du navigateur (client)
Le navigateur est l’outil utilisé par l’utilisateur final.
Son rôle est de :
- Envoyer une requête HTTP à un serveur
- Recevoir une réponse
- Interpréter le code reçu (HTML, CSS, JavaScript)
- Afficher une interface graphique interactive
Exemples de navigateurs :
- Google Chrome
- Mozilla Firefox
- Safari
- Edge
Pour un designer UX/UI, le navigateur est l’environnement final d’affichage du produit.
Le rôle du serveur
Un serveur web est une machine connectée à Internet en permanence.
Il peut :
- Héberger des fichiers (HTML, CSS, images…)
- Exécuter du code (PHP, Node.js…)
- Interroger une base de données
- Générer dynamiquement des pages web
Exemples de serveurs web :
- Apache
- Nginx
- LiteSpeed
Un site WordPress est un site dynamique : les pages sont générées à la demande par le serveur.
Nom de domaine & hébergement
C’est l’espace serveur où sont stockés :
- les fichiers du site
- la base de données
- la configuration serveur
Types d’hébergement :
- Mutualisé
- VPS
- Serveur dédié
- Cloud
En tant que designer, tu ne gères pas toujours l’hébergement, mais tu dois comprendre ses contraintes.
Le trajet d’une page web (schéma logique)
- L’utilisateur saisit une URL dans son navigateur
- Le navigateur interroge le DNS
- Le DNS renvoie l’adresse du serveur
- Le navigateur envoie une requête HTTP
- Le serveur traite la demande
- Le serveur renvoie une réponse (HTML, CSS, JS…)
- Le navigateur affiche la page
Ce processus se produit en quelques millisecondes.
HTTP / HTTPS : la base de la communication
🔹 HTTP
- Protocole de communication
- Non chiffré
🔹 HTTPS
- Version sécurisée (chiffrement SSL/TLS)
- Indispensable aujourd’hui
- Impact direct sur :
- la sécurité
- la confiance utilisateur
- le référencement (SEO)
Tout projet web professionnel doit être en HTTPS.
Sites statiques vs sites dynamiques
🔹 Site statique
- Pages HTML fixes
- Peu ou pas de base de données
- Rapide, mais peu flexible
🔹 Site dynamique
- Pages générées à la demande
- Base de données
- Contenu administrable (WordPress, Shopify…)
WordPress = site dynamique basé sur PHP + MySQL
Où se situe le Product Designer / UX-UI ?
Le designer n’est pas développeur, mais :
- Il doit comprendre les contraintes techniques
- Il conçoit des interfaces réalisables
- Il anticipe :
- le responsive
- les performances
- l’accessibilité
- Il facilite le travail des équipes techniques
Un bon design est techniquement cohérent.
Exercice pratique
- Ouvrir les DevTools du navigateur
- Inspecter une page web
- Identifier :
- le HTML
- le CSS
- les fichiers JavaScript
- Repérer les requêtes réseau (onglet Network)
Objectif : visualiser concrètement le fonctionnement du web
Synthèse
- Le web repose sur une architecture client–serveur
- Le navigateur affiche, le serveur fournit
- HTTP/HTTPS est le langage de communication
- WordPress est un système dynamique
- Le designer doit comprendre le système pour mieux concevoir
1. Comprendre ce qu’est réellement le Web
1.1 Internet et Web : deux notions distinctes
Internet désigne l’infrastructure réseau mondiale permettant l’échange de données entre ordinateurs à l’aide de protocoles standardisés (TCP/IP). Il s’agit d’un réseau de réseaux, composé de câbles, de routeurs, de centres de données et de points d’échange.
Le World Wide Web, ou Web, est l’un des services les plus connus fonctionnant sur Internet. Il repose sur l’utilisation de documents hypertextes reliés entre eux par des liens, accessibles via un navigateur web.
| Internet | Web |
|---|---|
| Infrastructure réseau | Service applicatif |
| Transmission de données | Consultation de documents |
| Emails, FTP, VPN, Web | Pages HTML, sites web |
Cette distinction est essentielle pour comprendre que le Web n’est pas Internet, mais une application majeure construite au-dessus de celui-ci.
1.2 Le Web comme système de documents hypertextes
Le Web repose sur le principe de l’hypertexte, c’est-à-dire la possibilité de naviguer d’un document à un autre grâce à des liens cliquables. Ce principe, formalisé dès les années 1990, constitue la base de la navigation Web moderne.
Chaque document est identifié par une URL (Uniform Resource Locator) et peut contenir du texte, des images, des médias et des scripts.
Illustration à insérer
Schéma « Qu’est-ce qu’une URL ? » (Protocole / Nom de domaine / Chemin d’accès).
2. Qu’est-ce qu’un site web ?
2.1 Définition technique d’un site web
Un site web est un ensemble structuré de pages web et de ressources associées (images, feuilles de style, scripts, médias) accessibles à partir d’une adresse Web commune, généralement un nom de domaine. Un site web est hébergé sur un serveur et consulté à l’aide d’un navigateur web. Il constitue une unité logique cohérente, tant sur le plan technique que sur le plan éditorial.
2.2 Page web et site web : ne pas confondre
Une page web correspond à un document unique, le plus souvent écrit en HTML, tandis qu’un site web est un ensemble organisé de pages interconnectées.
| Page web | Site web |
|---|---|
| Document unique | Ensemble structuré |
| Fichier HTML | Pages + ressources |
| URL précise | Domaine ou sous-domaine |
Cette distinction est fondamentale dans la conception et l’architecture d’un projet Web.
3. Le modèle client / serveur
3.1 Principe général
Le fonctionnement du Web repose sur une architecture dite client / serveur. Le client est généralement le navigateur web utilisé par l’utilisateur, tandis que le serveur est une machine distante chargée de stocker et de fournir les ressources demandées.
Le client envoie une requête, le serveur la traite et renvoie une réponse. Cette logique simple est au cœur de toutes les interactions Web.
Illustration à insérer
Schéma « Modèle Client-Serveur sur le Web » (requête HTTP/HTTPS, réponse HTML/CSS/JS).
3.2 Étapes d’une requête Web
- L’utilisateur saisit une URL dans le navigateur.
- Le navigateur interroge le système DNS pour obtenir l’adresse IP du serveur.
- Une requête HTTP ou HTTPS est envoyée au serveur.
- Le serveur renvoie une réponse (HTML, CSS, JavaScript, données).
- Le navigateur interprète la réponse et affiche le résultat.
4. Le navigateur web
4.1 Définition et rôle
Un navigateur web est un logiciel permettant d’accéder aux ressources du Web, de les interpréter et de les afficher sous une forme lisible et interactive. Le navigateur joue un rôle central : il est à la fois client HTTP, moteur d’interprétation HTML/CSS, moteur JavaScript et interface utilisateur.
Illustration à insérer
Planche « Exemples de navigateurs Web » (Chrome, Firefox, Safari, Edge).
4.2 Fonctions principales d’un navigateur
- Envoyer des requêtes vers des serveurs distants.
- Télécharger et interpréter des documents HTML.
- Appliquer les règles de mise en forme CSS.
- Exécuter du code JavaScript.
- Gérer la navigation, l’historique et la sécurité.
Illustration à insérer
Infographie « Fonctions clés d’un navigateur Web » (HTTP/HTTPS, ressources, scripts, DOM).
4.3 Navigateurs et moteurs de rendu
| Navigateur | Moteur |
|---|---|
| Chrome | Blink |
| Edge | Blink |
| Firefox | Gecko |
| Safari | WebKit |
Ces moteurs influencent les performances, la compatibilité et parfois le rendu visuel.
5. Les outils de développement du navigateur
Tous les navigateurs modernes intègrent des outils de développement permettant d’analyser et de tester les pages web.
- Inspection du code HTML et CSS
- Console JavaScript
- Analyse des requêtes réseau
- Simulation d’affichage mobile
Raccourcis clavier
Windows / Linux : F12 ou Ctrl + Shift + I
macOS : Cmd + Option + I
6. Les serveurs Web
6.1 Qu’est-ce qu’un serveur Web ?
Un serveur web est une machine (physique ou virtuelle) connectée à Internet, configurée pour répondre à des requêtes HTTP. Il héberge les fichiers constituant un site web et les met à disposition des clients.
6.2 Logiciels serveurs courants
| Serveur | Caractéristiques |
|---|---|
| Apache | Très répandu, modulaire |
| Nginx | Performances élevées |
| LiteSpeed | Optimisé pour l’hébergement |
7. Les noms de domaine et le DNS
7.1 Rôle du nom de domaine
Un nom de domaine est une adresse textuelle permettant d’identifier un site web sans avoir à mémoriser une adresse IP numérique. Il constitue l’entrée principale vers un site.
7.2 Le système DNS
Le DNS (Domain Name System) est un système de résolution qui associe un nom de domaine à une adresse IP. Il agit comme un annuaire distribué à l’échelle mondiale.
Illustration à insérer
Schéma « Comment fonctionne le DNS ? » (domaine → DNS → IP → serveur).
8. L’hébergement Web
8.1 Définition
L’hébergement Web consiste à stocker les fichiers d’un site sur un serveur accessible en permanence depuis Internet.
8.2 Types d’hébergement
| Type | Avantages | Limites |
|---|---|---|
| Mutualisé | Économique | Ressources partagées |
| VPS | Flexible | Technique |
| Dédié | Performant | Coût |
| Cloud | Scalabilité | Complexité |
Illustration à insérer
Infographie « Types d’hébergement Web » (Mutualisé, VPS, Dédié, Cloud).
9. Le HTML : langage fondamental du Web
9.1 Définition
Le HTML (HyperText Markup Language) est un langage de balisage utilisé pour structurer le contenu des pages web. Il permet de définir la hiérarchie des informations et leur signification.
9.2 Rôle du HTML dans l’écosystème Web
Le HTML ne gère ni la mise en forme avancée ni l’interactivité. Son rôle est de fournir une structure logique et sémantique sur laquelle s’appuient le CSS et le JavaScript.
9.3 Exemple de document HTML minimal
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Page de test</title>
</head>
<body>
<h1>Structure HTML</h1>
<p>Exemple de contenu.</p>
</body>
</html>Illustration à insérer
Schéma « Code HTML → rendu navigateur » (éditeur à gauche, page à droite).
10. Outils logiciels nécessaires
| Outil | Usage |
|---|---|
| Visual Studio Code | Édition de code |
| TextEdit (texte brut) | Édition simple |
| Notepad++ | Édition simple |
| Navigateur web | Test et analyse |
11. Exercices et tests
Exercice 1
Créer un fichier HTML et l’ouvrir dans un navigateur.
Exercice 2
Inspecter la structure HTML via les outils de développement.
Tests en ligne
- CodePen
- JSFiddle
- StackBlitz
12. Points clés à retenir
- Le Web est un service reposant sur Internet.
- Un site web est un ensemble structuré de pages.
- Le navigateur est l’outil central de consultation.
- Le HTML est le langage fondamental de structuration.
13. Transition vers la suite du module
La section suivante abordera le HTML avancé, en mettant l’accent sur la sémantique, l’accessibilité et les bonnes pratiques de structuration du contenu.