Les sites statiques

Les premiers sites web étaient composés de pages HTML stockées dans des fichiers se trouvant dans un même répertoire. Le serveur web était alors simplement configuré pour servir tous les fichiers de ce répertoire. C'est ce que l'on appelle communément un site web statique, c'est-à-dire un site web composé de pages HTML qui ne changent pas. Ces sites web statiques sont intéressants pour du contenu tel que ce syllabus qui ne change que rarement. La plupart des sites web actuels sont dynamiques. Un programme reçoit les requêtes des utilisateurs et y répond en générant si nécessaire les pages HTML correspondantes à la volée. Flask permet de construire un tel site web assez facilement en python.

Avant de se lancer dans l'écriture d'un site web dynamique en Flask, il faut se rappeler que sur le web, toute page est identifiée par son Uniform Resource Locator (URL). Quand un utilisateur interagit avec un site web à travers son navigateur, celui-ci charge différentes pages en utilisant l'HyperText Transport Protocol (HTTP). Le fonctionnement détaillé de HTTP sort du cadre de ce cours, mais vous devez savoir qu'un navigateur peut utiliser HTTP de deux façons différentes.

La première est d'envoyer une requête GET HTTP pour un URL particulier. Le serveur web répond à cette requête en renvoyant au navigateur la page HTML correspondant à l'URL demandée. L'immense majorité des requêtes qu'un navigateur fait à un serveur web sont des GET HTTP.

À côté de ces requêtes GET HTTP, un navigateur peut aussi utiliser des requêtes POST HTTP. Une telle requête n'est utilisée que lorsque le navigateur veut envoyer de l'information autre qu'un URL au serveur. C'est par exemple le cas lorsque l'utilisateur remplit un formulaire sur une page web.

Dans un site web purement statique, le serveur web supporte uniquement les requêtes GET HTTP. Pour chaque URL demandée, il analyse la partie fichier de cette URL et si le fichier existe retourne son contenu et sinon une erreur. Pour illustrer cela, considérons que le serveur web est configuré pour servir le répertoire ci-dessous. Celui-ci contient deux fichiers et deux sous-répertoires.

index.html
page.html
css
images

Le répertoire css contient le fichier style.css qui est référencé par les deux pages HTML. Le répertoire images contient le fichier logo.png.

Le fichier index.html contient la page reprise ci-dessous.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css">
  <meta charset="utf-8">
  <title>Un titre</title>
</head>
<body>
  <img src="/images/logo.png">
  <h1>Page d'acceuil</h1>
  <p>Bienvenue sur la page d'acceuil notre site web.</p>
  <p>Vous trouverez d'autres informations <a href=
  "/page.html">ici</a></p>
</body>
</html>

Le site web a été configuré pour servir le document index.html lorsqu'un navigateur demande la racine du site web (/). Le navigateur reçoit donc ce fichier en réponse à sa requête GET HTTP. Il lit le contenu du document HTML et doit directement :

  • faire une requête GET HTTP pour charger la feuille de style (style.css)

  • faire une requête GET HTTP pour charger l'image /images/logo.png

Si l'utilisateur clique sur le lien vers page.html, le navigateur fera une nouvelle requête GET HTTP pour charger cette page depuis le serveur et afficher son contenu. L'interaction entre un navigateur web et un serveur est donc une succession de requêtes HTTP.