Vous êtes sur la page 1sur 2

IPI - Octobre 2019

Examen de HTML-CSS
Durée 1h30
Tout document autorisé. Ordinateur autorisé.
Le travail est rendu par mail à l’adresse liaudet.bertrand@wanadoo.fr avec la dernière version du
TP merveilles et autres éléments de TP. Le rendu se fait dans un dossier zippé nommée :
IPI_HTML_J4_Nom_Prénom.zip. Le dossier zippé contient un dossier du même nom et un seul !
Dans ce dossier, mettez au moins un dossier « Evaluation » avec votre travail pour l’évaluation

EXERCICE 1 : Codez la page Web suivante, en suivant les exigences

Mon super blog


Bienvenue dans mon super blog image 1
Accueil Blog CV Contact

Article 1 Caroussel

Nulla facilisi. Cras id arcu lorem, et


semper purus. Cum sociis natoque image 2 image 3
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Duis vel enim mi, in lobortis sem
Nulla facilisi. Cras id arcu lorem, et semper purus.
Cum sociis natoque penatibus et magnis dis Nulla facilisi. Cra
parturient montes, nascetur ridiculus mus. Duis vel id arcu lorem, et
enim mi, in lobortis sem. Vestibulum luctus elit. facilisi suite

Cras id arcu azer


Ma vidéo Article 2 lorem, et semper
purus. Cum
Nulla suite
Nulla facilisi. Cras id
vidéo arcu lorem, et semper purus.
semper purus. Cum Cum sociis nato
sociis natoque penati suite
penatibus et magnis
magnis dis partu

Copyright fb tw ln g+

tournez la page, SVP ---->


p. 1/2
Quelques exigences supplémentaires :
• Le positionnement doit être fait en flex.
• Le menu CV doit amener vers une page de CV (un TP que vous avez fait, sinon les
merveilles). La page de CV aura la même entête et le menu Accueil ramènera sur la
page principale
• Pour Accueil, Blog, CV et Contact, on arrondira les angles et on mettra un fond gris.
• Colorez l’en-tête et le pied de page de la même façon.
• Mettez un fond jaune dans le bloc du Carrousel.
• On mettra des bordures comme présenté sur le design.
• Mais on ne mettra pas de cadre autour des images (image 1, image 2, image 3, fb, tw
ln, g+)
• Vous devez mettre de vrais images (mais vous pouvez mettre n’importe quoi comme
image).
• On mettra un cadre autour de la vidéo.
• Pour la vidéo, mettez un lien vers une vidéo existante, au choix.
• Dans le bloc Carrousel, les paragraphes se terminent par un texte cliquable (suite). Il y
aura 6 paragraphes. On ne voit pas tous blocs (il y en 6 dont 3 seulement sont visibles)
Le bloc est scrolable.
********************

EXERCICE 2 :

Modifier le CSS de l’exercice précédent


pour que l’affichage soit transformé
quand on passe au format tablette. Le
design du format tablette est le suivant à

CONSEILS
• Commencez par écrire la page html
sans vous soucier du CSS, mais
préparant les bonnes balises de
structuration.
• Codez ensuite la mise en page CSS,
partie par partie, de haut en bas.
• Faites le lien avec le CV.
• Coder le graphisme après la mise
en page !
• Codez la gestion de l’affichage sur
une tablette en dernier.
• Mettez une même image partout
dans un premier temps.
• Évitez les grosses images.
• Site de faux texte :
https://www.faux-texte.com
• Faites des choses simples !

p. 2/2