Thibault Liétard.

PhD Student in Computer Science

L3-SEGE - Informatique 3 : Internet : Langages et Programmation - TP du 27 janvier 2017

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'évaluer votre maîtrise du HTML et du CSS.

L'ensemble des fichiers qui composent votre site web (HTML, CSS, images,...) seront à rendre pour le 9 février à 23h59 dernier délai, sous la forme d'une archive de la forme nom_prenom.zip que vous enverrez à l'adresse thibault.lietard@univ-lille3.fr.

Il s'agit d'un travail individuel. Les documents de cours sont autorisés et vous avez bien sûr le droit de chercher des réponses à vos questions sur internet. Si vous bloquez vraiment sur un point, appelez le prof.

Travail à réaliser

Votre site doit être écrit en HTML/CSS sous une forme respecant les standards du W3C (c'est impératif). Voici une descriptions des différentes pages que votre site doit contenir, avec entre crochets ('[' ']') les consignes de style :

Page d'accueil

On y trouvera votre nom et prénom [centrés, encadrés], ainsi qu'une photo [encadrée] et une courte biographie. Vous y placerez également un menu [liste, encadré, police différente] permettant d'accéder aux différentes pages du site. Le Menu doit être aligné à gauche et le texte principale se trouver à droite du menu.

CV

En utilisant des tableaux (chapitre 4 du cours), vous y présenterez votre CV. Vous devez y faire figurer au moins 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 appropriées [div et span] et pour donner un style différent à chaque catégorie. Les titres de catégories devront être soulignés.

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.

Contact

Vous y préciserez vos coordonnées de contact : téléphones, mail, adresse, adresse de l'université (encore une fois, fictif ou réel, peu importe).

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 page d'accueil et le CV, le texte ne doit pas occuper plus de 50% de la largeur de la page
  3. Les liens doivent avoir une couleurs différente au survol et après avoir été activés
  4. Vous spécifierez une couleur ou une image pour le background

Veillez à apporter une attention particulière au style globale de votre site et à son aspect ; essayer de garder une certaine cohérence entre les pages. De manière générale, le but n'est pas de se contenter du minimum syndical : soyez créatifs, n'hésitez pas à ajouter des choses dont vous pensez qu'elles pourront embellir votre site, même si cela n'est pas demandé dans les consignes. Vous pouvez par exemple ajouter des images, jouer sur le positionnements des différents blocks, changer les marqueurs des listes, etc.

Exemple de page d'accueil

Ressources

Vous disposez de plusieurs ressources pour vous aider, notamment le cours ainsi que des générateurs automatiques de code CSS pour :

Pour le CV, vous pouvez vous inspirer du CV présent sur ce site.