TP : Créer une page produit simple en HTML/CSS

Objectif

Créer une page web qui présente un produit fictif de votre choix ! Tout en utilisant les notions déjà étudiées en classe. À la fin quelques notions supplémentaires vous seront présentézs pour enrichir votre projet.

Consignes

1. Créez deux fichiers : produit.html et style.css dans un meme dossier nommé « Page_Produit »

Structure de la page

Vous devez inclure dans votre page web les éléments suivants (à coder vous-mêmes) :

1. Titre principal

• Affichez un titre avec <h1> pour nommer votre produit.

2. Une image

• Insérez une image de votre produit à l’aide de la balise <img>.

3. Une description

• Ajoutez un paragraphe <p> pour expliquer ce que votre produit fait ou pourquoi il est spécial.

4. Une liste des caractéristiques

• Créez une liste avec <ul> et <li> pour mentionner au moins 3 caractéristiques.

5. Un lien d’achat

• Ajoutez un lien <a> vers une page fictive ou réelle pour « Acheter maintenant ».

6. Un formulaire d’inscription

• Intégrez un formulaire <form> pour capturer un email avec un champ <input>. Comme pour simuler une Newsletter.

7. Divisions (div)

• Organisez votre contenu avec des <div> pour séparer les parties de la page.

Étape 1 : Votre fichier HTML

Créez un fichier produit.html et ajoutez les éléments listés ci-dessus. Vous êtes libres de choisir la disposition et le contenu exacts, mais respectez ces consignes :

• Ajoutez des attributs tels que alt pour vos images et placeholder pour vos champs de formulaire, rechercher sur internet leur utilité en cas de doute!

Étape 2 : Votre fichier CSS

Créez un fichier style.css pour styliser votre page. Voici les consignes que doit respecter votre fichier style.css :

1. Appliquez une couleur de fond à la page entière ( de votre choix ).
2. Centrez vos titres <h1> et donnez-leur une couleur.
3. Donnez un style particulier à votre lien « Acheter maintenant » (couleur, soulignement, etc.).

Étape 3 : Notions bonus (si temps disponible)

Si vous terminez les étapes principales, essayez d’ajouter les notions suivantes :

1. Les ID et classes en CSS
   • Ajoutez des attributs id ou class à vos balises <div>, <h1>, etc., et stylisez-les dans votre fichier CSS.

<div id="description"></div> 
<div class="caracteristiques"></div> 

#description { background-color: #f0f0f0; } .caracteristiques { font-style: italic; }

1. Effets de survol
   • Utilisez le pseudo-sélecteur :hover pour créer un effet quand on survole votre lien ou votre bouton avec la souris.

a:hover { color: red; text-decoration: underline; }

1. Polices personnalisées
   • Appliquez une police différente (par exemple avec Google Fonts : recherchez une police et ajoutez-la à votre CSS).

Livrable attendu

À la fin du TP, vous devez avoir :

1. Une page HTML (produit.html) structurée et bien organisée.
2. Un fichier CSS (style.css) qui améliore l’apparence de votre page.

Si vous avez terminé les notions de base, montrez ce que vous avez ajouté avec les notions bonus !