Classe : Bac Sciences Lycée : Borj Louzir

de l'informatique Soukra Ariana

Date : 28 octobre 23 Matière : STI

Durée : 1 Heure Prof : HADHRI Aymen

Nom & prénom : ……………………………………………………………………

Important : Dans le dossier "WWW", créer un répertoire nommé "NomPrénom", où seront enregistrés
tous les fichiers demandés.
Le responsable du service informatique de l’espace JULIETTE se propose de développer un site web
afin de gérer les locations des robes.
Création des documents Web :
NB :
✓ Toutes les fonctions JavaScript devront être créées dans un fichier intitulé "controle.js".
✓ Toutes les règles CSS définissant des styles de mises en forme doivent être enregistrées dans le
fichier "styles.css".
✓ Pour tous les formulaires à créer, le clic sur le bouton "Annuler" permettra l’initialisation de leurs
champs.
1. Créer la page "Index.html" comme illustrée ci-dessous :

Zone 1

Zone 3
Zone 2

Zone 4

Sachant que :
Zone 1 : Représente l’entête du site, contient le titre "Espace JULIETTE" de niveau 1.
Zone 2 : Représente le volet de navigation. Elle contient les liens hypertextes suivants :
• Location Robe : servira de lien vers la page "location.html"
• Liste Client : servira de lien vers la page "client.php"
• Liste Robe : servira de lien vers la page "robe.php"
• Statistique : servira de lien vers la page "statistique.php"
Zone 3 : Représente la section où se fait l’affichage des pages web. Elle contient par défaut la page
"location.html".
Zone 4 : Représente le pied de page du site, dès le chargement de la page "index.html", le pied de
page sera rempli automatiquement par le jour, le mois et l’année système.
2. Appliquer à la page "index.html" la mise en forme suivante :
La balise header (Arrière-plan : couleur coral ; Texte centré ; couleur du texte : blanc)
La balise iframe : (bordure solide bleu ; largeur : 850px ; hauteur : 400px)
La balise main : tous les éléments sur la même ligne
La balise li : (style de la liste : upper-roman; Marge extérieure : 50px)

Page 1 sur 2
La balise a : (Couleur : jaune ; Taille du texte : 1.6em ; Pas de décoration de lien hypertexte ;
Arrière-plan : couleur bleu ; Ajouter des ombres à l’élément : 8px 8px 8px coral ; Appliquer des coins
arrondis : 10px ; Marge intérieure : 10px)
La balise footer : (positionner en bas ; largeur : 98% ; texte centré ; Arrière-plan : couleur coral)
3. Appliquer un effet de transition au titre "Espace JULIETTE", qui se déclenche en survolant la
souris au-dessus, permettant de changer sa couleur en bleu.
4. Appliquer un effet de transformation scale(1.2), qui se déclenche en survolant la souris au-
dessus de la liste des liens hypertextes.
5. a) Créer la page location.html permettant d’ajouter une location à la base via le formulaire
suivant :

R001
R002
R003
R004
R005

Le clic sur le bouton "Louer" fait appel à :

• Une fonction JavaScript intitulée "verif",
• Un fichier intitulé "location.php".
b) Appliquer à ce formulaire la mise en forme suivante :
La balise Fieldset : (Arrière-plan : couleur aqua ; Largeur : 50% ; Appliquer des coins arrondis : 10px)
La balise Legend : (Arrière-plan : couleur chartreuse ; Mettre le texte en gras)
La balise Form : (Taille du texte : 1.2em)
c) Développer la fonction JavaScript intitulée "Verif" permettant de vérifier les contraintes suivantes :
Téléphone : Chaîne de 8 chiffres dont le premier caractère est différent de 0 et 1.
Code Robe : Choix obligatoire
Date location : Date location >= Date système
Nombre de jours : Choix obligatoire

Questions 1 2 3 4 5a 5b 5c Total
Barème 5 3 1 1 4.5 1 4.5 20

Page 2 sur 2