PYTHON
SERVEUR WEB

Objectif

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

La première solution est retenue. 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.

Comprendre

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 :

Pratiquer

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>

Approfondir

Mieux connaître le HTML

Testez les balises ci-dessous, retrouvez à quoi elles servent :

Mieux connaître le CSS

Adapter le code ci-dessous pour créer plusieurs boîtes de diverses dimensions et positionnées aux emplacements souhaités.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    #b1, #b2 {
      position: absolute;
      padding: 15px;
      width: 700px;
      height: 100px;
    }
    #b1 {
      background-color: #fde;
      top: 10px;
      right: 30px;
    }
    #b2 {
      background-color: #dfe;
      top: 90px;
      left: 30px;
    }
  </style>
</head>

<body>
  <div id="b1">Boîte 1</div>
  <div id="b2">Boîte 2</div>
</body>

</html>