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

Direction Générale des Études Technologiques

Institut Supérieur des Études Technologiques de Mahdia

DEVOIR SURVEILLÉ - DÉVELOPPEMENT WEB ET MULTIMÉDIA 1

Documents : non autorisés Niveau et filière : LI1
Date : 17 Décembre 2020 Durée : 1 heure
Enseignants : A. TILOUCHE, H. BOUKTHIR, N. HADJ HAMMOUDA, R. HADJ SAID
NB : La clarté des réponses et la propreté de la feuille sont prises en considération.

Exercice 1 (7 points)

1. Quel est le code HTML permettant de créer un lien vers un e-mail du webmaster d'un site web
ayant l'adresse webmaster@xcompany.com ?
a. <a href="mailto:webmaster@xcompany.com">webmaster</a>
b. <a href="webmaster@xcompany.com">webmaster</a>
c. <a http="mail:webmaster@xcompany.com">webmaster</a>
d. <mail http="send:webmaster@xcompany.com">webmaster</mail>

2. Lesquels de ces éléments sont des éléments bloc ?

a. <h1>, <p>, <ul>, <table>, <img>, <form>
b. <h1>, <strong>, <ul>, <table>, <em>, <form>
c. <h1>, <strong>, <ul>, <table>, <img>, <form>
d. <h1>, <p>, <ul>, <table>, <div>, <form>

3. Quelle balise provoque un retour à la ligne ?

a. <nl/>
b. <NEWLINE/>
c. <br/>
d. <hr/>

4. Laquelle des propositions suivantes est la bonne façon pour lire un fichier audio ?
a. <audio src="fichier.wav" type="audio/wav">Audio</audio>
b. <audio controls> <source src="fichier.ogg" type="audio/ogg"> <source src="fichier.wav″
type="audio/wav»> </audio>
c. <source src="file.wav" type="audio/wav">
d. Toutes les propositions

5. Lequel des éléments suivants n'est pas un attribut valide pour la balise <video> ?
a. Controls
b. Autoplay
c. Disabled
d. Preload

6. Pour créer une image réactive quels sont les éléments à utiliser ?
a. <img>, <map>, <a>
b. <img>, <map>, <area>
c. <img>, <area>, <a>
d. <img>, <map>, <area>, <a>

Page 1 sur 5
 7. Parmi les lignes de code HTML suivantes, laquelle permet de décrire la liste à puces ci-dessous ?

• Fruits
o Banane
o Fraise
• Légumes

a. <ul><li>Fruits</li><ul><li>Banane</li><li>Fraise</li></ul><li>Légumes</li></ul>
b. <ul><li>Fruits<ol><li>Banane</li><li>Fraise</li></ol></li><li>Légumes</li></ul>
c. <ul><li>Fruits<ul><li>Banane</li><li>Fraise</li></ul></li><li>Légumes</li></ul>
d. <ul><li>Fruits<ul><li>Banane</li></ul></li><li>Fraise</li><li>Légumes</li></ul>

Exercice 2 (13 points)

Dans cet exercice, on s'intéresse à la création de quelques pages web du site Petenica. Il s'agit d'un site
d’hébergement, de soin et d’adoption des animaux domestiques.

La page d’accueil pour ce site « Accueil.html » est illustrée par la Figure 1 trouvée ci-dessous.

1) Tracer un schéma de cette page web et identifier les principales zones structurelles et sémantiques
de celle-ci. Préciser quel élément HTML5 pourrait être utilisé pour définir chaque zone sachant
que la zone principale de la page est marquée par un cadre pointillé.
NB :
Vous n'êtes pas invités à écrire le code de cette page.

2) Donner le code HTML5 de la page « Contact.html » de la Figure 2. Cette page présente un

formulaire qui permet à un visiteur d’obtenir un rendez-vous pour un service bien déterminé.
Pour ce faire, on vous donne les informations suivantes :
 Les six premiers champs présentent respectivement les informations personnelles du
visiteur : son prénom, son nom, son email, son numéro de téléphone, la date et le temps
du rendez-vous à fixer.
 Le nombre maximal des caractères à saisir dans le premier champ est égal à 16 caractères.
 Les champs prénom, nom et email sont obligatoires.
 Le champ numéro de téléphone présente un format spécifique tel que : 73 556 789.
 Le temps d'un rendez-vous doit être choisi entre 8h et 18h.
 Une liste de sélection qui détermine les catégories de l’animal en compagnie. Les
éléments de la liste sont : les chiens, les chats et les oiseaux. La dernière catégorie englobe
les sous-éléments suivants : le perroquet, le lori et la colombe diamant.
 Une liste déroulante qui liste 3 types de services visés par ce rendez-vous qui sont :
l’assistance vétérinaire, l’alimentation et la psychologie animale.
 Une zone de texte multiligne qui permet au visiteur de rédiger un message ou une
information supplémentaire. Cette zone s’étend sur 20 lignes et 50 colonnes.
 Un bouton contenant le texte « Envoyer une demande », qui permet de soumettre les
informations saisies par le visiteur.
 Le fichier de traitement des données du formulaire est nommé « EnvoiService.php » et
ces données sont masquées lors de sa soumission.

Page 2 sur 5
3) Soit la page « Apropos.html » de la Figure 3 qui présente un tableau identifiant les quatre
membres de l’équipe responsable des services fournis pour l’hébergement, le soin ou l’adoption
d’un animal.

Ecrire le code HTML permettant de définir seulement les deux premiers membres de ce tableau.
Pour ce faire, on vous donne les informations suivantes :
 Chaque membre est présenté par une photo d'une largeur de 200px et d'une hauteur de
300px. Les noms des fichiers pour les photos de deux premiers membres sont :
"photoMembre1.jpg" et "photoMembre2.jpg".
 Le nom et la fonction de chacun sont écrits sous la photo qui lui correspond.
 En troisième position, un lien de contact Twitter est indiqué pour chaque membre. Le
nom de l’icône pour le lien de contact est : "iconeTwitter.png". Les liens de contact
correspondants à chaque membre de l’équipe sont respectivement :
https://twitter.com/NickThomas et https://twitter.com/AndersonLucy.

NB :
Les codes des pages « Contact.html » et « Apropos.html » doivent décrire la structure, la
sémantique et le contenu du document, sans se préoccuper de leurs mises en forme visuelles.

Page 3 sur 5
Figure 1 : Page « Accueil.html ».

Page 4 sur 5
 Prénom Nom Email

Numéro de téléphone Date Temps

Catégorie d’animal de compagnie Type de service

Votre message

Figure 2 : Page « Contact.html ».

Nos membres d'équipe

Thomas Nick Lucy Anderson Daniel Jacob James Harry

GARDIENNE D'ANIMAUX ŒILLET POUR ANIMAUX VÉTERINAIRE GARDIEN D'ANIMAUX
DE COMPAGNIE

Figure 3 : Page « Apropos.html ».

Page 5 sur 5