web_2025/R1.02/tp/tp4/README.md

# TP CSS - mise en page d'un site

> Vous pouvez utiliser l'inspecteur dans les outils développeur pour modifier du code CSS directement dans le navigateur.

> Vous pouvez utiliser [des aides](https://developer.mozilla.org/fr/docs/Web/CSS/Reference) pour trouver les propriétés CSS.

> Un peu d'aide pour les [grilles css](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) et [css tricks](https://css-tricks.com/snippets/css/complete-guide-grid/).

> Un peu d'aide pour les [flexbox](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) et [css tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

> Une vidéo si vous voulez utiliser les css grid [css grid](https://www.youtube.com/watch?v=KOvGeFUHAC0).

> Un exemple de [générateur de grille css](https://cssgrid-generator.netlify.app/)

## Exercice

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.

![gallerie](./img/tp4.png ':-:')

1. ~~Écrire l'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](src/pantheon.html).

> La page fait 960px de large [pour votre culture](https://webdevdesigner.com/q/why-width-960px-88380/)
>
> Les photos: 
> - http://upload.wikimedia.org/wikipedia/commons/e/e6/Dennis_Ritchie.jpg
> - http://upload.wikimedia.org/wikipedia/commons/7/71/Linus_Torvalds_cropped.jpeg
> - http://upload.wikimedia.org/wikipedia/commons/7/79/Blaise_pascal.jpg
> - https://upload.wikimedia.org/wikipedia/commons/1/17/Alan_Turing_%281912-1954%29_in_1936_at_Princeton_University.jpg
>
> Les couleurs : 
> - bleu : `#08c`.
> - gris : `#EFEFEF`.
> - ombre : `#555`.

> On utilisera les balises htm5 d'organisation d'un site : `header`, `nav`, `footer`, `section`, `aside`, etc.  
> 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 utiliser le module css de boîtes flexibles (flexbox).  
> On peut utiliser le module css de grilles (grid). 

2. Réaliser la mise en page telle que sur l'image en haut de page. Vous pouvez ajouter des attributs (`class` et `id`) dans votre
   source html. 

> Commencer de haut en bas et de gauche à droite. Il faut garder au maximum une logique dans la mise en page et la réaliser étape par étape. 
> Par exemple : 
> - mise en page du titre de la page
> - mise en page du menu
> - mise en page sur 2 colonnes du contenu principal
> - mise en page de la colonne de droite
> - mise en page du titre de la colonne de gauche
> - mise en page des images des personnalités
> - mise en page des vignettes
> - mise en page du pied de page
> - petit correctif pour la mise en page globale

Bon courage ;)