Projet individuel : création d`un site HTML/CSS

ISN
Projet individuel : création d'un site HTML/CSS
Consignes
Le but de ce projet est de créer un site web en utilisant les notions que vous avez apprises en
cours à travers les tutoriels et les exercices.
Vous êtes libres de présenter comme vous le voulez (et je vous conseille d'aller choisir un
modèle sur http://freehtml5templates.com/ que vous adapterez) mais vous devez respecter un
certains nombre de règles :
Vous allez élaborer la disposition et le contenu de vos pages sur papier avant de
vous lancer dans l'écriture du code. Le résultat de cette réflexion devra être rendu
et fera partie intégrante de votre projet. Cela ne vous empêchera pas d'y apporter
des modifications au cours de la réalisation de la page.
Si vous souhaitez réalisée une partie personnelle sur votre site, l'arborescence de
votre site doit respecter le schéma suivant :
Entrée du site
(index.html ou index.php)
Partie ISN du site
(ISN/index_ISN.html (ou.php))
Architecture
HTML/CSS
Partie perso du site
(index_perso.html (ou.php))
Programmation
Projet
La partie « perso » ne sera pas évaluée, mais restez raisonnable !!
Prévoir 2 répertoires : (ISN et PERSO) pour que les deux parties soient indépendantes.
Sinon,
Page de présentation avec liens vers les autres pages :
index.html (ou.php))
Architecture
HTML/CSS
Programmation
Projet
Sur la page « architecture » devra se trouver le travail réalisé sur ce thème, (pas des lien vers
Page 1/3
ISN
les fichiers de traitement de texte, mais avec des copier-coller présentez votre travail (petite
présentation du simulateur du Dauphin, (avec lien vers le site http://www.epsitec.ch/dauphin/ )
composants de la carte mère, photo de la carte mère, conclusion sur la partie distribuée en
cours (n'oubliez pas la source))
Sur la page « HTML/CSS », présentez votre travail, en particulier, mettez des liens vers :
exercice_CERN.html
exercice_CERN_CSS.html (n'oubliez pas le fichier css)
charte de bonne conduite
et présentez votre travail sur la photo et le son.
Les pages « programmation » et « projet » contiendrons juste un avertissement « En
construction »
Si vous le souhaitez vous pouvez utiliser la fonction include de php (voir son utilisation sur
http://estelle.tassy.free.fr/index.php?p=liens#utiles )
Votre site devra être en ligne (sur free), et sera évalué à partir du 4 novembre.
Les images se trouveront dans un sous répertoire images.
Le code HTML devra respecter la norme HTML5. Vos pages devront contenir un lien
vers l'outil de validation du W3C ( http://validator.w3.org/) sur un logo HTML5 ( à
choisir sur http://www.w3.org/html/logo/ ) dans le pied de page.
Le code CSS devra respecter la norme CSS niveau 3. Vos pages devront contenir un
lien sur le logo de l'outil de validation du W3C (http://jigsaw.w3.org/css-validator/ ),
dans le pied de page.
La présentation du code HTML et du code CSS devra respecter les règles de
présentation définies en cours (indentation: balise ouvrantes et fermantes alignées
sur une même colonne, commentaires...).
La largeur de la page ne devra pas dépasser 800px.
Présence d'au moins deux images dont une insérée à l'aide de la balise <img> et
une insérée au moyen de la propriété CSS background.
Utilisation et personnalisation (a:hover, a:visited) de liens externes et internes
au document avec la balise <a>.
Utilisation adéquat des balises de titres.
Utilisation des balises structurantes <header> , <footer>...
Le nom des classes CSS et des identificateurs uniques devront être pertinents et
être en relation avec le contexte. Par exemple:
id="architecture"
class="flottante_droite"
et pas:
id="id1"
class="classe1"
Page 2/3
ISN
Codage hexadécimal des couleurs du document.
(voir http://code-couleur.com/)
Utilisation de balises <div> pour l'organisation des éléments sur la page avec au
moins une utilisation des propriétés suivantes: float / margin / padding /
border.
Utilisation des classes et des identificateurs adéquats (classes pour un style appliqué
à plusieurs éléments, identificateur pour un style appliqué à un unique élément). Les
deux devront être utilisés.
Le document contiendra une entête et un pied de page clairement séparés du reste
de la page en utilisant les marges. Les logos de validation se trouveront dans le pied
de page.
Les images1 utilisées devront être soit:
Des images personnelles
Des images libres de droits d'auteur
(voir par exemple http://www.photo-libre.fr/)
Des images sous licence Creative Commons
(voir http://creativecommons.org/licenses/by/2.0/fr/
et http://www.flickr.com/search/advanced/)
Les projets sont à terminer pour le 4 novembre au plus tard.
1 Chaque image contiendra une légende dans laquelle se trouvera un lien vers la source de l'image.
Si vous utilisez vos propres images, alors vous ne devez pas mettre de lien mais uniquement votre nom (Prénom Nom).
Page 3/3