TP (Rappel sur html)
Étape 1 : Structure de base du site
Objectif : Créer la structure HTML5 de base du site e-commerce.
• Question 1 : Créez un nouveau document HTML5 avec les balises de base
(<!DOCTYPE html>, <html>, <head>, <title>, <body>).
• Question 2 : Dans la section <head>, ajoutez des métadonnées appropriées,
comme l'encodage des caractères et une description du site.
• Question 3 : Dans le <body>, ajoutez une balise <header> contenant le nom du
site et un slogan.
• Question 4 : Ajoutez une balise <nav> avec des liens de navigation vers les
sections principales du site (par exemple, Accueil, Produits, Contact).
Étape 2 : Présentation des produits
Objectif : Afficher une liste de produits avec des descriptions et des images.
• Question 1 : Dans le <body>, ajoutez une section <main> pour le contenu
principal.
• Question 2 : À l'intérieur de <main>, créez une section <section> dédiée à la liste
des produits.
• Question 3 : Pour chaque produit, utilisez une balise <article> contenant :
Une balise <h2> pour le nom du produit.
Une balise <img> pour l'image du produit.
Une balise <p> pour la description du produit.
Une balise <p> pour le prix du produit.
Étape 3 : Mise en page et styles CSS
Objectif : Appliquer des styles CSS pour améliorer l'apparence du site.
• Question 1 : Créez un fichier CSS externe et liez-le au document HTML.
• Question 2 : Définissez des styles pour les éléments <header>, <nav>, <main> et
<footer>.
• Question 3 : Mettez en page les articles de produits en utilisant des grilles CSS
ou des flexbox pour afficher plusieurs produits par ligne.
• Question 4 : Ajoutez des styles pour les images de produits afin qu'elles soient
de taille uniforme et bien alignées.
Étape 4 : Formulaire de contact
Objectif : Ajouter un formulaire permettant aux utilisateurs de contacter le propriétaire
du site.
• Question 1 : Dans le <body>, ajoutez une section <section> pour le formulaire de
contact.
• Question 2 : Créez un formulaire <form> contenant :
Un champ <input> pour le nom de l'utilisateur.
Un champ <input> pour l'adresse e-mail de l'utilisateur.
Un champ <textarea> pour le message de l'utilisateur.
Un bouton <button> pour soumettre le formulaire.
• Question 3 : Ajoutez des attributs appropriés aux champs du formulaire (comme
type, name, placeholder) et assurez-vous que le formulaire est accessible.
Étape 5 : Pied de page et informations supplémentaires
Objectif : Ajouter un pied de page contenant des informations supplémentaires.
• Question 1 : Dans le <body>, ajoutez une balise <footer> contenant :
Des liens vers les réseaux sociaux.
Des informations légales ou de copyright.
Un lien vers la politique de confidentialité.
Étape 6 : Améliorations et fonctionnalités avancées
Objectif : Ajouter des fonctionnalités interactives et améliorer l'expérience utilisateur.
• Question 1 : Ajoutez un champ de recherche permettant aux utilisateurs de
rechercher des produits spécifiques.
• Question 2 : Intégrez des médias enrichis, comme des vidéos de présentation
des produits.
• Question 3 : Assurez-vous que le site est responsive et s'affiche correctement
sur différents appareils en utilisant des media queries CSS.
• Question 4 : Ajoutez des animations ou des transitions CSS pour améliorer
l'interactivité du site.
