Rappels de SNT
1) Fichier HTML
- Tapez le code HTML ci-dessous dans un éditeur de texte comme notepad++.
- Enregistrer le fichier au format html.
- N’attendez pas d’avoir fini pour enregistrer votre fichier afin de bénéficier de la coloration syntaxique.
- Ouvrir le fichier enregistré (clic droit) avec un navigateur pour visualiser la page web. Testez avec plusieurs navigateurs.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"/> <title>HTML</title> </head> <body> <p>Ma première page codée en HTML</p> </body> </html>
Le code HTML n’est pas indenté obligatoirement comme le code python.
Mais l’indentation est recommandée pour rendre le code plus lisible.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>HTML</title> </head> <body> <p>Ma première page codée en HTML</p> </body> </html>
L’indentation ne fait pas partie du langage comme en python.
Cette page a aussi été transférée vers un serveur web : cliquez ici
5.Ouvrez la page distante ci-dessus et comparer le code html avec celui de la page que vous avez créé.
pour voir le code source de la page faites un clic droit. Ensuite afficher le code source ou inspecter pour des informations plus complètes.
selon le navigateur :

2) Ajout de style
Ajout de style dans un même fichier HTML
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"/> <title>HTML</title> </head> <body> <p>Ma première page codée en <b><font face="verdana" color="red" size="10">HTML</font></b></p> </body> </html>
On souhaite réaliser la page web ci-dessous (capture)

Vous avez ci-dessous le code html à tester pour obtenir le même résultat.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"/> <title>HTML</title> <style> body{ font-family:Tahoma, Geneva, sans-serif; } h1{ font-size:35px; color:orange; } h2{ font-size:25px; color:#444444; } </style> </head> <body> <header> <h2>Histoire de l'internet et du web</h2> </header> <h1>1990</h1><br/> <img src="https://www.rtflash.fr/sites/default/files/imagecache/format_article/tim_berners-lee_lance_la_campagne_fortheweb.jpg" alt="image Tim Berner Lee"/><br/> <h2>Tim Berners Lee </h2> <p> "J'ai tenté de faire du Web, une plate-forme universelle et neutre qui ne doit pas entrer en conflit avec du matériel spécifique, un logiciel, un réseau, un langage, une culture, un handicap, ou encore des données spécifiques"<br/> <br/> <a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee">En savoir plus </a> <br/> <a href="https://www.youtube.com/watch?v=PbCG_BeL5dY">Vidéo</a> </p> </body> </html>
3) Fichier HTML+ Fichier CSS
Séparation du style et du contenu
Afin d’améliorer la maintenance du site web avec l’ajout de pages partageant la même charte graphique il est préférable de séparer le contenu du style.
Le contenu sera codé dans un fichier html et le style dans un fichier css appelé feuille de style(Cascading style sheet)
<html lang="fr"> <head> <meta charset="utf-8"/> <title>HTML & CSS</title> <link rel="stylesheet" href="style001.css"/> </head> <body> <header> <h2>Une date importante de l'histoire de l'internet et du web</h2> </header> <h1>1990</h1><br/> <img src="https://www.rtflash.fr/sites/default/files/imagecache/format_article/tim_berners-lee_lance_la_campagne_fortheweb.jpg" alt="Tim Berners Lee "/><br/> <h2>Tim Berners Lee </h2> <p> "J'ai tenté de faire du Web, une plate-forme universelle et neutre qui ne doit pas entrer en conflit avec du matériel spécifique, un logiciel, un réseau, un langage, une culture, un handicap, ou encore des données spécifiques"<br/> <br/> <a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee">Cliquer ICI </a> </p> </body> </html>
body{ margin:50; font-family:Tahoma, Geneva, sans-serif; } h1{ font-size:35px; color:orange; } h2{ font-size:25px; color:#555555; }
4) Réalisez votre mini site web
Exploitez ce que vous avez appris pour réaliser deux pages web liées entre elles et partageant la même feuille de style.
Sujet : Une grandeur physique associée à la météo
- Température
- Température ressentie
- Pression atmosphérique
- Vitesse du vent ,Rafales
- Taux d’humidité
- Point de rosée
- Pluviométrie
- Éclairement énergétique
- ……..
Vérifiez que les images utilisées sont libres de droit
Ce que vous avez appris est suffisant ,mais pour ceux qui souhaitent aller plus loin: