Le travail est à réaliser individuellement.
Le respect des consignes sera pris en compte pour l'évaluation, en plus de la qualité du
travail rendu.
Mini-projet HTML-CSS
Sujet
Il s'agit d'utiliser les connaissances acquises en HTML et CSS pour réaliser un (mini-)site. Ce
site prendra la forme de 4 documents (pages) HTML partageant un même style visuel :
Une page « Accueil » qui sera la page d'introduction
trois pages portant sur un élément illustrant le thème que vous aurez choisi (le thème est
choisi par l’étudiant)
Votre travail consiste en :
la définition de la structure des documents HTML (page html),
la réalisation du contenu de ces documents,
la réalisation des feuilles de style mettant en forme ces documents. Selon notre
avancement dans le cours : l’intégration des feuilles de style de Bootstrap, la réalisation
dans style css responsiveness (avec l’utilisation du Media Queries,…)
Vos pages devront être agréables à consulter :
Vous ferez donc attention au choix des couleurs et ferez en sorte que les textes soient
facilement lisibles selon le type du média (ordinateur, tablette, smartphone, …).
Les pages doivent être bien mises en forme (utiliser les propriétés de mise en page
telles que display, position, top, bottom, left, right, float, clear, …
Les images seront également dimensionnées de manière adaptée à la page.
Les documents HTML
Les documents HTML que vous créerez respecteront les consignes suivantes :
le document Accueil présentera le thème choisi. Il explicitera et présentera le point
commun entre les trois autres documents. Il introduira ces trois documents et contiendra
donc des liens vers chacun d'entre eux. Ce document s'appellera
nécessairement index.html.
les trois pages illustrant le thème :
o partageront la même structure (le même plan) clairement établie. Un choix
pertinent et adapté des balises HTML utilisées sera pris en compte, ainsi que leur
complément par des class et ou (éventuellement) id bien choisis. Les id ne
doivent pas servir à artificiellement distinguer entre eux les trois documents. Il
faut essayer d’utiliser diverses balises.
o contiendront une barre de navigation commune pour toutes les pages y compris
la page index.html
o comporteront chacun au moins deux images (affiches, photos, etc.),
o contiendront au moins un tableau (résultats sportifs, nombre d'entrées de films,
etc.),
o au moins l’une des pages doit contenir une formulaire (formulaire de contact,
formulaire d’inscription, etc)
Un minimum de texte est attendu. Vous ne pouvez pas en mettre trop peu au risque que
vos pages paraissent vides. Vous n'êtes pas obligé de produire du contenu original et
vous pouvez recopier des informations trouvées sur le web (mais sans copier la structure
des pages dont vous vous inspirez). Vous citerez cependant vos sources dans votre
document et les pointerez par un hyperlien.
Les feuilles CSS
Vous définirez 3 feuilles de style qui doivent garantir une unité visuelle de l'ensemble du
site.
une première avec les règles communes de la page d’accueil (index.html) et au trois
autres documents. Dans la mesure où le site doit présenter une unité visuelle, cette
feuille commune doit comporter une bonne partie des règles.
une seconde pour les éléments spécifiques à la page d’accueil ,
une troisième pour les règles communes au trois documents sur le thème. Ces règles
portent donc sur des éléments de ces pages qui n'apparaissent pas dans le sommaire.
Cette troisième feuille de style devra être partagée par les trois documents.
Dans le cas où nous avons abordé dans le cours la partie des feuilles de style de Bootstrap,
vous devez faire appel à des feuilles de style de Bootstrap et enlever l’une des feuilles de style
cités précédemment.
Il est tout à fait possible que les tailles, en nombre de règles, de ces trois fichiers soient très
différentes.
Les consignes pour les feuilles de style sont :
elle doit contenir une variation dans les sélecteurs (sélecteurs d’ID, sélecteurs de classe,
sélecteurs de pseudo-classe, sélecteurs de pseudo-élément, etc),
elle dit contenir une variation dans les propriétés css utilisées. Vous définirez par
exemple des couleurs adaptées, des marges internes et externes permettant d'espacer les
éléments pour faciliter la lecture, des agencements pertinents, les images d'illustration
pourront être flottantes, etc.
elle doit nécessairement contenir au moins quelques règles media-queries pour adapter
l'affichage à différentes largeur d'écran ou l'impression (si cette partie est vu en cours),
la mise en œuvre de sélecteurs complexes autres que ceux portant sur les simples
éléments sera également évaluée. Exemple : combinaison de plusieurs types de
sélecteurs (sélecteur d’ID + sélecteur de classe+ sélecteur d’attribut).
Les efforts faits pour avoir une présentation un peu originale et obtenir un aspect visuel
global agréable et harmonieux seront pris en compte. Ainsi sans que cela soit indispensable,
une mise en place pertinente de transitions CSS peut être un plus.
Le travail
1. Choisissez le thème de votre site ainsi que les trois éléments en relation avec ce
thème qui seront présentés chacun dans une page.
Collectez les informations qui constitueront le contenu de vos documents (texte,
images, données pour les tables, etc.). Vous pouvez sans problème reprendre des
contenus trouvés sur d'autres sites, l'objectif ici est l'écriture des documents HTML
et des feuilles CSS, pas la production d'un contenu original. Vous ferez cependant
attention à avoir assez de contenu pour pouvoir diversifier les feuilles de style que
vous écrirez et mettre en évidence votre travail.
2. Créez la page d’accueil qui présente le thème (le point commun aux trois documents)
et offre des liens vers ces trois pages.
3. Créez les 3 documents (pages) pour chacun des sujets choisis dans le thème.
N'oubliez pas qu'ils doivent partager la même structure.
4. Créez les feuilles de style qui seront utilisées par les quatre pages précédentes et
assureront ainsi la cohérence entre les pages de votre site.
5. Rendez votre travail sous la forme d'une archive (présentation de votre travail en
classe et par envoie d’une copie .zip à mon adresse Email institutionnel). Le nom de
cette archive sera votre-nom-prenom-projet.zip. Cette archive contiendra un
dossier dont le nom sera votre-nom-prenom-projet. Le contenu de ce dossier sera
organisé ainsi :
o le fichier index.html sera placé dans ce dossier,
o les trois autres fichiers html,
o un sous-dossier de nom css contiendra les fichiers css que vous aurez définis.
o un sous-dossier de nom images contiendra les fichiers sources des images qui
sont utilisées dans votre projet.
