ajout tp css et html au format markdown. Suppression de balises desuetes, ajout partie client - serveur

2026-02-10 08:38:10 +01:00
parent a32f4141ba
commit 660dfd2834
2 changed files with 1033 additions and 0 deletions
--- a/web/tp/TP_CSS.md
+++ b/web/tp/TP_CSS.md
@@ -0,0 +1,621 @@
+# TP CSS - Mise en forme et structuration d'une page web
+
+**Spécialité NSI - Première**
+
+---
+
+## Objectifs
+
+- Comprendre le rôle du CSS (séparation contenu/présentation)
+- Maîtriser la syntaxe CSS (sélecteurs, propriétés, valeurs)
+- Utiliser les balises sémantiques HTML5 pour structurer une page
+- Créer une mise en page complète avec CSS
+
+**Durée estimée** : 3h
+
+**Prérequis** : TP HTML terminé
+
+---
+
+## Partie A : Introduction au CSS (20 min)
+
+### A.1 Le rôle du CSS
+
+**CSS** (*Cascading Style Sheets* - Feuilles de style en cascade) gère l'**apparence** d'une page web.
+
+> **Principe fondamental** : HTML = structure (le fond) | CSS = présentation (la forme)
+
+### A.2 Syntaxe CSS
+
+```css
+selecteur {
+    propriete: valeur;
+    propriete2: valeur2;
+}
+```
+
+**Exemple :**
+```css
+body {
+    background-color: chocolate;
+}
+
+p {
+    font-size: 32px;
+    text-align: center;
+    color: #ffffff;
+}
+```
+
+### A.3 Les 3 façons d'appliquer du CSS
+
+| Méthode | Exemple | Portée |
+|---------|---------|--------|
+| **Inline** (attribut style) | `<p style="color: red;">` | Un seul élément |
+| **Interne** (balise style) | `<style> p { color: red; } </style>` | Une seule page |
+| **Externe** (fichier .css) | `<link rel="stylesheet" href="style.css">` | Tout le site |
+
+**Bonne pratique** : Toujours utiliser un fichier CSS externe !
+
+```html
+<!-- Dans le <head> de votre HTML -->
+<link rel="stylesheet" href="styles/style.css">
+```
+
+---
+
+## Partie B : Les sélecteurs CSS (30 min)
+
+### B.1 Sélecteurs de base
+
+| Sélecteur | Cible | Exemple |
+|-----------|-------|---------|
+| `element` | Toutes les balises de ce type | `p { }` → tous les `<p>` |
+| `.classe` | Tous les éléments avec cette classe | `.important { }` → `class="important"` |
+| `#id` | L'élément unique avec cet id | `#menu { }` → `id="menu"` |
+
+### B.2 Sélecteurs combinés
+
+| Sélecteur | Signification | Exemple HTML |
+|-----------|---------------|--------------|
+| `p span` | `<span>` à l'intérieur de `<p>` | `<p><span>...</span></p>` |
+| `p, span` | `<p>` ET `<span>` (les deux) | `<p>` ou `<span>` |
+| `div p span` | `<span>` dans `<p>` dans `<div>` | `<div><p><span>` |
+| `.intro` | Classe "intro" | `<p class="intro">` |
+| `p.intro` | `<p>` avec classe "intro" | `<p class="intro">` |
+| `#titre` | Id "titre" | `<h1 id="titre">` |
+| `a:hover` | Lien survolé | `<a>` au survol souris |
+
+### B.3 Exercice interactif : CSS Diner
+
+Avant de continuer, entraînez-vous sur **CSS Diner** :
+
+👉 **[flukeout.github.io](https://flukeout.github.io)** (30 niveaux)
+
+Objectif : atteindre au moins le niveau 15.
+
+---
+
+## Partie C : Propriétés CSS essentielles (20 min)
+
+### C.1 Texte
+
+```css
+p {
+    color: #333333;              /* Couleur du texte */
+    font-size: 16px;             /* Taille */
+    font-family: Arial, sans-serif;  /* Police */
+    font-weight: bold;           /* Gras */
+    font-style: italic;          /* Italique */
+    text-align: center;          /* Alignement: left, center, right, justify */
+    text-decoration: underline;  /* Soulignement */
+    text-transform: uppercase;   /* Majuscules */
+    line-height: 1.5;            /* Interligne */
+}
+```
+
+### C.2 Couleurs
+
+```css
+/* 3 façons d'écrire une couleur */
+color: red;                  /* Nom */
+color: #ff0000;              /* Hexadécimal */
+color: rgb(255, 0, 0);       /* RGB */
+```
+
+### C.3 Arrière-plan
+
+```css
+body {
+    background-color: #f0f0f0;
+    background-image: url("images/fond.png");
+    background-repeat: no-repeat;  /* repeat, repeat-x, repeat-y */
+    background-position: center;
+    background-size: cover;        /* cover, contain, 100px */
+}
+```
+
+### C.4 Le modèle de boîte (box model)
+
+Chaque élément HTML est une "boîte" avec :
+
+```
+┌─────────────────────────────────────┐
+│             margin                  │  ← Marge extérieure
+│  ┌───────────────────────────────┐  │
+│  │          border               │  │  ← Bordure
+│  │  ┌─────────────────────────┐  │  │
+│  │  │       padding           │  │  │  ← Marge intérieure
+│  │  │  ┌───────────────────┐  │  │  │
+│  │  │  │     CONTENU       │  │  │  │
+│  │  │  └───────────────────┘  │  │  │
+│  │  └─────────────────────────┘  │  │
+│  └───────────────────────────────┘  │
+└─────────────────────────────────────┘
+```
+
+```css
+div {
+    width: 300px;
+    height: 200px;
+    padding: 20px;           /* Intérieur */
+    margin: 10px;            /* Extérieur */
+    border: 2px solid black; /* Bordure */
+    border-radius: 5px;      /* Coins arrondis */
+    box-shadow: 4px 4px 5px #999;  /* Ombre */
+}
+```
+
+---
+
+## Partie D : Les balises sémantiques HTML5 (15 min)
+
+### D.1 Structure d'une page moderne
+
+```
+┌─────────────────────────────────────────────┐
+│                 <header>                     │
+│  ┌─────────────────────────────────────┐    │
+│  │              <nav>                   │    │
+│  └─────────────────────────────────────┘    │
+├─────────────────────────────────────────────┤
+│  ┌───────────────────────┐  ┌───────────┐  │
+│  │      <section>        │  │  <aside>  │  │
+│  │  ┌─────────────────┐  │  │           │  │
+│  │  │   <article>     │  │  │           │  │
+│  │  └─────────────────┘  │  │           │  │
+│  └───────────────────────┘  └───────────┘  │
+├─────────────────────────────────────────────┤
+│                 <footer>                     │
+└─────────────────────────────────────────────┘
+```
+
+### D.2 Rôle de chaque balise
+
+| Balise | Usage |
+|--------|-------|
+| `<header>` | En-tête de page (logo, titre, navigation) |
+| `<nav>` | Menu de navigation principal |
+| `<main>` | Contenu principal (unique par page) |
+| `<section>` | Section thématique avec un titre |
+| `<article>` | Contenu autonome (article, post de blog) |
+| `<aside>` | Contenu complémentaire (sidebar, encadré) |
+| `<footer>` | Pied de page (copyright, liens, contact) |
+| `<div>` | Conteneur générique (quand rien d'autre ne convient) |
+
+---
+
+## Partie E : Mise en page avec Flexbox (30 min)
+
+### E.1 Introduction à Flexbox
+
+Flexbox est une méthode moderne pour créer des mises en page flexibles.
+
+```css
+.conteneur {
+    display: flex;
+}
+```
+
+### E.2 Propriétés du conteneur flex
+
+```css
+.conteneur {
+    display: flex;
+    flex-direction: row;        /* row, column, row-reverse, column-reverse */
+    justify-content: center;    /* Alignement horizontal */
+    align-items: center;        /* Alignement vertical */
+    flex-wrap: wrap;            /* Retour à la ligne si nécessaire */
+    gap: 20px;                  /* Espacement entre les éléments */
+}
+```
+
+**justify-content** (axe principal) :
+- `flex-start` : début
+- `flex-end` : fin
+- `center` : centré
+- `space-between` : espace entre les éléments
+- `space-around` : espace autour des éléments
+
+**align-items** (axe secondaire) :
+- `flex-start`, `flex-end`, `center`, `stretch`
+
+### E.3 Propriétés des éléments flex
+
+```css
+.element {
+    flex: 1;          /* Prend l'espace disponible */
+    flex-basis: 200px; /* Taille de base */
+    order: 2;          /* Ordre d'affichage */
+}
+```
+
+### E.4 Exercice interactif : Flexbox Froggy
+
+Maîtrisez Flexbox avec **Flexbox Froggy** :
+
+👉 **[flexboxfroggy.com](https://flexboxfroggy.com)** (24 niveaux)
+
+Objectif : terminer tous les niveaux !
+
+---
+
+## Partie F : Projet - Site "Pastor" (1h30)
+
+Vous allez créer un site de blog culinaire avec une mise en page complète.
+
+### F.1 Préparation
+
+Créez l'arborescence suivante :
+
+```
+TP_CSS/
+├── pages/
+│   └── index.html
+├── images/
+│   └── (télécharger la banque d'images fournie)
+└── styles/
+    └── style.css
+```
+
+### F.2 Structure HTML
+
+Créez `index.html` avec la structure suivante :
+
+```html
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="utf-8">
+    <title>Pastor - Grimoire de la cuisine</title>
+    <link rel="stylesheet" href="../styles/style.css">
+</head>
+<body>
+    <div id="bloc_page">
+
+        <header>
+            <div id="titre_principal">
+                <!-- Logo + Titre h1 "Pastor" + Sous-titre h2 "Grimoire de la cuisine" -->
+            </div>
+            <nav>
+                <!-- Menu : Accueil, Blog, CV, Contact -->
+            </nav>
+        </header>
+
+        <div id="banniere_image">
+            <!-- Image de bannière + bouton "Voir l'article" -->
+        </div>
+
+        <section>
+            <article>
+                <!-- Titre + 5 paragraphes de texte -->
+            </article>
+            <aside>
+                <!-- "A propos de l'auteur" + icônes réseaux sociaux -->
+            </aside>
+        </section>
+
+        <footer>
+            <div id="tweet">
+                <!-- "Mon dernier tweet..." -->
+            </div>
+            <div id="mes_photos">
+                <!-- 4 miniatures de photos -->
+            </div>
+            <div id="mes_amis">
+                <!-- 2 listes de liens -->
+            </div>
+        </footer>
+
+    </div>
+</body>
+</html>
+```
+
+### F.3 Contenu HTML détaillé
+
+**Header (`titre_principal` + `nav`)** :
+- Image `pastor.png` (logo)
+- Titre h1 : "Pastor"
+- Titre h2 : "Grimoire de la cuisine"
+- Menu de navigation : Accueil, Blog, CV, Contact (liens vers le site du lycée)
+
+**Bannière (`banniere_image`)** :
+- Texte : "Retour sur mes vacances en Asie... Voir l'article"
+- Image de flèche `flecheblanchedroite.png`
+- Lien de classe `bouton_rouge`
+
+**Article** :
+- Image `ico_epingle.png`
+- Titre h1 : "Je suis un grand gourmand"
+- 5 paragraphes de texte (lorem ipsum)
+
+**Aside** :
+- Titre h1 : "A propos de l'auteur"
+- Image `bulle.png` (id="bulle")
+- Image `pastor.png` (id="pastor")
+- Paragraphe de présentation
+- Icônes : `facebook.png`, `twitter.png`, `vimeo.png`, `flickr.png`, `rss.png`
+
+**Footer** :
+- `tweet` : Titre + 2 paragraphes (class="ragot")
+- `mes_photos` : Titre + 4 images `photo_min_X.jpg`
+- `mes_amis` : Titre + 2 listes (Perceval, Roi Arthur, Léodagan, Karadoc / Merlin, Lancelot, Bohort, Guenièvre)
+
+### F.4 Styles CSS
+
+Créez `style.css` avec les règles suivantes :
+
+#### Styles généraux
+
+```css
+body {
+    background-image: url("../images/fond_jaune.png");
+    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+    color: #333333;
+}
+
+#bloc_page {
+    width: 900px;
+    margin: 0 auto;  /* Centrage horizontal */
+}
+
+h1 {
+    text-transform: uppercase;
+}
+```
+
+#### Header
+
+```css
+header {
+    background: url("../images/separateur.png") repeat-x bottom;
+}
+
+#titre_principal h1 {
+    font-size: 5em;
+    font-family: Arial, cursive;
+    display: inline-block;
+    margin-bottom: 0;
+}
+
+#titre_principal h2 {
+    font-size: 1.1em;
+    font-family: Verdana, Geneva, sans-serif;
+    margin-top: 0;
+}
+
+nav {
+    display: inline-block;
+    width: 90%;
+    text-align: right;
+}
+
+nav ul {
+    list-style: none;
+}
+
+nav li {
+    display: inline-block;
+    margin-right: 15px;
+}
+
+nav a {
+    font-size: 1.3em;
+    color: #181818;
+    text-decoration: none;
+    padding-bottom: 3px;
+}
+
+nav a:hover {
+    color: #760000;
+    border-bottom: 3px solid #760000;
+}
+```
+
+#### Bannière
+
+```css
+#banniere_image {
+    margin-top: 15px;
+    height: 200px;
+    border-radius: 5px;
+    background: url("../images/bangkok.jpg") no-repeat;
+    background-size: cover;
+    color: white;
+    font-size: 0.8em;
+    position: relative;
+    box-shadow: 0 14px 14px #1c1a19;
+    margin-bottom: 30px;
+}
+
+.bouton_rouge {
+    display: inline-block;
+    height: 20px;
+    position: absolute;
+    background-color: #993300;
+    font-size: 1.2em;
+    color: white;
+    text-align: center;
+    padding: 5px 10px;
+    text-decoration: none;
+}
+```
+
+#### Section (article + aside)
+
+```css
+section {
+    display: flex;
+    gap: 20px;
+}
+
+article {
+    flex: 2;  /* Prend 2/3 de l'espace */
+    text-align: justify;
+}
+
+article p {
+    font-size: 0.8em;
+}
+
+aside {
+    flex: 1;  /* Prend 1/3 de l'espace */
+    background-color: #706b64;
+    border-radius: 5px;
+    padding: 10px;
+    color: white;
+    font-size: 0.9em;
+    box-shadow: 4px 4px 5px #1c1a19;
+}
+
+#bulle {
+    position: absolute;
+    top: 100px;
+    left: -12px;
+}
+```
+
+#### Footer
+
+```css
+footer {
+    margin-top: 10px;
+    padding: 30px;
+    background: url("../images/separateur.png") no-repeat top;
+    display: flex;
+}
+
+#tweet {
+    width: 25%;
+}
+
+#mes_photos {
+    width: 40%;
+}
+
+#mes_amis {
+    width: 25%;
+}
+
+#mes_photos img {
+    border: 1px solid #181818;
+    margin-right: 2px;
+}
+
+.ragot {
+    font-style: italic;
+}
+
+footer h1 {
+    font-size: 1.1em;
+}
+
+footer p, footer ul {
+    font-size: 0.8em;
+}
+
+.amis {
+    color: #760000;
+    text-decoration: none;
+}
+```
+
+### F.5 Rendu attendu
+
+Votre page doit ressembler à ceci :
+
+```
+┌─────────────────────────────────────────────────────┐
+│  🍳 Pastor                    ACCUEIL BLOG CV CONTACT│
+│     Grimoire de la cuisine                          │
+├─────────────────────────────────────────────────────┤
+│  ╔═══════════════════════════════════════════════╗  │
+│  ║  🌅 Retour sur mes vacances en Asie...        ║  │
+│  ║                           [Voir l'article →]  ║  │
+│  ╚═══════════════════════════════════════════════╝  │
+├────────────────────────────────┬────────────────────┤
+│  📌 JE SUIS UN GRAND GOURMAND  │  A PROPOS DE       │
+│                                │  L'AUTEUR          │
+│  Blablabla... Blablabla...     │  💬               │
+│  Blablabla... Blablabla...     │  🍳 Blablabla...  │
+│  Blablabla... Blablabla...     │  📘🐦📹📷📡      │
+├────────────────────────────────┴────────────────────┤
+│  MON DERNIER   MES PHOTOS         MES AMIS          │
+│  TWEET...      [📷][📷]          • Perceval • Merlin│
+│  Blablabla...  [📷][📷]          • Roi Arthur...   │
+└─────────────────────────────────────────────────────┘
+```
+
+---
+
+## Résumé des propriétés CSS
+
+### Texte
+| Propriété | Valeurs courantes |
+|-----------|-------------------|
+| `color` | `#333`, `red`, `rgb(0,0,0)` |
+| `font-size` | `16px`, `1.2em`, `1rem` |
+| `font-family` | `Arial, sans-serif` |
+| `font-weight` | `normal`, `bold`, `700` |
+| `text-align` | `left`, `center`, `right`, `justify` |
+| `text-decoration` | `none`, `underline` |
+| `text-transform` | `uppercase`, `lowercase`, `capitalize` |
+
+### Boîte
+| Propriété | Valeurs courantes |
+|-----------|-------------------|
+| `width`, `height` | `300px`, `50%`, `auto` |
+| `margin` | `10px`, `10px 20px`, `auto` |
+| `padding` | `10px`, `10px 20px 10px 20px` |
+| `border` | `1px solid black` |
+| `border-radius` | `5px`, `50%` |
+| `box-shadow` | `4px 4px 5px #999` |
+
+### Arrière-plan
+| Propriété | Valeurs courantes |
+|-----------|-------------------|
+| `background-color` | `#fff`, `transparent` |
+| `background-image` | `url("image.png")` |
+| `background-size` | `cover`, `contain`, `100px` |
+| `background-position` | `center`, `top left` |
+| `background-repeat` | `no-repeat`, `repeat-x` |
+
+### Flexbox
+| Propriété | Valeurs courantes |
+|-----------|-------------------|
+| `display` | `flex` |
+| `flex-direction` | `row`, `column` |
+| `justify-content` | `center`, `space-between` |
+| `align-items` | `center`, `flex-start` |
+| `gap` | `20px` |
+| `flex` | `1`, `2` |
+
+---
+
+## Ressources
+
+- **CSS Diner** : [flukeout.github.io](https://flukeout.github.io) - Sélecteurs CSS
+- **Flexbox Froggy** : [flexboxfroggy.com](https://flexboxfroggy.com) - Flexbox
+- **MDN CSS** : [developer.mozilla.org/fr/docs/Web/CSS](https://developer.mozilla.org/fr/docs/Web/CSS)
+- **Can I Use** : [caniuse.com](https://caniuse.com) - Compatibilité navigateurs
--- a/web/tp/TP_HTML.md
+++ b/web/tp/TP_HTML.md
@@ -0,0 +1,412 @@
+# TP Introduction au langage HTML5
+
+**Spécialité NSI - Première**
+
+---
+
+## Objectifs du TP
+
+- Comprendre l'architecture client-serveur et le protocole HTTP
+- Découvrir la structure d'une page HTML5
+- Maîtriser les balises HTML essentielles
+- Créer une page web complète
+
+**Durée estimée** : 2h
+
+**Matériel** : PC + Navigateur (Firefox, Chrome) + Éditeur de code (VS Code, Notepad++)
+
+---
+
+## Partie A : Comment fonctionne le Web ? (20 min)
+
+### A.1 L'architecture client-serveur
+
+Quand vous tapez une adresse web dans votre navigateur, que se passe-t-il ?
+
+```
+┌─────────────┐                              ┌─────────────┐
+│             │  (1) Requête HTTP            │             │
+│  NAVIGATEUR │  ─────────────────────────►  │   SERVEUR   │
+│  (Client)   │                              │     WEB     │
+│             │  ◄─────────────────────────  │             │
+│             │  (2) Réponse (code HTML)     │             │
+└─────────────┘                              └─────────────┘
+```
+
+1. **Le client (navigateur)** envoie une **requête HTTP** au serveur
+2. **Le serveur** renvoie le **code HTML** de la page demandée
+3. **Le navigateur interprète** le code et affiche la page
+
+### A.2 Le protocole HTTP
+
+**HTTP** (*HyperText Transfer Protocol*) est le protocole utilisé sur Internet depuis 1990 pour transférer des pages web.
+
+Une **URL** (*Uniform Resource Locator*) est l'adresse d'une ressource sur le web :
+
+```
+https://www.wikipedia.org/wiki/HTML
+└─┬─┘   └──────┬──────┘ └────┬────┘
+protocole    serveur      chemin
+```
+
+### A.3 Le HTML
+
+**HTML** (*HyperText Markup Language*) est un langage de **balisage** qui permet de structurer le contenu d'une page web : texte, images, liens...
+
+> **Important** : HTML structure le contenu (le fond), CSS gère l'apparence (la forme).
+
+**Exercice A.1** : Ouvrez n'importe quelle page web, faites un clic droit → "Afficher le code source". Observez la structure du code HTML.
+
+---
+
+## Partie B : Structure d'une page HTML5 (30 min)
+
+### B.1 Les balises
+
+Les pages HTML sont composées de **balises** entourées de chevrons `< >`.
+
+Il existe deux types de balises :
+
+**Balises en paires** (ouvrante + fermante) :
+```html
+<titre>Ceci est un titre</titre>
+```
+
+**Balises orphelines** (auto-fermantes) :
+```html
+<image />
+```
+
+### B.2 Les attributs
+
+Les attributs complètent les balises avec des informations supplémentaires :
+
+```html
+<balise attribut="valeur">Contenu</balise>
+```
+
+Exemple :
+```html
+<image source="photo.jpg" />
+```
+
+### B.3 Structure de base d'une page HTML5
+
+Créez un fichier `page.html` avec le code suivant :
+
+```html
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <title>Ma première page</title>
+    </head>
+    <body>
+        <!-- Le contenu visible ici -->
+    </body>
+</html>
+```
+
+| Élément | Rôle |
+|---------|------|
+| `<!DOCTYPE html>` | Indique qu'il s'agit d'une page HTML5 |
+| `<html>` | Balise racine, englobe tout le contenu |
+| `<head>` | En-tête (métadonnées, titre, liens CSS) |
+| `<meta charset="utf-8">` | Encodage des caractères (accents) |
+| `<title>` | Titre affiché dans l'onglet du navigateur |
+| `<body>` | Corps de la page (contenu visible) |
+| `<!-- ... -->` | Commentaire (non affiché) |
+
+**Exercice B.1** : Créez le fichier `page.html`, ouvrez-le dans votre navigateur. Que voyez-vous ?
+
+---
+
+## Partie C : Organiser le contenu (40 min)
+
+### C.1 Les paragraphes
+
+```html
+<p>Ceci est un paragraphe.</p>
+<p>Ceci est un autre paragraphe.</p>
+```
+
+Pour un simple retour à la ligne dans un paragraphe : `<br />`
+
+### C.2 Les titres
+
+HTML propose 6 niveaux de titres, de `<h1>` (le plus important) à `<h6>` :
+
+```html
+<h1>Titre principal</h1>
+<h2>Sous-titre</h2>
+<h3>Sous-sous-titre</h3>
+```
+
+> **Attention** : Ne confondez pas `<title>` (titre de l'onglet) et `<h1>` (titre dans la page).
+
+**Exercice C.1** : Dans votre fichier, ajoutez un titre `<h1>` et deux paragraphes dans le `<body>`.
+
+### C.3 Mettre en valeur le texte
+
+```html
+<p>Ce mot est <strong>important</strong>.</p>
+<p>Ce mot est <em>mis en valeur</em>.</p>
+<p>Ce mot est <mark>surligné</mark>.</p>
+```
+
+| Balise | Signification | Rendu par défaut |
+|--------|---------------|------------------|
+| `<strong>` | Important | **gras** |
+| `<em>` | Emphase | *italique* |
+| `<mark>` | Marqué | surligné |
+
+> **Note** : Ces balises indiquent le **sens** du texte, pas son apparence. L'apparence peut être modifiée en CSS.
+
+### C.4 Les listes
+
+**Liste non ordonnée** (à puces) :
+```html
+<ul>
+    <li>Premier élément</li>
+    <li>Deuxième élément</li>
+    <li>Troisième élément</li>
+</ul>
+```
+
+**Liste ordonnée** (numérotée) :
+```html
+<ol>
+    <li>Première étape</li>
+    <li>Deuxième étape</li>
+    <li>Troisième étape</li>
+</ol>
+```
+
+**Exercice C.2** : Ajoutez une liste de vos 3 langages de programmation préférés.
+
+---
+
+## Partie D : Les liens (20 min)
+
+### D.1 Lien vers un autre site (lien absolu)
+
+```html
+<p>Visitez <a href="https://www.python.org">le site Python</a> !</p>
+```
+
+### D.2 Lien vers une page de votre site (lien relatif)
+
+Si `page2.html` est dans le même dossier :
+```html
+<a href="page2.html">Aller à la page 2</a>
+```
+
+Si `page2.html` est dans un sous-dossier `pages/` :
+```html
+<a href="pages/page2.html">Aller à la page 2</a>
+```
+
+Si `page2.html` est dans le dossier parent :
+```html
+<a href="../page2.html">Aller à la page 2</a>
+```
+
+### D.3 Lien vers une ancre (même page)
+
+Pour créer un sommaire cliquable sur une longue page :
+
+```html
+<!-- Le lien -->
+<a href="#section2">Aller à la section 2</a>
+
+<!-- La cible (plus bas dans la page) -->
+<h2 id="section2">Section 2</h2>
+```
+
+**Exercice D.1** : Créez deux fichiers HTML qui se lient mutuellement.
+
+---
+
+## Partie E : Les images (15 min)
+
+### E.1 Insérer une image
+
+```html
+<img src="images/photo.jpg" alt="Description de l'image" />
+```
+
+| Attribut | Rôle | Obligatoire |
+|----------|------|-------------|
+| `src` | Chemin vers l'image | Oui |
+| `alt` | Texte alternatif (accessibilité) | Oui |
+| `width` | Largeur en pixels | Non |
+| `height` | Hauteur en pixels | Non |
+
+### E.2 Formats d'images pour le web
+
+| Format | Usage |
+|--------|-------|
+| **JPEG** (.jpg) | Photos |
+| **PNG** (.png) | Illustrations, logos, transparence |
+| **GIF** (.gif) | Animations simples |
+| **SVG** (.svg) | Icônes, logos vectoriels |
+| **WebP** (.webp) | Format moderne, bonne compression |
+
+### E.3 Image cliquable
+
+```html
+<a href="grande_image.jpg">
+    <img src="miniature.jpg" alt="Cliquez pour agrandir" />
+</a>
+```
+
+**Exercice E.1** : Téléchargez une image, placez-la dans un dossier `images/` et insérez-la dans votre page.
+
+---
+
+## Partie F : Les tableaux (25 min)
+
+### F.1 Structure de base
+
+```html
+<table>
+    <tr>
+        <td>Ligne 1, Cellule 1</td>
+        <td>Ligne 1, Cellule 2</td>
+    </tr>
+    <tr>
+        <td>Ligne 2, Cellule 1</td>
+        <td>Ligne 2, Cellule 2</td>
+    </tr>
+</table>
+```
+
+| Balise | Rôle |
+|--------|------|
+| `<table>` | Définit le tableau |
+| `<tr>` | Définit une ligne (*table row*) |
+| `<td>` | Définit une cellule (*table data*) |
+| `<th>` | Définit une cellule d'en-tête (*table header*) |
+| `<caption>` | Titre du tableau |
+
+### F.2 Tableau avec en-tête
+
+```html
+<table>
+    <caption>Liste des élèves</caption>
+    <tr>
+        <th>Nom</th>
+        <th>Prénom</th>
+        <th>Classe</th>
+    </tr>
+    <tr>
+        <td>Dupont</td>
+        <td>Marie</td>
+        <td>1ère NSI</td>
+    </tr>
+</table>
+```
+
+### F.3 Fusion de cellules
+
+- `colspan="2"` : fusionne 2 cellules horizontalement
+- `rowspan="2"` : fusionne 2 cellules verticalement
+
+```html
+<table>
+    <tr>
+        <td colspan="2">Cette cellule occupe 2 colonnes</td>
+    </tr>
+    <tr>
+        <td>Cellule 1</td>
+        <td>Cellule 2</td>
+    </tr>
+</table>
+```
+
+**Exercice F.1** : Créez un tableau de votre emploi du temps (une journée).
+
+---
+
+## Partie G : Balises sémantiques HTML5 (10 min)
+
+HTML5 introduit des balises pour structurer une page de manière sémantique :
+
+```
+┌─────────────────────────────────────┐
+│            <header>                 │
+├─────────┬───────────────────────────┤
+│         │        <section>          │
+│  <nav>  │   ┌─────────┬─────────┐   │
+│         │   │<article>│ <aside> │   │
+│         │   └─────────┴─────────┘   │
+├─────────┴───────────────────────────┤
+│            <footer>                 │
+└─────────────────────────────────────┘
+```
+
+| Balise | Usage |
+|--------|-------|
+| `<header>` | En-tête de page ou de section |
+| `<nav>` | Menu de navigation |
+| `<main>` | Contenu principal |
+| `<section>` | Section thématique |
+| `<article>` | Contenu autonome (article, post) |
+| `<aside>` | Contenu complémentaire (sidebar) |
+| `<footer>` | Pied de page |
+
+---
+
+## Projet final : Créer une page web thématique (30 min)
+
+### Consignes
+
+Réalisez une page web sur un thème de votre choix (film, jeu vidéo, sport, artiste...).
+
+**Éléments obligatoires** :
+- [ ] Structure HTML5 valide
+- [ ] Un titre principal `<h1>` et au moins un sous-titre `<h2>`
+- [ ] Au moins 3 paragraphes de texte
+- [ ] Au moins 2 images
+- [ ] Une liste (ordonnée ou non)
+- [ ] Un tableau
+- [ ] Au moins un lien externe
+
+**Bonus** :
+- [ ] Utilisation des balises sémantiques (`<header>`, `<main>`, `<footer>`)
+- [ ] Un menu de navigation avec ancres
+- [ ] Plusieurs pages liées entre elles
+
+### Organisation des fichiers
+
+```
+mon_site/
+├── index.html
+├── page2.html
+└── images/
+    ├── image1.jpg
+    └── image2.png
+```
+
+---
+
+## Résumé des balises essentielles
+
+| Catégorie | Balises |
+|-----------|---------|
+| **Structure** | `<!DOCTYPE>`, `<html>`, `<head>`, `<body>` |
+| **Métadonnées** | `<meta>`, `<title>` |
+| **Texte** | `<p>`, `<br>`, `<h1>`-`<h6>`, `<strong>`, `<em>` |
+| **Listes** | `<ul>`, `<ol>`, `<li>` |
+| **Liens** | `<a href="">` |
+| **Images** | `<img src="" alt="">` |
+| **Tableaux** | `<table>`, `<tr>`, `<td>`, `<th>` |
+| **Sémantique** | `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>` |
+
+---
+
+## Pour aller plus loin
+
+- **CSS Diner** : [flukeout.github.io](https://flukeout.github.io) - Apprendre les sélecteurs CSS
+- **Flexbox Froggy** : [flexboxfroggy.com](https://flexboxfroggy.com) - Apprendre Flexbox
+- **MDN Web Docs** : [developer.mozilla.org](https://developer.mozilla.org/fr/docs/Web/HTML) - Documentation de référence