Consortium International e-Miage

&
Université de Picardie Jules Verne d’Amiens

Code du module : D231

Contrôle terminal
Intitulé du module : Web design
Session de juin 2023
Nom de l’enseignant : Nicolas Royackkers
Nombre de pages : 4
Durée de l’épreuve : 2 heures

Autorisé Interdit
Documents papier X
Ordinateur X
Calculatrice X

Sur le site d’une boutique en ligne, on trouve la page suivante :

1/4
I. HTML5 (sur 10 points environ)

Question 1
La zone principale de la page constitue un article. Elle s’étend de « Processeur Untel FX 4400 »
à « une utilisation courante ». Faire un schéma de cette zone et identifier les différentes parties
qui la constituent.
Préciser quel élément HTML5 pourrait être utilisé pour définir chacune de ces parties.

Question 2
Faire un schéma d’ensemble de la page et identifier les grandes zones qui entourent sa zone
principale (telle que définie à la question précédente).
Préciser quel élément HTML5 pourrait être utilisé pour définir chacune de ces zones.

Question 3
On donne les informations suivantes :

 la page est liée à une feuille de style CSS externe nommée « style.css »

 le formulaire de recherche pointe vers une page nommée « recherche.html » et sa zone de

saisie de texte possède une longueur de 28 caractères

 les portions de texte « Mon compte », « Mon panier », « Téléphones », « Tablettes »,

« Ordinateurs », « Périphériques », « Composants », « Ajouter au panier », « Qui
sommes-nous ? », « Plan du site », « Foire aux questions », « Conditions générales de
vente » et « Nous contacter » sont des liens hypertextes qui pointent respectivement vers
des fichiers nommés « compte.html », « panier.html », « telephones.html »,
« tablettes.html », « ordinateurs.html », « peripheriques.html », « composants.html »,
« ajouter_panier.html », « qui.html », « plan.html », « faq.html », « cgv.html » et
« contact.html »

 La page utilise deux images : « logo.png » (fleur multicolore et nom de la boutique

accolé, 350 x 70 pixels) et « processeur_fx4400.jpg » (photo du produit, 400 x 250
pixels).

Donner le code HTML5 de la page présentée plus haut.

Ce code doit décrire la structure, la sémantique et le contenu du document, sans se préoccuper de

sa mise en forme visuelle.
Néanmoins, on attribuera une classe ou un identifiant aux éléments qui ont besoin d’être
désignés de manière spécifique dans la feuille de style CSS liée à la page (celle-ci sera écrite
dans l’exercice suivant).

Note : un aide-mémoire des balises HTML5 étudiées dans le cours est disponible en dernière
page de ce document.

2/4
II. Feuille de style CSS (sur 10 points environ)
Pour le design et le rendu visuel de la page présentée plus haut, on précise que :

 le corps de la page possède une largeur fixe de 800 pixels ; il est affiché de manière
centrée dans la fenêtre du navigateur, possède une bordure sur tous ses côtés, un
espacement (interne) uniforme de 5 pixels et une police Arial justifiée

 toutes les bordures présentes dans la page ont une épaisseur d’1 pixel et une couleur grise

 les cadres du haut et du bas de la page possèdent un fond jaune clair ; les autres cadres
colorés affichés dans la page possèdent un fond vert clair

 tous les liens hypertextes sont affichés en noir et sans soulignement

 les textes « Descriptif » et « Compléments » sont affichés en vert foncé, le prix est affiché
en rouge et l’état du stock en vert moyen

 la zone principale de la page (qui s’étend de « Processeur Untel FX 4400 » à « une

utilisation courante ») possède une marge (externe) uniforme de 40 pixels
 l’image du processeur possède une marge (externe) de 50 pixels à droite et en bas

Les autres éléments de design peuvent être visualisés ou déduits à partir de la capture d’écran
figurant en première page.

Donner la feuille de style CSS pour écran permettant d’obtenir la présentation souhaitée.

Note : un aide-mémoire des propriétés CSS étudiées dans le cours est disponible en dernière
page de ce document.

3/4
Balises HTML5 th line-height
time list-style-image
a
title list-style-type
abbr
tr margin
address
ul margin-bottom
article
var margin-left
aside
video margin-right
audio
margin-top
blockquote
padding
body
padding-bottom
br
padding-left
caption Entités prédéfinies padding-right
cite
< &lt; padding-top
code
> &gt; position
datalist
" &quot; right
dd
text-align
dfn ' &apos;
text-decoration
div & &amp; text-indent
dl
text-transform
dt
top
em
vertical-align
figcaption
Propriétés CSS width
figure
footer background-attachment
form background-color
h1 background-image
h2 background-position
h3 background-repeat
h4 border
h5 border-collapse
h6 border-color
head border-bottom
header border-bottom-color
html border-bottom-style
img border-bottom-width
input border-left
kbd border-left-color
label border-left-style
li border-left-width
link border-right
map border-right-color
meta border-right-style
nav border-right-width
object border-style
ol border-top
option border-top-color
p border-top-style
param border-top-width
pre border-width
q bottom
samp clear
script color
section display
select float
span font
strong font-family
sub font-size
sup font-style
table font-weight
td height
textarea left

4/4