Test1
HTML & CSS & JS
Afin d’assurer la livraison de pizzas à domicile, une pizzeria se propose d’ajouter le service de
commande en ligne à sa clientèle. Pour se faire on demande de créer un site web permettant à un
client de :
• S’inscrire au site
• Commander des pizzas
• Participer à un sondage
Création des documents Web
Consignes
→ Toutes les fonctions JavaScript doivent être enregistrées dans un fichier nommé "controles.js"
→ Toutes les règles CSS définissant des styles de mise en forme doivent être enregistrées
dans le fichier "mesStyles.css".
→ Toutes les pages HTML à créer doivent être attachées au fichier "mesStyles.css".
→ Le clic sur le bouton "Annuler" de chaque formulaire à créer, permet d’initialiser les champs.
1) Création de la page index du site
a- Créer la page "index.html" tout en la reliant au fichier "mesStyles.css" afin de respecter
la disposition ci-contre.
Sachant que :
✔ L’élément <header> contient un titre de niveau 1 :
"Livraison de pizzas à domicile"
✔ L’élément <nav> représente le volet de navigation et contient
les liens hypertextes suivants :
- S’inscrire au site (servira de lien vers la page
"inscrire.html").
- Commander des pizzas (servira de lien vers la page
"commander.html")
- Participer à un sondage (servira de lien vers la page
"sondage.html")
✔ L’élément <header> situé dans L’élément <header> contient
un titre de niveau 3 :
"L'affichage des pages web sera présenté ici "
✔ L’élément <article> représente la zone d’affichage des différentes pages web et contient par
défaut la page "inscrire.html".
✔ L’élément <aside> contient l’image "pizza.jpg" située dans votre dossier de travail.
✔ L’élément <footer> représente le pied de page et contient la liste suivante :
b- 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
h1 Alignement du texte : centré
Couleur : rouge
h3
1
Image Afficher sur la totalité de la zone
liste Style du texte : italique
2) S’inscrire au site
a- Créer la page "inscrire.html" permettant à un nouveau client de s’inscrire via le
formulaire suivant :
Sachant que :
✔ Le champ de saisie relatif au libellé "Adresse" est de type email.
✔ Le champ de saisie relatif au libellé "Nom","Prénom","Tél","Mot de
passe","Confirmation du mot de passe" est de type text.
✔ Le clic sur le bouton "Valider" fait appel une fonction JavaScript nommée "verif1".
b- 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
Les champs de saisie. Couleur du texte : #009933
Couleur de l’arrière-plan : #FFFFD8
Marge intérieur des 4 côtés : 4px
c- Développer, dans le fichier "mesControles.js", la fonction "verif1" afin de s’assurer de la
validité des champs du formulaire tout en respectant les contrôles suivants :
Champ Contrôle
Nom Chaîne alphabétique de taille minimale égale à 3
Prénom Chaîne alphabétique de taille minimale égale à 3
Tél Chaîne de 8 chiffres dont le premier est supérieur à 1
La taille ne dépasse pas 50 caractères et ayant le format :
[email protected] Avec :
Adresse • ch1 et ch2 sont deux chaînes alphanumériques, chacune de
longueur supérieure ou égale à 3
• ch3 est une chaîne de 2 à 4 lettres
Mot de passe Chaîne de 6 caractères ne contenant pas d’espaces
Confirmation du mot de Chaîne identique au contenu du champ "Mot de passe"
passe
2
3) Commander de pizzas
a- Créer la page "commander.html" contenant le formulaire suivant :
Sachant que :
✔ Le champ de saisie relatif au libellé "Quantité" est de type number.
✔ Le champ de saisie relatif au libellé "Tél","Mot de passe" est de type text.
✔ Le clic sur le bouton "Commander" fait appel une fonction JavaScript nommée "verif2".
b- Développer, dans le fichier "mesControles.js", la fonction "verif2" afin de s’assurer de la
validité des champs du formulaire tout en respectant les contrôles suivants :
Champ Contrôle
Type de pizza Sélection obligatoire d’une pizza
Quantité Nombre compris entre 1 et 5
Tél Chaîne de 8 chiffres dont le premier est supérieur à 1
Mot de passe Chaîne de 6 caractères ne contenant pas d’espaces
4) Participation au sondage
a- Créer la page "sondage.html" contenant le formulaire ci-dessous, permettant à un
internaute de s'authentifier ou de s'inscrire, puis d'envoyer ses réponses relatives au sondage du
mois courant.
3
N.B :
✔ L'attribut "value" de chaque bouton radio d'une question est égal à la concaténation du
numéro de cette question avec la réponse correspondante ("O", "N" ou "S"), comme décrit
ci-après :
Valeur de l'attribut "value" du bouton radio
N° Question Oui Non Sans avis
1 1O 1N 1S
2 2O 2N 2S
3 3O 3N 3S
✔ Le clic sur le bouton "Envoyer" fait appel une fonction JavaScript nommée "verif3".
b- Développer, dans le fichier "mesControles.js", la fonction "verif3" afin de s’assurer de la
validité des champs du formulaire tout en respectant les contrôles suivants :
Champ Contrôle
La taille ne dépasse pas 50 caractères et ayant le format :
[email protected] Avec :
@Mail • ch1 et ch2 sont deux chaînes alphanumériques, chacune de
longueur supérieure ou égale à 3
• ch3 est une chaîne de 2 à 4 lettres
Mot de passe Chaîne de 6 caractères ne contenant pas d’espaces
Genre Sélection obligatoire
Les questions du sondage Sélection obligatoire d'une réponse pour chaque question
