Module Wim 1.1 partie web

Mise en page d'un site

On veut réaliser un site qui regroupe des personnes importantes de divers domaines, pour obtenir la présentation suivante. Nous allons écrire l'HTML, puis réaliser progressivement les CSS correspondantes.

1. Écrire le HTML nécessaire pour coder cette page (sans utiliser de tableau). On se limitera à deux informaticiens. Si vous êtes en retard sur les tp, vous pouvez récupérer une version html.

   Remarque
   Les données et photos proviennent de wikipédia et wikimédia.

   Important

   • On utilisera les balises htm5 d'organisation d'un site :

     header, nav, footer, section, aside, etc.

   • Généralement, le point d'entrée d'un site est index.html.
   • Pour la mise en page des éléments, il y a évidemment plusieurs solutions. float et display:inline-block peuvent être utiles. On peut aussi utilser le module css3 de boîtes flexibles. Voici un tutoriel, et de la documentation.
2. Pour l'instant, les informaticiens sont les uns sous les autres.
   1. Donner les CSS nécessaires pour obtenir les couleurs, polices de caractères, taille de caractères, correspondant à l'affichage désiré.
   2. Donner les CSS nécessaires pour l'affichage des diverses bordures.
   3. Donner une solution pour l'affichage de l'entête.
   4. Proposer des CSS qui mettront les (mini) biographies au bon endroit.
   5. Proposer une solution pour le menu de navigation.
   6. Proposer un solution pour le pied de page.

      Attention Rien ne doit recouvrir le pied de page, qui doit etre positionné en dessous de la zone d'affichage des informaticiens, et de la zone des biographies.

3. On veut que le nombre d'informaticiens par ligne s'adapte à la place disponible.