TP2

But du TP

Le but du TP d'aujourd'hui est de créer un site web de plusieurs pages présentant votre parcours professionnel. Les informations que vous présentez dedans peuvent être fictives ou réelles, l'objet du TP est avant tout d'apprendre les bonnes pratiques du HTML avec Bootstrap

Travail à réaliser

Votre site doit être écrit en HTML sous une forme respecant les standards du W3C. Vous devez impérativement utiliser les balises de structuration HTML5 et Bootstrap. Voici une descriptions des différentes pages que votre site doit contenir :

Page d'accueil

On y trouvera votre nom et prénom, ainsi qu'une photo et une courte biographie. Le tout doit s'adapter en fonction de la taille de l'écran : photo à gauche et texte à droite sur un écran standard, ou l'un en dessous de l'autre sur un écran plus petit. Vous placerez également sur cette page une barre de navigation permettant d'accéder aux différentes pages du site. Mettez également un aside avec votre adresse mail et numéro de téléphone (encore une fois, fictif ou réel).

CV

Cette page présentera deux boutons permettant d'afficher le CV soit en Français, soit en anglais (pour des raisons évidentes, on ne s'occupera pas du CV en anglais ici). Quand on appuie sur l'un des deux boutons, le CV correspondant apparaît en dessous sur la page web avec les catégories suivantes : parcours scolaire, emplois, compétences acquises (linguistiques ou techniques), et loisirs. Attention, il est important de hiérarchiser les informations dans un CV : vous utiliserez les balises (div et span) ou les identifiants (id et class) appropriés associés à un CSS ou à des éléments Bootstrap.

Liens

Une page présentant (sous forme de liste) les liens vers les sites officielles des différentes insitutions que vous avez pu mentionner dans votre CV : école, entreprise, etc...

Loisirs

Vous y parlerez brièvement de 2 (ou plus) de vos loisir. Soignez la présentation.

Consignes supplémentaires

  1. Les pages autres que la page d'accueil doivent contenir un bouton retour permettant de revenir à l'accueil
  2. Pour la partie sur le CV, il est possible (mais pas obligatoire) d'utiliser les fonctions
  3. Chaque fois que c'est nécessaire, créez des class qui vous permettront plus tard de regrouper ensemble visuellement les éléments qui ont des points communs. Une astuce : vous pouvez spécifier plusieurs classes dans un seul attribut class en les séparant par des espaces (exemple : <div class="toto tata">).
  4. Si une page contient plusieurs section ou article (votre CV par exemple, vos loisirs, etc...) utilisez des id pour permettre la navigation dans la page. De même si une page est longue, utilisez également les id pour créer en bas de la page un bouton pour revenir en haut.