Fiche de révision : Première page Web avec Python

📋 Plan du Cours

1. Rôles des langages et parcours Web
2. Bases de programmation en Python
3. Génération de fichiers HTML
4. Structure générale d’une page HTML
5. Titres, paragraphes et balises textuelles
6. Images et liens hypertextes
7. Listes, tableaux et blocs HTML
8. Règles et propriétés CSS
9. Personnalisation avec le CSS
10. Tester et valider une page Web
11. Présentation et évolutions du projet

📖 1. Rôles des langages et parcours Web

★ À maîtriser

• 🔄 La création de la page suit ces étapes :
  1. Écrire un programme Python
  2. Générer le fichier index.html contenant du HTML et du CSS
  3. Ouvrir ce fichier dans un navigateur
  4. Laisser le navigateur afficher la page

📌 Python exécute des instructions et peut créer le fichier index.html, HTML décrit le contenu de la page et CSS en règle l’apparence.

Compléments

• Le dossier de travail attendu contient le programme accueil.py et un sous-dossier images contenant bandeau_festival.png.

💡 Astuce mémo

Python fabrique le fichier, HTML décrit son contenu, CSS règle son apparence.

📖 2. Bases de programmation en Python

🔑 Notions clés & Définitions

• Programme Python : Fichier texte contenant des instructions, chacune étant écrite sur une ligne.
• Commentaire : En Python, texte introduit par le symbole # qui explique le programme et n’est pas exécuté.
• Variable : Stockage d’une information, comme un texte ou un nombre, sous un nom associé à une valeur.

★ À maîtriser

📌 En Python, les textes sont écrits entre guillemets et le langage est sensible à la casse, de sorte que print et Print sont différents.

Compléments

• Dans EduPython, on exécute le programme avec le bouton Exécuter ou la touche F5, puis les messages affichés apparaissent dans la console.

📖 3. Génération de fichiers HTML

★ À maîtriser

• 🔄 Pour générer index.html :

  1. Stocker le code HTML dans une chaîne
  2. Ouvrir le fichier en mode écriture avec open()
  3. Écrire la chaîne avec write()
  4. Fermer le fichier ou utiliser with pour le fermer automatiquement

• 🔄 Pour tester le résultat :

  1. Enregistrer le programme
  2. Exécuter le programme
  3. Ouvrir index.html dans un navigateur
  4. Vérifier que la page s’affiche

Compléments

📌 Le fichier généré doit être nommé exactement index.html pour que le navigateur l’ouvre facilement et le reconnaisse comme une page Web.

• Le mode « w » de open() crée ou remplace le fichier, et l’option encoding="utf-8" précise l’encodage utilisé.

💡 Astuce mémo

Stocker le HTML, ouvrir le fichier, écrire, fermer, puis afficher dans le navigateur.

📖 4. Structure générale d’une page HTML

★ À maîtriser

• Une page HTML commence par <!DOCTYPE html>, utilise <html> comme racine et comprend une partie <head> pour les informations générales ainsi qu’une partie <body> pour le contenu affiché.

📌 La balise <title> définit le titre de l’onglet du navigateur sans l’afficher dans le contenu de la page, tandis que <h1> crée un titre principal visible.

Compléments

• La balise <html lang="fr"> indique que la page est en français, et <meta charset="utf-8"> permet l’affichage correct des caractères accentués.

• La balise <p> délimite un paragraphe, et la balise <h1> crée le titre principal du contenu.

💡 Astuce mémo

Une boîte HTML contient une boîte head pour les informations et une boîte body pour le contenu affiché.

📖 5. Titres, paragraphes et balises textuelles

★ À maîtriser

📌 Les titres HTML disposent de six niveaux, de <h1> à <h6> ; <h1> est le plus important et il est recommandé de ne pas sauter de niveaux.

Compléments

• Les balises <strong> et <em> servent respectivement à marquer un texte important et à le mettre en emphase, tandis que <br> crée un saut de ligne.

• Les listes à puces utilisent <ul> avec <li>, et les listes numérotées utilisent <ol> avec <li>.

• Les titres HTML aident à organiser la lecture et le référencement par les moteurs de recherche.

💡 Astuce mémo

h1 à h6 hiérarchisent les titres ; p délimite un paragraphe.

📖 6. Images et liens hypertextes

★ À maîtriser

📌 L’attribut alt décrit une image, s’affiche si elle ne peut pas être chargée et contribue à l’accessibilité.

• La balise <img> affiche une image et son attribut src indique le nom ou le chemin du fichier image.

• La balise <a> crée un lien et son attribut href indique l’adresse cible, qui peut être une URL, un autre fichier HTML ou un fichier comme un PDF ou une image.

Compléments

📌 Le texte d’un lien doit être explicite, et il faut vérifier que l’adresse ou le fichier cible existe.

📖 7. Listes, tableaux et blocs HTML

🔑 Notions clés & Définitions

• Div : Balise qui regroupe des éléments pour organiser une page, mais n’affiche rien par elle-même.

★ À maîtriser

• Les listes HTML utilisent <ul> ou <ol> pour leur structure et <li> pour chaque élément de liste.

Compléments

• Les tableaux HTML servent notamment à présenter des horaires, des résultats ou des comparaisons.

• Les balises <div> peuvent servir à séparer l’en-tête, le contenu et le pied de page d’une page Web.

💡 Astuce mémo

ul affiche une liste à puces, ol une liste numérotée, tandis que div regroupe sans affichage propre.

📖 8. Règles et propriétés CSS

🔑 Notions clés & Définitions

• Règle CSS : Association d’un sélecteur, qui désigne les éléments concernés, aux propriétés et valeurs de style à appliquer.

★ À maîtriser

📌 Le HTML décrit le contenu d’une page, tandis que le CSS en contrôle l’apparence, notamment les couleurs, les tailles, les polices, les espacements et la position.

• Le CSS peut être écrit de trois façons :
  • Dans une balise <style>
  • Dans un fichier séparé relié avec <link>
  • Dans l’attribut style d’une balise HTML

Compléments

• Les propriétés CSS courantes comprennent :
  • color
  • font-size
  • text-align
  • background-color
  • margin
  • padding
  • font-family

📖 9. Personnalisation avec le CSS

★ À maîtriser

• Une classe CSS est déclarée avec un sélecteur commençant par un point et peut être utilisée sur plusieurs éléments HTML.

Compléments

• Dans l’exemple du cours, la classe .important applique à un paragraphe une couleur de texte blanche, un fond violet, un padding de 10 px, des coins arrondis et du texte en gras.

• La propriété font-size exprime la taille du texte en pixels dans les exemples du cours, et la propriété font-family permet de choisir une police.

• Le sélecteur a:hover permet de définir le style d’un lien lorsque le pointeur de la souris le survole.

📖 10. Tester et valider une page Web

★ À maîtriser

• Pour tester une page, il faut l’ouvrir dans un navigateur, vérifier son affichage, ses textes, ses couleurs, ses liens et ses images, puis contrôler la lisibilité à différentes tailles d’écran et sur d’autres navigateurs si possible.

Compléments

• 🔄 Dans Chrome ou Edge, on ouvre les outils de développement ainsi :

  1. Faire un clic droit sur la page
  2. Choisir « Inspector »
  3. Consulter le code HTML et les styles CSS ou tester des modifications en direct

• Les erreurs fréquentes comprennent :

  • L’oubli d’une balise
  • Une erreur dans le nom d’un fichier
  • Une balise mal fermée
  • Une propriété CSS mal écrite

• Le validateur HTML du W3C, accessible à l’adresse https://validator.w3.org/, vérifie si le code HTML respecte les règles et aide à repérer les erreurs.

• Une page peut s’afficher légèrement différemment selon le navigateur ou la taille de l’écran, d’où l’intérêt de tester plusieurs navigateurs et appareils.

💡 Astuce mémo

Afficher, vérifier, corriger, tester sur d’autres écrans et valider le code.

📖 11. Présentation et évolutions du projet

📝 Points essentiels

• Pour présenter son travail, on peut montrer sa page, expliquer ses choix et une difficulté résolue, partager une amélioration envisagée et exposer ce qui a été appris.

📌 La mission finale demande d’enregistrer la page dans un dossier « festival » et de vérifier qu’elle s’affiche correctement dans le navigateur.

• Les pistes d’évolution proposées comprennent :
  • Ajouter plusieurs pages
  • Utiliser des images et des icônes
  • Découvrir JavaScript pour rendre la page interactive
  • Créer un site plus complet
  • Explorer Python côté serveur ou les bases de données