Ungol/ciel-b1
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Web - TP2 - CSS

Browse source
This commit is contained in:
Alexis Fourmaux 2025-11-01 18:24:24 +01:00
parent 2fe01835ff
commit 3f1e5d91ba
2 changed files with 83 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/cours/CIEL1/04-web-statique/tp/images/result-tp2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 802 KiB

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

@ -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"
- Pour selectionner un élément lorsqu'il est survolé, vous pouvez utiliser la pseudo-classe `element:hover`
#### Sélection par balise encapsulée
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)
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 ?
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 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
### Bonus facile - titre
**Objectif**:
**Objectif** : Manipuler les boîtes (box model) en CSS pour gérer la description et l’image, ainsi que leurs marges et paddings.
```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
```
```admonish help title="Aide"
5. Faites un commit avec vos modifications après avoir mis à jour votre compte rendu.
```
```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