EnoncéExamen20 21 VF

Ministère de l’Enseignement Supérieur
Direction Générale des Etudes Technologiques

Institut Supérieur des Etudes Technologiques de Sfax
Classes : L1 TI Date : Janvier 2021
Matière : Développement Web1 et Multimédia Documents : Non autorisés
Durée : 1 heure 30mn Nbre pages : 6
Enseignants : A. Bourchani, A. Samet, H. Hachicha, H. Lamine, M. Hadiji, S. Feki
DEVOIR DE SYNTHESE
ETUDE DE CAS :
On considère le site « Iset Sfax » ayant l’arborescence suivante :

Dossier Fichier « index.html »
racine Dossier « images » contenant les images « coordonnees.jpg »,
« isetsfax.jpg », « facebook.png », et « twitter.png ».
« Iset Sfax » Dossier « styles » contenant le fichier « style.css »
Voici l’aperçu de la page « index.html » :
Le code Html5 de la page « index.html » est :
1/6
<!DOCTYPE html> </fieldset>
<html> (6)<!- -un fieldset ayant comme
<head> identifiant infoBac - ->
<meta charset="utf-8" /> <legend>Informations
(1)<!- -le lien qui permet d’appeler le fichier Baccalaureat</legend>
style.css- -> Nature Bac:<select name="Bac">
<title>ISET de Sfax</title> <option>Math</option>
</head> <option
<body> selected>Informatique</option>
<nav> <option>Lettre</option>
<ul> <option>Economies et
<li><a href="Accueil.html">Accueil</a></li> gestions</option>
<li><a href="News.html">News</a></li> <option>Sciences
<li><a href="Contact.html">Contact</a></li> expérimentales</option>
</ul> </select>
</nav> Date*: <input type="date"
<header> name="dateobt" />
(2)<!- -une division ayant comme identifiant Moyenne : <input type="number"
bannière - -> name="Moyenne" />
News... </fieldset>
<a href="news.html"><input type="button" (7)<!- -un fieldset ayant comme identifiant
value="Ouvrir" /></a> dispoRessEAD - ->
</div> <legend>Dispo. Ress. Enseignement à
</header> distance</legend>
<section> <input type="checkbox"
<article> name="ConInternet" />Connection Internet
<h1>Création</h1> <input type="checkbox"
<p>L’Institut Supérieur des Etudes name="Ordinateur" />Ordinateur
Technologiques de Sfax est un établissement public <input type="checkbox"
doté de la personnalité civile et de l’autonomie name="CompteActive" />Compte de l'UVT
financière. Relevant au ministère de l'Enseignement </fieldset>
Supérieur et de la Recherche Scientifique. Sa <div>*Champs à saisie obligatoire</div>
création est décrétée par la loi n°92-51 du 18 mai <input type="submit" value="Envoyer" />
1992.</p> <input type="reset" value="Annuler" />
</article>
<article> </form>
<h1>Formulaire d'inscription</h1> </article>
<form> <aside>
(3)<!- -un fieldset ayant comme identifiant <h1>Coordonnées</h1>
infoperso - -> (8)<!- -balise d’insertion de l’image
<legend>Informations coordonnees.jpg - ->
personnelles</legend> <ul>
Nom*: <input type="text" name="nom" <li>Adresse: Route de Mahdia Km 2.5
required /> Sfax</li>
Prénom*: <input type="text" <li>Téléphone: 74 431 425 ou 74 431
name="prenom" required /> <br /> 513</li>
Sexe: <input type="radio" name="sexe" <li>Fax: 74 431 386</li>
value="Masculin" checked /> Masculin <li>Adresse postale: BP 88 A - 3099 El
<input type="radio" name="sexe" Bustan Sfax</li>
value="Feminin" /> Féminin <li>E-mail: mailto:isetsf@isetsf.rnu.tn</li>
(4)<!- -un span ayant comme identifiant age - -> </ul>
Age: <input type="range" min="18" (9)<!- -un lien sur l’image « facebook.png » vers
max="28" value="18" title="Merci de facebook.com - ->
sélectionner votre âge" /> </span> <br> (10) <!- -un lien sur l’image « twitter.png» vers
</fieldset> twitter.com - ->
(5) <!- -un fieldset ayant comme identifiant </aside>
contacts - -> </section>
<legend>Contacts</legend> <footer>
E-mail*: <input type="email" Copyright ISET Sfax 2020
name="email" required /> </footer>
Téléphone: <input type="tel" name="tel" </body>
/> </html>
Adresse: <textarea name="Adresse"
cols="50">Adresse:...</textarea> <br />
2/6
Les styles appliqués à la page « index.html » sont écrites dans le fichier « style.css » et sont
décrites dans le tableau suivant :
Sélecteur style
body Largeur 850 pixels
Une marge automatique
Police de texte sans-serif ou Arial
Liste non ordonnée dans un bloc nav Alignement du texte à droite
Les items de liste dans un bloc nav Pas de puce
Affichage en mode ligne
Marge droite de 15 pixels
Les liens dans un bloc nav Taille de texte 1.3em
Couleur de texte en noir
Pas de soulignement
Texte en majuscule
Le survol d’un lien dans un bloc nav Arrière-plan en noir
Couleur de texte en blanc
En-tête Le positionnement est relatif
Une hauteur de 250 pixels
Image d’arrière-plan isetsfax.jpg
Pas de répétition d’arrière-plan
L’image couvre tout l’arrière-plan
Une ombre de 0px 4px 4px black
Identifiant banniere Le positionnement est absolu
0 pixels par rapport au bas
Une largeur de 100%
Couleur d’arrière-plan rgba(24,24,24,0.8)
Taille de texte 0.9em
Coins arrondis 0px 0px 5px 5px
Balise input de type button Le positionnement est absolu
5 pixels par rapport à droite
Taille de texte 1.2em
Couleur d’arrière-plan maroon
Coins arrondis de 5 pixels
Curseur de souris en forme de main
section Le positionnement est relatif
Une marge en bas de 30 pixels
Titre de niveau 1 dans une section Police de texte Dayrom ou serif
Texte en majuscule
article Texte justifié
Aside Le positionnement est absolu
1% par rapport à droite
Une largeur de 300 pixels
Texte centré
Couleur d’arrière-plan gray
Les items de liste dans un bloc aside Texte aligné à gauche
Puce sous forme d’un carré
Pied Bordure du haut 1 pixel trait plein noir
Form Une largeur de 500 pixels
Espacement de 15 pixels
Couleur d’arrière-plan rgba(0,0,255,0.5)
Police de texte Georgia
Taille de texte 14 pixels
3/6
Legend Texte en gras
Fieldset Bordure de 1 pixel trait plein noir
Label Texte en italique
Zone de texte, select et input Couleur d’arrière-plan rgba(200,200,255,0.5)
Bordure de 1 pixel trait plein noir
Police de texte Georgia
Espacement de 5 pixels
Une marge en bas de 2 pixels
Le survol des boutons submit et reset Une ombre de1px 1px 1px blue
Curseur de souris en forme de main
Identifiant age Une marge gauche de 20 pixels
Les input de type text ou email qui sont invalides Couleur d’arrière-plan #F0DDDD
Couleur de bordure #e88
Une ombre 0 0 5px rgba(255, 0, 0, .8)
Les input de type text qui sont obligatoires Couleur de bordure #88a;
Une ombre 0 0 5px rgba(0, 0, 255, .5);
Partie 1 : (14 points : 2,5 + 11,5)

1/ Compléter les parties manquantes du code de la page « index.html»
N.B. : Reporter dans la feuille d’examen uniquement les numéros des zones incomplètes et donner leurs
réponses adéquates.
2/ Ecrire le code du fichier « style.css ».
4/6
Partie 2 : (2 points : 1,75 + 0,25)
Nous voulons permettre aussi l’affichage du site « Iset Sfax » en mode mobile (seulement
pour les écrans et les mobiles ayant comme largeur maximum 375px), pour cela nous allons
ajouter une partie « media query » dans le fichier « style.css » tout en lui définissant les styles
suivants :
Balise Style
Body Couleur d’arrière-plan jaune
Couleur bleu
Taille du caractère 25px
Aside La position est relative
La hauteur est 600px
L’aperçu de la page « index.html » en mode mobile sera :
1/ Donner le code CSS3 (media query) qu’il faut ajouter au fichier « style.css » permettant
l’affichage en mode mobile.
2/ Donner la ligne de code qu’il faut ajouter dans la partie entête (head) de la page
« index.html » afin d’avoir un meilleur affichage des caractères en mode mobile.
5/6
Partie 3 : (4 points : 2 + 2)
Nous voulons structurer les données qui sont représentées dans le formulaire sous les formes
XML et JSON.
Et voici deux exemples de données :
Etudiant 1 Etudiant 2
Informations personnelles Informations personnelles
nom : Tounsi nom : Ben Salah
prénom : Mohamed prénom : Mariem
sexe : Masculin sexe : Féminin
âge : 20 âge : 21
contacts contacts
email : mohamed.tounsi@gmail.com email : bensalah.mariem@gmail.com
télé : 98 00 11 22 télé : 23 01 02 03
adresse : Route de Tunis Sfax adresse : Rue des jasmins Sfax
informations bac informations bac
nature : Informatique nature : Math
date : 11/07/2020 date : 23/06/2019
moyenne : 13.20 moyenne : 14.50
Dispo enseignement à distance Dispo enseignement à distance
Internet : oui Internet : oui
ordinateur : oui ordinateur : non
compte UVT : oui compte UVT : oui
1/ Donner le code XML correspondant.

2/ Donner le code JSON correspondant.
Bon travail
6/6

EnoncéExamen20 21 VF

Transféré par

Informations du document

Titre original

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

EnoncéExamen20 21 VF

Transféré par

Droits d'auteur :

Formats disponibles

Ministère de l’Enseignement Supérieur

Direction Générale des Etudes Technologiques

On considère le site « Iset Sfax » ayant l’arborescence suivante :

Voici l’aperçu de la page « index.html » :

Le code Html5 de la page « index.html » est :

Partie 1 : (14 points : 2,5 + 11,5)

Et voici deux exemples de données :

1/ Donner le code XML correspondant.

Vous aimerez peut-être aussi