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)