Web - TP2 - CSS

src/cours/CIEL1/04-web-statique/tp/tp02-css-bases.md

@@ -1,20 +1,23 @@
-# Titre activité
+# Web statique - Activité - Feuilles de style CSS
 
 ## Objectifs
 
 ### Objectifs pédagogiques
 
-- **Objectif** : Description
+- Ajouter une feuille de style à notre page web
+- Manipuler les sléecteurs et les propriétés
+- Apprendre à utiliser le modèle de boîte
+- Apprendre à manipuler les flexbox
 
 ### Objectifs techniques
 
-- **Objectif** : Description
+- Améliorer l'aspect visuel de notre site web pour le rendre attrayant
 
 ## Validation
 
 ### Livrables
 
-- Le code final 
+- Le code final HTML + CSS (zip)
 - Le compte-rendu de l'activité
 
 Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM2_Prenom2`.
@@ -23,9 +26,10 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
 
 ### Résultats attendus
 
-- [ ] Le programme se lance sans erreur.
-- [ ] Chaque fonction contient une docstring minimale expliquant sa fonctionnalité. Bonus : Doctsrings complètes au format Numpy.
 - [ ] Le code est propre, correctement formaté, les variables, fonctions et paramètres sont bien nommés, les conventions sont respectées.
+- [ ] La page web d'accueil affichée dans un navigateur ressemble à ceci (ou version personnalisée)
+
+![result-tp2](./images/result-tp2.png)
 
 ### Critères d'évaluation
 
@@ -41,15 +45,15 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
     - Autonomie dans la progression (2pts)
 - Bonus +2pts
 
-## Documents fournis
-
-- Cours
-- Docs
-- Code préalable
-
 ## Étapes
 
-### 3 - Un peu de style
+### 0 - Mise en place
+
+- Nous repartons du résultat du TP précédent. 
+- Vérifiez que toutes vos modifications aient bien été commitées.
+- Créez un nouveau fichier de compte-rendu.
+
+### 1 - Un peu de style
 
 **Objectif :** Ajouter une feuille de style
 
@@ -65,7 +69,8 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
     ~~~html
     <link rel="stylesheet" href="style.css">
     ~~~
-4. Vérifier que le titre de votre site s'affiche désormais en bleu
+4. Vérifier que le titre de votre site s'affiche désormais en bleu.
+5. Vous pouvez mettre une couleur plus agréable (par exemple : `#213C54`)
 5. Faire un nouveau commit (après avoir complété votre compte-rendu).
 ```
 
@@ -83,25 +88,34 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
     - les valeurs de propriétés
 ```
 
-### 4 - Un peu de créativité
+### 2 - Un peu plus de style
 
 **Objectif :** Compléter le style de votre site web avec la feuille de style CSS
 
 ```admonish travail
+#### Sélection par type de balise
 1. Utilisez la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/text-align) pour centrer le titre de votre page
-1. Ajoutez l'attribut `id="devise"` au paragraphe de la devise du cabinet.
-1. Utilisez cet attribut dans un sélecteur CSS pour centrer la phrase sous le titre et mettre le texte en italique (propriété `font-style`). Aidez-vous de la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/Reference#s%C3%A9lecteurs).
 1. Utilisez la [documentation de Mozilla](https://developer.mozilla.org/fr/docs/Web/CSS/font-family) pour que la police par défaut de votre page soit `Helvetica`
-1. Utilisez la documentation pour que le lien sur `Alexandrie` devienne vert que lorsqu'on le survole avec la souris. Il doit rester noir sinon.
-1. Encapsulez le texte de description ainsi que l'image dans une balise `<section>`. Ajoutez l'attribut `class="description"` à la section.
-1. À l'aide des propriétés CSS [`margin-right`](https://developer.mozilla.org/fr/docs/Web/CSS/margin) `margin-left` et [`max-width`](https://developer.mozilla.org/fr/docs/Web/CSS/max-width.), essayez de :
-    - centrer le contenu de votre page 
-    - limiter le contenu à 800 pixels de large.
-1. Faites un nouveau commit (après avoir complété votre compte-rendu).
-```
 
-```admonish help title="Aide"
+#### Sélection par balise encapsulée
-- Pour selectionner un élément lorsqu'il est survolé, vous pouvez utiliser la pseudo-classe `element:hover`
+1. Encapsulez les liens vers les autres pages dans une balise `<nav>` (en HTML).
+1. Utilisez la documentation pour changer le style des liens inclus dans `<nav>` vers les autres pages du site. 
+    - Ils devront s'afficher en `#1565c0`
+    - Ils ne devront plus être soulignés
+    - Il devront s'afficher en un peu plus grand que le reste
+
+#### Sélection par `id`
+1. Ajoutez l'attribut `id="devise"` au paragraphe de la devise du cabinet (dans le html)
+1. Utilisez cet attribut dans un sélecteur CSS pour centrer la phrase sous le titre et mettre le texte en italique (propriété `font-style`). Aidez-vous de la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/Reference#s%C3%A9lecteurs).
+
+#### Sélection par classe
+1. Dans le HTML, encapsulez le texte de description ainsi que l'image dans une balise `<section>`. Ajoutez l'attribut `class="description"` à la section.
+1. Modifiez la couleur de fond de cette zone pour avoir `#EAC194`
+
+#### Sélection par pseudo-classe
+1. Changez la couleur des liens de navigation vers les autres pages du site **uniquement** lorsque le curseur de la souris passe au-dessus. Il devront s'afficher en `#005f99`.
+
+1. Faites un nouveau commit (après avoir complété votre compte-rendu).
 ```
 
 ```admonish note title="Dans le compte rendu"
@@ -110,32 +124,60 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
     - par classe
     - par id
     - quand on survole avec la souris
-2. Expliquez les propriétés que vous avez utilisées (donnez leur nom et leur rôle)
+2. Expliquez 3 **propriétés** que vous avez utilisées (donnez leur nom et leur rôle)
-3. Expliquez la différence entre la taille en `rem` et en `px`. Pour un site qui s'adapte aux préférences des utilisateurs, quelle notation allez-vous préférer ?
+3. Expliquez la différence entre la taille en `rem` et en `px`. Pour un site accessible, qui s'adapte aux préférences des utilisateurs, quelle notation allez-vous préférer ?
 ```
 
+### 3 - Une boîte autour de la description du site
 
-## Pour aller plus loin
+**Objectif** : Manipuler les boîtes (box model) en CSS pour gérer la description et l’image, ainsi que leurs marges et paddings.
-
-### Bonus facile - titre
-
-**Objectif**:
 
 ```admonish travail
-```
+2. Dans le fichier CSS, ajoutez des règles pour `.description` :
 
+    - Ajoutez une bordure continue de 2px `#8396a8`
+    - Ajoutez un padding de 20px pour créer un espace intérieur.
+    - Ajoutez une marge de 30px en haut et en bas.
+    - Fixez une largeur maximale de 800px.
+    - Centrez la boîte horizontalement avec `margin-left` et `margin-right` automatiques.
 
-### Bonus difficile - titre
+3. Pour l’image dans `.description img`, ajoutez :
 
-**Objectif** :
+    - Une bordure continue de 1px solid `#8396a8`.
+    - Arrondissez les angles à l'aide de `border-radius`.
 
-```admonish travail
+5. Faites un commit avec vos modifications après avoir mis à jour votre compte rendu.
-```
-
-```admonish help title="Aide"
 ```
 
 ```admonish note title="Dans le compte rendu"
+1. Expliquez ce qu’est le modèle de boîte CSS (box model).
+2. Quelle différence y a-t-il entre la marge (`margin`) et le remplissage (`padding`) ?
+    - N'hésitez pas à expérimenter à l'aide d'une bordure visible sur l'image et en changeant les valeurs des propriétés
+3. Quelle propriété CSS permet de centrer une boîte horizontalement ?
 ```
 
-### Ressources
+### 4 - Menu de navigation flexible
+
+**Objectif** : Utiliser Flexbox pour agencer les liens de navigation horizontalement et gérer les espaces entre eux.
+
+```admonish travail
+Pour cette étape, utilisez la documentation suivante : [Concepts de base pour Flexbox](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+
+1. Dans le CSS : activez flexbox dans la liste incluse dans la balise `<nav>`
+2. Centrez horizontalement les liens de la liste avec `justify-content`
+3. Ajoutez un écart (`gap`) entre les éléments de la liste.
+4. Retirez les puces de la liste, pour un effet plus moderne (propriété `list-style`)
+5. Faites un commit avec vos modifications après avoir mis à jour votre compte rendu.
+```
+
+```admonish note title="Dans le compte-rendu"
+1. Quelles sont les propriétés Flexbox utilisées dans cette étape et à quoi servent-elles ?
+2. Qu’est-ce que la propriété `gap` apporte par rapport aux marges classiques ?
+3. Pourquoi utiliser Flexbox plutôt qu’un simple affichage en ligne (`inline`) pour la navigation ?
+```
+
+## Pour aller plus loin
+
+### Bonus - Style
+
+**Objectif**: Améliorez le style de la page pour lui donner un rendu plus personnel. N'hésitez pas à fouiller la documentation et à expérimenter