Ajoute cours et TD HTML CSS

2025-11-05 15:44:48 +01:00 · 2025-11-05 15:44:48 +01:00 · 29833dc3a9
commit 29833dc3a9
parent 3f1e5d91ba
23 changed files with 1069 additions and 1 deletions
--- a/src/cours/CIEL1/04-web-statique/td/black.png
+++ b/src/cours/CIEL1/04-web-statique/td/black.png
--- a/src/cours/CIEL1/04-web-statique/td/image-1.png
+++ b/src/cours/CIEL1/04-web-statique/td/image-1.png
--- a/src/cours/CIEL1/04-web-statique/td/image-2.png
+++ b/src/cours/CIEL1/04-web-statique/td/image-2.png
--- a/src/cours/CIEL1/04-web-statique/td/image-3.png
+++ b/src/cours/CIEL1/04-web-statique/td/image-3.png
--- a/src/cours/CIEL1/04-web-statique/td/image-4.png
+++ b/src/cours/CIEL1/04-web-statique/td/image-4.png
--- a/src/cours/CIEL1/04-web-statique/td/image-5.png
+++ b/src/cours/CIEL1/04-web-statique/td/image-5.png
--- a/src/cours/CIEL1/04-web-statique/td/image.png
+++ b/src/cours/CIEL1/04-web-statique/td/image.png
--- a/src/cours/CIEL1/04-web-statique/td/index.html
+++ b/src/cours/CIEL1/04-web-statique/td/index.html
@ -0,0 +1,12 @@
+<table>
+    <tr>
+        <th>Titre</th>
+        <th>Année</th>
+        <th>Réalisateur.ice</th>
+    </tr>
+    <tr>
+        <td>Bienvenue chez les Ch'tis</td>
+        <td>2008</td>
+        <td>Dany Boon</td>
+    </tr>
+</table>
--- a/src/cours/CIEL1/04-web-statique/td/nyamcatrainbow.gif
+++ b/src/cours/CIEL1/04-web-statique/td/nyamcatrainbow.gif
--- a/src/cours/CIEL1/04-web-statique/td/red.png
+++ b/src/cours/CIEL1/04-web-statique/td/red.png
--- a/src/cours/CIEL1/04-web-statique/td/td1.md
+++ b/src/cours/CIEL1/04-web-statique/td/td1.md
@ -0,0 +1,123 @@
+# TD1 - Web - HTML et CSS
+
+### Exercice 1 - Bases
+
+1. Créer un fichier `index.html` et y ajouter les balises minimales pour avoir une page web
+2. Dans le fichier `index.html`, ajouter un titre et deux paragraphes.
+3. Ajouter une image `image.png`
+4. Ajouter un lien vers une page externe
+5. Créer une liste à puces (non-ordonnée) avec vos trois films/séries préférées
+6. Ajoutez une feuille de style CSS
+7. Modifiez la couleur du titre pour qu'il s'affiche en vert
+8. Changez la police des paragraphes pour utiliser `Helvetica`
+9. Changez le lien pour qu'il s'affiche en rouge lorsqu'il est survolé par la souris, et en jaune lorsqu'il a été visité
+
+### Exercice 2
+1. Grâce au CSS, faire disparaître l'élément dont l'id est `hidden`
+```html
+<body>
+   <p>Le <strong>Moscow mule</strong> est un cocktail à base de vodka, de bière de gingembre épicée et de jus de citron vert.</p>
+   <p id="hidden">Un <strong>French Connection</strong> est un cocktail composé de parts égales de cognac et d'amaretto.</p>
+   <p>Le <strong>Long Island Iced Tea</strong> est un cocktail à base de tequila, de gin, de vodka, de rhum et de liqueur d'oranges.</p>
+</body>
+```
+2. Centrer horizontalement les paragraphes à l'intérieur du **premier** élément `<div>`.
+```html
+<body>
+   <div class="super1">
+      <p>Le Moscow mule est un cocktail à base de vodka, de bière de gingembre épicée et de jus de citron vert, accompagné d'une rondelle de citron.</p>
+      <p>Le Long Island Iced Tea est un cocktail à base de tequila, de gin, de vodka, de rhum et de liqueur d'oranges.</p>
+   </div>
+   <div class="super2">
+      <p>Un French Connection est un cocktail composé de parts égales de cognac et d'amaretto.</p>
+      <p>Le Tequila sunrise est un cocktail à base de tequila, de jus d'orange, et de grenadine.</p>
+   </div>
+</body>
+```
+1. Supprimer le souligné des liens et barrer les éléments `<span>`.
+```html
+<body>
+   <p>Le <a href="https://fr.wikipedia.org/wiki/Mule_de_Moscou">Moscow mule</a> est un cocktail à base de <span>vodka</span>, de <span>bière</span> de gingembre épicée et de jus de citron vert, accompagné d'une rondelle de citron.</p>
+   <p>Le <a href="https://fr.wikipedia.org/wiki/Long_Island_Iced_Tea">Long Island Iced Tea</a> est un cocktail à base de <span>tequila</span>, de <span>gin</span>, de <span>vodka</span>, de <span>rhum</span> et de <span>liqueur d'oranges</span>.</p>
+</body>
+```
+
+### Exercice 3 - Reproduction
+
+1. Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant l'image fournie.
+    - Bleu : `#0f4d8f`
+    - [Image](https://aymeric-auberton.fr/img/css/nyamcatrainbow.gif)
+
+![alt text](image-4.png)
+
+
+
+### Exercice 4 - Tableaux
+
+1. Créer un fichier `table.html` et y ajouter les balises minimales pour avoir une page web
+2. Sachant qu'un tableau utilise les balises HTML suivantes
+    - `<table>` pour indiquer un nouveau tableau
+    - `<tr>` pour indiquer une nouvelle ligne
+    - `<td>` pour indiquer une nouvelle cellules de **données**
+    - `<th>` pour indiquer une nouvelle cellule d'en-tête
+  
+    Reproduire le tableau suivant (le contenu, pas la mise en forme) :
+
+    | Titre                                 | Année | Réalisateur·ice              |
+    | ------------------------------------- | ----- | ---------------------------- |
+    | Bienvenue chez les Ch'tis             | 2008  | Dany Boon                    |
+    | Intouchables                          | 2011  | Olivier Nakache, É. Toledano |
+    | La Grande Vadrouille                  | 1966  | Gérard Oury                  |
+    | Contre toute espérance                | 2007  | Bernard Émond                |
+    | Astérix et Obélix : Mission Cléopâtre | 2002  | Alain Chabat                 |
+
+3. Ajoutez une feuille de style à votre page
+4. Grâce aux propriétés CSS suivantes, ajoutez des bordures au tableau :
+   - `border-style: solid`
+   - `border-width: 1px`
+   - `border-color: black`
+   - `border-collapse: collapse`
+5. Un tableau plus complexe peut être composé de plusieurs parties
+   - `<thead>` définit la partie d'en-tête
+   - `<tbody>` définit la partie principale
+   - `<tfooter>` définit la partie basse
+   - `<caption>` définit le titre du tableau
+   
+   Reproduisez le tableau suivant :
+
+   ![alt text](image.png)
+
+6. Sachant que `<td>` peut prendre les attributs `rowspan` ou `colspan` pour fusionner deux cellules (en colonne ou en ligne respectivement), essayer de reproduire les deux tableaux suivants : 
+
+![alt text](image-1.png)
+
+![alt text](image-2.png)
+
+### Exercice 5
+Modifier le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant les images suivantes.
+```html
+<body>
+    <table></table>
+</body>
+```
+```css
+img {
+    display: block;
+}
+table {
+    margin: auto;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+td {
+    padding: 20px;
+    border: 1px black solid;
+}	
+```
+
+![coeur](image-5.png)
+
+
+## Pour aller plus loin :
+
+[Exercices supplémentaires](https://aymeric-auberton.fr/academie/css/exercices)
--- a/src/cours/CIEL1/04-web-statique/td/white.png
+++ b/src/cours/CIEL1/04-web-statique/td/white.png
--- a/src/cours/CIEL1/04-web-statique/web-statique.md
+++ b/src/cours/CIEL1/04-web-statique/web-statique.md
@ -13,6 +13,7 @@ Voir à la fin d'un TP
 ### Bases
 [MDN - Introduction au HTML](https://developer.mozilla.org/fr/docs/conflicting/Learn_web_development/Core/Structuring_content_2f5dc6d6e575054cc70e0a8faa24bef31907d53cee6754dd2c92e644e705a7d8)

+
 ### Debug
 [MDN - Debug HTML](https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML)

@ -47,4 +48,8 @@ ou section référence : https://developer.mozilla.org/fr/docs/Web
 # Orga
 ## TP
 - Découverte du HTML + bases CSS
- Styler une page web avec CSS (boîtes et flex)
+- Styler une page web avec CSS (boîtes et flex)
+
+
+# Exercices 
+[text](https://aymeric-auberton.fr/academie/css/exercices)
--- a/src/slides/B1/html/01_html_bases.md
+++ b/src/slides/B1/html/01_html_bases.md
--- a/src/slides/B1/web/02_css_bases.md
+++ b/src/slides/B1/web/02_css_bases.md
@ -0,0 +1,449 @@
+---
+marp: true
+theme: catppuccin
+paginate: true
+size: 4:3
+transition: coverflow
+footer: ''
+math: katex
+lang: "fr"
+---
+
+<style>
+section {
+  font-size: 28px;
+  text-align: left
+}
+</style>
+
+# CSS
+
+---
+
+## Qu'est-ce que le CSS ?
+
+---
+
+- Permet de choisir le **style** de votre page
+- On peut choisir :
+  - couleurs
+  - tailles du texte, polices
+  - bordures, marges etc...
+- Pour rendre votre site plus agréable à lire
+- **Attention** : navigateurs ne connaissent pas toutes les propriétés CSS
+  - Mais ignorées si non connues
+
+--- 
+
+|          |                                                        |
+| -------- | ------------------------------------------------------ |
+| Sans CSS | ![frama_no_css width:550px](./images/frama_no_css.png) |
+| Avec CSS | ![frama_css width:550px](./images/frama_css.png)       |
+
+---
+
+CSS et HTML sont indissociables :
+- Beaucoup d'exemples avec HTML pour comprendre le lien
+- Nouvelles notions de HTML car utiles avec CSS
+
+---
+
+## Intégrer du CSS
+
+Une ligne à ajouter : 
+
+```html
+<link rel="stylesheet" href="style.css" />
+```
+
+Dans la section `<head>`
+
+```html
+<!DOCTYPE html> 
+<html> 
+    <head> 
+        <meta charset="utf-8" /> 
+        <link rel="stylesheet" href="style.css" />
+        <title>Ma page</title>
+    </head>
+...
+<html>
+```
+
+Attributs :
+- `rel` : `stylesheet` pour préciser que c'est du CSS
+- `href` : pour donner le nom du fichier CSS
+
+---
+
+## Syntaxe de base
+
+![css_syntaxe width:800px](./images/css.svg)
+
+---
+3 éléments :
+
+- **Sélecteurs** : permet de selectionner l'élément où on applique le style
+  - ex: pour sélectionner les balises `<p>` on écrit `p`
+- **Propriétés** : l'effet à modifier
+  - ex: `color` permet de modifier la couleur d'un texte
+- **Valeurs** : la valeur de la proipriété à appliquer
+  - ex: la valeur `blue` permet d'appliquer la couleur bleue à la propriété `color`
+
+---
+
+- **Syntaxe** détaillée : 
+```css
+selecteur {
+  propriete1: valeur;
+  propriete2: valeur;
+}
+```
+
+- Accolades `{}` pour préciser le groupe de propriétés appliquées au sélecteur
+- `:` pour séparer la propriété et la valeur
+- `;` à la fin d'une ligne
+- Pas de limite au nombre de propriétés
+
+---
+
+### Commentaires
+
+On peut ajouter des commentaires dans le CSS
+- début : `/*`
+- fin : `*/`
+
+```css
+/* ceci est un commentaire */
+
+/* Il peut 
+prendre 
+plusieurs
+lignes */
+```
+
+---
+
+## Sélecteurs
+
+---
+
+### Sélection multiple
+
+On peut sélectionner plusieurs éléments à la fois en les séparant par une virgule
+```css
+h1,
+h2,
+h3 {
+  color: blue;
+}
+```
+
+---
+
+### Sélecteur de balise
+
+- On peut sélectionner selon une balise
+- On utilise la balise sans les chevrons `<>`
+
+```css
+p {
+  color: blue
+}
+```
+
+Ici tous les paragraphes (balise `<p>`) seront en bleu.
+
+
+---
+### Sélectionner une balise enfant
+
+On peut vouloir sélectionner une balise incluse dans une autre :
+- il suffit de mettre deux sélecteurs séparés par un espace
+
+```css
+nav ul {
+    display: flex;
+}
+```
+Ici on sélectionne toutes les listes non ordonnées à l'intérieur d'une balise `<nav>` (pour qu'elles soient affichées en `flex`)
+
+---
+
+### Sélecteur de classe et d'id
+
+--- 
+
+#### En HTML : `id` et `class`
+Parfois, on veut appliquer des styles différents à des éléments dans une même balise
+- on peut vouloir certains paragraphes différents des autres par exemple
+- il faut alors pouvoir les différencier
+- deux possibilités :
+  - grâce à l'attribut `class`
+  - grâce à l'attribut `id`
+
+---
+
+Ce sont des attributs qu'on rajoute dans le HTML à la balise :
+
+- `class` : vient **typer** une balise pour la spécialiser
+  - utilisable plusieurs fois
+```html
+<p class="introduction">Bonjour et bienvenue sur mon site !</p> 
+<p>Encore un peu de texte dans un paragraphe</p> 
+```
+
+- `id` : vient nommer de manière **unique** une balise
+  - ne peut être utilisé qu'une seule fois !
+```html
+<img src="images/logo.png" alt="Logo du site" id="logo" /> 
+```
+
+---
+
+#### En CSS : sélectionner par `id` et `class`
+
+- Sélection par `class` : on utilise `.` + classe
+- Sélection par `id` : on utilise `#` + id
+
+Exemple : 
+
+```html
+<img src="images/logo.png" alt="Logo du site" id="logo" /> 
+<p class="introduction">Bonjour et bienvenue sur mon site !</p> 
+<p>Encore un peu de texte dans un paragraphe</p> 
+```
+
+```css
+.introduction {
+    color: blue;
+}
+
+#logo {
+    width: 50px;
+}
+```
+
+---
+
+#### En HTML : balises universelles
+
+- Les `class` et `id` sont des attributs HTML
+  - on ne peut les mettre que sur des balises 
+- Parfois on veut appliquer du CSS sur des éléments précis qui ne sont pas dans des balises
+  - On peut utiliser des balises **universelles** : elles n'ont pas de signification
+    - **`<span></span>`** : **au milieu d'un texte** pour entourer une portion précise
+    - **`<div></div>`** : **autour d'un bloc** (elle provoque un retour à la ligne)
+  - on peut alors ajouter des classes et id sur ces balises
+
+---
+
+Exemple : 
+```html
+<div class="logo_et_accueil">
+<img src="images/logo.png" alt="Logo du site"/>
+<p>Bonjour et bienvenue sur <span id="mon_site">mon site</span> !</p>
+<p>Encore un peu de texte dans un paragraphe</p> 
+```
+
+---
+
+### Sélecteurs avancés
+
+- `*` : sélecteur universel : sélectionne toutes les balises
+  ```css
+  * {
+  }
+  ```
+- `+` : balise qui en suit une autre
+  - Exemple on sélectionne la balise `p` qui suit balise `h3`
+  ```html
+  <h3>Mon titre</h3>
+  <p>Mon paragraphe</p>
+  ```
+  ```css
+  h3 + p {
+
+  }
+  ```
+
+---
+
+- `>` : imbrication précise
+  - On veut une balise `img` incluse dans une balise `section` **directement**
+  ```css
+  section > img {
+    /*...*/
+  }
+  ```
+  ```html
+  <section>
+    <!-- sélectionnée -->
+    <img src="..."/>
+    <div>
+      <!-- non sélectionnée -->
+      <img src="..."/>
+    </div>
+  </section>
+  ```
+
+---
+
+- `[attribut]` : balise avec attribut
+  - **Exemple** : sélectionne les liens avec un attribut `title`
+  ```css
+  a[title] {
+    /*...*/
+  }
+  ```
+- Variantes :
+  - `[attribut="valeur"]` : balise avec attribut et valeur **exacte**
+  - `[attribut*="valeur"]` : balise avec attribut qui **contient** "valeur"
+
+---
+
+### Sélectionner par pseudo-classe
+
+- Modifications dynamiques : changements d'apparence quand la page a été chargée
+  - on utilise des pseudo-classes 
+- Exemples :
+  - `:hover` : au survol par la souris
+    - Utilisé pour les liens
+  - `:active` : à l'instant où on clique dessus 
+    - Utilisé pour les boutons
+  - `:focus` : lorsque l'élément est sélectionné 
+    - Utilisé pour les champs de formulaires
+  - `:visited` : lorsque la page en lien a été visitée
+    - Utilisé pour les liens
+
+---
+
+```css
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  color: green;
+  text-decoration: underline;
+}
+
+a:visited {
+  color: purple;
+}
+```
+
+---
+
+### Syntaxe imbriquée
+
+Pour plus de lisibilité on peut imbriquer les balises en CSS
+- **Attention** : syntaxe très récente, supportée par les navigateurs modernes à jour
+- sélecteur `&` pour combiner aux autres sélecteurs
+
+```css
+nav {
+    a {
+      text-decoration: none;
+
+        &:hover {
+          color: green;
+          text-decoration: underline;
+        }
+
+        &:visited {
+          color: purple;
+        }
+    }
+}
+```
+
+---
+
+Compatibilité de l'opérateur `&` : sur les navigateurs récents
+![compat_nesting](images/compat_nesting.png)
+
+---
+
+## Propriétés
+
+---
+
+### Quelques propriétés courantes
+
+- `font-size` : changer la taille du texte
+- `color` :  changer la couleur du texte
+- `font-style` : modifier le style du texte (italique par ex)
+- `font-weight` : modifier le poids (épaisseur) du texte (de extra-light à gras)
+- `text-decoration` : décore le texte (souligné, barré, ligne au dessus, clignote...)
+- `text-align` : aligne le texte (droite, gauche, centre...)
+- `background-color` : modifie la couleur de fond
+--- 
+
+#### Police (font)
+
+- Un problème : l'utilisateur doit avoir la police installée (ou vous devrez lui fournir)
+- On précise donc plusieurs polices avec `font-family`, dans l'ordre de priorité.
+- On essaie de mettre une police standard à la fin
+
+```css
+font-family: Helvetica, "Arial Black", Arial, sans-serif;
+```
+- Ici : Helvetica, sinon Arial Black, Arial, puis finalement une police standard sans-serif
+  - Notez : guillemets si votre nom de police contient des espaces
+
+---
+
+## Valeurs
+
+Différents types de valeurs reviennent régulièrement. Elles sont standard en CSS.
+
+---
+
+### Les tailles
+
+- Chiffre + unité
+- Les unités possibles : 
+  - **Absolues** :
+    - pixels : `px`
+    - millimètres : `mm`
+  - **Relatives** : 
+    - 1 est la valeur de référence
+    - Proportionnel à la taille
+      - de l'élément : `em`
+      - de la page : `rem`
+      - du viewport : `vh` et `vw`
+  - Selon les propriétés : les `%` sont possibles
+
+---
+### Les couleurs
+Plusieurs standards de couleur possibles :
+- **RGB** : `rgb(186 218 85)`
+- **Hexadécimal** : `#bada55`
+- Hue Saturation Lightness : `hsl(74 64.3% 59.4%)`
+- Hue Whiteness Blackness : `hwb(74 33.3% 14.5%)`
+- color() : `color(srgb 0.73 0.85 0.33)`
+
+---
+### Les URL
+
+La fonction `url()` peut être utilisée pour inclure un fichier
+- URL absolue ou relative
+- Image, police ou feuille de style selon les cas
+
+```css
+url('https://example.com/images/myImg.jpg');
+url(https://example.com/images/myImg.jpg);
+url(myImg.jpg);
+```
+
+---
+
+## Documentation
+
+La référence : [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
+- Recense toutes les propriétés, sélecteurs, valeurs
+- Donne des informations de compatibilité entre navigateurs
+- Articles et guides explicatifs + exemples
+
+---
--- a/src/slides/B1/web/images/colors_css.png
+++ b/src/slides/B1/web/images/colors_css.png
--- a/src/slides/B1/web/images/compat_nesting.png
+++ b/src/slides/B1/web/images/compat_nesting.png
--- a/src/slides/B1/web/images/css.excalidraw
+++ b/src/slides/B1/web/images/css.excalidraw
--- a/src/slides/B1/web/images/css.svg
+++ b/src/slides/B1/web/images/css.svg
--- a/src/slides/B1/html/images/exemple_balises.svg
+++ b/src/slides/B1/html/images/exemple_balises.svg
--- a/src/slides/B1/web/images/frama_css.png
+++ b/src/slides/B1/web/images/frama_css.png
--- a/src/slides/B1/web/images/frama_no_css.png
+++ b/src/slides/B1/web/images/frama_no_css.png
--- a/src/slides/B1/html/images/html_structure.svg
+++ b/src/slides/B1/html/images/html_structure.svg