Fiche de révision : Création de pages HTML et CSS

📋 Plan du Cours

1. Organisation des fichiers du projet
2. Structure de la page Accueil
3. Mise en forme CSS interactive
4. Formulaire d’enregistrement du livreur
5. Page de gestion des missions

📖 1. Organisation des fichiers du projet

★ À maîtriser

📌 Le projet doit contenir un dossier nommé « Devoir_Nom » sous le lecteur C:, dans lequel sont enregistrés les différents fichiers créés.

• Le code CSS doit être enregistré dans le fichier « mesStyles.css ».

Compléments

• Les images utilisées dans le projet se trouvent sur le bureau, dans un dossier nommé « Mesimages ».

📖 2. Structure de la page Accueil

🔑 Notions clés & Définitions

• Élément h1 : L’élément <h1> contient le texte « FastRepas - Livrons mieux, livrons vert ».
• Élément nav : L’élément <nav> représente le volet de navigation et contient les liens vers « enregistrement.html » et « gestion.html ».
• Élément section : L’élément <section> représente la zone d’affichage des différentes pages web et contient par défaut la page « enregistrement.html ».
• Élément aside : L’élément <aside> contient une image située dans le dossier « Mesimages ».
• Élément footer : L’élément <footer> représente le pied de page et contient les contacts de l’entreprise, avec le mot « téléphone » lié au numéro +216 70 000 000.

📝 Points essentiels

• La page « Accueil.html » doit être reliée au fichier « mesStyles.css » pour appliquer sa mise en forme.

💡 Astuce mémo

Visualiser une page en quatre zones : navigation, image latérale, contenu central et pied de page.

📖 3. Mise en forme CSS interactive

★ À maîtriser

• L’élément <nav> doit être positionné à 5 % du bord droit et à 5 % du bord inférieur de son conteneur.

• L’en-tête doit utiliser « logo.png » comme arrière-plan, en remplissant correctement l’espace sans déformation ni répétition de l’image.

• L’image de l’élément <aside> doit subir au survol une déformation horizontale de 20deg pendant 2s.

• La zone de groupe des formulaires doit avoir une ombre avec des décalages horizontal et vertical de 3px, un rayon de flou de 6px et une couleur grise.

• Les boutons d’envoi des formulaires doivent subir au survol une inclinaison horizontale de 20deg après 1s, pendant une durée de 2s.

• Lorsque le curseur est placé dans une zone de texte ou une zone de date, la couleur d’arrière-plan de la zone devient verte.

Compléments

• Les éléments header, nav, aside et footer doivent posséder une bordure pleine avec des coins légèrement arrondis.

• Le titre du header doit avoir une ombre avec un décalage horizontal de 2px, un décalage vertical de 3px et une couleur jaune.

• Le footer doit supprimer les puces de la liste et centrer le contenu de cette zone.

💡 Astuce mémo

Positionner, décorer, transformer, puis modifier au survol ou au focus.

📖 4. Formulaire d’enregistrement du livreur

★ À maîtriser

• La page « enregistrement.html » doit permettre l’enregistrement d’un livreur en vue de son recrutement.

• Le clic sur le bouton « Enregistrer » doit ouvrir la page « validation.html », qui affiche le message « bienvenue dans notre équipe » comme titre de deuxième niveau.

Compléments

📌 Le message « bienvenue dans notre équipe » doit devenir entièrement en majuscules lorsque la souris le survole.

💡 Astuce mémo

Clic sur Enregistrer → ouverture de validation.html → affichage du message de bienvenue.

📖 5. Page de gestion des missions

📝 Points essentiels

📌 Dans la page « gestion.html », une saisie est obligatoire et une option est cochée par défaut.

• La page « gestion.html » propose les choix suivants :
  • Mateur
  • Menzel Bourguiba
  • Bizerte