4ème Info STI 2025-2026
TP 1
Le drop-shipping est un modèle de vente en ligne tripartite où le vendeur commercialise des
produits sans les stocker physiquement : il accepte la commande du client, la transmet à un
fournisseur (fabricant ou grossiste), qui expédie directement la marchandise au client final.
On se propose de créer un site web e-commerce qui permet de créer une enseigne de drop-shipping
(just for fun) avec la structure suivante :
TP1
img
CSS
[Link] (accueil)
[Link] (Catalogue)
S
[Link]
[Link]
[Link]
S
Avec l’allure ci-contre :
1/9
4ème Info STI 2025-2026
Questions :
1) Créer la page [Link] avec l’architecture suivante :
En-tête
Contenu
principal
Zone de navigation
Section 2
Section 1
Une division
Article
Pied de page
Sachant que :
• L’en-tête contient :
o Une division de classe “logo“ qui contient le texte : Dropship Express
o Une division de classe “slogan“ qui contient le texte : Vos produits préférés livrés sans
stock !
• La zone de navigation contient une liste non ordonnée des liens suivants :
o Accueil → [Link]
o Produits → [Link]
o A propos → [Link]
o Contact → [Link]
• La section 1 est de classe “hero“ et contient :
o Un titre de niveau 1 : Bienvenue sur Dropship Express
o Un paragraphe : Découvrez nos offres exclusives en dropshipping : qualité et rapidité
garanties.
o Un lien hypertexte de classe « cta-button » “Voir les produits“ vers la page [Link]
• La deuxième section est de classe “produits-phare“ qui contient :
o Un titre de niveau 2 : Nos Produits Phares
o une division de classe "grille-produits"
• Les articles sont de classe "carte-produit" et contiennent chacun :
o Une image avec un texte alternatif
o le titre niveau 3 convenable
2/9
4ème Info STI 2025-2026
o un paragraphe qui contient le prix
o un lien “Voir détails“ de classe « bouton-details » vers la page [Link]
• La zone pied de page contient :
o Un paragraphe qui contient le texte : 2025 Dropship Express. Tous droits réservés.
o Une liste non ordonnée de classe "liens-sociaux" des liens hypertextes vers les réseaux
sociaux : Facebook, Instagram et Twitter
2) Dans le dossier CSS, ajouter le fichier [Link] en lui ajoutant les règles suivantes :
Elément Mise en forme
Le corps de la page Espacement intérieur et extérieur 0px
Couleur d’arrière-plan : #f4f4f4
Couleur de texte : #333
Police d’écriture : Arial et sans-serif
Les liens hypertexte Pas de soulignement
Couleur :celui de la balise conteneur
En-tête Couleur d’arrière-plan : #007bff
Couleur de texte : blanche
Centré
Espacement intérieur :20px
La classe logo Taille 32 px
Style : gras
La classe slogan Style : italique
La liste dans nav Pas de puce
Espacement intérieur 0
Couleur d’arrière-plan : #333
Centré
------------------------------------------------------------------------------------
Mode d’affichage : bloque en ligne
Espacement extérieur : haut et bas 0px, gauche et droite 15px
--------------------------------------------------------------------------------
Couleur des liens : blanche
Espacement interne : 10px
Lors du survole du lien la couleur d’arrière-plan devienne #555
(la durée de la transformation est 0.3 second)
La classe hero Arrière-plan : #e9ecef
Alignement : centré
Espacement intérieur : haut et bas 50px, gauche et droite 20px
Le titre niveau1 de la Taille : 40px
classe hero
La classe cta-button Couleur d’arrière-plan : #28a745
Couleur de texte : blanche
Espacement intérieur : haut et bas 10px, gauche et droite 20px
Coins arrondis :5px
Lors du survole du lien la taille augmente de 5%
(la durée de la transformation est 0.2 second)
La classe produit- Espacement intérieur : 20px
phares centré
La classe grille- display: grid;
produits grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
3/9
4ème Info STI 2025-2026
gap: 20px;
margin: 0 auto;
max-width: 1200px;
La classe carte- Couleur d’arrière-plan : blanche
produit Bordure :taille 1px, couleur #ddd
Coins arrondis : 8px
Espacement intérieur : 15px
Ombre de la boite : centré horizontal, 2px en bas, 5px de flou, couleur
noir transparent à 10%
Lors du survole de l’élément, l’ombre devient : centré horizontal, 4px
en bas, 10px de flou, couleur noir transparent à 20%
(la durée de la transformation est 0.3 second)
La classe bouton- Couleur d’arrière-plan : #ffc107
details Espacement intérieur : haut et bas 8px, gauche et droite 15px
Coins arrondis :5px
Mode d’affichage : bloque en ligne
Espacement extérieur haut :10px
Pied de page Couleur d’arrière-plan : #333
Couleur de texte : blanche
Centré
Espacement extérieur haut :20px
Espacement intérieur:10px
La classe lien- Pas de puce
sociaux Pas d’espacement intérieur
Centré sur la même ligne avec un espacement extérieur gauche et
droite de 10px
3) Créer la page [Link] suivante :
Sachant que :
• En-tête, zone de navigation et pied
de page restent identique à la page
[Link].
• Le contenu principal contient la
balise aside et la balise section ;
• La balise aside est de classe
“filtres“ et contient :
o Le titre de niveau 2 : Filtres
o Une liste non ordonnée des
liens hypertextes suivants :
▪ Tous les produits
▪ Électronique
▪ Mode
▪ Accessoires
▪ Maison
• La balise section de classe "liste-produits" contient :
4/9
4ème Info STI 2025-2026
o le titre niveau 1 “Notre Catalogue de Produits“
o Un paragraphe “Explorez notre sélection de produits en dropshipping“
o Une division de classe "grille-produits" qui contient 5 articles de classe "carte-produit"
• Les articles sont de classe "carte-produit" et contiennent chacun :
o Une image avec un texte alternatif
o le titre niveau 3 convenable
o un paragraphe qui contient le prix
o un lien “Voir détails“ de classe « bouton-details » vers la page [Link]
4) Relier la page [Link] avec la feuille de style “[Link]“ en lui ajoutant les règles
suivantes :
Elément Mise en forme
Le contenu principal Masquer le débordement
La classe filtres Flotte à gauche
Largeur 200px
Couleur d’Arrière-plan : #e9ecef
Espacement intérieur :20px
Le titre h2 de la Taille 24px
classe filtres
La liste à puce de la Pas de puce
classe filtres Espacement intérieur 0px
Les liens de la classe Mode d’affichage : en bloque
filtres Espacement intérieur 10px
Lors de passage de la souris dessus la couleur d’arrière-plan
devient :#ddd (une durée 0.3s)
La classe liste- Espacement extérieur gauche :240px
produits Espacement intérieur 20px
Centré
Le titre niveau 1 de la Taille 32px
classe liste-produits
5/9
4ème Info STI 2025-2026
5) Créer la page [Link] suivante :
• En-tête, zone de navigation et
pied de page restent identique
à la page [Link].
• Le contenu principal contient
une section de classe "details-
produit".
• La section contient :
o Un titre niveau 1 :
Détails du Produit :
Smartphone Haut de
Gamme
o Une figure de classe
"image-produit" qui
contient une image
[Link].
o Une division de classe "description-produit" qui contient les paragraphes suivants :
▪ Prix : 299 €
▪ Description détaillée : Ce smartphone haut de gamme offre un écran OLED
de 6,5 pouces, un processeur puissant, 128 Go de stockage et une caméra de
48 MP. Idéal pour les utilisateurs exigeants, avec une batterie longue durée et
une charge rapide.
▪ Caractéristiques :
▪ Et liste à puce suivante :
• Écran : 6,5 pouces OLED
• Stockage : 128 Go
• Caméra : 48 MP
• Batterie : 4000 mAh
▪ Avis simulés : "Excellent produit, livraison rapide !" - Client satisfait.
o Une division de classe "actions-produit" qui contient les deux liens :
▪ Ajouter au panier : de classe "bouton-ajouter"
▪ Acheter maintenant : de classe "bouton-acheter"
6) Relier la page [Link] avec la feuille de style “[Link]“ en lui ajoutant les règles
suivantes :
Elément Mise en forme
La classe details- Masquer le débordement
produit Espacement intérieur 20px
Alignement du texte gauche
La classe image- Flotte à gauche
produit Largeur 40%
Espacement extérieur droite 20px
6/9
4ème Info STI 2025-2026
L’image dans la Largeur 100%
classe image-produit Hauteur automatique
Bordures arrondies 8px
Lors de passage de la souris dessus sa taille augmente de 5% avec
une durée de 0.3s
La classe Masquer le débordement
description-produit
La liste à puce de la Le style : disque
classe description- Espacement intérieur gauche 20px
produit
La classe actions- Espacement extérieur haut 20px
produit
Les deux classes Arrière-plan : dégradé(vers le bas, de la couleur #28a745 vers la
bouton-ajouter et couleur #218838)
bouton-acheter Couleur de texte : blanc
Espacement intérieur : haut et bas 10px, gauche droite 20px
Bordures arrondies 5px
Espacement extérieur droite 10px
Mode d’affichage : bloque en ligne
Lors de passage de la souris dessus la couleur d’arrière-plan devient :
dégradé(vers le bas, de la couleur #b9f1c6 vers la couleur #1e7e34)
7) Créer la page [Link] suivante :
• En-tête, zone de navigation et pied
de page restent identique à la page
[Link].
• Le contenu principal contient une
section de classe "contact-form".
• Cette section contient :
o Un titre niveau 1 :
Contactez-nous
o Un paragraphe : Remplissez
le formulaire ci-dessous pour
nous envoyer un message.
Nous vous répondrons dans
les plus brefs délais.
o Le formulaire qui contient :
▪ La zone de texte
obligatoire nom avec
son label.
▪ La zone email obligatoire avec son label
▪ L’espace de texte obligatoire message de 5 lignes avec son label
▪ Le bouton envoyer de type envoyer et de classe "bouton-envoyer"
o Une division de classe "infos-contact" qui contient les paragraphes suivants :
▪ Email : contact@[Link]
7/9
4ème Info STI 2025-2026
▪ Téléphone : +216 1 23 45 67 89
▪ Adresse : 123 Rue du Dropshipping, 8060 Béni-khiar, Tunisie
8) Relier la page [Link] avec la feuille de style “[Link]“ en lui ajoutant les règles
suivantes :
Elément Mise en forme
La classe contact- Espacement intérieur 20px
form Alignement du texte centré
Le titre niveau 1 de la Taille de texte 32px
classe contact-form
Le formulaire Espacement extérieur : bas et haut :0px, gauche droite :automatique
Alignement du texte gauche
Largeur maximale :600px
Les labels Mode d’affichage : bloque
Espacement extérieur haut 10px
Gras
Zones nom, email et Largeur : 100%
message Espacement intérieur : 10px
Espacement extérieur haut 10px
Bordure : taille 1px et couleur #ddd
Coins arrondis : 5px
Lorsque la zone prend le focus, la couleur de la bordure devient #007bff
La zone message Hauteur 150px
La classe bouton- Arrière-plan : #28a745
envoyer Couleur de texte : blanc
Espacement intérieur : haut et bas 10px, gauche droite 20px
Bordures arrondies 5px
Pas de bordure
Espacement extérieur haut 5px
Mode d’affichage : bloque
Largeur :100%
Lors de passage de la souris dessus la couleur d’arrière-plan
devient #218838
La classe infos- Espacement extérieur haut 3px
contact Alignement du texte gauche
Largeur maximale :600px
Espacement extérieur : haut 30px, bas 0px, gauche et droite auto
Paragraphe de la Espacement extérieur : haut et bas 5px, gauche et droite 0px
classe infos-contact
8/9
4ème Info STI 2025-2026
9) Créer la page [Link] suivante :
Sachant que :
• En-tête, zone de navigation et pied de page
restent identique à la page [Link].
• Le contenu principal contient une section de
classe "a-propos"
• La classe "a-propos" contient :
o Un titre de niveau 1 : À Propos de
Dropship Express
o Un paragraphe : Nous sommes une
plateforme de dropshipping dédiée à
vous offrir les meilleurs produits sans les
contraintes de gestion de stock. Notre
mission est de connecter les clients avec des fournisseurs fiables pour une expérience
d'achat fluide et rapide.
o Une figure de classe "image-a-propos" qui contient l’image [Link]
o Une division de classe "valeurs" qui contient :
▪ Un titre niveau 2 : Nos Valeurs
▪ Une liste à puce qui contient les options suivantes :
• Livraison rapide et fiable
• Produits de qualité à prix compétitifs
• Pas de stock : nous gérons tout pour vous
• Service client disponible 24/7
10) Relier la page [Link] avec la feuille de style “[Link]“ en lui ajoutant les règles
suivantes :
Elément Mise en forme
La classe a-propos Espacement intérieur 20px
Alignement du texte centré, cacher le débordement
Le titre niveau 1 Taille 32 px
La classe "image-a- Flotte à droite
propos" Largeur 40%
Espacement extérieur gauche 20px
Image de la classe Largeur 100%, Hauteur automatique
"image-a-propos" Bordures arrondies 8px
Lors de passage de la souris dessus sa taille augmente de 5% avec une
durée de 0.3s
La classe valeurs Alignement gauche, cacher le débordement
Le titre niveau 2 Taille 24px
La liste à puce Style de puce :disque ; espacement intérieur gauche :20px
Les options de la liste Change de couleur du passage de la souris
9/9