Nom & prénom : Groupe :

Office de la Formation Professionnelle et de la

Promotion du Travail
Direction Régionale Grand Casablanca

EVALUATION DE FIN DE MODULE REGIONAL

AU TITRE DE L’ANNEE : 2022/2023
Filière : développement digital Année de formation : 1A
Niveau : TS Epreuve : TH
N° du module : Durée : 2 heures
Intitulé du module : site web statique Variante :1
Date d'évaluation : Barème/40

QCM : (14 points)

1. À quoi sert HTML ? (1pt)
a. À mettre en forme des pages web
b. À structurer du contenu dans une page web
c. À créer des pages dynamiques
d. À concurrencer Google et Facebook

( La reponse est : b)

2. La balise <strong> indique... (1pt)

a. Ce texte est important
b. Ce texte est en gras
c. Ce texte est en italique

( La reponse est : a)

3. Quelle est la nature de ce lien? <a href = »http://www.siteTest.ma>Site Test</a> (1pt)

a. absolu
b. relative
c. direct
d. familiale

( La reponse est : a)

4. Ma page "source.html" se trouve dans le répertoire "c:\site\source.html" et je fais un

lien avec href = "../cible.html". Où se trouve cible.html ? (1.5pt)
a. c:\dossier\cible.html
b. c:\..\cible.html
c. c:\cible.html

( La reponse est : c)

V1 Page 1 sur 3
Nom & prénom : Groupe :

5. A quoi sert le sélecteur CSS3 "h1 ~ p"? (1.5pt)

a. à cibler tous les paragraphes qui suivent un titre h1
b. à cibler les éléments h1 s'ils contiennent un paragraphe
c. à cibler tous les titres et paragraphes de la page
d. à cibler tantôt un titre h1, tantôt un paragraphe

( La reponse est : a)

6. Par rapport à quoi se place un élément positionné en absolute ? (1.5pt)

a. à son plus proche ancêtre positionné
b. à son parent direct
c. à la page
d. à son frère positionné en relatif
e. Cela dépend du navigateur

(La reponse est : a)

7. Qu'est-ce qu'une Media Query ? (1.5pt)

a. Un format de base de données mobiles
b. Un ensemble de périphériques réunis par un même protocole
c. Un attribut HTML
d. Une règle CSS permettant de détecter des types de médias
e. Un jeu gratuit sur mobile

(La reponse est : d)

8. Selon le code suivant, quelles tailles d’écran aura chaque <div> des
colonnes occupant la moitié de la largeur de la ligne ? (2pts) (plusieurs
réponses possibles)
<div class="row">
<div class="col-6 col-md-4”>...</div>
<div class=”col-6 col-md-8">...</div>
</div>
a. Très petite
b. Petite
c. Moyenne
d. Grande
e. Très grande

(La reponse est : a et b)

9. Quelle est la hiérarchie basique des classes utilisées pour créer une grille
Bootstrap ? (1.5pt)
a. Conteneur > colonne > ligne
b. Ligne > colonne > conteneur
c. Conteneur > ligne > colonne

V1 Page 2 sur 3
Nom & prénom : Groupe :

d. Colonne > conteneur > ligne

(La reponse est : c)

10. Quelle classe BootStrap est utilisée pour ajouter un header à une carte (1.5pt)
a. card-head
b. .header
c. .head
d. .card-header

(La reponse est : c)

Exercice1 : Faire une transition sur la propriété font-size d’un élément p en lui
appliquant font-size de 2em au survol.(3 pts)

P{

Transition : font-weight 2s

p:hover{

font-weight : 2em

V1 Page 3 sur 3
Nom & prénom : Groupe :

Exercice2 : HTML CSS et Bootstrap (23 pts)

Partie HTML fichier MonSite/formulaire.html (10 pts)

1. Écrire une page HTML5 avec titre Création des formulaires

2. Réaliser le formulaire donné en annexe avec les contraintes suivantes.
3. Utilisation d’une méthode d’envoi adéquate.
4. Les champs sont liés aux labels
5. Le nom aura automatiquement le focus dès l’ouverture de la page
6. Le nom et le mot de passe sont obligatoires.
7. Homme est sélectionné par défaut.
8. Ajouter un bouton d’envoi à votre formulaire.

Partie CSS fichier MonSite/StyleForm.css (7 pts)

1. Les labels sont en gras avec une taille de 1.5em.

2. Le champ sélectionné aura une couleur de fond verte.
3. Le fond du formulaire est une image (image1.jpg)
4. Lier les fichiers html et css

Partie BootStrap (6pts)

À l’aide de bootstrap réaliser ce qui suit :

1. Le formulaire doit se trouver dans un conteneur centré qui s’adapte à la zone de

visualisation.
2. Le texte « veuillez remplir le champ doit apparaitre quand un champ obligatoire n’est pas
renseigné.
3. Le bouton doit avoir un contour rouge.

Annexe

V1 Page 4 sur 3