Web : questions et exercices dans des blocs question

sequences/web/INTRODUCTION.md

@@ -27,7 +27,7 @@ D'autres services utilisent Internet sans être le Web :
 
 ---
 
-### Exercice 1 : Vrai ou Faux
+!!! question "Exercice 1 : Vrai ou Faux"
 
     Répondez par Vrai ou Faux :
 
@@ -63,7 +63,7 @@ Un **navigateur** est un logiciel qui permet d'afficher des pages web. Il interp
 
 ---
 
-### Exercice 2 : Parts de marché des navigateurs
+!!! question "Exercice 2 : Parts de marché des navigateurs"
 
     Faites une recherche sur Internet pour répondre aux questions suivantes :
 
@@ -146,7 +146,7 @@ C'est une partie du Web accessible uniquement via des logiciels spéciaux comme
 
 ---
 
-### Exercice 3 : Classez ces contenus
+!!! question "Exercice 3 : Classez ces contenus"
 
     Pour chaque élément, indiquez s'il appartient au **Surface Web**, au **Deep Web** ou au **Dark Web** :
 
@@ -206,7 +206,7 @@ En binôme, choisissez **un sujet** parmi les suivants et préparez une présent
 
 ---
 
-## Partie 5 : Quiz récapitulatif
+!!! question "Partie 5 : Quiz récapitulatif"
 
     1. Quelle est la différence entre Internet et le Web ?
 

sequences/web/activite_decouverte_web.md

@@ -8,7 +8,7 @@ Pour cela, vous devez mener l'enquête et répondre aux questions suivantes.
 
 ---
 
-## Partie 1 : Le suspect principal
+!!! question "Partie 1 : Le suspect principal"
 
     **Tim Berners-Lee** est considéré comme l'inventeur du Web.
 
@@ -21,7 +21,7 @@ Pour cela, vous devez mener l'enquête et répondre aux questions suivantes.
 
 ---
 
-## Partie 2 : La scène du crime (le premier site web)
+!!! question "Partie 2 : La scène du crime (le premier site web)"
 
     5. Quelle est l'adresse (URL) du tout premier site web de l'histoire ?
     6. Ce site existe-t-il encore aujourd'hui ? Allez le visiter !
@@ -32,7 +32,7 @@ Pour cela, vous devez mener l'enquête et répondre aux questions suivantes.
 
 ---
 
-## Partie 3 : Les complices (les technologies du Web)
+!!! question "Partie 3 : Les complices (les technologies du Web)"
 
     Tim Berners-Lee n'a pas seulement créé un site, il a inventé **3 technologies** qui fonctionnent ensemble.
 
@@ -44,7 +44,7 @@ Tim Berners-Lee n'a pas seulement créé un site, il a inventé **3 technologies
 
 ---
 
-## Partie 4 : Web vs Internet - L'alibi
+!!! question "Partie 4 : Web vs Internet - L'alibi"
 
     Attention, beaucoup de gens confondent **Web** et **Internet**. Ce n'est pas la même chose !
 
@@ -56,7 +56,7 @@ Attention, beaucoup de gens confondent **Web** et **Internet**. Ce n'est pas la
 
 ---
 
-## Partie 5 : Le mobile du crime
+!!! question "Partie 5 : Le mobile du crime"
 
     15. Pourquoi Tim Berners-Lee a-t-il décidé de rendre le Web **gratuit et libre** pour tout le monde ?
     16. Aurait-il pu devenir milliardaire s'il avait breveté son invention ?
@@ -64,7 +64,7 @@ Attention, beaucoup de gens confondent **Web** et **Internet**. Ce n'est pas la
 
 ---
 
-## Partie 6 : L'évolution (Timeline)
+!!! question "Partie 6 : L'évolution (Timeline)"
 
     Placez ces événements dans l'ordre chronologique (du plus ancien au plus récent) :
 
@@ -78,7 +78,7 @@ Placez ces événements dans l'ordre chronologique (du plus ancien au plus réce
 
 ---
 
-## Mission finale : Votre article
+!!! question "Mission finale : Votre article"
 
     Rédigez un court article (10-15 lignes) pour le magazine, avec :
     - Un titre accrocheur

sequences/web/activite_decouverte_web_correction.md

@@ -0,0 +1,91 @@
+# Enquête : Aux origines du Web - CORRECTION
+
+## Partie 1 : Le suspect principal
+
+1. **1989** (proposition initiale) / **1990** (première version fonctionnelle)
+2. **CERN** (Organisation européenne pour la recherche nucléaire), à **Genève, Suisse**
+3. Informaticien / Ingénieur en informatique
+4. Il voulait permettre aux scientifiques du CERN de **partager facilement leurs documents et recherches** entre eux, même s'ils utilisaient des ordinateurs différents. Le problème était la difficulté à accéder aux informations dispersées sur différentes machines.
+
+---
+
+## Partie 2 : La scène du crime
+
+5. **http://info.cern.ch/hypertext/WWW/TheProject.html**
+6. **Oui**, il est toujours en ligne (restauré par le CERN en 2013)
+7. Il expliquait ce qu'était le projet World Wide Web et comment l'utiliser
+8. Exemples : Simple, sobre, textuel / Minimaliste, basique, épuré / Noir, blanc, liens bleus
+
+---
+
+## Partie 3 : Les complices
+
+9. **HTML** (HyperText Markup Language) : langage de balisage qui permet de structurer le contenu d'une page web (titres, paragraphes, liens, images...)
+10. **URL** (Uniform Resource Locator) : adresse unique qui permet de localiser une ressource sur le Web. Exemple : https://www.wikipedia.org/wiki/Web
+11. **HTTP** (HyperText Transfer Protocol) : protocole de communication qui permet au navigateur et au serveur de s'échanger des informations (requêtes et réponses)
+
+**Bonus** : HTTPS = HTTP + S (Secure). Les données sont chiffrées, ce qui sécurise les échanges (important pour les mots de passe, paiements...)
+
+---
+
+## Partie 4 : Web vs Internet
+
+12. **Internet** : réseau mondial d'ordinateurs interconnectés. Créé dans les années **1960-1970** (ARPANET en 1969)
+13. **Le Web** : service qui fonctionne sur Internet, permettant de consulter des pages reliées par des liens hypertextes via un navigateur
+14. Exemples de services Internet qui ne sont pas le Web :
+    - Email (courrier électronique)
+    - Jeux en ligne (multijoueur)
+    - Messageries instantanées (WhatsApp, Discord...)
+    - Streaming (Spotify, Netflix utilisent des protocoles spécifiques)
+    - FTP (transfert de fichiers)
+    - VoIP (appels téléphoniques via Internet)
+
+---
+
+## Partie 5 : Le mobile du crime
+
+15. Tim Berners-Lee pensait que le Web devait être un **bien commun**, accessible à tous, pour favoriser le partage des connaissances et la collaboration mondiale
+16. **Oui**, certains estiment qu'il aurait pu devenir l'une des personnes les plus riches du monde
+17. **W3C** (World Wide Web Consortium) : organisation internationale fondée par Tim Berners-Lee en 1994. Son rôle est de développer les standards du Web (HTML, CSS, etc.) pour assurer son évolution et son interopérabilité
+
+---
+
+## Partie 6 : L'évolution (Timeline)
+
+Ordre chronologique :
+
+1. **1969** - Naissance d'Internet (ARPANET)
+2. **1989** - Invention du Web par Tim Berners-Lee
+3. **1998** - Création de Google
+4. **2001** - Création de Wikipédia
+5. **2004** - Création de Facebook
+6. **2006** - Premier tweet sur Twitter
+7. **2007** - Premier iPhone
+
+---
+
+## Critères d'évaluation de l'article
+
+- Titre accrocheur et pertinent
+- Introduction qui contextualise le sujet
+- Informations exactes (dates, noms, faits)
+- Distinction Web/Internet claire
+- Réflexion sur l'impact actuel
+- Qualité de la rédaction (orthographe, syntaxe)
+
+---
+
+## Notes pédagogiques
+
+**Objectifs de l'activité :**
+- Découvrir l'histoire du Web
+- Distinguer Web et Internet
+- Comprendre les 3 technologies fondamentales (HTML, URL, HTTP)
+- Développer les compétences de recherche documentaire
+- Réfléchir aux enjeux éthiques (gratuité, bien commun)
+
+**Prolongements possibles :**
+- Créer une première page HTML simple
+- Analyser l'URL d'un site pour identifier ses composants
+- Débat sur la neutralité du Net
+- Étude des évolutions du Web (Web 1.0, 2.0, 3.0)

sequences/web/activite_epoques.md

@@ -20,49 +20,49 @@ Ouvrez-les dans l'ordre, et gardez cette page de questions à côté.
 
 ---------
 
-### 1. 1995
+!!! question "1. 1995"
 
     1. Ouvrez le code source. Cherchez une balise `<style>` ou un fichier `.css`. Que constatez-vous ?
     2. Puisqu'il n'existe pas de feuille de style, où sont écrites les couleurs et les polices ? Donnez un exemple précis tiré du code.
     3. Le bas de page annonce « optimisee pour une resolution de 640x480 ». Mesurez la largeur de votre écran. Que cela vous dit-il des écrans de 1995 ?
     4. Cette page contient un tableau. À quoi sert-il ici ?
 
-### 2. 1998
+!!! question "2. 1998"
 
     5. Ouvrez le code source. Combien de balises `<table>` trouvez-vous ? À quoi servent-elles cette fois ?
     6. Le fond de la page est une seule petite image, répétée automatiquement. En 1998, la plupart des gens se connectaient avec un modem à 56 kbit/s, soit environ 7 ko par seconde. Expliquez pourquoi on préférait une petite image répétée plutôt qu'une grande image de fond.
     7. Repérez la balise `<marquee>`. Que fait-elle ? Cette balise est aujourd'hui abandonnée : à votre avis, pourquoi ?
     8. La page se dit « optimise pour Netscape Navigator 4.0 ». Que pensez-vous d'un site qui ne fonctionne bien que dans un seul navigateur ?
 
-### 3. 2002
+!!! question "3. 2002"
 
     9. Cherchez de nouveau la balise `<style>`. Elle existe cette fois. Qu'est-ce que cela change pour la personne qui écrit le site ?
     10. Malgré cette nouveauté, la mise en page repose toujours sur un tableau. Retrouvez-le dans le code.
     11. La page fait 760 pixels de large, et pas davantage. Comparez avec 1995 : qu'en déduisez-vous sur les écrans de 2002 ?
     12. Comparez visuellement 1998 et 2002. Quel mot choisiriez-vous pour décrire ce qui a changé ?
 
-### 4. 2005
+!!! question "4. 2005"
 
     13. Cette page n'est plus un site officiel, mais un blog personnel. Relevez trois éléments qui le montrent.
     14. Cliquez sur le bouton « Lecture ». Lisez le message affiché. Pourquoi les navigateurs ont-ils fini par interdire ce comportement ?
     15. Combien de couleurs différentes comptez-vous, à vue d'œil ? Et combien sur la page de 2002 ?
     16. Cette page est-elle agréable à lire ? Justifiez, en distinguant ce qui vous amuse de ce qui vous gêne.
 
-### 5. 2010
+!!! question "5. 2010"
 
     17. Les coins arrondis, les dégradés et les ombres de cette page ne sont pas des images : ils sont écrits en CSS. Retrouvez dans le code les mots `border-radius`, `gradient` et `shadow`.
     18. Avant 2010, ces effets s'obtenaient en découpant des images dans un logiciel de retouche. Quel avantage voyez-vous à les écrire en CSS ?
     19. Cherchez la balise `<table>`. Combien en trouvez-vous ? Comparez avec 1998.
     20. Réduisez la largeur de la fenêtre du navigateur, jusqu'à la moitié de l'écran. Que se passe-t-il ? Pourquoi, à votre avis ?
 
-### 6. 2020
+!!! question "6. 2020"
 
     21. Tout en haut du code, repérez la ligne qui commence par `<meta name="viewport"`. D'après le commentaire qui la précède, à quoi sert-elle ?
     22. Refaites le test de la question 20 sur cette page. Qu'observez-vous de différent ?
     23. Quel événement, entre 2010 et 2020, explique cette évolution ?
     24. Comparez la quantité de couleurs et d'effets avec la page de 2010. La tendance vous semble-t-elle aller vers le plus ou vers le moins ?
 
-### 7. 2026
+!!! question "7. 2026"
 
     25. Cette page s'adapte à un réglage de votre ordinateur. Changez le thème de votre système, ou de votre navigateur, de clair à sombre. Que se passe-t-il ?
     26. Le code contient une règle `prefers-reduced-motion`. Cherchez le commentaire qui l'accompagne et expliquez à qui elle sert.
@@ -70,7 +70,7 @@ Ouvrez-les dans l'ordre, et gardez cette page de questions à côté.
 
 ---------
 
-### Pour finir
+!!! question "Pour finir"
 
     28. Rangez les sept pages de la plus lisible à la moins lisible, selon vous. Comparez votre classement avec celui de votre voisin.
     29. Sur les sept, laquelle fonctionnerait encore correctement sur un téléphone ? Justifiez.

sequences/web/historique/README.md

@@ -16,9 +16,7 @@ Les différentes activités sont à réaliser par binôme, votre compte-rendu se
 
 -----------------
 
-## Activité 1 
-
-
+!!! question "Activité 1"
 
     Regardez la vidéo suivante et répondez aux questions ci-dessous.
 
@@ -46,7 +44,7 @@ Rappel : l'utilisation d'écouteurs est fortement conseillée !
 
 ---------------------------
 
-## Activité 2 
+!!! question "Activité 2"
 
     Regardez la vidéo suivante, et répondez aux questions ci-dessous.
 
@@ -74,7 +72,7 @@ Regardez la vidéo suivante, et répondez aux questions ci-dessous.
 
 
 
-## Activité 3
+!!! question "Activité 3"
 
     Même consigne que les exercices du dessus.
 

sequences/web/recherches/README.md

@@ -28,7 +28,7 @@ __Comment un moteur de recherche génère les résultats de recherche ?__
 
 ## 2. Principe de fonctionnement
 
-### 2.1. À Faire
+!!! question "2.1. À Faire"
 
     ✏ Répondre aux questions suivantes en vous aidant de la vidéo :
 
@@ -75,7 +75,7 @@ Notre utilisateur va se balader de pages en pages, en faisant son petit tour du
 
 Et à la fin, la page ayant le plus de point est alors la page la plus populaire du réseau !
 
-### 3.2. À Faire
+!!! question "3.2. À Faire"
 
     Le robot d’un moteur de recherche (spider, crawler) a permis d’établir les relations suivantes entre quatre pages web. Elles sont modélisées dans le graphe ci-dessous.
 
@@ -104,7 +104,7 @@ Dans ce graphe, la flèche allant de 1 vers 2 signifie que la page 1 référence
 
 ## 4. Analyse des résultats de recherche
 
-### 4.1. À Faire 
+!!! question "4.1. À Faire"
 
     1. ✏ Effectuer des recherches (c-a-d en saisissant les mêmes termes) en utilisant des moteurs de recherche tel que :
 
@@ -129,7 +129,7 @@ Cet achat permet d'obtenir un référencement dit « référencement payant »
 
 Le moteur de recherche peut afficher la publicité de deux manières : en encart séparé ou en l'intégrant aux résultats de la recherche.
 
-### 4.3 À Faire
+!!! question "4.3 À Faire"
 
     Répondre aux questions suivantes après lecture de [l'article](https://www.slate.fr/story/100441/brin-page-google-pub)
 

sequences/web/recherches/activite_moteurs_2026.md

@@ -13,7 +13,7 @@ Vous allez effectuer la **même recherche** sur 4 outils différents.
 | DuckDuckGo | Moteur sans tracking | [duckduckgo.com](https://duckduckgo.com) |
 | Perplexity | Moteur IA | [perplexity.ai](https://perplexity.ai) |
 
-✏ **Questions :**
+!!! question "Questions"
 
     1. Copiez le **titre et l'URL du premier résultat** pour chaque outil. Sont-ils identiques ?
     2. Google affiche-t-il un encart généré par une IA en haut des résultats ? Si oui, décrivez ce que vous voyez.
@@ -31,7 +31,7 @@ Un moteur de recherche fonctionne en **3 étapes** :
 >
 > **3. Le classement** : quand vous faites une recherche, un algorithme sélectionne et classe les pages les plus pertinentes.
 
-✏ **Questions :**
+!!! question "Questions"
 
     4. À quelle étape le robot visite-t-il les pages web ?
     5. Pourquoi un site sans aucun lien pointant vers lui serait-il difficile à trouver ?
@@ -43,7 +43,7 @@ Un moteur de recherche fonctionne en **3 étapes** :
 
 > Depuis 2009, Google personnalise les résultats de recherche selon votre profil : votre historique, votre localisation, vos habitudes en ligne. Deux personnes tapant les mêmes mots peuvent obtenir des résultats très différents. Ce phénomène s'appelle la **bulle de filtre** (*filter bubble*). Il peut avoir des conséquences sur la manière dont on se forge une opinion.
 
-✏ **Questions :**
+!!! question "Questions"
 
     7. Expliquez avec vos propres mots ce qu'est une bulle de filtre.
     8. Donnez un exemple concret de situation où la bulle de filtre pourrait poser un problème.
@@ -58,7 +58,7 @@ Un moteur de recherche fonctionne en **3 étapes** :
 > - La **publicité ciblée** : les annonceurs paient pour apparaître en haut des résultats sur certains mots-clés.
 > - La **collecte de données** : chaque recherche, chaque clic permet à Google de mieux connaître ses utilisateurs pour mieux cibler les publicités.
 
-✏ **Questions :**
+!!! question "Questions"
 
     10. Comment reconnaît-on un résultat **payant** d'un résultat **naturel** (organique) dans Google ?
     11. En quoi le modèle économique de Google peut-il influencer les résultats que vous voyez ?
@@ -70,7 +70,7 @@ Un moteur de recherche fonctionne en **3 étapes** :
 
 > Depuis 2023, des outils comme **Perplexity**, **Bing Copilot** ou les **AI Overviews de Google** utilisent des intelligences artificielles pour répondre directement aux questions, au lieu de lister des liens. C'est une rupture majeure dans l'histoire du web.
 
-✏ **Questions :**
+!!! question "Questions"
 
     13. Quel est, selon vous, le principal **avantage** d'un moteur IA par rapport à un moteur classique ?
     14. Quel est le principal **risque** d'utiliser un moteur IA pour s'informer ? *(Aide : cherchez ce qu'est une "hallucination" d'IA)*

sequences/web/tp/tp1_decouverte_html.md

@@ -25,7 +25,7 @@ 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 !
+!!! question "A vous !"
 
     Ouvrez le site du lycee dans votre navigateur. Faites un **clic droit** sur la page, puis choisissez **"Afficher le code source"**.
 
@@ -67,7 +67,7 @@ Toute page HTML5 respecte cette structure de base :
 | `<title>` | Titre affiche dans l'onglet du navigateur |
 | `<body>` | Corps de la page : tout ce qui est affiche |
 
-### Exercice 2.1
+!!! question "Exercice 2.1"
 
     En observant le fichier `index.html` dans Notepad++ :
 
@@ -90,7 +90,7 @@ HTML propose 6 niveaux de titres, de `<h1>` (le plus grand) a `<h6>` (le plus pe
 <h3>Sous-sous-titre</h3>
 ```
 
-### Exercice 3.1
+!!! question "Exercice 3.1"
 
     Dans le fichier `index.html`, changez le `<h1>` en `<h2>`. Observez le resultat dans le navigateur. Remettez `<h1>`.
 
@@ -111,7 +111,7 @@ Dans le fichier `index.html`, changez le `<h1>` en `<h2>`. Observez le resultat
 
 > **Bonne pratique** : Utilisez `<strong>` plutot que `<b>` et `<em>` plutot que `<i>`. Ces balises sont plus modernes et accessibles.
 
-### Exercice 3.2
+!!! question "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 ?
 
@@ -151,7 +151,7 @@ Les liens permettent de naviguer entre les pages. C'est le principe fondamental
 - `src` : chemin vers le fichier image
 - `alt` : texte alternatif (affiche si l'image ne charge pas, utile pour l'accessibilite)
 
-### Exercice 3.3
+!!! question "Exercice 3.3"
 
     Dans le fichier `index.html`, observez la section "Les grands noms de l'informatique" :
 
@@ -196,7 +196,7 @@ Dans le `<head>` du fichier `index.html`, reperer cette ligne :
 
 C'est elle qui relie la page HTML a sa feuille de style CSS.
 
-### Exercice 4.1
+!!! question "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.
@@ -220,7 +220,7 @@ h1 {
 }
 ```
 
-### Exercice 4.2
+!!! question "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.
@@ -241,7 +241,7 @@ p {
 
 ## Partie 5 : Synthese (10 min)
 
-### Exercice final : Completer le tableau des balises
+!!! question "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.
 

sequences/web/tp/tp2_experience_utilisateur.md

@@ -34,7 +34,7 @@ Une bonne UX, c'est quand :
 | **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
+!!! question "Exercice 1.1"
 
     Repondez aux questions suivantes :
 
@@ -46,7 +46,7 @@ Repondez aux questions suivantes :
 
 ## Partie 2 : Analyse de sites web (25 min)
 
-### Consigne
+!!! question "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.
 
@@ -65,7 +65,7 @@ Vous allez evaluer **3 sites web** en utilisant la grille d'evaluation ci-dessou
 | 2 | Site du lycee | https://charlotteperriand.etab.ac-lille.fr |
 | 3 | Un site de votre choix | (jeu video, sport, musique...) |
 
-### Grille d'evaluation
+!!! question "Grille d'evaluation"
 
     Recopiez et completez ce tableau pour **chacun des 3 sites** :
 
@@ -99,7 +99,7 @@ Recopiez et completez ce tableau pour **chacun des 3 sites** :
     | Adaptabilite | | |
     | **Total** | **/20** | |
 
-### Questions de synthese
+!!! question "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**.
@@ -157,7 +157,7 @@ Le texte respire, on a envie de lire.
 
 **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
+!!! question "Exercice 3.1"
 
     Pour chaque situation, indiquez s'il s'agit d'une **bonne** ou **mauvaise** pratique :
 
@@ -174,7 +174,7 @@ Pour chaque situation, indiquez s'il s'agit d'une **bonne** ou **mauvaise** prat
 
 ---
 
-## Partie 4 : Quiz recapitulatif (10 min)
+!!! question "Partie 4 : Quiz recapitulatif (10 min)"
 
     Repondez aux questions suivantes :
 

sequences/web/tp/tp3_css_ma_page.md

@@ -38,7 +38,7 @@ Vous partirez d'un fichier HTML de base (`tp3_template.html`) et d'un fichier CS
 
 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
+!!! question "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
@@ -84,7 +84,7 @@ selecteur {
 
 Le **selecteur** cible un element HTML. La **propriete** definit ce qu'on modifie. La **valeur** definit comment on le modifie.
 
-### A faire
+!!! question "A faire"
 
     Ouvrez `tp3_style.css` et effectuez les modifications suivantes :
 
@@ -147,7 +147,7 @@ En CSS, deux proprietes controlent l'espace autour des elements :
 +--------------------+
 ```
 
-### A faire
+!!! question "A faire"
 
     **1. Ajoutez du padding au body** pour que le contenu ne colle pas aux bords :
 
@@ -216,7 +216,7 @@ HTML5 propose des balises qui donnent du **sens** a la structure de la page :
 
 Ces balises fonctionnent comme des `<div>` mais elles indiquent clairement le role de chaque section.
 
-### A faire
+!!! question "A faire"
 
     Dans votre fichier HTML, reorganisez votre page avec ces balises :
 
@@ -251,7 +251,7 @@ footer {
 
 ---
 
-## Bonus : Creer une deuxieme page
+!!! question "Bonus : Creer une deuxieme page"
 
     Si vous avez termine en avance, voici un defi supplementaire :