Examen Prog Web1 2022

Ministère de l'Enseignement Supérieur et de la Recherche Scientifique
Direction Générale des Etudes Technologiques

Institut Supérieur des Etudes Technologiques de Mahdia
Département Technologies de l’Informatique
Examen
Matière : Développement Web et multimédia 1 Classes : TI1.1-7
Enseignants : A. Tilouch, H.Boukthir, I. Malloug, N. Haj Hammouda,
Date : 13/01/2022
R. Ben El Hadj Said, S. Daoud
Documents et calculatrices : Non Autorisés Durée : 1.5 h
Exercice 1 QCM (5 pts)

Choisir la réponse correcte :
1. Lorsqu'on définit "width :75%" pour un élément en CSS, cela signifie :

a) Que l'élément va occuper une 75% de la largeur totale de la page
b) Que l'élément va occuper une 75% de sa largeur par défaut
c) Que l'élément va occuper une 75% de la largeur de son élément parent
2. Peut-on aligner un élément en définissant margin-left et margin-right ?

a) Oui
b) Non
3. En web, l’unité « em » est utilisée pour :

a) attribuer des tailles en fonction de la taille de la police de leur parent
b) attribuer des dimensions proportionnées aux dimensions de l'élément parent
c) exprimer une dimension fixe (indépendante de la taille de la police)
4. La valeur par défaut de l’attribut « position » est _________.

a) fixed
b) absolute
c) static
d) relative
5. Lequel des sélecteurs suivants sélectionne tout élément E dont l’attribut Attr à
exactement la valeur donnée ?
a) E[attr^=value]
b) E[attr$=value]
Page 1 sur 6
c) E[attr*=value]
d) E[attr=value]
6. Lequel des sélecteurs suivants sélectionne tout élément de type E et F et leur applique la
même valeur ?
a) E F {…}
b) E , F {…}
c) E > F {…}
d) E + F {…}
7. Pourquoi doit-on préciser plusieurs valeurs pour la propriété font-family ?

a) Pour laisser la possibilité à l'utilisateur de choisir celle qu'il préfère
b) Car certaines polices peuvent ne pas être lues par un navigateur
c) Il n'est pas nécessaire de préciser plusieurs valeurs
8. text-indent : valeur
a) permet de spécifier un décalage de la première ligne d’un texte
b) permet de changer la casse de la police
c) permet de déterminer l’épaisseur de la police.
9. Si on ne donne que deux valeurs à la propriété padding, la première valeur représente :

a) La marge intérieure haute
b) Les marges intérieures droite et gauche
c) Les marges intérieures haute et basse
10. Un élément positionné avec « position:fixed »

a) se comporte par défaut de la même manière que static.
b) se positionne par rapport à l'espace affichable du navigateur
c) se positionne par rapport à son dernier ancêtre positionné
Page 2 sur 6
Exercice 2 (15 pts)
Le but de cet exercice est de créer une page web nommée "index.html" suivant l’architecture
suivante :
Header
Nav
Article
Article
Footer
Indications:
 La photo de profil nommée “profil1.jpg” est localisée sous le répertoire images.
 La vidéo nommée “loisirs.mp4” est localisée dans le répertoire video.
 La barre de navigation contient les liens amenant vers les pages de site:
o Etudes.html
o Experiences.html
o Contact.html
 Le footer contient deux liens amenant vers:
o http://www.facebook.com/p1
o http://www.twitter.com/p1
Page 3 sur 6
Soit le code de la page web index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
</head>
<body>
<header>
<h1> Ma page personnelle</h1>
<nav> <ul><li> <a href="Etudes.html">Mes études </li></a>
<li><a href="experiences.html">Mes expériences
professionnelles</a> </li>
<li><a href="Contact.html">Contactez Moi </a></li>
</ul></nav>
</header>
<article>
<h3> Informations personnelles</h3>
<img src="images/profil1.jpg"/>
<p>Votre prénom et ensuite votre nom, en respectant cet ordre. <br/>
Votre adresse écrite sans abréviations.<br/> Votre numéro de
téléphone. <br/>
Votre adresse e-mail. <br/> Votre adresse Skype, si vous
postulez pour travailler à l'étranger.<br/>
Votre âge. <br/>Votre permis de conduire éventuel.<br/>Vous
pouvez vous abstenir d'indiquer votre situation familiale.
</p>
</article>
<article>
<h3> Loisir et activités</h3>
<video class="v1" controls >
<source src="video/loisirs.mp4" type="video/mp4">
</video>
<p> Faire du sport dans un réseau organisé de compétition. S'adonner
à des sports (football, hockey, soccer, course de cross-country, badminton).
Faire des sorties de plein air (escalade, ski de fond, kayak). Faire des
pratiques libres (volleyball, basketball).</p>
</article>
<footer>
<ul> <li><a href= "http://www.facebook.com/p1" >facebook</a></li>
<li> <a href= "http://www.twitter.com/p1" >twitter</a></li></ul>
</footer>
</body>
</html>
On vous demande d’écrire le code CSS du fichier « style.css » permettant de finaliser la page
web « index.html » ci-dessus, puis appliquer le style à cette page.
Pour la page web :
 La largeur de la page est sur 100%
 Le contenu de la page est au centre
 La couleur est de : #000CD0
Page 4 sur 6
Pour le header :
H1 dans le header est de taille 40px
La barre de navigation :
 Couleur du fond : #6495ED
 Bordure avec un coin arrondi de 25px
 Hauteur : 35px
Pour la liste de la barre de navigation :
 Enlever les puces de la liste
 L’espace interne avec la bordure est de 10px
 Transformer la liste en barre de navigation horizontale
 La marge à gauche est de 15 px
 Police : gras
 Couleur des liens : blanc
 Enlever le soulignement
 Spécifier la couleur bleue pour les liens au moment où l'utilisateur les survole
Pour l’article :
 Largeur : 49%
 La bordure solide, arrondi de 35px et avec épaisseur de 2px
 L’espace entre header et article est de 10px
 L’espace entre header et footer est de 20px
 Utiliser float pour positionner l’article à gauche
Pour le titre de l’article :
 Couleur : #FFFFFF
 Couleur du fond : #B0C4DE
 L’espace interne avec la bordure est de 10px
 La bordure avec un coin arrondi de 25px
Pour les paragraphes dans l’article :
 L’espace entre les paragraphes est de 20px, 30px, 20px et 30px
 Alignement : justifié
Page 5 sur 6
Pour le footer:
 Couleur du fond : # 0154a0
 Alignement : centré
 Des bordures arrondies de 25px
 Empêcher le contournement des blocs flottants
 Enlever les puces de la liste
 Transformer la liste en barre de navigation horizontale
 La marge gauche entre les éléments de la liste est de 15 px
 Couleur des liens : blanc
 Enlever le soulignement
Pour l’image : appliquer le style suivant en utilisant les classes

 Hauteur et largeur : 100px
 Elément flottant à droite
 Marges sur les quatre côtés de 20px
Pour la vidéo : appliquer le style suivant en utilisant les classes

 Hauteur : 150px
 Elément flottant à gauche
 Marges sur les quatre côtés : 0px, 20px, 15px et 20px
Page 6 sur 6

Examen Prog Web1 2022

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

Examen Prog Web1 2022

Transféré par

Droits d'auteur :

Formats disponibles

Ministère de l'Enseignement Supérieur et de la Recherche Scientifique

Direction Générale des Etudes Technologiques

Exercice 1 QCM (5 pts)

1. Lorsqu'on définit "width :75%" pour un élément en CSS, cela signifie :

2. Peut-on aligner un élément en définissant margin-left et margin-right ?

3. En web, l’unité « em » est utilisée pour :

4. La valeur par défaut de l’attribut « position » est _________.

7. Pourquoi doit-on préciser plusieurs valeurs pour la propriété font-family ?

9. Si on ne donne que deux valeurs à la propriété padding, la première valeur représente :

10. Un élément positionné avec « position:fixed »

Pour l’image : appliquer le style suivant en utilisant les classes

Pour la vidéo : appliquer le style suivant en utilisant les classes

Vous aimerez peut-être aussi