Thibault Liétard.

PhD Student in Computer Science

L3-SEGE - Informatique 3 : Internet : Langages et Programmation - TP du 16 février 2017

But du TP

Le but du TP d'aujourd'hui est de vous faire découvrir les nouvelles notions introduites par HTML5 ainsi que de reprendre la base de la manipulation d'un site par les feuilles de style CSS.

Vous travaillerez pour cela à partir d'un fichier HTML pré-formé, lié à une feuille de style CSS en ligne (que vous n'avez donc pas besoin de toucher).

Cours - Principales balises

  • main : Définit le contenu principal de la page, il doit être unique dans la page.
  • section : Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web.
  • nav : Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages).
  • article : Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
  • aside : Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
  • hgroup : La balise <hgroup> n'existe plus en HTML5 (février 2013). Eh oui, ce sont des choses qui arrivent quand on travaille sur un truc pas entièrement finalisé.
  • mark : Définit un texte marqué. Surligneur de texte.
  • header : Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
  • footer : Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).

Travail à réaliser

Votre site doit être écrit en HTML/CSS sous une forme respecant les standards du W3C (c'est impératif). Vous ajouterez un lien pour chaque article dans le menu en utilisant des ancres, et vous utiliserez les balises HTML5 nécessaires pour que votre site ressemble à ceci :

La page se compose donc d'un header dans lequel se trouve un menu de naviguation, d'un aside, et d'un corps de texte dans lequel se trouve plusieurs articles. Enfin, en bas se trouve un footer.

Une fois ce travail réalisé, appelez le prof et expliquez lui ce que vous pensez que contient la feuille CSS en ligne. Vous devrez en suite créer une feuille CSS dans le même esprit mais donnant un style tout à fait différent à votre page.

Ressources