Office de la Formation Professionnelle

et de la Promotion du Travail

Année de Formation : 2021-2022

Examen de fin de module

Module : SITE WEB STATIQUE

Filière : DEV Epreuve : Pratique/ Théorique

Année: 2021-2022 Variante : V1
Niveau : 1A Barème : /40
Date : 06 / 05 / 2022 Durée : 2 h

Partie théorique : (14 pts)

1. à quoi sert le framework Bootstrap ? (1 pt)

2. Citer les 2 méthodes pour intégrer bootstrap dans un site web web? (1 pt)
3. En combien de colonne divise le système de grille de bootstrap l’écran? (1 pt)
4. C’est quoi la différence entre la classe container et la classe container-fluid ? (1 pt)
5. Quelle est la classe utiliser pour définir une nouvelle ligne de grille en bootstrap et
c’est quoi la condition d’utilisation de cette classe ? (1 pt)
6. Comment indiquer explicitement le nombre de colonnes de base que doivent occuper
nos colonnes personnalisées. (1 pt)
7. Quelle est le résultat obtenu en mélangeant les classes suivantes dans une même ligne :
.col et .col-1, .col-2… .col-12 ? (1 pt)
8. Dans une fenêtre, il existe 3 éléments div dans une même ligne, nous souhaitons que la
deuxième div occupera 6 colonnes de base et les 6 colonnes restantes seront réparties
équitablement entre la 1ère et la 3ème div pour des fenêtres de type medium et pour
les fenêtres plus petite, en revanche, chaque div occupera donc tout l’espace disponible
dans la ligne. Ecrire le code html permettant de donner la structure souhaité. (1 pt)
9. Quelle est la classe permettant de définir automatiquement la largeur des colonnes en
fonction de leur contenu ? (1 pt)
10. Quelle est la classe qui permet de positionner horizontalement les colonnes au milieu
de la ligne ? (1 pt)
11. Comment ajouter un padding sur le coté gauche de 3rem (en utilisant le nombre 5) (1
pt)
12. Ecrivez le code html permettant d’ajouter un bouton avec un fond bleu en utilisant une
classe bootstrap. (1 pt)
13. Ecrivez le code html permettant de créer la carte ci-dessous en utilisant le framework
bootstrap. (2 pts)

1
Partie pratique :

Exercice 1 :

1. Ecrire le code HTML de la page ci-dessous permettant de créer :

a. Le tableau contenant 2 lignes et cinq colonnes (2 pts)
b. Le champ de saisi « name » est obligatoire (2 pts)
c. Le champ qui va contenir l’adresse email est obligatoire (2 pts)
d. Le champ qui va contenir la description (2 pts)
e. Le champ pour sélectionner une option qui contient les valeurs select option,
option 1 et option 2 (2 pts)
f. Le bouton de suppression rouge (2 pts)
g. Et le bouton « Add Row » en bleu (2 pts)

2. Ecrire le code CSS de la page ci-dessous permettant de :

a. Préciser le positionnement, les marges, l’alignement et l’arrondi des différents
champs de saisi (2 pts)
b. Paramétrer la couleur du fond rouge, la couleur du texte blanche, et
l’arrondissement du bouton de suppression (2 pts)
c. Paramétrer la couleur du fond bleu, la couleur du texte noir, et l’arrondissement du
bouton d’ajout (2 pts)

Exercice 2 :

1. Dans un fichier html, écrivez le code permettant de créer les trois sections ci-dessus (2
pts)
2. Positionner les 3 sections l’une à coté de l’autre pour les écrans de type large
(>=992px) et l’une en dessous de l’autre pour les écrans inférieur à 992px (4 pts)

Bon courage ☺