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.
import http.server adr=("", 5555) mod=http.server.SimpleHTTPRequestHandler http.server.HTTPServer(adr,mod).serve_forever()
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
.
<!DOCTYPE html> | Instruction nommée prologueindiquant 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. |
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.
Procédure normale :
Si la commande cmd n'est pas accessible :
Proposez à votre voisin (ou voisine) de tester votre serveur web en lui demandant de taper dans la barre d'adresse de son navigateur :
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>
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>
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>
Testez les balises ci-dessous, auto-fermantes ou fonctionnant par paires, et retrouvez à quoi elles servent :