TP2 Projet : Améliorer la page “Plantes
d’intérieur”
Scénario
Bloom & Petal Haven souhaite rendre sa page web plus attractive et interactive. Après avoir
créé la page initiale avec deux plantes, l’objectif de ce TP est de compléter la page en
ajoutant des listes, des liens, un texte défilant, un retour en haut, des mises en valeur et un
média.
Ce TP vous permettra de pratiquer des balises HTML simples et utiles, et de mieux organiser
votre page web.
Instructions détaillées
1. Ajouter un texte défilant
Contexte :
Pour attirer l’attention des visiteurs, Bloom & Petal Haven veut afficher un message en haut
de la page qui défile horizontalement.
Instruction :
Ajouter un texte défilant en haut de la page.
Texte à utiliser :
“Bienvenue sur Bloom & Petal Haven – Découvrez nos plantes d’intérieur !”
Éléments à utiliser :
2. Insérer une ligne de séparation
Contexte :
Pour bien distinguer les sections de la page, une ligne horizontale est nécessaire.
Instruction :
Séparer les sections par une ligne.
Éléments à utiliser :
3. Ajouter une liste de plantes populaires
Contexte :
Bloom & Petal Haven veut montrer aux visiteurs quelles plantes sont les plus populaires.
Instruction :
Ajouter un sous-titre : “Nos plantes populaires”
Créer une liste non ordonnée de 4 plantes.
Éléments à utiliser :
Plantes :
o Monstera Deliciosa
o Ficus Elastica
o Palmier Areca
o Pothos Doré
4. Créer un Top 3 des plantes faciles à entretenir
Contexte :
Les visiteurs débutants veulent savoir quelles plantes sont faciles à garder en vie.
Instruction :
Ajouter un sous-titre : “Top 3 des plantes faciles à entretenir”
Créer une liste ordonnée avec 3 plantes.
Éléments à utiliser :
Plantes :
1. Sansevieria
2. Pothos
3. ZZ Plant (Gemme de Zanzibar)
5. Ajouter trois types de liens
Contexte :
Les visiteurs doivent pouvoir naviguer facilement et contacter la boutique.
Instruction :
Créer trois liens différents :
1. Lien vers [Link] qui s’ouvre dans un nouvel onglet
Texte : “Ouvrir la page suivante”
2. Lien pour envoyer un email
Email : contact@[Link]
Texte : “Envoyer un email au support”
3. Lien pour appeler la boutique
Téléphone : +242 06 123 45 67
Texte : “Appeler la boutique”
6. Créer un lien “Retour en haut”
Contexte :
Pour faciliter la navigation, un lien permettra aux visiteurs de remonter en haut de la page.
Instruction :
Ajouter un id au titre principal <h1> : top
Ajouter un lien en bas de page qui renvoie à cet id
o Texte : “Retour en haut de la page”
7. Mettre du texteen valeur
Contexte :
Certains mots doivent ressortir pour mieux informer le visiteur.
Instruction :
Mettre certains mots ou expressions en valeur dans vos paragraphes.
texte en gras
texte en italique
texte surligné
texte en petit format
8. Ajouter un commentaire HTML
Contexte :
Les commentaires servent à expliquer le code, invisibles pour les visiteurs.
Instruction :
Ajouter un commentaire expliquant une section du TP2.
Texte du commentaire :
“Section ajoutée dans le cadre du TP2 pour améliorer la structure de la page.”
9. Insérer un média simple
Contexte :
Bloom & Petal Haven souhaite montrer ses plantes à travers un média interactif.
Instruction :
Ajouter soit une vidéo, soit un fichier audio.
Éléments à utiliser :
Fichiers :
o Vidéo : video-plantes.mp4 (largeur : 400 px)
o Audio : ambiance-jungle.mp3
10. Ajouter une structure simple de page
Contexte :
La page doit être plus professionnelle avec un header et un footer.
Instruction :
Ajouter un header en haut et un footer en bas.
Éléments à utiliser :
<header> : titre et petit texte
o Titre : “Bloom & Petal Haven – Boutique de Plantes”
o Texte : “Votre spécialiste des plantes d’intérieur”
<footer> : texte et copyright
o Texte : “© 2025 Bloom & Petal Haven – Tous droits réservés”
o Texte secondaire : “Site conçu dans le cadre du TP HTML Essentials”
Révision et test
Vérifier l’affichage correct de tous les éléments ajoutés.
Tester les liens, les ancres, les listes, la mise en forme et le média.
S’assurer que le texte défilant et les mises en valeur sont visibles.