Refonte des TP Web pour SNT seconde

- Corrige les erreurs CSS (radius-border, prefixes vendeur obsoletes)
- Corrige la typo "La ciel" et les balises dt→dl dans index.html
- Ajoute les vrais liens Wikipedia pour les grands noms
- Harmonise les references au lycee Charlotte Perriand
- Met a jour l'annee dans INTRODUCTION.md (2024→2025)
- Remplace les anciens TP (PDFs niveau NSI/BTS) par 3 nouveaux TP adaptes :
  - TP1 : Decouverte du HTML (structure, balises, CSS)
  - TP2 : Experience utilisateur (analyse UX, bonnes pratiques)
  - TP3 : Ma premiere page web en CSS (mini-projet progressif)
- Ajoute le schema client/serveur et les templates de demarrage TP3
- Supprime les anciens TP 2/3/4 et intro.pdf (gardes en NSI)
- Met a jour le README avec le nouveau sommaire

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

sequences/web/tp/1/index.html

@@ -62,7 +62,7 @@
 				<td></td>
 			</tr>
 			<tr>
-				<td>&lt;dt></td>
+				<td>&lt;dl></td>
 				<td></td>
 				<td></td>
 			</tr>
@@ -88,19 +88,19 @@
 			</tr>
 		</table>
 
-		<p>La ciel est <span style="color:blue">bleu</span> comme la <strong>mer</strong>.</p>
+		<p>Le ciel est <span style="color:blue">bleu</span> comme la <strong>mer</strong>.</p>
 		<!-- photos des personnages qui ont marqué l'informatique en lien avec leur page wikipedia -->
 		<!-- les photos sont enregistrées dans le dossier images/grandsNoms -->
 		
 			 <h2> Les grands noms de l'informatique</h2>
             <ul>
-				<li><a href="#" title="Architecture des ordinateurs" >John Von Neumann 1903-1957</a></li>
-				<li><a href="#" title="Premier compilateur ; langage COBOL" >Grace Hopper 1906-1992</a></li>
-				<li><a href="#" title="Fondements théoriques de l'informatique ; Machine de Turing ; décryptage de la machine Enigma utilisée par les nazis" >Alan Turing 1912-1954</a></li>
-				<li><a href="#" title="Inventeur du langage C ; co-développeur du système d'exploitation Unix" >Dennis Ritchie 1941-2011</a></li>
-				<li><a href="#" title="Le père du logiciel libre" >Richard Stallman 1953-</a></li>
-				<li><a href="#" title="L'inventeur du Web" >Tim Berners-Lee 1955-</a></li>
-				<li><a href="#" title="Créateur du noyau du système d'exploitation Linux en 1991" >Linus Torvalds 1969-</a></li>
+				<li><a href="https://fr.wikipedia.org/wiki/John_von_Neumann" title="Architecture des ordinateurs" >John Von Neumann 1903-1957</a></li>
+				<li><a href="https://fr.wikipedia.org/wiki/Grace_Hopper" title="Premier compilateur ; langage COBOL" >Grace Hopper 1906-1992</a></li>
+				<li><a href="https://fr.wikipedia.org/wiki/Alan_Turing" title="Fondements théoriques de l'informatique ; Machine de Turing ; décryptage de la machine Enigma utilisée par les nazis" >Alan Turing 1912-1954</a></li>
+				<li><a href="https://fr.wikipedia.org/wiki/Dennis_Ritchie" title="Inventeur du langage C ; co-développeur du système d'exploitation Unix" >Dennis Ritchie 1941-2011</a></li>
+				<li><a href="https://fr.wikipedia.org/wiki/Richard_Stallman" title="Le père du logiciel libre" >Richard Stallman 1953-</a></li>
+				<li><a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee" title="L'inventeur du Web" >Tim Berners-Lee 1955-</a></li>
+				<li><a href="https://fr.wikipedia.org/wiki/Linus_Torvalds" title="Créateur du noyau du système d'exploitation Linux en 1991" >Linus Torvalds 1969-</a></li>
 		     </ul>
            
          <!-- pied de page. Liens vers mes sites préférés -->		   
@@ -111,7 +111,7 @@
                         <li><a href="https://developer.mozilla.org/fr/docs/Web">HTML5, CSS3, javaScript, AJAX</a></li>
                         <li><a href="https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3">OpenClassroom</a></li>
 						<li><a href="https://grafikart.fr">grafikart</a></li>
-						<li><a href="https://www.lyc-thierry-maulnier.ac-nice.fr">Site du lycée Thierry Maulnier de Nice</a></li>
+						<li><a href="https://charlotteperriand.etab.ac-lille.fr">Site du lycée Charlotte Perriand de Genech</a></li>
                     </ul>                    
                 </div>
             </footer>        

sequences/web/tp/1/style.css

@@ -6,13 +6,11 @@ h1
   color: #090;
   padding:16px;
   font-weight:lighter;
-  -moz-box-shadow: 2px 2px 6px #888;  
-  -webkit-box-shadow: 2px 2px 6px #888;  
-  box-shadow:2px 2px 6px #888;  
+  box-shadow:2px 2px 6px #888;
   text-align:center;
   display:block;
   margin:16px;
-  background-color: #76d7c4;  
+  background-color: #76d7c4;
 }
 
 #banniere
@@ -23,8 +21,6 @@ h1
   color:#6bf;
   padding:24px 32px 32px 32px;
   font-weight:lighter;
-  -moz-box-shadow: 2px 2px 6px #888;  
-  -webkit-box-shadow: 2px 2px 6px #888;  
   box-shadow:2px 2px 6px #888;  
   text-align:center;
   display:block;
@@ -46,7 +42,7 @@ table tr:nth-child(odd) td
 h2, h3 {
   background-color: gray;
   color: navy;
-  radius-border : 5px;
+  border-radius: 5px;
 }
 
 ul,ol{

sequences/web/tp/tp1_decouverte_html.md

@@ -0,0 +1,274 @@
+# TP 1 : Decouverte du HTML
+
+
+
+---
+
+## Objectifs
+
+- Comprendre la structure de base d'une page HTML5
+- Decouvrir les principales balises HTML
+- Savoir modifier le contenu d'une page web
+- Comprendre le lien entre HTML et CSS
+
+---
+
+## Partie 1 : Mise en situation (5 min)
+
+### Qu'est-ce qu'une page web ?
+
+Quand vous consultez un site web, votre **navigateur** (Chrome, Firefox, Edge...) recoit du **code** depuis un **serveur** et l'interprete pour afficher la page.
+
+![client_serveur.jpg](../assets/client_serveur.jpg)
+
+Ce code est principalement ecrit en deux langages :
+- **HTML** (HyperText Markup Language) : definit le **contenu** (texte, images, liens...)
+- **CSS** (Cascading Style Sheets) : definit la **mise en forme** (couleurs, tailles, polices...)
+
+### A vous !
+
+Ouvrez le site du lycee dans votre navigateur. Faites un **clic droit** sur la page, puis choisissez **"Afficher le code source"**.
+
+Vous voyez le code HTML de la page ! C'est ce code que le navigateur interprete pour produire ce que vous voyez a l'ecran.
+
+---
+
+## Partie 2 : Structure de base d'une page HTML5 (10 min)
+
+### Ouvrir le fichier
+
+1. Lancez **Notepad++**
+2. Ouvrez le fichier `tp/1/index.html`
+3. Ouvrez egalement ce meme fichier dans votre navigateur (double-clic dessus)
+
+### La structure HTML5
+
+Toute page HTML5 respecte cette structure de base :
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Titre de la page</title>
+    </head>
+    <body>
+        <!-- Le contenu visible de la page -->
+    </body>
+</html>
+```
+
+| Element | Role |
+|---------|------|
+| `<!DOCTYPE html>` | Indique qu'il s'agit d'une page HTML5 |
+| `<html>` | Balise principale qui englobe tout le contenu |
+| `<head>` | En-tete : informations pour le navigateur (non affichees) |
+| `<meta charset="utf-8" />` | Encodage des caracteres (accents, etc.) |
+| `<title>` | Titre affiche dans l'onglet du navigateur |
+| `<body>` | Corps de la page : tout ce qui est affiche |
+
+### Exercice 2.1
+
+En observant le fichier `index.html` dans Notepad++ :
+
+1. Reperer les lignes correspondant au conteneur d'en-tete (`<head>`).
+2. Quel est le titre de la page ? Ou apparait-il dans le navigateur ?
+3. Modifier ce titre et rafraichir la page dans le navigateur (touche F5). Que constatez-vous ?
+4. Que se passe-t-il si vous supprimez la ligne `<meta charset="utf-8" />` ? (Testez puis remettez-la !)
+
+---
+
+## Partie 3 : Les balises de contenu 
+
+### Les titres
+
+HTML propose 6 niveaux de titres, de `<h1>` (le plus grand) a `<h6>` (le plus petit) :
+
+```html
+<h1>Titre principal</h1>
+<h2>Sous-titre</h2>
+<h3>Sous-sous-titre</h3>
+```
+
+### Exercice 3.1
+
+Dans le fichier `index.html`, changez le `<h1>` en `<h2>`. Observez le resultat dans le navigateur. Remettez `<h1>`.
+
+### Les paragraphes et la mise en forme
+
+```html
+<p>Ceci est un paragraphe.</p>
+<p>Voici du texte <strong>en gras</strong> et du texte <em>en italique</em>.</p>
+```
+
+| Balise | Effet | Exemple |
+|--------|-------|---------|
+| `<p>` | Paragraphe | `<p>Un texte.</p>` |
+| `<strong>` | Texte important (gras) | `<strong>important</strong>` |
+| `<em>` | Texte mis en valeur (italique) | `<em>attention</em>` |
+| `<br />` | Retour a la ligne | `Ligne 1<br />Ligne 2` |
+| `<hr />` | Ligne horizontale de separation | `<hr />` |
+
+> **Bonne pratique** : Utilisez `<strong>` plutot que `<b>` et `<em>` plutot que `<i>`. Ces balises sont plus modernes et accessibles.
+
+### Exercice 3.2
+
+Dans le fichier `index.html`, reperer la phrase avec "Le ciel est bleu comme la mer". Comment le mot "mer" est-il mis en gras ?
+
+### Les listes
+
+```html
+<!-- Liste non ordonnee (puces) -->
+<ul>
+    <li>Premier element</li>
+    <li>Deuxieme element</li>
+</ul>
+
+<!-- Liste ordonnee (numerotee) -->
+<ol>
+    <li>Etape 1</li>
+    <li>Etape 2</li>
+</ol>
+```
+
+### Les liens hypertextes
+
+Les liens permettent de naviguer entre les pages. C'est le principe fondamental du Web !
+
+```html
+<a href="https://fr.wikipedia.org">Aller sur Wikipedia</a>
+```
+
+- `href` : l'adresse (URL) vers laquelle le lien pointe
+- Le texte entre `<a>` et `</a>` : ce qui est affiche et cliquable
+
+### Les images
+
+```html
+<img src="images/photo.jpg" alt="Description de l'image" />
+```
+
+- `src` : chemin vers le fichier image
+- `alt` : texte alternatif (affiche si l'image ne charge pas, utile pour l'accessibilite)
+
+### Exercice 3.3
+
+Dans le fichier `index.html`, observez la section "Les grands noms de l'informatique" :
+
+1. Combien de liens y a-t-il dans cette liste ?
+2. Cliquez sur un lien. Vers quelle page mene-t-il ?
+3. Quel attribut contient l'adresse du lien ?
+4. Quel attribut affiche une info-bulle au survol de la souris ?
+
+### Les tableaux
+
+```html
+<table>
+    <tr>
+        <th>En-tete 1</th>
+        <th>En-tete 2</th>
+    </tr>
+    <tr>
+        <td>Donnee 1</td>
+        <td>Donnee 2</td>
+    </tr>
+</table>
+```
+
+| Balise | Role |
+|--------|------|
+| `<table>` | Definit le tableau |
+| `<tr>` | Definit une ligne (table row) |
+| `<th>` | Cellule d'en-tete (table header) |
+| `<td>` | Cellule de donnees (table data) |
+
+---
+
+## Partie 4 : Decouvrir le CSS 
+
+### Le lien entre HTML et CSS
+
+Dans le `<head>` du fichier `index.html`, reperer cette ligne :
+
+```html
+<link rel="stylesheet" href="style.css" />
+```
+
+C'est elle qui relie la page HTML a sa feuille de style CSS.
+
+### Exercice 4.1
+
+1. Supprimez cette ligne dans Notepad++, sauvegardez, et rafraichissez la page. Que se passe-t-il ?
+2. Remettez la ligne et sauvegardez.
+
+### Le fichier CSS
+
+Ouvrez le fichier `tp/1/style.css` dans Notepad++. Le CSS fonctionne ainsi :
+
+```css
+selecteur {
+    propriete: valeur;
+}
+```
+
+Exemple :
+```css
+h1 {
+    color: blue;        /* couleur du texte */
+    font-size: 32px;    /* taille du texte */
+    background-color: #76d7c4;  /* couleur de fond */
+}
+```
+
+### Exercice 4.2
+
+1. Dans `style.css`, trouvez la regle qui s'applique aux balises `<h1>`. Quelle est la couleur du texte ?
+2. Modifiez la couleur du `<h1>` en bleu (`color: blue;`). Sauvegardez et rafraichissez.
+3. Dans le CSS, ajoutez une regle pour les paragraphes :
+
+```css
+p {
+    color: darkgreen;
+    font-size: 16px;
+}
+```
+
+4. Sauvegardez et observez le resultat.
+
+> **Pour choisir des couleurs** : vous pouvez utiliser des noms (`red`, `blue`, `navy`...) ou des codes hexadecimaux (`#FF0000`, `#0000FF`...). Voir : https://htmlcolorcodes.com/fr/
+
+---
+
+## Partie 5 : Synthese (10 min)
+
+### Exercice final : Completer le tableau des balises
+
+Dans le fichier `tp/1/index.html`, vous trouverez un tableau intitule "Les balises HTML que j'ai decouvertes". Les deux premieres lignes sont deja remplies.
+
+**Completez les lignes restantes** en vous aidant de ce que vous avez appris durant ce TP.
+
+Pour chaque balise, indiquez :
+- Sa **description** (a quoi elle sert)
+- Un **exemple d'utilisation** (un petit bout de code)
+
+Les balises a completer : `<h1>` a `<h6>`, `<br />`, `<strong>`, `<ul>`, `<ol>`, `<li>`, `<dl>`, `<table>`, `<a>`, `<img />`, `<hr />`.
+
+### Aide
+
+| Balise | Description |
+|--------|-------------|
+| `<h1>` a `<h6>` | Titres de niveau 1 (le plus grand) a 6 (le plus petit) |
+| `<br />` | Retour a la ligne |
+| `<strong>` | Texte important, affiche en gras |
+| `<ul>` | Liste non ordonnee (a puces) |
+| `<ol>` | Liste ordonnee (numerotee) |
+| `<li>` | Element d'une liste |
+| `<dl>` | Liste de definitions |
+| `<table>` | Tableau |
+| `<a>` | Lien hypertexte |
+| `<img />` | Image |
+| `<hr />` | Ligne horizontale de separation |
+
+---
+
+ <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ces cours sont mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.

sequences/web/tp/tp2_experience_utilisateur.md

@@ -0,0 +1,251 @@
+# TP 2 : L'experience utilisateur (UX)
+
+
+
+---
+
+## Objectifs
+
+- Comprendre ce qu'est l'experience utilisateur (UX)
+- Savoir evaluer la qualite d'un site web
+- Identifier les bonnes et mauvaises pratiques de conception web
+- Developper un regard critique sur les interfaces numeriques
+
+---
+
+## Partie 1 : Qu'est-ce que l'UX ? (10 min)
+
+### Definition
+
+**L'experience utilisateur** (en anglais *User eXperience*, abregee **UX**) designe la qualite de l'experience vecue par une personne lorsqu'elle utilise un site web, une application ou un produit numerique.
+
+Une bonne UX, c'est quand :
+- On trouve facilement ce qu'on cherche
+- Le site est agreable a utiliser
+- On n'est pas perdu dans la navigation
+- Le site fonctionne bien sur tous les appareils
+
+### Les 4 criteres essentiels
+
+| Critere | Question a se poser | Exemple |
+|---------|---------------------|---------|
+| **Lisibilite** | Le texte est-il facile a lire ? | Taille de police suffisante, contraste texte/fond |
+| **Navigation** | Trouve-t-on facilement ce qu'on cherche ? | Menu clair, fil d'Ariane, liens visibles |
+| **Rapidite** | Le site charge-t-il vite ? | Pas d'attente excessive, images optimisees |
+| **Adaptabilite** | Le site s'affiche-t-il bien sur mobile ? | Design responsive, boutons assez grands |
+
+### Exercice 1.1
+
+Repondez aux questions suivantes :
+
+1. Citez un site web que vous trouvez agreable a utiliser. Pourquoi ?
+2. Citez un site web que vous trouvez penible a utiliser. Pourquoi ?
+3. Parmi les 4 criteres ci-dessus, lequel vous semble le plus important ? Justifiez.
+
+---
+
+## Partie 2 : Analyse de sites web (25 min)
+
+### Consigne
+
+Vous allez evaluer **3 sites web** en utilisant la grille d'evaluation ci-dessous. Pour chaque site, attribuez une note de 1 a 5 pour chaque critere.
+
+**Echelle de notation :**
+- 1 = Tres mauvais
+- 2 = Mauvais
+- 3 = Moyen
+- 4 = Bon
+- 5 = Tres bon
+
+### Sites a evaluer
+
+| N. | Site | Adresse |
+|----|------|---------|
+| 1 | Wikipedia | https://fr.wikipedia.org |
+| 2 | Site du lycee | https://charlotteperriand.etab.ac-lille.fr |
+| 3 | Un site de votre choix | (jeu video, sport, musique...) |
+
+### Grille d'evaluation
+
+Recopiez et completez ce tableau pour **chacun des 3 sites** :
+
+**Site 1 : Wikipedia**
+
+| Critere | Note /5 | Justification |
+|---------|---------|---------------|
+| Lisibilite | | |
+| Navigation | | |
+| Rapidite | | |
+| Adaptabilite (testez en redimensionnant la fenetre) | | |
+| **Total** | **/20** | |
+
+**Site 2 : Site du lycee**
+
+| Critere | Note /5 | Justification |
+|---------|---------|---------------|
+| Lisibilite | | |
+| Navigation | | |
+| Rapidite | | |
+| Adaptabilite | | |
+| **Total** | **/20** | |
+
+**Site 3 : ..................**
+
+| Critere | Note /5 | Justification |
+|---------|---------|---------------|
+| Lisibilite | | |
+| Navigation | | |
+| Rapidite | | |
+| Adaptabilite | | |
+| **Total** | **/20** | |
+
+### Questions de synthese
+
+4. Quel site a obtenu la meilleure note ? Pourquoi selon vous ?
+5. Pour le site le moins bien note, proposez **2 ameliorations concretes**.
+6. Pour tester l'adaptabilite mobile, vous avez redimensionne la fenetre. Connaissez-vous une autre methode ? (Indice : outils de developpement du navigateur, touche F12)
+
+---
+
+## Partie 3 : Bonnes et mauvaises pratiques (15 min)
+
+### Comparaison avant/apres
+
+Voici des exemples de **mauvaises pratiques** courantes et comment les corriger :
+
+#### Exemple 1 : La lisibilite
+
+**Mauvais** :
+```
+Texte jaune sur fond blanc, police taille 10px, pas d'espacement.
+Tout est colle, illisible, fatigant pour les yeux.
+```
+
+**Bon** :
+```
+Texte sombre sur fond clair, police taille 16px, interlignes aeres.
+Le texte respire, on a envie de lire.
+```
+
+**Regle** : Toujours avoir un bon **contraste** entre le texte et le fond. La taille minimale recommandee est **16px**.
+
+#### Exemple 2 : La navigation
+
+**Mauvais** :
+- Pas de menu visible
+- Liens caches ou non cliquables
+- On ne sait pas ou on est dans le site
+
+**Bon** :
+- Menu toujours visible en haut de page
+- Liens soulignes ou en couleur
+- Fil d'Ariane ("Accueil > Rubrique > Page")
+
+**Regle** : L'utilisateur doit toujours savoir **ou il est** et **comment revenir en arriere**.
+
+#### Exemple 3 : L'adaptabilite mobile
+
+**Mauvais** :
+- Le site deborde de l'ecran sur telephone
+- Il faut zoomer pour lire le texte
+- Les boutons sont trop petits pour etre cliques au doigt
+
+**Bon** :
+- Le contenu s'adapte a la taille de l'ecran
+- Le texte reste lisible sans zoom
+- Les boutons sont assez grands (minimum 44x44 pixels)
+
+**Regle** : Plus de la moitie du trafic web se fait sur mobile. Un site **doit** s'adapter a toutes les tailles d'ecran.
+
+### Exercice 3.1
+
+Pour chaque situation, indiquez s'il s'agit d'une **bonne** ou **mauvaise** pratique :
+
+| Situation | Bonne / Mauvaise ? |
+|-----------|---------------------|
+| Un menu de navigation avec 25 liens | |
+| Un bouton "Retour en haut" sur une longue page | |
+| Du texte gris clair sur fond blanc | |
+| Des images qui mettent 10 secondes a charger | |
+| Un formulaire qui indique clairement les erreurs en rouge | |
+| Un site qui fonctionne uniquement sur ordinateur | |
+| Un lien qui change de couleur quand on l'a deja visite | |
+| Une page d'accueil avec 3 pop-ups publicitaires | |
+
+---
+
+## Partie 4 : Quiz recapitulatif (10 min)
+
+Repondez aux questions suivantes :
+
+**Question 1** : Que signifie UX ?
+- a) Universal eXchange
+- b) User eXperience
+- c) Ultra eXpress
+- d) Unified eXtension
+
+**Question 2** : Quelle taille de police minimale est recommandee pour le texte d'un site web ?
+- a) 8px
+- b) 12px
+- c) 16px
+- d) 24px
+
+**Question 3** : Pourquoi est-il important qu'un site s'adapte aux mobiles ?
+- a) Parce que c'est plus joli
+- b) Parce que plus de la moitie du trafic web est sur mobile
+- c) Parce que Google l'exige
+- d) Ce n'est pas important
+
+**Question 4** : Lequel de ces elements ameliore la navigation ?
+- a) Supprimer le menu
+- b) Ajouter un fil d'Ariane
+- c) Mettre tous les liens en noir sans soulignement
+- d) Cacher le bouton retour
+
+**Question 5** : Un bon contraste signifie :
+- a) Texte et fond de la meme couleur
+- b) Texte clair sur fond clair
+- c) Texte sombre sur fond clair (ou inversement)
+- d) Utiliser uniquement du noir et blanc
+
+**Question 6** : Quel outil du navigateur permet de simuler un affichage mobile ?
+- a) Le gestionnaire de telechargements
+- b) Les outils de developpement (F12)
+- c) Le mode navigation privee
+- d) Le gestionnaire de favoris
+
+---
+
+## Correction
+
+<details>
+<summary><strong>Correction Exercice 3.1</strong></summary>
+
+| Situation | Reponse |
+|-----------|---------|
+| Un menu de navigation avec 25 liens | **Mauvaise** - Trop de choix, le menu doit etre simplifie |
+| Un bouton "Retour en haut" sur une longue page | **Bonne** - Facilite la navigation |
+| Du texte gris clair sur fond blanc | **Mauvaise** - Contraste insuffisant, illisible |
+| Des images qui mettent 10 secondes a charger | **Mauvaise** - Trop lent, les images doivent etre optimisees |
+| Un formulaire qui indique clairement les erreurs en rouge | **Bonne** - L'utilisateur comprend ce qu'il doit corriger |
+| Un site qui fonctionne uniquement sur ordinateur | **Mauvaise** - Doit etre adaptatif (responsive) |
+| Un lien qui change de couleur quand on l'a deja visite | **Bonne** - L'utilisateur sait ou il est deja alle |
+| Une page d'accueil avec 3 pop-ups publicitaires | **Mauvaise** - Intrusif et desagreable |
+
+</details>
+
+<details>
+<summary><strong>Correction Quiz</strong></summary>
+
+1. **b) User eXperience**
+2. **c) 16px**
+3. **b) Parce que plus de la moitie du trafic web est sur mobile**
+4. **b) Ajouter un fil d'Ariane**
+5. **c) Texte sombre sur fond clair (ou inversement)**
+6. **b) Les outils de developpement (F12)**
+
+</details>
+
+---
+
+ <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ces cours sont mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.

sequences/web/tp/tp3_css_ma_page.md

@@ -0,0 +1,287 @@
+# TP 3 : Ma premiere page web en CSS
+
+
+
+---
+
+## Objectifs
+
+- Creer une page web personnelle en HTML
+- Decouvrir le CSS pour la mise en forme
+- Appliquer des couleurs, des polices, des bordures et des marges
+- Decouvrir les balises semantiques HTML5
+
+---
+
+## Presentation du projet
+
+Vous allez creer **votre propre page web** sur le theme de votre choix :
+- Un sport
+- Un artiste ou un genre de musique
+- Un pays ou une destination de voyage
+- Un jeu video
+- Tout autre sujet qui vous passionne !
+
+Vous partirez d'un fichier HTML de base (`tp3_template.html`) et d'un fichier CSS (`tp3_style.css`) que vous allez completer etape par etape.
+
+### Preparation
+
+1. Ouvrez les fichiers `tp3_template.html` et `tp3_style.css` dans **Notepad++**
+2. Ouvrez `tp3_template.html` dans votre navigateur
+3. A chaque modification, sauvegardez dans Notepad++ (Ctrl+S) puis rafraichissez le navigateur (F5)
+
+---
+
+## Etape 1 : La structure HTML (15 min)
+
+### Consigne
+
+Ouvrez le fichier `tp3_template.html`. Vous verrez une structure de base deja en place. Votre travail est de **remplir le contenu** selon votre theme.
+
+### A faire
+
+1. **Modifiez le titre** de la page (balise `<title>`) avec le nom de votre sujet
+2. **Modifiez le titre principal** (`<h1>`) avec le nom de votre sujet
+3. **Redigez le premier paragraphe** : presentez votre sujet en 2-3 phrases
+4. **Completez la section "Pourquoi j'aime..."** :
+   - Modifiez le sous-titre `<h2>`
+   - Ajoutez au moins **3 elements** dans la liste `<ul>`
+5. **Ajoutez une image** :
+   - Trouvez une image libre de droits sur Internet
+   - Enregistrez-la dans le meme dossier que votre fichier HTML
+   - Completez la balise `<img>` avec le bon chemin et une description
+6. **Ajoutez des liens** :
+   - Dans la section "Pour en savoir plus", ajoutez au moins **2 liens** vers des sites en rapport avec votre sujet
+
+### Verifiez !
+
+Sauvegardez et rafraichissez le navigateur. Votre page doit afficher :
+- Un titre
+- Un paragraphe de presentation
+- Une liste a puces
+- Une image
+- Des liens cliquables
+
+---
+
+## Etape 2 : Decouvrir le CSS (15 min)
+
+### Comment ca marche ?
+
+Le fichier `tp3_style.css` est deja lie a votre page HTML grace a cette ligne dans le `<head>` :
+
+```html
+<link rel="stylesheet" href="tp3_style.css" />
+```
+
+Le CSS s'ecrit sous cette forme :
+
+```css
+selecteur {
+    propriete: valeur;
+}
+```
+
+Le **selecteur** cible un element HTML. La **propriete** definit ce qu'on modifie. La **valeur** definit comment on le modifie.
+
+### A faire
+
+Ouvrez `tp3_style.css` et effectuez les modifications suivantes :
+
+**1. Couleur de fond de la page**
+
+Trouvez la regle `body` et modifiez la couleur de fond (`background-color`). Choisissez une couleur qui correspond a votre theme !
+
+Exemples de couleurs :
+- `#f0f8ff` (bleu tres clair)
+- `#fff8dc` (creme)
+- `#f0fff0` (vert tres clair)
+- `#fff0f5` (rose tres clair)
+
+> Outil pratique : https://htmlcolorcodes.com/fr/
+
+**2. Couleur et police du titre**
+
+Modifiez la regle `h1` :
+- Changez la couleur du texte avec `color`
+- Changez la police avec `font-family` (exemples : `Arial`, `Georgia`, `Verdana`, `"Trebuchet MS"`)
+
+**3. Couleur du texte**
+
+Modifiez la regle `p` pour changer la couleur des paragraphes.
+
+**4. Style des liens**
+
+Modifiez la regle `a` pour changer la couleur des liens. Essayez aussi d'enlever le soulignement :
+
+```css
+a {
+    color: darkorange;
+    text-decoration: none;
+}
+```
+
+### Verifiez !
+
+Votre page devrait maintenant avoir :
+- Une couleur de fond personnalisee
+- Un titre colore avec une police de votre choix
+- Des paragraphes d'une couleur harmonieuse
+- Des liens d'une couleur differente
+
+---
+
+## Etape 3 : Ameliorer la presentation (15 min)
+
+### Les marges
+
+En CSS, deux proprietes controlent l'espace autour des elements :
+- **`margin`** : espace **exterieur** (entre l'element et ses voisins)
+- **`padding`** : espace **interieur** (entre le bord de l'element et son contenu)
+
+```
++------ margin ------+
+|  +--- padding ---+ |
+|  |   Contenu     | |
+|  +---------------+ |
++--------------------+
+```
+
+### A faire
+
+**1. Ajoutez du padding au body** pour que le contenu ne colle pas aux bords :
+
+```css
+body {
+    /* ... vos proprietes existantes ... */
+    padding: 20px 40px;
+}
+```
+
+**2. Ajoutez une bordure et un fond au titre** :
+
+```css
+h1 {
+    /* ... vos proprietes existantes ... */
+    background-color: #333;
+    color: white;
+    padding: 15px;
+    border-radius: 8px;
+    text-align: center;
+}
+```
+
+**3. Mettez en forme l'image** :
+
+```css
+img {
+    border: 3px solid #333;
+    border-radius: 10px;
+    max-width: 400px;
+}
+```
+
+`max-width: 400px` empeche l'image d'etre trop grande. `border-radius` arrondit les coins.
+
+**4. Stylisez la liste** :
+
+Ajoutez cette regle dans votre CSS :
+
+```css
+ul {
+    background-color: #eee;
+    padding: 15px 30px;
+    border-radius: 5px;
+}
+```
+
+### Verifiez !
+
+Votre page devrait maintenant etre bien plus agreable visuellement, avec des espaces, des bordures et des couleurs harmonieuses.
+
+---
+
+## Etape 4 : Les sections HTML5 (15 min)
+
+### Introduction aux balises semantiques
+
+HTML5 propose des balises qui donnent du **sens** a la structure de la page :
+
+| Balise | Role |
+|--------|------|
+| `<header>` | En-tete de la page (titre, logo, banniere) |
+| `<nav>` | Zone de navigation (menu, liens principaux) |
+| `<main>` | Contenu principal de la page |
+| `<footer>` | Pied de page (auteur, mentions, liens secondaires) |
+
+Ces balises fonctionnent comme des `<div>` mais elles indiquent clairement le role de chaque section.
+
+### A faire
+
+Dans votre fichier HTML, reorganisez votre page avec ces balises :
+
+1. **Entourez votre titre `<h1>` avec `<header>`** :
+
+```html
+<header>
+    <h1>Mon sujet</h1>
+</header>
+```
+
+2. **Ajoutez un `<footer>` en bas de page** :
+
+```html
+<footer>
+    <p>Page creee par [votre prenom] - SNT 2025</p>
+</footer>
+```
+
+3. **Stylisez le footer** dans votre CSS :
+
+```css
+footer {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 10px;
+    margin-top: 30px;
+    border-radius: 5px;
+}
+```
+
+---
+
+## Bonus : Creer une deuxieme page
+
+Si vous avez termine en avance, voici un defi supplementaire :
+
+1. **Creez un nouveau fichier** `page2.html` avec la meme structure de base (copiez `tp3_template.html`)
+2. **Liez-le au meme CSS** (`tp3_style.css`)
+3. **Ajoutez du contenu** sur un aspect precis de votre sujet (par exemple : les regles d'un sport, la discographie d'un artiste, les personnages d'un jeu video...)
+4. **Reliez les deux pages** avec des liens :
+   - Dans `tp3_template.html`, ajoutez : `<a href="page2.html">Voir la page 2</a>`
+   - Dans `page2.html`, ajoutez : `<a href="tp3_template.html">Retour a l'accueil</a>`
+
+Felicitations, vous avez cree votre premier **site web** de plusieurs pages !
+
+---
+
+## Recapitulatif des proprietes CSS vues dans ce TP
+
+| Propriete | Effet | Exemple |
+|-----------|-------|---------|
+| `background-color` | Couleur de fond | `background-color: #f0f0f0;` |
+| `color` | Couleur du texte | `color: navy;` |
+| `font-family` | Police de caracteres | `font-family: Arial;` |
+| `font-size` | Taille du texte | `font-size: 18px;` |
+| `text-align` | Alignement du texte | `text-align: center;` |
+| `text-decoration` | Decoration (soulignement...) | `text-decoration: none;` |
+| `padding` | Espace interieur | `padding: 10px;` |
+| `margin` | Espace exterieur | `margin: 20px;` |
+| `border` | Bordure | `border: 2px solid black;` |
+| `border-radius` | Coins arrondis | `border-radius: 8px;` |
+| `max-width` | Largeur maximale | `max-width: 400px;` |
+
+---
+
+ <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ces cours sont mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.

sequences/web/tp/tp3_style.css

@@ -0,0 +1,32 @@
+/* === Couleur de fond de la page === */
+body {
+    background-color: #f5f5f5;
+    font-family: Arial, sans-serif;
+}
+
+/* === Titre principal === */
+h1 {
+    color: #333;
+    font-size: 32px;
+}
+
+/* === Sous-titres === */
+h2 {
+    color: #555;
+}
+
+/* === Paragraphes === */
+p {
+    color: #333;
+    font-size: 16px;
+}
+
+/* === Liens === */
+a {
+    color: blue;
+}
+
+/* === Images === */
+img {
+    max-width: 300px;
+}

sequences/web/tp/tp3_template.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="tp3_style.css" />
+        <title>Ma page - [Votre sujet]</title>
+    </head>
+    <body>
+
+        <!-- Titre principal de votre page -->
+        <h1>[Le titre de votre sujet]</h1>
+
+        <!-- Paragraphe de presentation -->
+        <h2>Presentation</h2>
+        <p>
+            [Ecrivez ici 2 a 3 phrases pour presenter votre sujet.
+            De quoi s'agit-il ? Pourquoi avez-vous choisi ce theme ?]
+        </p>
+
+        <!-- Une image en rapport avec votre sujet -->
+        <img src="[nom_de_votre_image.jpg]" alt="[Description de l'image]" />
+
+        <!-- Liste de ce que vous aimez -->
+        <h2>Pourquoi j'aime [votre sujet]</h2>
+        <ul>
+            <li>[Raison 1]</li>
+            <li>[Raison 2]</li>
+            <li>[Raison 3]</li>
+        </ul>
+
+        <!-- Liens pour en savoir plus -->
+        <h2>Pour en savoir plus</h2>
+        <ul>
+            <li><a href="[URL du site 1]">[Nom du site 1]</a></li>
+            <li><a href="[URL du site 2]">[Nom du site 2]</a></li>
+        </ul>
+
+    </body>
+</html>