From bc42a75572764cbbf4daac26e64906cea8afd271 Mon Sep 17 00:00:00 2001 From: Florian Mathieu Date: Tue, 10 Feb 2026 08:54:59 +0100 Subject: [PATCH] =?UTF-8?q?ajout=20des=20images=20oubli=C3=A9es=20precedem?= =?UTF-8?q?ment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/tp/TP_CSS.md | 34 +++++++++++++--------------------- 1 file changed, 13 insertions(+), 21 deletions(-) diff --git a/web/tp/TP_CSS.md b/web/tp/TP_CSS.md index 9695df1..5bf59d1 100644 --- a/web/tp/TP_CSS.md +++ b/web/tp/TP_CSS.md @@ -25,6 +25,8 @@ > **Principe fondamental** : HTML = structure (le fond) | CSS = présentation (la forme) + + ### A.2 Syntaxe CSS ```css @@ -172,6 +174,8 @@ div { ### D.1 Structure d'une page moderne +![Structure sémantique HTML5](assets/structure_semantique_html5.png) + ``` ┌─────────────────────────────────────────────┐ │
│ @@ -280,6 +284,10 @@ TP_CSS/ ### F.2 Structure HTML +Voici la structure visuelle du site Pastor : + +![Structure HTML du projet Pastor](assets/structure_html_pastor.png) + Créez `index.html` avec la structure suivante : ```html @@ -364,6 +372,10 @@ Créez `index.html` avec la structure suivante : ### F.4 Styles CSS +Voici le schéma de positionnement CSS du site : + +![Structure CSS du projet Pastor](assets/structure_css_pastor.png) + Créez `style.css` avec les règles suivantes : #### Styles généraux @@ -545,27 +557,7 @@ footer p, footer ul { 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... │ -└─────────────────────────────────────────────────────┘ -``` +![Rendu final du site Pastor](assets/rendu_final_pastor.png) ---