PYTHON
SERVEUR WEB

Introduction

Un serveur Web (HTTP, HTTPS) est un logiciel. Il est possible :

La première solution est retenue dans ce TP. Pour cela, il vous faut créer deux fichiers :

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.

Expérimenter

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

import http.server

adr=("", 5555)
mod=http.server.SimpleHTTPRequestHandler

http.server.HTTPServer(adr,mod).serve_forever()

Créez une page HTML

Le HTML est le principal langage utilisé sur le web. Avec un éditeur de texte (Notepad++, Sublime Text), 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 dans le même dossier que précédemment sous le 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.

Retrouvez l'adresse IP de votre PC

Procédure normale :

Si la commande 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 :

Programmer

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>

Pour aller plus loin

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