T.P. HTML et CSS
Commencez par créer un GoogleDoc et mettez le lien dans la page de dépose de votre groupe.
Question N°1
L'objectif de ce T.P. est de réaliser un mini site avec un grand maximum de cinq pages.
S'orienter vers un futur portfolio est une excellente idée, vous pouvez vous inspirer des nombreux portfolio que vous pouvez trouver sur Internet.
Pour commencer on vous demande à l'aide d'un logiciel graphique gratuit de préférence en ligne, de dessiner une arborescence des pages web de votre site.
Sur le graphique vous nommerez vos pages, leurs fonctions et indiquerez les différentes possibilités de navigation (les liens permettant cette navigation).
Une annexe pourra précisez les détails sur le contenu de chaque page ainsi que sur la navigation.
Question N°2
Définissez une charte graphique.
Il s'agit de définir la structure, les couleurs que chacune de vos pages devrons posséder.
C'est ici par exemple que vous pourrez choisir un thème graphique : images, fontes et couleurs.
Proposez la page type modèle sur laquelle toutes vos pages seront construites.
Charte graphique : 2 couleurs dominantes + 1 couleur secondaire.
C'est ici que vous devrez créer votre fichier
style.css que vous utiliserez pour l'ensemble de votre site.
Question N°3
Dans un premier temps créez le
brouillon de toutes les pages de votre site, en respectant votre charte graphique.
Appelez votre enseignant pour validez votre travail et passez à la suite.
Question N°4
Ici on vous laisse une certaine liberté pour finaliser votre site.
On impose cependant quelques contraintes.
- Vous devez insérerez quelques images que vous déposerez dans le dossier images.
- On doit trouver des liens internes et externes à votre site.
- On doit y trouver au moins un tableau.
- Respect d’une indentation claire et de commentaires dans le fichier.
- Commenter au moins deux règles CSS importantes pour expliquer leur rôle.
- Au moins un effet hover sur un lien ou un bouton
- Formulaire fonctionnel (au moins 3 types de champs différents : texte, email, mot de passe, liste déroulante, case à cocher)
- Vous devez faire valider votre code --> le validateur.
Si vous n'arrivez pas à faire valider votre site ce n'est pas grave, notez juste les problèmes dans votre compte rendu.
Ressources :
Pour planifier votre contenu et créer votre arborescence en ligne,
ces sept outils peuvent vous aider.
Exemples de pages :
- Page "à propos".
- section "Centres d'intérêt".
- Créez une liste de compétence organisées par catégories.
- Page "projets".
- Ajoutez des liens vers les projets.
- Ajoutez vos coordonnées et liens vers les réseaux sociaux.
- Page "Compétences".
- Une biographie.
- Pour chaque page, conservez la même structure d'en tête et de pied de page.