Lycée lessouada

♦♦♦♦♦ Evaluation pratique

A.S : 2023 / 2024
Epreuve : STI Classes : 3 SI. Durée :1H

Nom & Prénom : …………………..……………………………….…………… N° : …………………..

Créer un dossier sous la partition D:\ portant comme nom: D :\NomPrenom\devoir dans lequel vous créez un
fichier index.html contenant la partie html du sujet et un fichier style1.css contenant la partie css du sujet.
Dans Devoir vous trouvez tous les fichiers nécessaires.

PARTIE 1 : HTML (10 pts)

Le bloc header contient (2pts):
• Une image : logo «logo.avif»
• un titre de niveau 1 : jus valée verte : passion et terroir
Le bloc nav contient(2pts):
 une liste à puces non ordonnée des liens (les textes des liens : acceuil/pages/a
propos/Service

Le bloc section contient (2pts) :

1
  Le titre de niveau 4 : Notre histoire:
 Le texte article : Bien que la marque Vallée Verte fut créée en 2012, celle-ci existe depuis
finalement plusieurs décennies.
 Le titre de niveau 4 : Nos produits best seller :
 Une image jus.jpg, Ajouter la balise nécessaire pour créer trois zone cliquable du jus de cerise
vers la page cerise.html, du jus de banane vers banane.html et de jus de kiwi vers la page
kiwi.html :
o zone cliquable jus de cerise est cercle, ses coordonnées sont : 201,195,63
o zone cliquable jus de kiwi est cercle, ses coordonnées sont : 523,133,63
o zone cliquable jus de banane est cercle, ses coordonnées sont : 420,397,63
 Le titre de niveau 4 : Dégustez nos jus Vallée Verte
 Le texte article : Tous nos jus sont vendus par pack de 6 bouteilles
Le bloc aside contient (2pts):
 Le titre de niveau 3 : Retrouvez nous
 une liste à puces non ordonnée des liens (les textes des liens : notre boutique/espace
professionnel)
Le bloc footer contient (2pts):

Le texte : Jus Vallée Verte - tous droits réservés Création : Elie Conseil et Communication

PARTIE 2 : CSS (10pts):

Objet Description
Body (1pts)  Définit la famille de polices pour le texte du corps à "Arial" ou
toute police sans empattement par défaut.
 Définit la couleur de fond du corps à un gris clair (#f4f4f4).
Header (1pts)  Centrer le texte à l'intérieur de l'en-tête.
 Ajouter un espacement de 20 pixels autour du contenu de l'en-
tête.
 Définir la couleur de fond de l'en-tête à blanc.
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
Nav (1.5 pts)  Faire flotter la navigation à gauche.
 Définir la largeur de la navigation à 15%.
 Définir la couleur de fond de la navigation à blanc #fff.
 Supprime tout espacement interne à la navigation.
 Ajouter une marge de 20px 0 en haut et en bas de la navigation.
 Fixer la hauteur de la navigation à 880 px.

Liste non ordonnée dans nav  list-style: none;

(1pts)  Centrer le texte à l'intérieur de la liste.
 Définir la couleur de fond de la liste à une nuance de bleu
(#0066cc).
 Ajouter un espacement de 10 px autour du contenu de la liste.
 Fixer la hauteur de la liste à 830 pixels.

Les liens hypertextes dans  Définir la couleur du texte des liens à blanc.
Nav (1pts)  Ajouter un espacement de 10 px 20px ;
 display: inline-block;

Section (1.5 pts)  Faire flotter la section principale à gauche.

 Définir la largeur de la section principale à 60% .

2
  Définir la hauteur de la section principale à 100%.
 Définir la couleur de fond de la section principale à blanc.
 Ajouter un espacement de 20 pixels autour du contenu de la
section principale.
 Ajoute une marge de 20 px 0.
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

image de la partie Section (0.5  border-radius: 8px ;

pts)

Aside (1.25 pts)  Définir la couleur de fond de l'élément aside à un gris plus clair
(#f4f4f4).
 Ajouter un espacement de 20 pixels autour du contenu de
l'élément aside.
 Ajouter une marge de 20px 0.
 Faire flotter l'élément aside à gauche.
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 Fixer la hauteur de l'élément aside à 840 px.

Footer (1.25 pts)  Centrer le texte à l'intérieur du pied de page.

 Définir la taille de police du texte du pied de page à 24 pixels.
 Ajouter un espacement de 20 px autour du contenu du pied de
page.
 Définir la couleur de fond du pied de page à une nuance de bleu
(#0066cc).
 Définir la couleur du texte du pied de page à blanc.
 Indiquer que le pied de page doit effacer tous éléments des deux
côtés.