Thème 2: le web MAJ : 14/11/2023

Activité 02a :
introduction
Dans LibreOffice, sélectionner Outils –> options –> securité –> OPTION : décocher la case qui
concerne le CRTL clic pour ouvrir un lien http.

1. Cliquer sur l’image ci-dessous et faire le QCM (8 questions). Avec Libre Office, il faudra
sans doute appuyer sur la touche CTRL et cliquer en même temps sur l’image.
Prenez votre temps pour réfléchir.

ou entrer le lien suivant dans un navigateur :

https://numeres.net/9782206104645/res/9782206104645-
ht5-qcm-ch02-01/

Ce QCM se trouve aussi dans votre manuel SNT à la page 55 en cliquant en haut à droite
« QCM je me teste en ligne », (ne pas ouvrir le CAHIER SNT, mais bien ce manuel
numérique : )

2. A la fin du QCM, ne pas fermer la fenêtre du QCM, et envoyer le bilan à l’adresse

[email protected] en indiquant dans l’ordre et en respectant la casse : « NOM
Prénom 2nde SNT ».

3. Puis visionner la vidéo ci-dessous : Web et Internet c'est la même chose ?

https://ressources.numeres.net/id-58 (vidéo interactive) ou lien You Tube en cliquant ci-
dessous sur l’image (vidéo non interactive) :

4. Répondre au Quizz 1 (9 questions) jusqu'à l'obtention d'un bon niveau.

 Activité 02b : histoire
du web

1. Ouvrir votre manuel Delagrave pages 58-59 en passant par MBN (ne pas confondre avec le cahier de
SNT), et cliquer sur le lien en haut à droite pour accéder à la vidéo (2’38) sur « Découvrons l’histoire
du web » : lienmini.fr/3389-303 ou directement en cliquant sur l’image ci-dessous.

Lire la vidéo avec les écouteurs.

2. Répondre aux 3 questions ci-dessous de cette activité pages 58-59 (s’aider des documents sur les 2
pages).

1. Qu’est-ce qu’un lien hypertexte ? Quelle peut être sa source ?

2. Résumer les liens existants entre l’hypertexte, les pages Web et les navigateurs.

3. Citer des différences entre pages Web statiques et dynamiques.

 Activité 02c : le fonctionnement du
web

1. Modèle client-serveur
1. Visionner la vidéo ci-dessous qui présente l'architecture client-serveur. Elle est aussi disponible ici :
http://lienmini.fr/3389-304

Source : 2.1 Clients - serveurs S3 from Université Lille SHS on Vimeo.

2. Voici une illustration d'un échange sur le Web entre un client (logiciel navigateur comme Firefox) et un
serveur.

Répondre aux 4 questions du Quizz 3 (https://frederic-junier.org/wp/?page_id=1397) jusqu'à l'obtention

d'un bon niveau.

2. Protocole HTTP et adresse URL

Pour traiter cet exercice, on s'aidera des fichiers de l’activité 2 Fonctionnement du Web

Ce qui suit a été testé avec le navigateur Chrome (Version 119.0.6045.124 nov 2023) :
Ouvrir le lien suivant : https://interstices.info/sciences-numeriques-et-technologie-au-lycee/ .
Ouvrir la fenêtre d'outils de développement en appuyant sur la touche F12, et cliquer sur les 3 petits points en haut à
droite (figure ci-dessous), et choisir « épingler en bas » :
Sélectionner l'onglet Network (ou Réseau) dans la fenêtre d'outils (placée en bas normalement) :

Appuyer sur CTRL R pour recharger la page et pour voir des informations détaillées concernant l’activité réseau.

Sélectionner la 1ère ligne :

On devrait observer un contenu de ce type en choisissant (à droite) l’onglet En-têtes (ou Raw headers) pour
les en-têtes de réponse et de demande :

Dans les « En-têtes de réponses », cocher la case « Brut » pour répondre à la question 1 ci-dessous :
Q1. Quelle est la version du protocole HTTP utilisée ?

Q2. Quelle est la méthode du protocole HTPP utilisée lors d'une requête ?

Q3. Quel est le code de la réponse HTTP ? Quelle est sa signification ?

Q4. La requête de la page https://interstices.info/sciences-numeriques-et-technologie-au-lycee/, a entraîné d'autres

requêtes (pour charger les images, les scripts Javascript (qui permettent de rendre les pages plus dynamiques), les
éventuelles requêtes cachées vers les agences publicitaires ...) qui apparaissent dans la fenêtre des outils de de
développement (onglet réseau).
Fermer le panneau de droite (que vous aviez ouvert en cliquant sur la 1ère ligne) :

Où cliquer pour classer les résultats dans la colonne TYPE ?

Q5. En gardant le classement précédent dans la colonne TYPE, combien la liste contient-t-elle d’images (format jpeg
ou png) ?

***
https://interstices.info/sciences-numeriques-et-technologie-au-lycee/ est l'URL (Uniform
Ressource Locator) de la ressource demandée par le client, c'est-à-dire son adresse logique sur la toile géante de
documents reliés par des liens hypertextes que constitue le Web.
La structure de base d'une URL est protocol://hostname/path où :
 protocol désigne le protocole réseau (http, ftp ...)
 hostname désigne le nom de domaine qui est une correspondance plus lisible de l'adresse IP du serveur
(128.93.162.59 dans l'exemple, 443 étant le numéro de port du service HTTPS version sécurisé de HTTP)
 path est le chemin vers la ressource dans l'arborescence de fichiers sur le serveur (dans l'exemple c'est le
dossier sciences-numeriques-et-technologie-au-lycee/) et si aucun fichier n'est mentionné, le
serveur renvoie une page par défaut.

Q6. Saisir l'URL https://interstices.info/sciences-numeriques-et-technologie-au-lycee/index.html dans la barre

d'adresse. Quelle est la réponse du serveur ? Interpréter.

Q7. Remplacer l'extension .html de la page demandée dans l'URL précédente par .php
Quelle est la réponse du serveur ?

L'extension php signifie que la page demandée contient du code PHP qui permet au serveur de générer à la volée la
page renvoyée au client. On parle de page web dynamique par opposition à une page web statique.
 3. Synthèse et Quizz
 Lire le paragraphe De mon ordinateur aux serveurs Web de la page Web Idée reçue : Web et Internet,
c’est la même chose !
 Répondre au Quizz 4 jusqu'à l'obtention d'un bon niveau.

Exercice d’application activité 2c : Delagrave p 73 n° 5

Correction :
 Activité 02d : les langages
du Web

Facultatif : un site pour visualiser le code html et le résultat dans un navigateur ds la même fenêtre :
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_basic_html

2. Le langage HTML
A Point de cours n°1 : Les bases du langage HTML
a Ouvrir le lien https://frederic-junier.org/SNT/Theme1_Web/SNT_Activite3_Web.html et regarder la
vidéo ; puis accéder au code html sous la vidéo :

b Lire plus ou moins rapidement le texte « Détaillons cette structure de base » figurant sous le schéma :

c Faire l’exercice n°3 « Remettre les balises dans l'ordre » ; pour cela, copier le code html du cadre orange
et le coller dans le lien suivant (ne pas oublier à chaque fois de cliquer sur le bouton vert RUN pour voir
le résultat dans la fenêtre de droite) : https://www.w3schools.com/css/tryit.asp?
filename=trycss_navbar_basic_html
Effacer ce qui y figure déjà.

Pour cette question, s’aider du « Point de cours n°2 : Balises de mise en forme ».
Une fois l’exo terminé, voici d’autres modifications à apporter au code html (dans la fenêtre de gauche)
pour s’entrainer :
 Mettre en gras le mot « pyjama ».
 Mettre en italique le mot
 Insérer le lien hypertexte suivant sur le mot « bureau » : http://www.buro.fr/
 En faisant un clic droit sur l’image du pingouin du « Point de cours n°2 », enregistrer cette
image sur votre disque dur ; puis faire en sorte qu’elle s’affiche à la fin du texte précédent.

Appeler le professeur pour vérification

B Point de cours n°2 : balises de mise en forme

Ce point de cours rappelle les principales balises utilisées en codage html y jeter un coup d’œil rapidement.
Ne pas faire l’exercice 2 : mise en forme du texte et insertion d'hyperliens dans une page HTML

d Lire les 3 lignes « Point de cours n°3 : Listes non ordonnées <ul> ». Puis copier le code html juste en
dessous, et le coller dans la fenêtre de gauche : https://www.w3schools.com/css/tryit.asp?
filename=trycss_navbar_basic_html
 Effacer ce qui y figure déjà.
Lire et comprendre chaque ligne, en regardant le résultat correspondant dans la fenêtre de droite.
Puis modifier le code pour afficher ceci (sans tenir compte des mots en rouge) :

<ul> Un exemple de liste de courses non

ordonnée.
<li>Poireaux </li>
 Poireaux
<li>Courgettes</li>  Courgettes
 Carottes
<li>Carottes
o De France
<ul> o De Hollande
<li>De France</li> Un exemple de listes imbriquées.
 Légumes :
<li>De Hollande</li> o Poireaux
</ul> o Courgettes
o Carottes
</li>  Laitages :
</ul> o Yaourt
o Fromage
Etc …
o Lait

Ne pas lire le point de cours n°4 : « Listes ordonnées <ol> »

Ne pas faire l’exercice 4 : « Insertion de listes dans une page HTML »

3. Les bases du langage CSS

CSS pour Cascading Style Sheets
a. Regarder la vidéo (2 min 30) du point de cours n°5.

b. L’énoncé de l’exercice n°7 « Jouer avec les propriétés CSS» a été modifié ;
 Afficher la page https://www.w3schools.com/css/css_colors.asp et dans la liste à gauche dans CSS
COLOR chercher « CSS RGB Value ». Modifier les positions des 3 curseurs comme ci-dessous par
exemple :

Pour changer de couleur dans les exemples ci-dessous, 2 possibilités dans une feuille de style :
- utiliser le nom de la couleur choisie en anglais ; ex : « green »
- remplacer le mot anglais désignant la couleur par le code RGB de votre choix sous la forme
« rgb(144, 160, 86) » par exemple.

 A l'aide de la page https://www.w3schools.com/css/tryit.asp?filename=trycss_color , changer la

couleur du texte. Cliquer sur à chaque fois.

 Lire le début de cette page : https://www.w3schools.com/css/css_text_align.asp et cliquer sur

situé en dessous du 1er exemple ; amusez-vous à changer l’alignement de certains

passages.
Mettez également le texte « Heading 1 (center) » en vert.
 Appeler le professeur pour vérification 

 Jeter un rapide coup d’œil ici https://www.w3schools.com/css/css_font.asp , pour changer les

familles, style et taille de la police des textes contenus dans les différents éléments HTML. Cliquer sur
situé en dessous de l’exemple, et changer la police de quelques mots.
c. Revenir à l’exercice n°7 (ne pas le faire), plus précisément aux codes HTML et CSS situés sous cet exo :

https://frederic-junier.org/SNT/Theme1_Web/SNT_Activite3_Web.html .
Modifier le code css proposé pour apporter les modifications suivantes ; regarder le résultat sur l’écran en
fond vert plus bas sur la page ; CTRL Z pour revenir en arrière.
 Aligner « Un titre » à gauche (utiliser « left » dans le code css).
 Changer la couleur du fond (initialement vert)
 Afficher « Un titre » en rouge
 Supprimer le surlignage rose pour « mot important »
 Retrait vers la droite (marge) de l’expression « Un paragraphe … » : utiliser padding-left: 80px

Observer les changements !

 Appeler le professeur pour vérification 

Pour aller plus loin (facultatif) : un excellent site pour apprendre https://www.lumni.fr/serie/3-minutes-
pour-coder (en bas de page). Un jeune YouTubeur spécialiste de l’informatique nous dévoile tous les
secrets du codage informatique.
 Activité 02e : les moteurs de
recherche

Les moteurs de recherche sont des acteurs fondamentaux du web. C'est tellement le cas que certaines
personnes confondent le web et moteur de recherche.

1. Frise chronologique des moteurs de recherche

Après avoir visionné la vidéo ci-dessous, vous établirez une frise chronologique des moteurs de recherche.

2. Principe de fonctionnement d'un moteur de recherche

Toujours en utilisant la vidéo ci-dessous (et éventuellement d'autres recherches sur le Net), expliquez en
quelques lignes le principe de fonctionnement d'un moteur de recherche comme Google.

3. Le moteur de recherche "DuckDuckGo"

Faites des recherches sur le moteur de recherche "DuckDuckGo". Quels sont ses avantages (et
éventuellement ses inconvénients) par rapport aux moteurs de recherche établis (Google, Bing, Yahoo...)

4. Le moteur de recherche "Qwant"

Faites des recherches sur le moteur de recherche "Qwant". Quels sont ses avantages (et éventuellement ses
inconvénients) par rapport aux moteurs de recherche établis (Google, Bing, Yahoo...)
 Cours T2 LE WEB complet (résumé)
7 exos corrigés sont dispos à la fin de ce cours

Le résumé par le texte :

Le résumé par l’image :
Exercice 1 (T2 : le Web) : vrai ou faux ?

Identifier les propositions exactes.

a. Le langage HTML se présente sous la forme d’une suite d’instructions comportant des balises entrantes et
fermantes.
b. Le langage CSS permet de sécuriser sa connexion Internet.
c. Les liens hypertextes permettent de naviguer d’une page à l’autre et d’un site Web à l’autre.
d. Quand on se connecte sur un site sécurisé, un cadenas s’affiche devant l’URL.
e. Il est impossible de supprimer les traces laissées sur Internet.

Exercice 2 (T2 : le Web) : QCM

Pour chaque proposition, identifier la bonne réponse.
a. Le rôle du langage HTML est :
de crypter des informations.
d’être interprété par un navigateur Web.
d’échanger des données entre serveurs.

b. Les navigateurs permettent :

d’afficher des pages Web.
de coder des pages Web.
de chatter à distance.

c. Pour réaliser un lien vers la page d’accueil de Wikipédia, on écrit :

<a href="http://wikipedia.org">Wikipédia</a>
<a target="http://wikipedia.org">Wikipédia</a>
<a href="http://wikipedia.org>

Exercice 3 (T2 : le Web) :

Expliquer la différence entre une page Web, un site Web, un serveur Web et un moteur de recherche.
Exercice 4 (T2 : le Web) :
Relier les usages informatiques aux langages qui leur sont associés (1 exemple est donné, il y a 8 traits à
tracer au total) :
 Ajouter une police de caractère
 Mettre un mot en gras
 Créer un tableau sur une page Web
HTML  Créer le texte d’une page Web
 Ajuster la largeur des colonnes d’un tableau
CSS  Mettre un mot en couleur
 Ajouter une vidéo sur son site
 Ajouter un lien vers un autre site

Exercice 5 (T2 : le Web) :

6. Que signifie « google-earth.png ?

Exercice 6 (T2 : le Web) : analyser et comparer deux moteurs de recherche

CAPACITÉ : mener une analyse critique des résultats fournis par un moteur de recherche.

Louise aime la course à pied dans la nature et souhaite découvrir le trail.

Elle fait trois recherches comparatives avec ces mots-clés sur Google, courante et Bing.
1 Quel est le moteur de recherche recommandé pour recommande protéger ses données personnelles ?
2 Effectuer la même recherche que Louise. Les résultats sont-ils identiques ? Pourquoi ?
3 Indiquer le nombre de liens commerciaux proposés à côté des résultats de chaque recherche.
4 Quel moteur de recherche propose le moins de publicité ?

Exercice 7 (T2 : le Web) : qui suis-je ?

Recopier et compléter les phrases.
a. HTML est l’abréviation de … .
b. Le langage HTML est un langage de … .
c. Un fichier HTML est constitué de deux parties : … et … .
d. Un … permet d’atteindre une autre page du même site ou d’un autre site