Office de la Formation Professionnelle
et de la Promotion du Travail
Direction Régionale Fès - Meknès
Examen de Fin de Module Régional (1er semestre)
Année de Formation : 2022/2023
Module : M104 – Développer des sites web statiques
Filière : Développement Digital Durée : 2H30
Niveau : 1ère année Barème : /40
Coefficient : 3
Variante : V 1
Partie théorique : /10 points
1- le responsable de la standardisation du web est : 2- Parmi les balises inline :
a- Mozilla a- p
b- Google b- em
c- Word Wide Web Consortium c- ol
d- Microsoft d- a
3- Pour insérer une image au fond de la page : 4- Laquelle des propriétés suivantes définit l’espacement
a- <body bg=“background.gif”> entre les lettres?
b- <body img=“background.gif”> a- space
c- <body style=“background-image:url(background.gif)”> b- line-height
d- <body><img src=“background.gif”> c- letter-spacing
d- Aucune de ces réponses n’est vraie.
5- La valeur par défaut de l’attribut « position » est : 6- le sélecteur img[title*= ‘photo‘ ] désigne :
a- fixed a- Balise img dont le title commence par photo
b- absolute b- Balise img dont le title se termine par photo
c- static c- Balise img dont le title contient photo
d- relative d- Balise img dont le title ne contient pas photo
7-Que fait {border-style: dashed } sur un bloc de texte ? 8- la propriété css flex-flow représente la valeur de :
a- un encadrement avec pointillés a- flex-direction et flex-basis
b- une bordure épaisse b- flex-grow et flex-direction
c- une bordure double c- flex-direction et flex-wrap
d- un encadrement avec tirets d- flex-wrap et flex-shrink
9-Lequel des éléments suivants n’est pas un attribut de la 10- On souhaite rédiger une page html avec des énoncés et
balise <form> des corrections. Pour cela, on va utiliser la balise <div>. Quel
a- Action est l'attribut de <div> qui permettra de différencier les
b- Method énoncés des corrections ?
c- name a- l'attribut class=""
d- url b- l'attibut id=""
c- la balise <strong>
d- la balise <p>
Concepteur Directeur Pédagogique Commission locale EFP :
Nom & prénom :Mrani Amal &
Bouazzaoui Nadia
IFMOTICA
Fès
Visa :
Page 1 sur 3
Partie Pratique : / 30 points
I. Partie html : /14 points
Donner le code html de la page accueil.html présentée ci-dessus en respectant les consignes
suivantes :
1. Le header est composé d’un menu horizontal. 2 points
2. Une seule section qui est composée de trois articles :
Le 1er Article contient :
a) Un titre précédé par une image nommée fleche.png. 0.5 point
b) Un formulaire contenant : 4 points
Deux zones de texte.
Deux listes : Secteur d’activité (Administration publique, Assurance, autre)
et Ville ( Fes ,Meknes ,rabat ,marrakech).
Le bouton ok est un bouton de validation.
Concepteur Directeur Pédagogique Commission locale EFP :
Nom & prénom :Mrani Amal &
Bouazzaoui Nadia
IFMOTICA
Fès
Visa :
Page 2 sur 3
c) Un bloc div mentionnant le nombre d’offres d’emploi. 1 point
Le 2ème Article contient :
a) Un titre précédé par une image nommée fleche.png. 0.5 point
b) Un bloc div de six logos d’entreprises (PSA,ECWP,…). / 2 points
Le 3ème Article contient :
a) Un titre précédé par une image nommée fleche.png. 0.5 point
b) Un tableau suivi d’un lien (voir toutes les offres). 2.5 points
3. Ajouter un pied de page qui contient le texte suivant : « copyright EFMR V1 2023 »
/1 point
II. Partie CSS : / 16 points
1. Les éléments de menu doivent être alignés horizontalement à droite et espacés avec
un fond en vert, une écriture blanche et non soulignés. 3 points
2. Les trois titres sont écrits en couleur blanche avec un arrière-plan bleu et coins
arrondis. 2 points
3. Au survol de la souris sur le bloc div du premier article, associer l’animation
suivante (rotation de 90 deg et couleur du fond : rgb(61,216,219) ). 3 points
4. Le lien (voir toutes les offres) doit avoir : un arrière-plan maroon, une écriture
blanche et une marge intérieure de 8px. 2 points
5. Le pied de page a (une hauteur de 100px, couleur d’arrière-plan bleu et son contenu
centré) 1 point
6. Pour la mise en page : le 1er article doit être au centre de la fenêtre, le 2ème et 3ème
article doivent occuper équitablement la moitié de la largeur de la fenêtre. 3 points
7. La page doit être responsive : 2 points
a. Pour les grands écrans la disposition reste la même.
b. Pour les petits écrans :
Les éléments de menu seront alignés verticalement.
Les trois articles seront aussi alignés verticalement.
Concepteur Directeur Pédagogique Commission locale EFP :
Nom & prénom :Mrani Amal &
Bouazzaoui Nadia
IFMOTICA
Fès
Visa :
Page 3 sur 3
