OFPPT Office de la Formation Professionnelle

et de la Promotion du Travail
Direction Régionale TTA
Année de Formation : 2021-2022

Examen de fin de module Régional

Ml 04 ; Sites Web statiques
Filière : Développement Digital Epreuve : Pratique / Théorique
Année : 1 Variante : 2
Niveau : Technicien Spécialisé Barème : 40 Pts
Date : 06/05/2022 à 16H00 Durée : 2h00
Partie théorique : (14 pts)
A

1. A quoi sert le fiamework Bootstrap ? ( 1 pt)

2. Quelle est la classe utilisée 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.! 1l 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 disp omble dans la
ligne. Ecrire le code html permettant de donner la structure souhaitée. (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 margfn sur le côté 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 fiamework
bootstrap. (2 pts)

Partie pratique :

Exercice 1 : (26 pts)

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)
i. Les 2 labels prénom et nom de famille (2 pts)
ii. Les 2 champs de saisi obligatoire (4 pts)
iii. Le label E-mail (1 pt)
iv. Le champ de saisi de l’email (2 pts)
v. Le label Adresse (1 pt)
vi. Le champ de saisi de l’adresse obligatoire (2 pts)
 <xo
OFPPT Office de la Formation Professionnelle
et de la Promotion du Travail
Direction Régionale TTA
Année de Formation : 2021-2022
[■fl 1
Examen de fin de module Régional
M104 : Sites Web statiques

Filière : Développement Digital Epreuve : PratiqueThéorique

Année : 1 Variante : 1
Niveau : Technicien Spécialisé Barème : 40 Pts
Date : 06/05/2022 à 13H30 Durée : 2h00

Partie théorique : (14 pts)

1. A 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-fliud ? (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ée. (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 qtu permet de positionner horizontalement les colonnes au milieu de la ligne? (1 pt)
11. Comment ajouter un paddrng sur le côté 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.

Gpt)
13. Ecrivez le code html permettant de créer la carte ci-dessous en utilisant le framework bootstrap. (2pts)

Gntuk

0$ ô’S