Partie 1

Le fonctionnement du Web

Que se passe-t-il quand une page web s'affiche dans un

navigateur, sur votre ordinateur ou votre téléphone?
Ces éléments théoriques ne sont pas strictement nécessaires pour
commencer à faire du développement web dans un premier temps.
Cependant, ils seront plus qu'utiles pour mieux comprendre comment
le Web fonctionne en arrière-plan.
1- Des clients et des serveurs
Les ordinateurs connectés à Internet sont appelés des clients et des
serveurs. Voici un diagramme simplifié qui illustre leur interaction :
 Les clients correspondent aux appareils connectés sur Internet
par les personnes (par exemple, votre ordinateur connecté par Wi-Fi ou votre
téléphone connecté sur le réseau mobile) et aux logiciels d'accès au Web (par
exemple, les navigateurs comme Firefox ou Chrome).
 Les serveurs sont des ordinateurs qui stockent des pages web,
des sites ou des applications.
Lorsqu'un appareil client souhaite accéder à une page web, une copie de la
page est téléchargée depuis le serveur vers le client, la machine utilisée
affiche alors le contenu dans le navigateur web de l'utilisatrice ou de
l'utilisateur.
2- Les autres composants du Web

Le client et le serveur ne sont pas les seuls éléments qui interviennent.

Il y a beaucoup d'autres composants que nous allons décrire dans la
suite de cet article.

En plus du client et du serveur, nous devons aussi mentionner:

- La connexion Internet
Elle permet l'envoi et la réception de données sur le Web.
- TCP/IP

Transmission Control Protocol / Internet Protocol (en français :

protocole de contrôle de transmission d'une part et protocole Internet
d'autre part) sont des protocoles définissant comment les données
voyagent sur le Web.

On peut les comparer aux mécanismes de transport qui vous

permettent de passer une commande, d'aller au magasin et d'acheter
des marchandises.
- DNS

Domain Name System (système de nom de domaine) est une sorte

d'annuaire pour sites web. Lorsque vous saisissez une adresse dans le
navigateur, ce dernier consulte le DNS pour trouver l'adresse réelle du
site web avant de récupérer son contenu.

Le navigateur a besoin de connaître le serveur sur lequel le site web est

situé afin de pouvoir envoyer des requêtes HTTP au bon endroit.
- HTTP

HyperText Transfer Protocol (protocole de transfert hypertexte) est un

protocole d'application définissant le langage de communication entre
les clients et les serveurs.

3- Les fichiers composants

Un site web est constitué de divers fichiers. Ils peuvent être vus
comme diverses parties des produits qu'on achète au magasin. Ces
fichiers peuvent être rangés dans deux catégories :
 Les fichiers de code

Les sites web sont constitués essentiellement de HTML, de CSS et de

JavaScript (nous découvrirons d'autres technologies plus tard).

 Les ressources

Ce vocable recouvre tous les autres matériaux utilisés pour construire

un site web : les images, les musiques, les vidéos, les documents Word
et PDF.
4- Que se passe-t-il exactement ?

Lorsque vous saisissez une adresse web dans votre navigateur (dans
notre analogie, cela correspond à aller jusqu'au magasin) pour acheter
ce que vous cherchez.

 Le navigateur demande au serveur DNS l'adresse réelle du serveur

contenant le site web (vous trouvez l'adresse du magasin).
 Le navigateur envoie une requête HTTP au serveur pour lui
demander d'envoyer une copie du site web au client (vous allez au
magasin et vous passez commande).

Ce message, et les autres données envoyées entre le client et le serveur,

sont échangés par l'intermédiaire de la connexion internet en utilisant
TCP/IP.
 Si le serveur accepte la requête émise par le client, le serveur répond
par un message « 200 OK » au client, qui signifie : « Pas de
problème, tu peux consulter ce site web, le voici. ».

Ensuite le serveur commence à envoyer les fichiers du site web au

navigateur sous forme d'une série de petits morceaux qu'on appelle des
« paquets de données » (le magasin vous fournit les produits et vous les
ramenez chez vous).
 Le navigateur assemble les différents morceaux pour recomposer le
site web en entier puis l'affiche sur votre écran (les produits sont à
votre porte).

5- Ordre d'analyse des fichiers composants

Lorsque les navigateurs envoient des requêtes aux serveurs pour

recevoir des fichiers HTML, ceux-ci contiennent souvent des éléments
<link> qui référencent des feuilles de style CSS externes et des
éléments <script> qui référencent des scripts JavaScript externes.
Il est important de connaître l'ordre selon lequel ces fichiers sont
analysés par le navigateur lorsqu'il charge la page :
- Le navigateur commence par l'analyse du fichier HTML, ce qui
lui permet de reconnaître les éventuels éléments <link> (pour les
feuilles de style CSS externes) et <script> (pour les scripts).

- Pendant l'analyse du fichier HTML, le navigateur envoie

des requêtes au serveur pour les différents fichiers CSS indiqués par les
éléments <link> et pour les fichiers JavaScript indiqués par les éléments
<script>.

Lorsque le navigateur a reçu ces fichiers, il analyse alors leur contenu

CSS et JavaScript.
- En mémoire vive, le navigateur génère une structure à partir du
document HTML analysé : un arbre, qu'on appelle le DOM.

Pour le CSS, il génère en mémoire une structure qu'on appelle le

CSSOM. Le code JavaScript analysé est compilé et exécuté.

- Quand le navigateur construit l'arbre du DOM, lui applique les styles à

partir de l'arbre du CSSOM et exécute le JavaScript, une représentation
visuelle de la page est affichée à l'écran : l'utilisatrice ou l'utilisateur peut
alors voir le contenu de la page et commencer à interagir avec.
6- Des explications sur le DNS

Les vraies adresses web ne sont pas les chaînes pratiques et

mémorisables que vous tapez dans votre barre d'adresse pour trouver
vos sites web favoris.

Il s'agit en réalité de suites de chiffres. Ces suites de chiffre sont des

nombres spéciaux qui ressemblent à ceci :
203.0.113.133 ou 2001:db8:f6cb:01b3:a199:edb5:07c7:45ee.
Ce sont des adresses IP. Elles représentent un endroit unique sur le Web.
Elles ne sont en revanche pas très faciles à retenir.
C'est pour cela que le système de nom de domaine (DNS) a été conçu.

Les serveurs DNS sont des serveurs spéciaux qui font correspondre le
domaine d'une adresse web saisie dans le navigateur
(par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site.

NB : Une adresse IP est une série de chiffres assignée à chaque appareil

connecté à un réseau qui utilise le protocole Internet.
7- Explications sur les paquets

Nous avons utilisé le terme « paquet » pour décrire le format avec

lequel les données étaient envoyées depuis le serveur vers le client.
Qu'est-ce que cela signifie ? Pour simplifier, lorsque des données
sont envoyées sur le Web, elles sont envoyées en milliers de petits
morceaux. Il y a plusieurs raisons à cela.
Tout d'abord, il peut arriver que des paquets soient perdus ou qu'ils
soient corrompus et il est alors plus facile de remplacer ces petits
morceaux.

De plus, les paquets peuvent être dirigés selon différentes routes, ce qui
permet un échange plus rapide et qui permet à plusieurs personnes de
télécharger un même site web au même moment.

Si chaque site web était envoyé sous la forme d'un seul gros paquet, il
n'y aurait que peu de personnes qui pourraient le télécharger à la fois, ce
qui rendrait le Web beaucoup moins efficace et pratique à utiliser.
a- HTML

Pour créer des sites Web, vous devez connaître le HTML —

technique fondamentale utilisée pour définir la structure d'une page
Web.

HTML est utilisé pour dire si votre contenu web doit être reconnu
en tant que paragraphe, liste, en-tête, lien, image, lecteur
multimédia, formulaire ou l'un des nombreux autres éléments
disponibles ou même un nouvel élément à définir par vous même.
b- CSS

Les CSS, et comment les utiliser pour donner un style au HTML (par
exemple, modifier la taille du texte et les polices utilisées, ajouter des
bordures et des ombres portées, mettre en page avec plusieurs
colonnes, ajouter des animations et autres effets visuels).

Les Cascading StyleSheets — ou CSS — (Feuilles de style en

cascade) sont la première technique à apprendre après le HTML.
Alors que HTML s'utilise pour définir la structure et la sémantique du
contenu, les CSS sont employées pour composer et déterminer
l'apparence de ce contenu.
Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la
couleur, la taille et l'espacement de votre contenu, pour le répartir sur
plusieurs colonnes ou bien pour ajouter des animations et autres
fonctionnalités décoratives.

c- JavaScript

Le JavaScript, et comment l'utiliser pour ajouter des fonctionnalités

dynamiques aux pages Web (par exemple, trouver votre emplacement et
le tracer sur une carte, faire apparaître/disparaître des éléments d'interface
utilisateur lorsque vous basculez un bouton, enregistrer les données des
utilisateurs localement sur leurs ordinateurs, et bien plus encore).
JavaScript est un langage de programmation qui vous permet de
mettre en œuvre des éléments complexes sur des pages Web (une
page Web contenant plus que de simples informations statiques).

Chaque fois qu'une page affiche des mises à jour de contenu en

temps réel, des cartes interactives, des animations graphiques 2D /
3D ou un juke-box vidéo défilant, etc.