IPI - Octobre 2019 Examen de HTML-CSS
Durée 1h30
Tout document autorisé. Ordinateur autorisé.
Le travail est rendu par mail à l’adresse [email protected] 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
tournez la page, SVP ---->
p. 1/2
image 1
Blog CV Contact
Caroussel
image 2 image 3
suite
Ma vidéo
suite vidéo
suite
Copyright
fb tw ln g+semper purus.
Cum sociis nato penati
magnis dis partu
Article 2 Article 1
Nulla facilisi. Cra id arcu lorem, et facilisi
Accueil
Cras id arcu azer lorem, et semper purus. Cum Nulla Nulla facilisi. Cras id
arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis Nulla facilisi. Cras id arcu lorem, et
semper purus. Cum sociis natoque 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
parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit.
Mon super blog
Bienvenue dans mon super blog
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
