Web : questions et exercices dans des blocs question
This commit is contained in:
@@ -27,16 +27,16 @@ 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 :
|
||||
Répondez par Vrai ou Faux :
|
||||
|
||||
1. Internet et le Web sont synonymes.
|
||||
2. Le Web a été inventé avant Internet.
|
||||
3. On peut utiliser Internet sans utiliser le Web.
|
||||
4. Les emails font partie du Web.
|
||||
5. Le Web utilise le protocole HTTP.
|
||||
6. Internet est un réseau de réseaux.
|
||||
1. Internet et le Web sont synonymes.
|
||||
2. Le Web a été inventé avant Internet.
|
||||
3. On peut utiliser Internet sans utiliser le Web.
|
||||
4. Les emails font partie du Web.
|
||||
5. Le Web utilise le protocole HTTP.
|
||||
6. Internet est un réseau de réseaux.
|
||||
|
||||
---
|
||||
|
||||
@@ -63,14 +63,14 @@ 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 :
|
||||
Faites une recherche sur Internet pour répondre aux questions suivantes :
|
||||
|
||||
1. Quel est le navigateur le plus utilisé dans le monde en 2025 ? Quel est son pourcentage d'utilisation ?
|
||||
2. Quel est le navigateur le plus utilisé sur mobile ?
|
||||
3. Pourquoi la domination d'un seul navigateur peut-elle poser problème ?
|
||||
4. Qu'est-ce qu'un navigateur "open source" ? Citez-en deux.
|
||||
1. Quel est le navigateur le plus utilisé dans le monde en 2025 ? Quel est son pourcentage d'utilisation ?
|
||||
2. Quel est le navigateur le plus utilisé sur mobile ?
|
||||
3. Pourquoi la domination d'un seul navigateur peut-elle poser problème ?
|
||||
4. Qu'est-ce qu'un navigateur "open source" ? Citez-en deux.
|
||||
|
||||
---
|
||||
|
||||
@@ -146,22 +146,22 @@ 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** :
|
||||
Pour chaque élément, indiquez s'il appartient au **Surface Web**, au **Deep Web** ou au **Dark Web** :
|
||||
|
||||
| Contenu | Surface / Deep / Dark ? |
|
||||
|---------|-------------------------|
|
||||
| La page d'accueil de Google | |
|
||||
| Votre messagerie Pronote | |
|
||||
| Un article Wikipédia | |
|
||||
| Votre historique Netflix | |
|
||||
| Un forum accessible uniquement via Tor | |
|
||||
| Le site du lycée | |
|
||||
| Les résultats du bac sur Cyclades (avec identifiant) | |
|
||||
| Un blog personnel indexé par Google | |
|
||||
| Une base de données médicale d'hôpital | |
|
||||
| Un site de vente illégale en .onion | |
|
||||
| Contenu | Surface / Deep / Dark ? |
|
||||
|---------|-------------------------|
|
||||
| La page d'accueil de Google | |
|
||||
| Votre messagerie Pronote | |
|
||||
| Un article Wikipédia | |
|
||||
| Votre historique Netflix | |
|
||||
| Un forum accessible uniquement via Tor | |
|
||||
| Le site du lycée | |
|
||||
| Les résultats du bac sur Cyclades (avec identifiant) | |
|
||||
| Un blog personnel indexé par Google | |
|
||||
| Une base de données médicale d'hôpital | |
|
||||
| Un site de vente illégale en .onion | |
|
||||
|
||||
---
|
||||
|
||||
@@ -206,34 +206,34 @@ 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 ?
|
||||
1. Quelle est la différence entre Internet et le Web ?
|
||||
|
||||
2. Quel pourcentage du Web représente le Surface Web ?
|
||||
2. Quel pourcentage du Web représente le Surface Web ?
|
||||
- a) 90%
|
||||
- b) 50%
|
||||
- c) 4%
|
||||
- d) 25%
|
||||
|
||||
3. Votre compte Instagram (partie privée) fait partie :
|
||||
3. Votre compte Instagram (partie privée) fait partie :
|
||||
- a) Du Surface Web
|
||||
- b) Du Deep Web
|
||||
- c) Du Dark Web
|
||||
|
||||
4. Pour accéder au Dark Web, on utilise généralement :
|
||||
4. Pour accéder au Dark Web, on utilise généralement :
|
||||
- a) Google Chrome
|
||||
- b) Internet Explorer
|
||||
- c) Le navigateur Tor
|
||||
- d) Safari
|
||||
|
||||
5. Lequel de ces éléments n'utilise PAS le Web ?
|
||||
5. Lequel de ces éléments n'utilise PAS le Web ?
|
||||
- a) YouTube
|
||||
- b) Un email envoyé par Outlook
|
||||
- c) Wikipédia
|
||||
- d) Google Maps dans un navigateur
|
||||
|
||||
6. Quel navigateur utilise un moteur de rendu différent des autres ?
|
||||
6. Quel navigateur utilise un moteur de rendu différent des autres ?
|
||||
- a) Chrome
|
||||
- b) Edge
|
||||
- c) Firefox
|
||||
|
||||
@@ -8,83 +8,83 @@ 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.
|
||||
**Tim Berners-Lee** est considéré comme l'inventeur du Web.
|
||||
|
||||
1. En quelle année a-t-il inventé le Web ?
|
||||
2. Dans quel laboratoire de recherche travaillait-il à ce moment-là ? Dans quel pays ?
|
||||
3. Quel était son métier/sa fonction ?
|
||||
4. Quelle était son idée de départ ? Quel problème voulait-il résoudre ?
|
||||
1. En quelle année a-t-il inventé le Web ?
|
||||
2. Dans quel laboratoire de recherche travaillait-il à ce moment-là ? Dans quel pays ?
|
||||
3. Quel était son métier/sa fonction ?
|
||||
4. Quelle était son idée de départ ? Quel problème voulait-il résoudre ?
|
||||
|
||||
**Indice** : Le site officiel du CERN et la page Wikipédia de Tim Berners-Lee peuvent vous aider.
|
||||
**Indice** : Le site officiel du CERN et la page Wikipédia de Tim Berners-Lee peuvent vous aider.
|
||||
|
||||
---
|
||||
|
||||
## 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 !
|
||||
7. De quoi parlait ce premier site web ?
|
||||
8. Décrivez son apparence en 3 mots.
|
||||
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 !
|
||||
7. De quoi parlait ce premier site web ?
|
||||
8. Décrivez son apparence en 3 mots.
|
||||
|
||||
**Indice** : Cherchez "first website ever" ou visitez info.cern.ch
|
||||
**Indice** : Cherchez "first website ever" ou visitez info.cern.ch
|
||||
|
||||
---
|
||||
|
||||
## 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.
|
||||
Tim Berners-Lee n'a pas seulement créé un site, il a inventé **3 technologies** qui fonctionnent ensemble.
|
||||
|
||||
9. Qu'est-ce que le **HTML** ? À quoi sert-il ?
|
||||
10. Qu'est-ce qu'une **URL** ? Donnez un exemple.
|
||||
11. Qu'est-ce que le protocole **HTTP** ? Que signifient ces lettres ?
|
||||
9. Qu'est-ce que le **HTML** ? À quoi sert-il ?
|
||||
10. Qu'est-ce qu'une **URL** ? Donnez un exemple.
|
||||
11. Qu'est-ce que le protocole **HTTP** ? Que signifient ces lettres ?
|
||||
|
||||
**Bonus** : Quelle est la différence entre HTTP et HTTPS ?
|
||||
**Bonus** : Quelle est la différence entre HTTP et HTTPS ?
|
||||
|
||||
---
|
||||
|
||||
## 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 !
|
||||
Attention, beaucoup de gens confondent **Web** et **Internet**. Ce n'est pas la même chose !
|
||||
|
||||
12. Qu'est-ce qu'**Internet** ? Quand a-t-il été créé (approximativement) ?
|
||||
13. Qu'est-ce que le **Web** ?
|
||||
14. Donnez 2 exemples de services qui utilisent Internet mais qui ne sont **pas** le Web.
|
||||
12. Qu'est-ce qu'**Internet** ? Quand a-t-il été créé (approximativement) ?
|
||||
13. Qu'est-ce que le **Web** ?
|
||||
14. Donnez 2 exemples de services qui utilisent Internet mais qui ne sont **pas** le Web.
|
||||
|
||||
**Aide** : Pensez à ce que vous faites sur votre téléphone ou ordinateur qui nécessite une connexion mais n'utilise pas de navigateur web.
|
||||
**Aide** : Pensez à ce que vous faites sur votre téléphone ou ordinateur qui nécessite une connexion mais n'utilise pas de navigateur web.
|
||||
|
||||
---
|
||||
|
||||
## 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 ?
|
||||
17. Qu'est-ce que le **W3C** ? Quel est son rôle aujourd'hui ?
|
||||
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 ?
|
||||
17. Qu'est-ce que le **W3C** ? Quel est son rôle aujourd'hui ?
|
||||
|
||||
---
|
||||
|
||||
## 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) :
|
||||
Placez ces événements dans l'ordre chronologique (du plus ancien au plus récent) :
|
||||
|
||||
- [ ] Création de Facebook
|
||||
- [ ] Invention du Web par Tim Berners-Lee
|
||||
- [ ] Premier iPhone
|
||||
- [ ] Création de Google
|
||||
- [ ] Création de Wikipédia
|
||||
- [ ] Premier tweet sur Twitter
|
||||
- [ ] Naissance d'Internet (ARPANET)
|
||||
- [ ] Création de Facebook
|
||||
- [ ] Invention du Web par Tim Berners-Lee
|
||||
- [ ] Premier iPhone
|
||||
- [ ] Création de Google
|
||||
- [ ] Création de Wikipédia
|
||||
- [ ] Premier tweet sur Twitter
|
||||
- [ ] Naissance d'Internet (ARPANET)
|
||||
|
||||
---
|
||||
|
||||
## Mission finale : Votre article
|
||||
!!! question "Mission finale : Votre article"
|
||||
|
||||
Rédigez un court article (10-15 lignes) pour le magazine, avec :
|
||||
- Un titre accrocheur
|
||||
- Une introduction qui donne envie de lire
|
||||
- Les informations essentielles sur l'invention du Web
|
||||
- Une conclusion sur l'impact du Web aujourd'hui
|
||||
Rédigez un court article (10-15 lignes) pour le magazine, avec :
|
||||
- Un titre accrocheur
|
||||
- Une introduction qui donne envie de lire
|
||||
- Les informations essentielles sur l'invention du Web
|
||||
- Une conclusion sur l'impact du Web aujourd'hui
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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,61 +20,61 @@ 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 ?
|
||||
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 ?
|
||||
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é ?
|
||||
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.
|
||||
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 ?
|
||||
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 ?
|
||||
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.
|
||||
27. En quoi est-ce différent de toutes les époques précédentes, où c'était le site qui décidait de tout ?
|
||||
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.
|
||||
27. En quoi est-ce différent de toutes les époques précédentes, où c'était le site qui décidait de tout ?
|
||||
|
||||
---------
|
||||
|
||||
### 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.
|
||||
30. Une seule chose n'a pas changé en trente ans sur ces pages. Laquelle ? Que pouvez-vous en conclure ?
|
||||
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.
|
||||
30. Une seule chose n'a pas changé en trente ans sur ces pages. Laquelle ? Que pouvez-vous en conclure ?
|
||||
|
||||
---------
|
||||
|
||||
|
||||
@@ -16,57 +16,55 @@ 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.
|
||||
|
||||
Rappel : l'utilisation d'écouteurs est fortement conseillée !
|
||||
|
||||
[Internet vu par la France dans les années 90](https://cours.florianmathieu.prof/Florian/SNT/raw/branch/main/sequences/web/historique/Internet%20-%20Il%20y%20a%2015%20ans.mp4)
|
||||
|
||||
|
||||
|
||||
Regardez la vidéo suivante et répondez aux questions ci-dessous.
|
||||
***Question n° 1*** :
|
||||
|
||||
Rappel : l'utilisation d'écouteurs est fortement conseillée !
|
||||
*Citer deux causes à la difficulté de mise en place d'Internet en France dans les années 90*
|
||||
|
||||
[Internet vu par la France dans les années 90](https://cours.florianmathieu.prof/Florian/SNT/raw/branch/main/sequences/web/historique/Internet%20-%20Il%20y%20a%2015%20ans.mp4)
|
||||
***Question n° 2 :***
|
||||
|
||||
*Quelle est la langue officielle d'Internet ?*
|
||||
|
||||
***Question n° 3***
|
||||
|
||||
***Question n° 1*** :
|
||||
*Comment appelait-on l'appareil permettant de se connecter à Internet à l'époque ?*
|
||||
|
||||
*Citer deux causes à la difficulté de mise en place d'Internet en France dans les années 90*
|
||||
***Question n°4***
|
||||
|
||||
***Question n° 2 :***
|
||||
|
||||
*Quelle est la langue officielle d'Internet ?*
|
||||
|
||||
***Question n° 3***
|
||||
|
||||
*Comment appelait-on l'appareil permettant de se connecter à Internet à l'époque ?*
|
||||
|
||||
***Question n°4***
|
||||
|
||||
*Le web est il aussi libre en 2024 qu'il ne l'était en 1995 ? Pourquoi ?*
|
||||
*Le web est il aussi libre en 2024 qu'il ne l'était en 1995 ? Pourquoi ?*
|
||||
|
||||
---------------------------
|
||||
|
||||
## Activité 2
|
||||
!!! question "Activité 2"
|
||||
|
||||
Regardez la vidéo suivante, et répondez aux questions ci-dessous.
|
||||
Regardez la vidéo suivante, et répondez aux questions ci-dessous.
|
||||
|
||||
[Debut_Internet](https://cours.florianmathieu.prof/Florian/SNT/raw/branch/main/sequences/web/historique/Debut_Internet.mp4)
|
||||
[Debut_Internet](https://cours.florianmathieu.prof/Florian/SNT/raw/branch/main/sequences/web/historique/Debut_Internet.mp4)
|
||||
|
||||
|
||||
|
||||
***Question n° 1***
|
||||
***Question n° 1***
|
||||
|
||||
*Les réseaux P2P étaient courants dans les années 90 et 2000. Pour quels types d'usage ?*
|
||||
*Les réseaux P2P étaient courants dans les années 90 et 2000. Pour quels types d'usage ?*
|
||||
|
||||
***Question n° 2***
|
||||
***Question n° 2***
|
||||
|
||||
*Quel était le support de données le plus utilisé à cette époque ? Combien cela représente-t-il de données ?*
|
||||
*Quel était le support de données le plus utilisé à cette époque ? Combien cela représente-t-il de données ?*
|
||||
|
||||
*Supposons un débit de base de 100 mbits /s, combien de temps vous aurait-il fallu pour télécharger l'équivalent d'une disquette ?*
|
||||
*Supposons un débit de base de 100 mbits /s, combien de temps vous aurait-il fallu pour télécharger l'équivalent d'une disquette ?*
|
||||
|
||||
***Question n°3***
|
||||
***Question n°3***
|
||||
|
||||
*Les outils de communications ou de messagerie instantanée étaient nombreux dans les années 2000. Citez trois (3) outils différents d'après vos connaissances ou vos recherches Internet.*
|
||||
*Les outils de communications ou de messagerie instantanée étaient nombreux dans les années 2000. Citez trois (3) outils différents d'après vos connaissances ou vos recherches Internet.*
|
||||
|
||||
|
||||
|
||||
@@ -74,32 +72,32 @@ 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.
|
||||
Même consigne que les exercices du dessus.
|
||||
|
||||
[Minitel](https://cours.florianmathieu.prof/Florian/SNT/raw/branch/main/sequences/web/historique/Minitel.mp4)
|
||||
[Minitel](https://cours.florianmathieu.prof/Florian/SNT/raw/branch/main/sequences/web/historique/Minitel.mp4)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
***Question n° 1***
|
||||
***Question n° 1***
|
||||
|
||||
*Qu'est ce que le Minitel ?*
|
||||
*Qu'est ce que le Minitel ?*
|
||||
|
||||
***Question n° 2***
|
||||
***Question n° 2***
|
||||
|
||||
*Avec quel réseau fonctionnait-il ?*
|
||||
*Avec quel réseau fonctionnait-il ?*
|
||||
|
||||
*Quel type de connexion, que vous connaissez, utilise ou utilisait le même réseau ?*
|
||||
*Quel type de connexion, que vous connaissez, utilise ou utilisait le même réseau ?*
|
||||
|
||||
***Question n° 3***
|
||||
***Question n° 3***
|
||||
|
||||
*Quel type de services fournissait-il ?*
|
||||
*Quel type de services fournissait-il ?*
|
||||
|
||||
***Question n° 4***
|
||||
***Question n° 4***
|
||||
|
||||
*Quelle grande personnalité de l'Internet français a fait fortune dans le Minitel ?*
|
||||
*Quelle grande personnalité de l'Internet français a fait fortune dans le Minitel ?*
|
||||
@@ -28,16 +28,16 @@ __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 :
|
||||
✏ Répondre aux questions suivantes en vous aidant de la vidéo :
|
||||
|
||||
https://www.youtube.com/watch?v=pMywV9ZLS4M
|
||||
https://www.youtube.com/watch?v=pMywV9ZLS4M
|
||||
|
||||
1. __Sur quel programme repose un moteur de recherche ?__
|
||||
2. __Qu'effectue ce programme ?__
|
||||
3. __Comment un moteur de recherche répond à une recherche effectuée par un utilisateur ?__
|
||||
4. __Comment sont classés les résultats de la recherche ?__
|
||||
1. __Sur quel programme repose un moteur de recherche ?__
|
||||
2. __Qu'effectue ce programme ?__
|
||||
3. __Comment un moteur de recherche répond à une recherche effectuée par un utilisateur ?__
|
||||
4. __Comment sont classés les résultats de la recherche ?__
|
||||
|
||||
### 2.2. Bilan
|
||||
|
||||
@@ -75,45 +75,45 @@ 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.
|
||||
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.
|
||||
|
||||
|
||||
|
||||
|
||||
Dans ce graphe, la flèche allant de 1 vers 2 signifie que la page 1 référence la page 2 et l’absence de flèche de 2 vers 4 signifie que la page 2 ne référence pas la page 4.
|
||||
Dans ce graphe, la flèche allant de 1 vers 2 signifie que la page 1 référence la page 2 et l’absence de flèche de 2 vers 4 signifie que la page 2 ne référence pas la page 4.
|
||||
|
||||
1. ✏ Appliquer la méthode du marcheur aléatoire en complétant le tableau ci-dessous. On travaillera en binôme et on effectuera 20 visites.
|
||||
1. ✏ Appliquer la méthode du marcheur aléatoire en complétant le tableau ci-dessous. On travaillera en binôme et on effectuera 20 visites.
|
||||
|
||||
| | Page 1 | Page 2 | Page 3 | Page 4 |
|
||||
| :--: | :--: | :--: | :--: | :--: |
|
||||
| __Nombre de visites (sur un total de 20)__ | | | | |
|
||||
| **PageRank** | | | | |
|
||||
| | Page 1 | Page 2 | Page 3 | Page 4 |
|
||||
| :--: | :--: | :--: | :--: | :--: |
|
||||
| __Nombre de visites (sur un total de 20)__ | | | | |
|
||||
| **PageRank** | | | | |
|
||||
|
||||
2. ✏ Comparer vos résultats avec ceux des autres binômes de la classe. Que peut-on en conclure ?
|
||||
3. ✏ Rassembler les résultats de toute la classe et compléter le nouveau tableau ci-dessous :
|
||||
2. ✏ Comparer vos résultats avec ceux des autres binômes de la classe. Que peut-on en conclure ?
|
||||
3. ✏ Rassembler les résultats de toute la classe et compléter le nouveau tableau ci-dessous :
|
||||
|
||||
| | Page 1 | Page 2 | Page 3 | Page 4 |
|
||||
| :--: | :--: | :--: | :--: | :--: |
|
||||
| __Nombre de visites (sur un total de 20)__ | | | | |
|
||||
| **PageRank** | | | | |
|
||||
| | Page 1 | Page 2 | Page 3 | Page 4 |
|
||||
| :--: | :--: | :--: | :--: | :--: |
|
||||
| __Nombre de visites (sur un total de 20)__ | | | | |
|
||||
| **PageRank** | | | | |
|
||||
|
||||
4. ✏ Reporter le PageRank en % sur le graphe
|
||||
4. ✏ Reporter le PageRank en % sur le graphe
|
||||
|
||||
|
||||
|
||||
|
||||
## 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 :
|
||||
1. ✏ Effectuer des recherches (c-a-d en saisissant les mêmes termes) en utilisant des moteurs de recherche tel que :
|
||||
|
||||
- [Google](https://google.fr)
|
||||
- [Qwant](https://qwant.fr)
|
||||
- [Bing](https://bing.fr)
|
||||
- [Lilo](https://search.lilo.org/)
|
||||
|
||||
2. ✏ Établir si possible les différences observées...
|
||||
2. ✏ Établir si possible les différences observées...
|
||||
|
||||
### 4.2. Explication
|
||||
|
||||
@@ -129,12 +129,12 @@ 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)
|
||||
Répondre aux questions suivantes après lecture de [l'article](https://www.slate.fr/story/100441/brin-page-google-pub)
|
||||
|
||||
1. ✏ Selon l'article, quels sont les impacts / risques du modèle de financement par la publicité sur les résultats de recherche ?
|
||||
2. ✏ À quel principe, déjà vu, le modèle par financement peut-il s'opposer ?
|
||||
1. ✏ Selon l'article, quels sont les impacts / risques du modèle de financement par la publicité sur les résultats de recherche ?
|
||||
2. ✏ À quel principe, déjà vu, le modèle par financement peut-il s'opposer ?
|
||||
|
||||
## 5. Synthèse
|
||||
|
||||
|
||||
@@ -13,11 +13,11 @@ 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.
|
||||
3. Perplexity fonctionne-t-il de la même façon que les autres ? Quelle différence observez-vous dans la présentation des résultats ?
|
||||
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.
|
||||
3. Perplexity fonctionne-t-il de la même façon que les autres ? Quelle différence observez-vous dans la présentation des résultats ?
|
||||
|
||||
---
|
||||
|
||||
@@ -31,11 +31,11 @@ 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 ?
|
||||
6. Selon vous, pourquoi deux moteurs de recherche peuvent-ils donner des résultats différents pour la même requête ?
|
||||
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 ?
|
||||
6. Selon vous, pourquoi deux moteurs de recherche peuvent-ils donner des résultats différents pour la même requête ?
|
||||
|
||||
---
|
||||
|
||||
@@ -43,11 +43,11 @@ 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.
|
||||
9. DuckDuckGo et Qwant affirment ne pas personnaliser les résultats. Quel avantage et quel inconvénient cela peut-il avoir ?
|
||||
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.
|
||||
9. DuckDuckGo et Qwant affirment ne pas personnaliser les résultats. Quel avantage et quel inconvénient cela peut-il avoir ?
|
||||
|
||||
---
|
||||
|
||||
@@ -58,11 +58,11 @@ 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 ?
|
||||
12. Qwant affiche aussi des publicités, mais affirme ne pas collecter vos données personnelles. Comment gagne-t-il de l'argent alors ? *(Aide : cherchez "modèle économique Qwant")*
|
||||
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 ?
|
||||
12. Qwant affiche aussi des publicités, mais affirme ne pas collecter vos données personnelles. Comment gagne-t-il de l'argent alors ? *(Aide : cherchez "modèle économique Qwant")*
|
||||
|
||||
---
|
||||
|
||||
@@ -70,11 +70,11 @@ 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)*
|
||||
15. Si vous devez faire un exposé sur un sujet sérieux, quel outil utiliseriez-vous, et pourquoi ?
|
||||
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)*
|
||||
15. Si vous devez faire un exposé sur un sujet sérieux, quel outil utiliseriez-vous, et pourquoi ?
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -25,11 +25,11 @@ 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"**.
|
||||
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.
|
||||
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.
|
||||
|
||||
---
|
||||
|
||||
@@ -67,14 +67,14 @@ 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++ :
|
||||
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 !)
|
||||
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 !)
|
||||
|
||||
---
|
||||
|
||||
@@ -90,9 +90,9 @@ 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>`.
|
||||
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
|
||||
|
||||
@@ -111,9 +111,9 @@ 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 ?
|
||||
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
|
||||
|
||||
@@ -151,14 +151,14 @@ 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" :
|
||||
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 ?
|
||||
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
|
||||
|
||||
@@ -196,10 +196,10 @@ 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.
|
||||
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
|
||||
|
||||
@@ -220,38 +220,38 @@ 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.
|
||||
3. Dans le CSS, ajoutez une regle pour les paragraphes :
|
||||
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 {
|
||||
```css
|
||||
p {
|
||||
color: darkgreen;
|
||||
font-size: 16px;
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
4. Sauvegardez et observez le resultat.
|
||||
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/
|
||||
> **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
|
||||
!!! 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.
|
||||
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.
|
||||
**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)
|
||||
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 />`.
|
||||
Les balises a completer : `<h1>` a `<h6>`, `<br />`, `<strong>`, `<ul>`, `<ol>`, `<li>`, `<dl>`, `<table>`, `<a>`, `<img />`, `<hr />`.
|
||||
|
||||
### Aide
|
||||
|
||||
|
||||
@@ -34,28 +34,28 @@ 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 :
|
||||
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.
|
||||
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
|
||||
!!! 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.
|
||||
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
|
||||
**Echelle de notation :**
|
||||
- 1 = Tres mauvais
|
||||
- 2 = Mauvais
|
||||
- 3 = Moyen
|
||||
- 4 = Bon
|
||||
- 5 = Tres bon
|
||||
|
||||
### Sites a evaluer
|
||||
|
||||
@@ -65,45 +65,45 @@ 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** :
|
||||
Recopiez et completez ce tableau pour **chacun des 3 sites** :
|
||||
|
||||
**Site 1 : Wikipedia**
|
||||
**Site 1 : Wikipedia**
|
||||
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite (testez en redimensionnant la fenetre) | | |
|
||||
| **Total** | **/20** | |
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite (testez en redimensionnant la fenetre) | | |
|
||||
| **Total** | **/20** | |
|
||||
|
||||
**Site 2 : Site du lycee**
|
||||
**Site 2 : Site du lycee**
|
||||
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite | | |
|
||||
| **Total** | **/20** | |
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite | | |
|
||||
| **Total** | **/20** | |
|
||||
|
||||
**Site 3 : ..................**
|
||||
**Site 3 : ..................**
|
||||
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| Adaptabilite | | |
|
||||
| **Total** | **/20** | |
|
||||
| Critere | Note /5 | Justification |
|
||||
|---------|---------|---------------|
|
||||
| Lisibilite | | |
|
||||
| Navigation | | |
|
||||
| Rapidite | | |
|
||||
| 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**.
|
||||
6. Pour tester l'adaptabilite mobile, vous avez redimensionne la fenetre. Connaissez-vous une autre methode ? (Indice : outils de developpement du navigateur, touche F12)
|
||||
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)
|
||||
|
||||
---
|
||||
|
||||
@@ -157,62 +157,62 @@ 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 :
|
||||
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 | |
|
||||
| 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)
|
||||
!!! question "Partie 4 : Quiz recapitulatif (10 min)"
|
||||
|
||||
Repondez aux questions suivantes :
|
||||
Repondez aux questions suivantes :
|
||||
|
||||
**Question 1** : Que signifie UX ?
|
||||
- a) Universal eXchange
|
||||
- b) User eXperience
|
||||
- c) Ultra eXpress
|
||||
- d) Unified eXtension
|
||||
**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 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 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 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 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
|
||||
**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
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -38,19 +38,19 @@ 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
|
||||
3. **Redigez le premier paragraphe** : presentez votre sujet en 2-3 phrases
|
||||
4. **Completez la section "Pourquoi j'aime..."** :
|
||||
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** :
|
||||
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** :
|
||||
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 !
|
||||
@@ -84,42 +84,42 @@ 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 :
|
||||
Ouvrez `tp3_style.css` et effectuez les modifications suivantes :
|
||||
|
||||
**1. Couleur de fond de la page**
|
||||
**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 !
|
||||
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)
|
||||
Exemples de couleurs :
|
||||
- `#f0f8ff` (bleu tres clair)
|
||||
- `#fff8dc` (creme)
|
||||
- `#f0fff0` (vert tres clair)
|
||||
- `#fff0f5` (rose tres clair)
|
||||
|
||||
> Outil pratique : https://htmlcolorcodes.com/fr/
|
||||
> Outil pratique : https://htmlcolorcodes.com/fr/
|
||||
|
||||
**2. Couleur et police du titre**
|
||||
**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"`)
|
||||
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**
|
||||
**3. Couleur du texte**
|
||||
|
||||
Modifiez la regle `p` pour changer la couleur des paragraphes.
|
||||
Modifiez la regle `p` pour changer la couleur des paragraphes.
|
||||
|
||||
**4. Style des liens**
|
||||
**4. Style des liens**
|
||||
|
||||
Modifiez la regle `a` pour changer la couleur des liens. Essayez aussi d'enlever le soulignement :
|
||||
Modifiez la regle `a` pour changer la couleur des liens. Essayez aussi d'enlever le soulignement :
|
||||
|
||||
```css
|
||||
a {
|
||||
```css
|
||||
a {
|
||||
color: darkorange;
|
||||
text-decoration: none;
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
### Verifiez !
|
||||
|
||||
@@ -147,53 +147,53 @@ 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 :
|
||||
**1. Ajoutez du padding au body** pour que le contenu ne colle pas aux bords :
|
||||
|
||||
```css
|
||||
body {
|
||||
```css
|
||||
body {
|
||||
/* ... vos proprietes existantes ... */
|
||||
padding: 20px 40px;
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
**2. Ajoutez une bordure et un fond au titre** :
|
||||
**2. Ajoutez une bordure et un fond au titre** :
|
||||
|
||||
```css
|
||||
h1 {
|
||||
```css
|
||||
h1 {
|
||||
/* ... vos proprietes existantes ... */
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
**3. Mettez en forme l'image** :
|
||||
**3. Mettez en forme l'image** :
|
||||
|
||||
```css
|
||||
img {
|
||||
```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.
|
||||
`max-width: 400px` empeche l'image d'etre trop grande. `border-radius` arrondit les coins.
|
||||
|
||||
**4. Stylisez la liste** :
|
||||
**4. Stylisez la liste** :
|
||||
|
||||
Ajoutez cette regle dans votre CSS :
|
||||
Ajoutez cette regle dans votre CSS :
|
||||
|
||||
```css
|
||||
ul {
|
||||
```css
|
||||
ul {
|
||||
background-color: #eee;
|
||||
padding: 15px 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
### Verifiez !
|
||||
|
||||
@@ -216,53 +216,53 @@ 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 :
|
||||
Dans votre fichier HTML, reorganisez votre page avec ces balises :
|
||||
|
||||
1. **Entourez votre titre `<h1>` avec `<header>`** :
|
||||
1. **Entourez votre titre `<h1>` avec `<header>`** :
|
||||
|
||||
```html
|
||||
<header>
|
||||
```html
|
||||
<header>
|
||||
<h1>Mon sujet</h1>
|
||||
</header>
|
||||
```
|
||||
</header>
|
||||
```
|
||||
|
||||
2. **Ajoutez un `<footer>` en bas de page** :
|
||||
2. **Ajoutez un `<footer>` en bas de page** :
|
||||
|
||||
```html
|
||||
<footer>
|
||||
```html
|
||||
<footer>
|
||||
<p>Page creee par [votre prenom] - SNT 2025</p>
|
||||
</footer>
|
||||
```
|
||||
</footer>
|
||||
```
|
||||
|
||||
3. **Stylisez le footer** dans votre CSS :
|
||||
3. **Stylisez le footer** dans votre CSS :
|
||||
|
||||
```css
|
||||
footer {
|
||||
```css
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin-top: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Bonus : Creer une deuxieme page
|
||||
!!! question "Bonus : Creer une deuxieme page"
|
||||
|
||||
Si vous avez termine en avance, voici un defi supplementaire :
|
||||
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 :
|
||||
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 !
|
||||
Felicitations, vous avez cree votre premier **site web** de plusieurs pages !
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user