EXAMEN SEMESTRIEL
SEMESTER EXAMS
EPREUVE DE MISE EN SITUATION PROFESSIONNELLE
Session Mars 2025 Durée : 5H
Spécialité GP Coefficient : 05
Centre de Formation VTIL Note Eliminatoire <14/20
PARTIE 1 – QUESTIONS THEORIQUES (7,5 PTS)
EXERCICE1 : DEFINIR LES THEMES SUIVANTS (2,5pts)
Balise, Élément, Attribut, sélecteur, CSS
EXERCICE1 : QUESTIONS A REPONSE OUVERTE (5pts)
1. Que signifie l’acronyme HTML et à quoi sert-il ? (0,5pt)
2. Quelle balise HTML utilise-t-on pour inclure un paragraphe ? (0,5pt)
3. Comment lie-t-on une feuille de style externe en HTML ? (0,5pt)
4. Quelle propriété CSS permet de changer la couleur de fond d’un élément ? (0,5pt)
5. Donnez un sélecteur CSS qui cible tous les <li> situés dans un <ul> de classe menu. (0,5pt)
6. Quelle est la différence entre margin et padding en CSS ? (0,5pt)
7. Quelle propriété CSS ajuste l’espacement entre les lettres d’un texte ? (0,5pt)
8. Comment centre-t-on horizontalement un bloc de largeur fixe en CSS ? (0,5pt)
Page 1 sur 3
9. Citez deux attributs courants de la balise <input> pour les formulaires. (0,5pt)
10. Expliquez brièvement le principe de la cascade (ou « cascading » ) en CSS. (0,5pt)
PARTIE 2 – CAS PRATIQUE : CRÉATION D’UN FORMULAIRE (10 PTS)
EXERCICE1 : FORMULAIRE DE CONTACT (10 POINTS)
Consignes
Réalisez une page HTML nommée contact.html et un fichier CSS externe style.css correspondant. Le
formulaire doit respecter les points suivants :
1. Champs à inclure :
• Nom (texte, requis)
• Prénom (texte, requis)
• Adresse e-mail (type email, requis)
• Mot de passe (type password, requis)
• Date de naissance (type date)
• Téléchargement de CV (type file)
• Message (zone de texte, textarea)
• Bouton d’envoi
2. Structure HTML :
• Utiliser des balises sémantiques (<form>, <fieldset>, <legend>, <label>, etc.).
• Associer chaque <label> à son champ via l’attribut for.
3. Mise en forme CSS :
• Centrer le formulaire horizontalement dans la page.
• Définir une largeur fixe (ex. : 400 px) et un fond clair.
• Ajouter un padding intérieur et un border-radius pour arrondir les angles.
• Styliser les champs au focus (ex. : bordure plus marquée).
• Mettre en forme le bouton (effet de survol, cursor: pointer, etc.).
Barème
• HTML valide et sémantique : 5 pts
Page 2 sur 3
• CSS (mise en forme demandée) : 4 pts
• Fonctionnement global (champs requis, associations label/input) : 1 pt
EXERCICE2 : FORMULAIRE DE CONTACT (2,5pts)
Consigne :
Interpréter chaque ligne de code et apporter les modifications
Page 3 sur 3
