Direction Régionale Rabat – Salé - Kénitra
Examen régional de fin de module
Année de Formation 2021/2022
Module M 104
Sites Web statiques
Filière : Développement digital Durée : 2h
Année : 1°A Barème : / 40
(2 points est réservé à la présentation de la copie)
1. Partie théorique : (8 pts)
Choisissez la bonne réponse : (1 pour chaque bonne réponse)
1. En HTML5, quel attribut est utilisé pour indiquer qu’une case à cocher doit être coché ?
a. selected
b. active
c. checked
2. Quel est l’attribut obligatoire dans la balise <img> ?
a. src
b. href
c. alt
3. Si on demande un mot de passe dans mon formulaire, on doit utiliser :
a. La valeur get de l'attribut method
b. La valeur post de l'attribut method
c. Aucune de ces deux valeurs
4. Laquelle de ces trois écritures est correcte ?
a. @media screen and max-width = 680px
b. @media screen and (max-width: 680px)
c. @media screen and (max-width = 680px)
5. Laquelle des propriétés suivantes définit l’espacement entre les lettres ?
a. space
b. line-height
c. letter-spacing
6. Déterminer parmi les propositions la cible du sélecteur suivant :
h1[class~=title] + p:first-letter
a. Les titres h1 et la première lettre des paragraphes.
b. La première lettre des paragraphes qui suivent immédiatement un titre h1 qui possède la classe
"title".
c. La première lettre des paragraphes et la première lettre des titres h1 qui possède la classe
"title"
7. ul li : first-child est un sélecteur qui cible:
a. Le premier élément <li> de toute balise <ul>
b. Tous les éléments <li> de la première balise <ul>
c. Le premier élément <li> de la première balise <ul>
Page 1 / 5
8. Quelle est la hiérarchie basique des classes utilisées pour créer une grille Bootstrap ?
a. Conteneur > colonne > ligne
b. Ligne > colonne > conteneur
c. Conteneur >ligne >colonne
2. Partie pratique : (30 pts)
Partie HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Learning</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="title"><h1>Site E-Learning</h1> </div>
<div class="navbar">
<a href="#"><span class="glyphicon glyphicon-home"></span></a>
<a href="#">Tutoriels</a>
<a href="#">Références</a>
<a href="#">Exercices</a>
<a href="#">Quiz</a>
</div>
</div>
<div class="row">
<div class="main">
<div class="article">
<div class="titre"> HTML </div>
<div class="description">Langage pour la création des pages web</div>
<div class="tuto" style="background-color: rgb(66, 86,
109);">Tutoriels</div>
<div class="exe" style="background-color: rgb(3, 3, 3);">Exercices</div>
<div class="quiz" style="background-color: rgb(110, 117, 180);
">Quiz</div>
</div>
<div class="article">
<div class="titre"> CSS </div>
<div class="description">Langage pour le style des pages Web</div>
<div class="tuto" style="background-color: rgb(66, 86,
109);">Tutoriels</div>
<div class="exe" style="background-color: rgb(3, 3, 3);">Exercices</div>
<div class="quiz" style="background-color: rgb(110, 117, 180);
">Quiz</div>
Page 2 / 5
</div>
<div class="article">
<div class="titre"> JAVASCRIPT </div>
<div class="description">Langage de programmation des pages Web</div>
<div class="tuto" style="background-color: rgb(66, 86,
109);">Tutoriels</div>
<div class="exe" style="background-color: rgb(3, 3, 3);">Exercices</div>
<div class="quiz" style="background-color: rgb(110, 117, 180);
">Quiz</div>
</div>
</div>
<div class="aside">
<form action="">
<fieldset>
<h2>Connexion </h2>
<label for="email">Email : </label>
<input type="text" name="email" id="email">
<label for="pw">Mot de passe : </label>
<input type="password" name="pw" id="pw">
<input type="submit" value="Connexion">
<p>Besoin d'un compte ? <a href="#">S'inscrire</a> </p>
<p><a href="#">Mot de passe oublié</a></p>
</fieldset>
</form>
</div>
</div>
</body>
</html>
Partie CSS :
*{
box-sizing: border-box;
font-size: 18px;
}
body{
margin:auto;
width: 80%;
}
.header{
background-color: rgb(212, 215, 238);
border-radius: 10px;
}
.title{
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
}
.title::first-letter{
font-size: 2.2em;
}
.navbar{
Page 3 / 5
background-color: #222;
border-radius: 10px;
border:2px solid white;
display: flex;
}
.navbar>a{
text-decoration: none;
color: white;
font-weight: bold;
margin-left: 20px;
padding: 20px;
font-size: large;
}
.navbar>a:hover{
background-color: black;
}
.row{
display: flex;
}
.main{
flex: 70%;
display: flex;
margin:20px;
}
.article{
flex: 33.33%;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
padding: 10px;
}
.article:hover{
border:1px solid rgb(110, 117, 180);
cursor: pointer;
background-color: rgb(212, 215, 238);
}
.article .titre{
font-size: 2em;
font-weight: bolder;
padding: 20px;
}
.article .description{
font-size: 1em;
font-weight: bolder;
padding: 20px;
text-align: center;
}
.article .tuto , .exe, .quiz{
width: 80%;
padding: 15px;
Page 4 / 5
font-size: large;
background-color:rgb(191, 196, 241);
border-radius: 50px;
margin-top: 15px;
text-align: center;
color: white;
font-weight: bolder;
}
.aside{
flex: 20%;
}
.aside fieldset{
border-radius: 10px;
border:1px solid rgb(110, 117, 180);
display: flex;
flex-direction: column;
padding: 10px;
}
.aside input{
padding: 10px;
border: 1px solid rgb(110, 117, 180);
margin-bottom: 20px;
border-radius: 5px;
}
.aside input[type=submit]
{
background-color:rgb(110, 117, 180);
color: white;
font-weight: bolder;
}
.aside p{
text-align: center;
}
.aside a{
text-decoration: none;
color: rgb(110, 117, 180);
font-weight: bolder;
}
@media screen and (max-width:450px) {
.row, .navbar, .main{
flex-direction: column;
}
.article{
width: 100%;
padding: 0px;
margin:0px;
}
.article .tuto , .exe, .quiz, .description{
display: none;
}
}
Page 5 / 5
