PYTHON
SERVEUR WEB

Introduction

Un serveur web est un logiciel. Il est possible :

Cette première solution est retenue dans ce TP. Pour cela, il vous faut créer deux fichiers, l'un en HTML, l'autre en Python. Les deux fichiers, encodés en utf-8, sont sauvegardés dans le même dossier. Le démarrage du programme en Python crée un serveur web mettant à disposition, sur le réseau local, la page HTML que vous aurez élaborée.

Programmer

Créez un serveur web démarrant sur le port 5555

# Importation des bibliothèques
import http.server
import socketserver

# Serveur délivrant le contenu du répertoire courant
adr=("",5555)
mod=http.server.SimpleHTTPRequestHandler
socketserver.TCPServer(adr,mod).serve_forever()

Créez une page HTML

Le HTML est le principal langage utilisé sur le web. Avec l'éditeur de texte Notepad++, recopiez le code ci-dessous. L'indentation est facultative, elle améliore la lisibilité du code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    Bonjour, moi c'est Julie!
  </body>
</html>

Enregistrez :

Explications

<!DOCTYPE html> Instruction nommée prologue indiquant la version du HTML utilisée, ici la version 5.
<html> ... </html> Balises principale de toutes les pages web.
<head> ... </head> Balises d'en-tête de la page.
<body> ... </body> Balises du corps de la page.
<meta charset="utf-8"> Balise indiquant que le fichier est sauvegardé avec l'encodage utf-8.

Remarque

La plupart des balises fonctionnent par paires. Quelques-unes, comme la balise <meta ... >, sont dites auto-fermantes ou vides. charset est un attribut de balise et utf-8 la valeur de cet attribut.

Expérimenter

Retrouvez l'adresse IP de votre PC

Procédure normale :

Si cmd n'est pas accessible :

Testez localement votre serveur

Diffusez votre message

Proposez à votre voisin (ou voisine) de tester votre serveur web en lui demandant de taper dans la barre d'adresse de son navigateur :

Pour aller plus loin

Balises HTML

Encadrez du texte avec les balises :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <u>Bonjour</u>, <i>moi</i> c'est <b>Julie</b>!
  </body>
</html>

Feuille de style CSS

Mettez des couleurs avec une feuille de style placée entre les balises <head> et </head>.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      u { color: #bb2233; }
      i { color: #22bb33; }
      b { color: #2233bb; }
    </style>
  </head>
  <body>
    <u>Bonjour</u>, <i>moi</i> c'est <b>Julie</b>!
  </body>
</html>

Lien vers une autre page

Ajoutez, dans la page index.html, entre les balises <body> et </body> :

<a href="page2.html">Lien vers la page 2</a>

Créez la page page2.html ci-dessous puis testez.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <a href="index.html">Retour vers la page de départ.</a>
  </body>
</html>

Autres balises HTML

Testez les balises ci-dessous, auto-fermantes ou fonctionnant par paires, et retrouvez à quoi elles servent :