PYTHON
SERVEUR WEB

Introduction

Un serveur web est un logiciel. Il est possible :

De le programmer, dans divers langages comme le Python, le JavaScript ou le C++.
Ou d'en installer un tout prêt, comme Apache, Nginx ou Lighttpd.

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

Avec l'EDI EduPython, recopiez le code ci-dessous.

# 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()

Enregistrez dans le dossier de votre choix, sur votre clé USB par exemple.

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 :

Enregistrez dans le même dossier que précédemment.
En sélectionnant l'encodage UTF-8 (sans BOM).
Avec comme nom index.html.

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 :

Démarrez l'invite de commande cmd.
Entrez la commande ipconfig pour identifier l'adresse IP de votre ordinateur.
Notez, sur une feuille de papier, l'adresse IP de votre ordinateur : 172.19 ...

Si cmd n'est pas accessible :

Démarrez l'éditeur de texte Notepad++.
Allez dans le menu Exécution/Exécuter.
Tapez cmd puis valider.

Testez localement votre serveur

Démarrez votre serveur web.
Testez votre serveur en tapant dans la barre d'adresse d'un navigateur :
- http://localhost:5555/
- http://127.0.0.1:5555/
- http://172.19 ... :5555/

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 :

http://172.19 ... :5555/

Pour aller plus loin

Balises HTML

Encadrez du texte avec les balises :

... : Pour souligner.
... : Pour que le texte soit en italique.
... : Pour mettre en caractères gras.

<!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 :

<h1> ... </h1>
...
<hr>
<img src=" ... ">
...
...
<q> ... </q>