Web : questions et exercices dans des blocs question

2026-10-02 10:15:08 +02:00
parent cb4ac95f50
commit cd73524086
10 changed files with 556 additions and 467 deletions
@@ -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 ?
@@ -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
@@ -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)
@@ -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.
@@ -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.
@@ -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)
@@ -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)*
@@ -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.
@@ -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 :
@@ -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 :