Application 2024/2025
HTML && CSS && JAVASCRIPT
LYCEE GROMBALIA Matière : Systèmes et Technologies de l’Informatique
Section : Sciences de l’informatique
Important :
Il est demandé de :
Créer un dossier de travail en le nommant "Application" où seront enregistrés tous les documents à
réaliser.
copier, dans le dossier de travail, le fichier "Application2024.rar à télécharger à partir de votre groupe
ClassRoom.
s’assurer que le contenu extrait est formé des fichiers : "index.html", "mesStyles.css", "action.js",
"accueil.html", "reservation.html", et un dossier "image&& vidéo" qui a comme contenue "img1.jpg" ,
"img2.jpg, " video.mp4" et banier.jpg.
On désire de créer une interface web interactive destinée à la gestion des réservations pour des ateliers ou des
conférences. Son rôle principal est de permettre aux utilisateurs d'effectuer des demandes de réservation tout en
offrant des fonctionnalités interactives et une validation des données saisies
Travail demandé
Partie B : Création des documents Web
Consignes
a. Toutes les fonctions JavaScript doivent être enregistrées dans un fichier nommé "action.js".
b. Toutes les règles CSS doivent être enregistrées dans le fichier "mesStyles.css".
c. Toutes les pages HTML doivent être reliées au fichier "mesStyles.css".
d. Les pages "accueil.html" et "reservation.html" doivent être reliées au fichier "action.js".
1) Création de la page index du site
a) Ouvrir et compléter les éléments de la page "index.html"
tout en la reliant au fichier "mesStyles.css" afin de
respecter la disposition ci-contre.
Sachant que :
L’élément <h1> contient le texte : "Demande de Réservation
pour un atelier ou conférence" et une image banier.jpg comme arrière-plan
L’élément <nav> représente le volet de navigation et
contient les liens hypertextes suivants :
Réserver (servira de lien vers la page
"reservation.html").
Accueil (servira de lien vers la page
"accueil.html").
L’élément main contient :
L’élément <section> représente la zone d’affichage des différentes pages web et contient par
défaut la page "accueil.html".
L’élément <aside> contient l’image "img1.jpg" située dans votre dossier de travail et un bouton
« changer Image », le clic de ce dernier permet l’appel de la fonction ChangerImage.
L’élément <footer> représente le pied de page contenant l’élément adresse composer d’une liste :
Email :
[email protected] Téléphone : +216 60 600 600
Page 1 sur 4
b) Développer dans le fichier "action.js" la fonction changeImage qui permet de remplacer dynamiquement
l’image par une autre image nommé img2.jpg en modifiant le style de sa bordure par 2px solid black
c) Ajouter au fichier "mesStyles.css", les règles permettant d’appliquer aux éléments de cette page, les
mises en forme spécifiées dans le tableau suivant :
Elément Mise en forme
Appliquez un effet de flou de 1px et d'inversion de
Les images couleurs de 50%
Alignement texte centré
Header
Image d’arrière-plan banier.jpg
Taille arrière-plan cover
Répéter l’image d’arrière-plan horizontalement
Couleur texte blanche
Marge intérieur de 20px
La largeur des colonnes doit être fixe
tableau
Les bordures des cellules doivent être affichées
séparément
Les marqueurs des éléments de la liste doivent être de type
liste carré
Les marqueurs doivent être positionnés à l'intérieur des
éléments de la liste
2) Création de la page reservation.html
a) Compléter les éléments de la page "reservation.html" comme indique la figure ci-dessous :
Page 2 sur 4
Sachant que
Une première section contient :
Tous les champs sont obligatoires.
Le champ de saisie relatif au libellé Nom est de type texte
Le champ de saisie relatif au libellé "Email" est de type email.
Le champ de saisie relatif au libellé "Mot de Passe" est de type password, sachant que s’il perd le
focus il aura appel à la fonction verifmp.
Le champ de saisie relatif au libellé "Age" est de type number.
Une barre de satisfaction avec affichage de la valeur dans l’élément <output>
Le champ de saisie relatif au libellé "Date de réservation" est de type date.
Le champ de saisie relatif au libellé Heure de réservation est de type time
Les attributs "value" des boutons radio (Standard et Premium) relatifs au genre ont
respectivement les valeurs "S" et "P" et aucun bouton n’est sélectionné par défaut.
Le clic sur le bouton "Envoyer" fait appel à :
Une fonction JavaScript nommée "Verif".
Une deuxième section contient :
Un élément <h1> contient « Résumé de votre réservation »
Un bloc div d’identifiant « resume » caché contient un résumé détaillé d’une réservation effectué.
b) Développer, dans le fichier "action.js" :
La fonction "Verif" afin de s’assurer de la validité des champs du formulaire tout en
respectant les contrôles suivants :
Champ Contrôle
Une chaîne alphabétique de 50 caractères au maximum qui contient
Nom
au minimum un espace et qui commence et se termine par une lettre.
Une chaîne de 50 caractères au maximum, commençant
Adresse email
obligatoirement par une lettre et se termine par l’extension ".tn".
Date de réservation Une date dont l’année est supérieur à 2024.
Choisissez votre abonnement Un type d’abonnement doit être sélectionné.
Si les contraints sont respectées la fonction verif affiche Nom, email, âge, date de réservation,
heure de réservation et note de satisfaction dans l’élément div d’identifiant « resume » de la page
reservation.html, puis le bouton Envoyer sera désactiver
La fonction verifmp afin de s’assurer que le mot de passe est de longueur supérieur à 8 sachant
que le message d’erreur en rouge sera affiché dans l’élément d’identifiant « mp »
c) Ajouter au fichier "mesStyles.css", les règles permettant d’appliquer aux éléments de cette page, les
mises en forme spécifiées dans le tableau suivant :
Elément Mise en forme
Couleur arrière-plan jaune
L’élément mark
Lettre en majuscule
Gras
Page 3 sur 4
3) Création de la page accueil.html
a) Soit la page accueil.html comme indique la figure ci-dessous :
Sachant que :
L’élément <h1> contient « Vidéo de présentation de la Salle »
L’élément <p> contient « Etat : Vidéo prête à être lue ».
3 boutons « lecture /pause vidéo », « Activer Son », « Désactiver Son »
Une vidéo video.mp3.
Le clic sur le bouton « lecture/pause vidéo » permet d’appeler la fonction JavaScript LectPaus.
Le clic sur le bouton « Activer Son » permet d’appeler la fonction ActiverSon
Le clic sur le bouton « Désactiver Son » permet d’appeler la fonction DesacSon
b) Développer dans le fichier action.js :
La fonction LectPaus qui permet de démarrer la vidéo si la vidéo en pause ou d’arrêter la
vidéo si la vidéo en lecture
La fonction ActiverSon permet d’activer le son
La fonction DesacSon permet de désactiver le son
La fonction Affetat1 permet :
Au moment de la lecture de la vidéo, le contenu de l’élément <p> est remplacé par : « État
: Vidéo en cours de lecture ».
La fonction Affetat2 permet :
Au moment de la pause de la vidéo, le contenu de l’élément <p> est remplacé par : « État :
Vidéo prête à être lue ».
Page 4 sur 4
