Architecture et langages Web (NFA040)

Exercices ( HTML , CSS et positionnement)

Olivier Pons
(pons@cnam.fr)

2022

Exercice 1

On veut réaliser un site de librairie en ligne pour obtenir la présentation suivante. Nous allons écrire le HTML, puis réaliser progressivement les CSS correspondantes.

Écrire le HTML nécessaire pour coder cette page (sans utiliser de tableau). On se limitera à deux livres.

Exercice 2

On suppose que la taille voulue pour afficher les livres est toujours de 3 livres par ligne.

Question 1

Donner les CSS nécessaires pour obtenir les couleurs, polices de caractères, taille de caractères, correspondant à l'affichage désiré.

Question 2

Donner les CSS nécessaires pour l'affichage des diverses bordures.

Question 3

Proposez une solution pour l'affichage de l'entête.

Question 4

Proposez des CSS qui mettront les nouvelles au bon endroit.

Question 5

Proposez une solution pour le menu (Statistiques, Romans, Sciences...)

Question 6

En supposant qu'on a au maximum deux livres, ajouter à la CSS les informations nécessaires pour placer les livres les uns à côté des autres (on pourra envisager de réduire les polices)

Question 7

On suppose que le nombre de livre peut être plus grand que deux. Proposez une solution (en utilisant float) pour la mise en page. On veut que le nombre de livres par ligne s'adapte à la place disponible :

Question 8

Modifier les deux derniers points en utilisant inline-block.

Question 9

Reprendre les questions précédentes avec des méthode de positionnement différentes. Des boites flexibles ou une grille si vous aviez utilisé position ou float ou l'inverse si vous aviez déjà utilise les boites flexibles