Technologie du Web
Examen – (Durée : 1h30mn)
– Documents interdits –
Exercice 1 (HTML) : 4 pt
Donner le code HTML permettant de créer la page WEB au-dessus en respectant les choix suivants :
1. Le texte Inscription est un titre H1 centré,
2. Le tableau est composé de 5 lignes et 2 colonnes, la dernière ligne contient une cellule
fusionnée.
3. Les champs Nom_Prénom et E-Mail sont de type zone de texte de taille 30 caractères,
4. Le champ Niveau est composé de trois radio avec comme choix par défaut Secondaire,
5. Le champ Module de formation est composé de quatre cases à cocher,
6. La dernière ligne contient trois boutons scriptés Valider, Formater et Animer,
7. Le bouton Valider lance une fonction JavaScript du nom Verif() lors du clic.
8. La fonction Verif() se trouve dans un fichier du nom « Ex3.js » dans le même dossier.
Note : Le corps de la fonction Verif() n’est pas demandé dans cet exercice.
Exercice 2 (CSS) : 4 pt
On désire formater le titre H1 et le tableau de l’exercice 1 sous la syntaxe du langage CSS, pour cela :
1. Créer une classe CSS du nom formH1 permettant de définir le style suivant pour le titre H1 :
La couleur d’arrière plan est en Bleu,
la couleur du texte est en Jaune.
La largeur du titre est 50%.
2. Créer une classe CSS du nom formTable permettant de définir le style suivant pour le tableau :
La taille de la police est 14pt,
L’épaisseur de la bordure est 10pt.
___________________________________________________________________________
Page : 1 / 2
Exercice 3 (JavaScript) : 4 pt
Donner le code de la fonction JavaScript Verif() de l’exercice 1, permettant de vérifier les conditions
suivantes :
Le champ Nom et Prénom doit être non nul,
Le champ E-Mail doit comporter le caractère @,
Le client doit choisir au moins un Module de formation.
La fonction doit afficher en sortie dans une boîte alerte le message « Inscription correcte ! » si toutes
les conditions sont vérifiées ou un message d’erreur dans les autres cas.
Exercice 4 (JQuery) : 4 pt
Créer sous la syntaxe du JQuery :
1. Un script permettant d’ajouter les classes CSS créées dans l’exercice 2 aux éléments
correspondants, lorsqu’on clique sur le bouton Formater du tableau de l’Exercice1.
2. Un script permettant d’enchainer 2 animations personnalisées sur le tableau de
l’exercice1 lorsque la souris est sur le bouton Animer :
a. La 1ère animation augmente la largeur du titre H1 de 200px en 2 secondes,
b. La 2ème animation augmente la taille du texte du titre H1 de 20px en 2secondes.
___________________________________________________________________________
Page : 2 / 2
