Ministère de l’Enseignement Supérieur, de la Recherche ‫ا‬ ‫وا‬ ‫ا‬ ‫وزارة ا‬

Scientifique et des Technologies de l'Information et de la ‫ل‬ ‫ت وا‬ ‫ا‬ ‫و‬

Communication

Institut Supérieur des Études Technologiques de ! ‫را ت ا‬ ‫ا‬ ‫ا‬

Mahdia

EXAMEN PROGRAMMATION WEB 1

Documents : non autorisés Niveau et filière : TI1
Date : Janvier 2015 Durée : 1h 30
Enseignants : H.BEN REBAH, H.BOUKTHIR, A.BORCHANI, M.JGUIRIM, N.RJEB, M.BEN CHIKHA

Notez Bien : L’examen comporte 5 pages et une feuille d’annexe qui contient les propriétés de
style CSS à exploiter dans l’exercice 2.

Exercice 1 : (5 points)

Un commanditaire souhaite faire de la publicité pour sa résidence universitaire privée afin de

susciter la curiosité et inciter les étudiants à découvrir la totalité des aspects de cette résidence. Un
concepteur propose une interactivité dans un site web de présentation de la résidence où l’on a le
choix entre avoir des infos pratiques concernant cette résidence, découvrir les différents types de
chambres, leurs prix ainsi que les services qu’offre la résidence tels que :
Service de la vie quotidienne : laverie sécherie, fours micro-ondes, parking collectif, cabine
téléphonique.
La sécurité : directeur sur place, infirmerie, contrôle d’accès.
Les loisirs : salle télé, salle de sport

L’architecture proposée ainsi par le concepteur est présentée par la figure ci-dessous :

Contactez-nous Boite au lettre

Services
Pièces à fournir
Chambres

Tarifs Comment réserver ?

Accueil

Qui sommes-nous ?
Sécurité Imprimer votre
demande de
Infos pratiques réservation

Dépôt de garantie

Plan d’accès

Page 1 sur 5
 Travail à faire:
1- Donner l’objectif général du site ainsi que son public cible.
2- Donner le type d’architecture proposé par le concepteur.
3- Commenter cette architecture en précisant si elle est bien adaptée aux besoins des
internautes ou pas.
4- Proposer une nouvelle architecture permettant de répondre aux insuffisances de
l’architecture proposée par le concepteur.
5- Proposer une maquette pour la page d’accueil de ce site web.

Exercice 2 : (15 points)

Monsieur Ahmed Tounsi est un enseignant universitaire souhaite développer un site web pour
regrouper son cv, ses cours, ses TDs et ses TPs. La page d’index de son site perso est donnée par
la figure ci-dessous :

1
Ligne séparatrice

3 5

4
Ligne séparatrice

6
Figure 1 - Page Index.html

Page 2 sur 5
La page "index.html" est formée de 6 blocs :

Numéro Signification
C’est l’entête <header> de la page qui contient une liste non ordonnée formée de trois
liens hypertextes et placée dans un élément de type <nav>. Ces liens sont :
1 Mon Cv vers la page : CV.html
Mon Blog vers la page : ahmed.over-blog.com
Contacts : ouvre une fenêtre Outlook express avec l’adresse mail :
ahmed.tounsi@yahoo.fr
2 C’est un bloc de type <div> qui contient une image comme arrière plan : bannière.jpg.
C’est un bloc de type <section> qui contient deux blocs :
3 Le bloc numéro 4 (élément <article>)
Le boc numéro 5 (élément <aside>)
C’est un bloc qui est formé par :
4 Le titre de l’article (titre niveau 1) : Bienvenue sur ahmedtounsi.com ! . Ce
titre est précédé par une image (ico_epingle.jpg).
Un paragraphe : qui donne une brève description du site.
C’est un bloc qui est formé par :
5 Un titre niveau 1 : À propos de Ahmed
Une image d’Ahmed Tounsi : ahmed.jpg
Un paragraphe : qui donne une brève description d’Ahmed Tounsi.
C’est le pied de la page web <footer> formé de trois blocs de type <div> :
Citation du mois : "Give Your Best To The World and The World Will Give Its
Best Back To You"
Villes visitées : formé par les images : v1.jpg, v2.jpg, v3.jpg et v4.jpg.
6 Liens utiles : formé par la liste des liens hypertextes suivante :
• Site Microsoft. url : www.microsoft.com
• Site Adobe. url : www.Adobe.com
• Site Visuel C++. url : www.C++.com
• Site JavaSun. url : www.javasun.com
• Site PHPTeam. url : www.PHPTeam.com

Travail à faire:
1- Donner le code HTML de la page "index.html". (Utiliser les balises : <article>, <header>,
<section>, <footer>, <aside> et <div>).
2- Donner la feuille de style "style.css" permettant d’obtenir la mise en forme de la page
"index.html" en exploitant les propriétés de style suivantes : (Notez Bien : n’oublier pas
d’insérer les attributs class et id nécessaires dans le corps de la page "index.html" afin
d’introduire les styles demandés).

Corps du document :
• Arrière plan : image "fond_jaune.png"
• Largeur : 900px
• Police d’écriture : Trebuchet MS
• Alignement : centré

Page 3 sur 5
Bloc nav
• Alignement : à droite
Liste des liens
Positionnement : bloc en ligne
Marge extérieure droite :15px
Lien de navigation
Police : Serif
Style : Gras
Format : petite majuscule
Taille : 1em
Couleur : #181818
Marge intérieure bas : 3px
Lien survolé
Color :#760001
Bloc bannière
• Marge extérieur haut : 15px
• Hauteur : 200px
• Taille d’arrondi de la bordure : 6px
• Arrière plan : image "banière.jpg"
• Position : relative
• Ombre :
Dépôt de l’ombre vers la droite : 0px
Dépôt de l’ombre vers le bas : 6px
L’intensité : 6px
Couleur : #1c1a19
Ligne séparatrice :
• Couleur : blanc
Bloc section
• Marge extérieure bas : 30px
Bloc article
• Positionnement : bloc en ligne
• Alignement vertical : haut
• Texte : justifié
• Largeur : 625px
• Marge extérieure droite : 15px
• Taille du texte :0.9em
Bloc aside
• Positionnement : bloc en ligne
• Alignement vertical : haut
• Texte : justifié
• Position : relative
• Largeur : 230px
• Couleur arrière plan : #706b64
• Ombre
Dépôt de l’ombre vers la droite : 0px
Dépôt de l’ombre vers le bas : 2px
L’intensité : 5px
Couleur : #1c1a19
• Taille d’arrondi de la bordure : 5px
• Marge intérieure : 10px

Page 4 sur 5
 • Couleur du texte : blanc
• Taille du texte : 0.9em
Image d’Ahmed tounsi
Alignement : centré
Taille de la bordure :1px
Type de la bordure :solid
Couleur de la bordure : #181818
Bloc footer
• Taille du texte : 0.8em
Bloc Citation
• Positionnement : bloc en ligne
• Alignement vertical : haut
• Largeur :34%
Bloc villes visitées
• Positionnement : bloc en ligne
• Alignement vertical : haut
• Largeur : 35%
Bloc Liens Utiles
• Positionnement : bloc en ligne
• Alignement vertical : haut
• Largeur : 28%
Lien de navigation
Décoration du texte : non souligné
Style graphique des puces : image "icône.jpg"
Titre niveau 1
• Police : serif
• Style : gras
• Format : petite majuscule
• Taille titre niveau 1 du bloc section : 1.5em
• Taille du titre niveau 1 du bloc footer : 1.1em

3- Donner la ligne de code permettant d’attacher la feuille de style "style.css" à la page

"index.html".

Bonne chance.

Page 5 sur 5