efm- Béni Mellal Khnifra - Correction vu

Examen Régional de Fin de Module
Session Février 2023 - CORRECTION -

Filière : Développement Digital Année de formation : IA Niveau : Technicien
Spécialisé
Numéro du module : M104 Intitulé du module : Sites web statiques
Durée : 3h Date : 18/02/2023 Horaire : 15h00-18h00
Partie 1 : 20 points
I -Que représente chaque élément <p align=justify> ? (2pts)
L'élément <p align="justify"> a été utilisé dans les versions antérieures d'HTML pour justifier le texte à
gauche et à droite dans un paragraphe. Cela signifie que le texte sera réparti uniformément sur toute
la largeur de la zone de contenu de l'élément <p>.
2-Qu'cst-ce qu'un attribut universel ? Donner un exemple. (2pts)
Un attribut universel, également connu sous le nom d'attribut global, est un attribut HTML qui peut
être appliqué à n'importe quel élément HTML
Un exemple courant d'attribut universel est l'attribut data-*.
<div id="product"
data-product-id="12345" data-category="electronics" data-price="99.99">
<h2>Smartphone</h2>
<p>Les caractéristiques du smartphone.</p>
</div>
Dans cet exemple, nous avons utilisé l'attribut data-* pour stocker des informations supplémentaires
sur un produit, telles que son identifiant, sa catégorie et son prix.
3-A quoi sert la balise <optgroup> ? (2pts)

La balise <optgroup> en HTML est utilisée pour regrouper plusieurs options au sein d'un élément
<select>.
4-Qu'est-ce qu'un sélecteur universel et comment il se présentc ? (2pts)
Un sélecteur universel en CSS est représenté par l'astérisque (*). Il sélectionne tous les éléments de la
page HTML.
Voici comment il se présente :
*{ /* Propriétés CSS */ }
1
5-Qu'est-ce qu'un moteur de rendu, et qu'il est le moteur de rendu utilisé par Firefox ? (2pts)
Un moteur de rendu est un logiciel chargé de transformer le code HTML, CSS et JavaScript d'une page
web en une représentation visuelle à afficher à l'utilisateur. Il interprète le code source de la page web
et le traduit en pixels à afficher à l'écran.
Firefox, le navigateur web développé par Mozilla, utilise un moteur de rendu appelé "Gecko".
6 -Quel est le type du chemin suivant «./../Contenu/medias/images/Iogo.png » ? (2pts)
Chemin relatif puisqu’il spécifie le chemin du logo à partir du répertoire courant.
7 -Une liste <ul> se compose de 10’<li>, comment cibler les éléments impairs à partie de 3ième <li> ?
(2pts)
ul li:nth-child(n+3):nth-child(odd) {
/* Styles pour les éléments impairs à partir du troisième <li> */
}
8 -Quel est le rôle de ? (2pts)

a. Corps du fichier ✓
b. Réaliser Création de liste
c. un paragraphe
9-Quel est le code HTML qui permet de créer un lien ? (2pts)
a. <a>http://ista.ma</a>
b. <a href= "http://ista.ma">VlSlTER SITE ISTA </a> ✓
c. <a name="http://ista.ma"> VISITER SITE ISTA</a>
I O- Donne le code CSS pour que la couleur des liens de menu devienne orange si la résolution de l'écran est entre
de 576px et 786px. (2pts)
@media screen and (min-width: 576px) and (max-width: 786px) {
/* Styles pour une résolution d'écran entre 576px et 786px */

nav a {
color: orange;
}
}
Partie 2: 20 points
Exercice 1 (6pts)
Modifier le formulaire suivant pour que tous les champs soient obligatoires et que la valeur du champ nom ne
dépasse pas 32 caractères et n'accepte que des lettres.
2
Script exercice1.html


<h1>Login</h1>
<form>
<label for="monnom">Mon nom</label>
<input type="text" id="monnom" name="monnom"
maxlength="32" pattern="^[a-zA-Z]+$" required
/>
<label for="motdepasse">Mon mot de passe</label>
<input type="password" id="motdepasse" name="motdepasse" required>
<label for="monemail">Mon Email</label>
<input type="email" id="monemail" name="monemail" required>
<input type="submit" value="valider">
</form>
Exercice 2 (10pts)
1. Donner le code HTML qui sert à créer la structure du menu présenté ci-dessus. (4pts)
2. Donner les classes Bootstrap qui permet de créer le menu déroulant comme présenté ci-dessus.
(3pts)
3. Définir une marge droite de 1,5 rem pour la zone de texte et le bouton. (3pts)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NavBar Bootsrap</title>


<link href="./css/bootstrap.min.css" rel="stylesheet">
<script src="./js/bootstrap.bundle.min.js" ></script>
3

<link rel="stylesheet" href="./font/bootstrap-icons.min.css">
</head>
<body>

<nav class="navbar navbar-expand-lg bg-dark border-bottom border-body"
data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="bi bi-house-fill"></i> MON RESTAURANT
</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarScroll"
aria-controls="navbarScroll" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll"
style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
Accueil
</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false">Menu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Petit déjeuner</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Déjeuner</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Diner</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item"><a class="nav-link">
Contact</a>
</li>
</ul>
4
<form class="d-flex" role="search">

<input class="form-control me-4" type="search"
placeholder="Taper un plat" aria-label="Search">
<button class="btn btn-outline-success me-4" type="submit">
Recherche
</button>
</form>
</div>
</div>
</nav>
</body>
</html>
Exercice 3 : (4pts)
L'objectif est la réalisation d'une animation du drapeau de notre nation.
1. Donner le code HTML pour la création de ta page suivante : (2pts)

2. Donner le Code CSS pour l'animation du drapeau, sachant que : (2pts)
Propriété CSS Valeur
largeur 200px
hauteur 200px
Arrondir les coins D'être un cercle
Animation Sous forme d'une rotation de 360deg en 2s
5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morocco Flag</title>

<style>
.container{
text-align: center;
margin-top: 50px;
}
h1{
font-size: 40px;
margin-bottom: 30px;
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
animation: rotation 2s ease-in-out infinite forwards;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<h1>Morocco Flag</h1>
<img src="MoroccoFlag.png" alt="Morocco Flag">
</div>
</body>
</html>

efm- Béni Mellal Khnifra - Correction vu

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

efm- Béni Mellal Khnifra - Correction vu

Transféré par

Droits d'auteur :

Formats disponibles

Examen Régional de Fin de Module

Session Février 2023 - CORRECTION -

Numéro du module : M104 Intitulé du module : Sites web statiques

Durée : 3h Date : 18/02/2023 Horaire : 15h00-18h00

I -Que représente chaque élément <p align=justify> ? (2pts)

2-Qu'cst-ce qu'un attribut universel ? Donner un exemple. (2pts)

Un exemple courant d'attribut universel est l'attribut data-*.

3-A quoi sert la balise <optgroup> ? (2pts)

Voici comment il se présente :

6 -Quel est le type du chemin suivant «./../Contenu/medias/images/Iogo.png » ? (2pts)

Chemin relatif puisqu’il spécifie le chemin du logo à partir du répertoire courant.

8 -Quel est le rôle de ? (2pts)

9-Quel est le code HTML qui permet de créer un lien ? (2pts)

@media screen and (min-width: 576px) and (max-width: 786px) {

/* Styles pour une résolution d'écran entre 576px et 786px */

1. Donner le code HTML pour la création de ta page suivante : (2pts)

Vous aimerez peut-être aussi