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 : V2
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. 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)
3. Quelle est la classe qui fournit un conteneur couvrant toute la largeur de la fenêtre en
Bootstrap? (1 pt)
4. Quelle est la classe qui ajoute des rayures zébrées à une table en Bootstrap? (1 pt)
5. Quelle la classe qui ajoute une barre de défilement au tableau en cas de besoin? (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 page web, il existe 2 éléments article dans une même ligne, nous souhaitons
que le premier article occupera 5 colonnes de base et l’autre article occupe 6 colonnes
pour des écrans de type large et pour les écrans plus petite, en revanche, chaque article
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 des largeurs égales à tous les éléments
existant dans une même ligne en Bootstrap? (1 pt)
10. Quelle est la classe qui permet de positionner verticalement les colonnes en haut de la
ligne ? (1 pt)
11. Comment ajouter une margin sur le coté haut et bas de 0.25 rem (en utilisant le
nombre 1) (1 pt)
12. Quelle est la classe qui met en forme la majorité des champs de formulaire. (1 pt)
13. Ecrivez le code html permettant de créer la barre de progression ci-dessous en utilisant
le framework bootstrap. (2 pts)

Partie pratique :

Exercice 1 : (26 pts)

1
1. Ecrire le code HTML de la page ci-dessous permettant de créer :
a. Un titre contenant le texte adresse de facturation (1 pt)
b. Un premier tableau contenant : (3 pts)
a. Les 2 labels prénom et nom de famille (2 pts)
b. Les 2 champs de saisi obligatoire (4 pts)
c. le label E-mail (1 pt)
d. Le champ de saisi de l’email (2 pts)
e. Le label Adresse (1 pt)
f. Le champ de saisi de l’adresse obligatoire (2 pts)
c. Une section contenant :
a. Un titre paiement (1 pt)
b. les cases de choix de carte de paiement avec la première option cocher par
défaut (2 pts)
c. Le bouton Continuer à payer (1 pt)

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 bleu, la couleur du texte blanche, l’arrondissement,
et les marges du bouton de soumission (2 pts)

3. Ecrivez le code css ou bootstrap permettant de rendre la page web responsive :

Positionner le tableau et la section l’une à coté de l’autre pour les écrans de type
medium (>=768px) (figure 2) et l’une en dessous de l’autre pour les écrans inférieur à
768px (figure 1) (2 pts)

Figure 1

Figure 2
Bon courage ☺