Sciences Numériques et Technologie Classe de Seconde Lycée J.
Amyot, 2019-2020
Thème : le WEB
1. Introduction
Définition :
« Web » est un mot anglais signifiant « toile » ou « réseau ».
Il désigne le système donnant accès à un ensemble de données reliées par des liens hypertextes et
accessibles sur le réseau internet. Ces données peuvent être du texte, des images, des sons, des vidéos.
Le Web n'est qu'une application du réseau Internet, comme l'est un e-mail ou une messagerie.
Repères historiques :
1965 : Ted Nelson, sociologue américain, imagine l'accès rapide à des blocs d'informations contenus dans des
documents (et consultable selon l'intérêt du lecteur) ; c'est le concept de lien hypertexte.
1981 : développement d'un programme de stockage d'informations incluant des hypertextes au CERN
1989 : le programme du CERN est proposé au grand public et devient le projet « World Wide Web »,
Tim Berners-Lee est le principal inventeur du WWW et du langage HTML
1992 : HTML (« Hypertext Markup Language ») → langage conçu pour représenter une page Web
URL (« Uniform Ressource Locator ») → adresse pour identifier la page Web
HTTP (« Hypertext Transfer Protocol ») → protocole de communication entre l'utilisateur et le serveur
1993 : Le Web est dans le domaine public et le premier navigateur internet graphique (avec images, vidéos) est
dévoilé par une équipe américaine, et nommé Mosaic. Le nombre de sites passe de 500 à 10 000 en une année !
Yahoo ! se propose de les référencer dans un annuaire en 1994.
Microsoft distribue Windows 95 avec un navigateur intégré, Internet Explorer, qui écrase la concurrence.
1995 : les pages Web deviennent interactives avec des programmes exécutables par l'utilisateur (JavaScript), et
des programmes exécutables sur les serveurs (PHP).
1998 : apparition du moteur de recherche Google, avec un algorithme de classement des sites Web dont les
résultats sont jugés bien meilleurs que les autres.
2004 : le navigateur Mozilla Firefox concurrence Internet Explorer grâce à sa rapidité d'affichage ; Facebook
commence à provoquer une mutation du Web avec les réseaux sociaux.
2008 : l'entreprise Google lance le navigateur Google Chrome pour répondre aux besoins de rapidité des
internautes ; ce navigateur est aujourd'hui le plus utilisé.
2010 : développement du Web pour les téléphones mobiles.
SNT / thème WEB 1 / 10 M.Bernaud
Sciences Numériques et Technologie Classe de Seconde Lycée J.Amyot, 2019-2020
2. Structure d'une page Web (avec le langage HTML)
• la première page Web mise en ligne
La première page Web est toujours visible aujourd'hui à l'adresse :
HTTP://info.cern.ch/hypertext/WWW/TheProject.html Barre d'adresse
Navigateur Web avec URL (adresse)
Nom du
document
Un titre
Du texte, en plusieurs
paragraphes, contenant des
hyperliens (en bleu et
soulignés) envoyant vers
d'autres documents
Définition : lien hypertexte
aussi appelé « hyperlien » ou « lien web », c'est un élément d'un document permettant de passer
automatiquement du document consulté à un document lié.
Les hyperliens sont aussi fréquemment utilisés dans une table des matières ou un index, pour se rendre
directement à un paragraphe précis dans le même document, ou dans un document séparé.
Définitions : HTML et CSS
« HyperText Markup Language » se traduit littéralement en « langage de balisage d'hypertexte », ce
langage permet de structurer une page Web en utilisant des balises de description (voir paragraphe
suivant).
« Cascading Style Sheets » se traduit littéralement en « Feuilles de Styles en Cascade », ce langage
permet de définir la manière dont sont affichés les éléments (arrière-plan, police et couleur de texte, etc.)
SNT / thème WEB 2 / 10 M.Bernaud
Sciences Numériques et Technologie Classe de Seconde Lycée J.Amyot, 2019-2020
• Comment fonctionne le langage HTML ?
Avec un clic droit sur la page, on peut demander d' « Examiner » ou d' « Inspecter » la page Web.
On accède alors au HTML qui régit le contenu de la page.
On peut aussi utiliser un éditeur de texte pour écrire en HTML, puis un navigateur pour visualiser le résultat.
Un exemple simple, avec Notepad++ :
La balise <head> indiquera
des info. En en-têt de doc.
Ici l'en-tête contient le titre.
Les balises <h1>, <h2>,
<h3>, etc., indiqueront des
titres (taille décroissante)
La balise <a> indiquera un
ancrage, avec href pour
indiquer vers quelle page Web
on sera dirigé
On enregistre le fichier en terminant par « .html » pour signifier aux programmes que le contenu de ce fichier
est du langage HTML, même si la première ligne du document indique aussi avec < !DOCTYPE html> qu'il
s'agit de langage HTML (il existe plusieurs variantes de langages HTML).
Voici ce qu'on obtient en ouvrant le document PremierTest.html avec le navigateur Google Chrome :
Titre du document
Titres de différentes
tailles dans le
document
Texte avec un lien
hypertexte
renvoyant à une
autre page Web
SNT / thème WEB 3 / 10 M.Bernaud
Sciences Numériques et Technologie Classe de Seconde Lycée J.Amyot, 2019-2020
• Comment fonctionne le langage CSS ?
Dans un éditeur de texte (ici, Notepad ++), on va créer un
document que l'on enregistrera avec le suffixe « .css » ;
dans ce document, on peut préciser pour chaque balise HTML
les caractéristiques d'affichage.
Ci-contre, pour chacune des balises du corps de texte (body) et
des titres (h1, h2, h3), on a précisé entre accolades des
paramètres de police, de couleur, de taille, et de position.
On peut avec cette méthode paramétrer l'affichage de tous les
éléments de la page Web !
Attention : ne pas oublier d'insérer dans le document HTML, dans la balise <head>, une commande pour
préciser la feuille de style qu'on utilise.
Ci-dessus, le fichier est nommé stylePT.css, et il faut ajouter dans le document PremierTest.html la commande
<link rel="stylesheet" href="stylePT.css">
à la ligne 5 du document PremierTest.html (avant de fermer la balise <head> ).
En rechargeant le document HMLT avec un navigateur, on obtient alors :
→ plus de détails dans l'activité « modifier/créer une page Web »
SNT / thème WEB 4 / 10 M.Bernaud
Sciences Numériques et Technologie Classe de Seconde Lycée J.Amyot, 2019-2020
3. « Adresses internet » ou emplacements des fichiers (URL)
Dans la barre du navigateur, on peut saisir ou lire l'adresse d'une page Web, autrement dit l'emplacement du
document que l'on consulte.
Les adresses ont toutes le même format, comme l'indique le nom de Uniform Ressource Locator .
Voici un exemple décomposé :
https:// www.education.gouv.fr /cid2570 /la-voie-generale-au-lycee .html
Explications :
https:// protocole utilisé pour la transmission de données (http ou https, voir paragraphe 4.) ; il existe
d'autres protocoles, comme ftp pour un transfert de fichier, ou mailto pour une messagerie électronique
www.education.gouv.fr nom de domaine,
/cid2570/ chemin d'accès (indique les différents dossiers à ouvrir pour atteindre le fichier)
la-voie-generale-au-lycee.html nom du fichier consulté
.html indique le langage dans lequel est écrit le fichier ; il existe aussi l'extension .htm, ou pour les
fichiers sécurisés .shmt et .shtml
Le nom de domaine est toujours ordonné de la même façon et se lit de droite à gauche :
www.education.gouv.fr
1 : domaine
2: supérieur
3 : domaine principal sous-domaine
(le détenteur des sites) (hébergeur)
Précisions :
1.Les domaines supérieurs ou TLD(top level domain) sont réglementés par l'Internet Corporation for Assigned Names
and Numbers (ICANN), responsable de la mise en place des noms de domaines génériques internationaux comme
.com, .net, .org, .edu, etc.
Pour la France, le TLD principal est .fr.
Ensuite les noms de domaines sont gérés par l'Association française du nommage de l'Internet en coopération (AFNIC).
Elle administre les sous-domaines comme .gouv, .asso, etc.
2.Le sous-domaine est l'emplacement attribué par l'AFNIC au créateur d'un site internet pour qu'il soit accessible sur le
Web.
3.Le domaine principal désigne le détenteur des sites.
En pratique, les noms de domaines servent à donner un nom à des adresses IP en respectant le protocole DNS ; par
exemple, wikipedia.org est plus simple à mémoriser que l'adressage 208.80.154.224 ou 91.198.174.192 .
Retenir : la hiérarchie de droite à gauche ; le domaine supérieur administre les sous-domaines qui
peuvent héberger les pages Web produites par une personne, une association ou une entreprise.
SNT / thème WEB 5 / 10 M.Bernaud
Sciences Numériques et Technologie Classe de Seconde Lycée J.Amyot, 2019-2020
4. requête HTTP et particularité du HTTPS
• principe de la sécurisation des données
Un internaute utilise le Web en utilisant un navigateur pour parcourir des fichiers (principalement au format
HTML). En fonction de ses clics ou de ses saisies de texte, il va appeler des pages Web contenues sur des
serveurs, et les afficher.
Le but du protocole HTTP est de permettre un transfert de fichiers : le serveur attend les connexions et les
demandes, et se contente de répondre à la demande en envoyant du contenu.
Source : livre SNT 2°, Hatier et Foucher, page 38
Une connexion en HTTPS demande donc une étape supplémentaire pour crypter les données :
le serveur commence par envoyer au client un certificat SSL (Secure Socket Layer) contenant une clé publique,
et le navigateur crypte une clé privée que seul le serveur peut déchiffrer ; dès lors les échanges se feront en
cryptant les informations selon la clé privée. Les certificats sont datés, possèdent une durée de validation et sont
attribués à un site donné.
Les utilisateurs peuvent vérifier la présence de la sécurité SSL lorsque l'URL commence par HTTPS et par
l'affichage d'un cadenas verrouillé dans la barre d'adresse.
Définition : l'hameçonnage, ou phishing, est un e-mail frauduleux incitant une victime à transmettre des
informations privées (identifiants de connexion) ou bancaires sur la copie d'un site connu (mais ce site
imité ne peut pas disposer de certificat SSL!).
Soyez toujours suspicieux quand vous recevez un e-mail vous demandant de telles informations, et
vérifiez toujours lorsque vous saisissez de telles informations que vous êtes sur un site sécurisé !!
SNT / thème WEB 6 / 10 M.Bernaud
Sciences Numériques et Technologie Classe de Seconde Lycée J.Amyot, 2019-2020
• exemple de requête HTTP
GET https://www.auxerre.fr HTTP/1.1
Accept : text/hmtl
User-Agent : Mozilla-Firefox/65.0 (compatible ; windows 10)
Une requête indique :
-la méthode → GET pour accéder à une ressource (sans la modifier)
POST pour soumettre des données en vue d'un traitement sur le serveur (typiquement
lorsqu'on rempli un formulaire ou lorsqu'on entre identifiant et mot de passe sur une page Web)
DELETE permet de supprimer une ressource sur le serveur
PUT permet de modifier une ressource sur le serveur
-l'URL de la ressource demandée → ici on veut accéder à la page Web située à l'adresse
https://www.auxerre.fr (site de la ville d'Auxerre)
-la version du protocole utilisé par le client (ici : HTTP/1.1)
Et un champ d'en-tête apporte des précisions sur la requête et/ou le client :
-le type de contenu accepté par le navigateur (ici : text/html)
-le type de navigateur web employé (ici la version 65.0 de Mozilla-Firefox, sous windows 10)
Et il peut aussi y avoir un corps de la requête pour envoyer des données, par exemple dans le cas d'un mot de
passe à donner.
Réponse à la requête :
HTTP/1.1 200 OK
Date : Wed, 20 Mar 2019 18 : 32 : 51 GMT
Server : Microsoft-IIS/10.0.17763.1
Content-Type : text/HTML
Content-Length : 748
La réponse indique :
-la version du protocole (HTTP/1.1),
-le code de statut (ici : 200 ; un autre code très connu est le code d'erreur 404)
-le code OK confirmant que la requête a été remplie correctement
-la date du transfert (Mercredi 20 Mars 2019 à 18h32'51'' sur l'heure GMT)
-le serveur avec lequel on communique (ici Microsoft-IIS/10.0.17763.1)
-le type de contenu (ici, du texte en langage html)
-la longueur du corps de la réponse : 748 caractères
Cette réponse sera donc accompagnée d'un corps de réponse contenant les 748 caractères de texte en langage
HTML (et la lecture de cette données par le navigateur fera afficher la page).
→ plus de détails dans l'activité « observer une requête HTTP » ?? (logiciel Filius)
OU simplement quelques exercices de lecture de requête ou de réponse
SNT / thème WEB 7 / 10 M.Bernaud
Sciences Numériques et Technologie Classe de Seconde Lycée J.Amyot, 2019-2020
5. moteur de recherche
Source : livre SNT 2°, Hatier et Foucher, page 38
Un moteur de recherche est une application web qui permet
d'accéder à des ressources (pages web, images, fichiers, etc.).
La recherche se fait généralement par mots-clés.
La phase de recherche ou traitement des requêtes consiste à
présenter les résultats par ordre de pertinence.
Les moteurs de recherche explorent le Web grâce à des robots
appelés spiders ou crawlers , et collectent des informations, et
les contenus sont stockés dans une base de données organisée
comme un index de livre, d'où le nom d'indexation.
Deux choses importantes à retenir :
-bien choisir les mots-clés est essentiel pour obtenir rapidement la réponse souhaitée
-l'ordre dans lequel les résultats sont affichés ne doit rien au hasard ; le moteur de recherche utilise un
algorithme appelé PageRank pour trier les réponses par « pertinence » → un exemple de ce travail du
moteur de recherche Google est étudiée en T.D.
Remarques : on parle de SEO (Search Engine Optimized), référencement naturel qui provient de la mise en
œuvre de l'algorithme de tri «PageRank » ;
il existe aussi le SEM (Search Engine Marketing), référencement payant pour lequel il suffit de payer
pour apparaître en premier dans les résultats de recherche. Ces résultats sont présentés avant ceux du SEO, ou
dans une bannière particulière, et comportent souvent un petit encadré « Annonce ».
→ plus de détails dans l'activité « popularité d'une page Web »
6. cookies et données personnelles
Définition : cookies
ce sont des fichiers textes générés par les sites sur lesquels s'effectuent la navigation. Ils sont stockés dans un
dossier du navigateur, sur le disque dur de l'ordinateur (toute comme l'historique de navigation). Ils ne
représentent pas de menace pour l'ordinateur, mais ils contiennent des informations de navigation...
SNT / thème WEB 8 / 10 M.Bernaud
Sciences Numériques et Technologie Classe de Seconde Lycée J.Amyot, 2019-2020
...les cookies techniques sont nécessaires au bon fonctionnement d'un site Internet (par exemple, identifiant
de connexion ou contenu d'un « panier » sur un site de vente en ligne) ;
Les cookies tierce partie sont utilisés par les réseaux sociaux : les icônes des réseaux sociaux couramment
placés sur les pages contiennent des liens URL qui permettent, au chargement de la page, d'activer les cookies
du réseau social et de relier les contenus consultés au compte de l'utilisateur pour lui faire des « suggestions ».
Les cookies publicitaires tracent aussi les sites visités par l'utilisateur de façon à lui envoyer des
informations ciblées (par exemple, si vous avez fait une recherche sur des raquettes de tennis, alors le
navigateur pourrait vous proposer lors d'une prochaine navigation une publicité sur des équipements de tennis,
s'il a gardé en stock le cookie du site de raquettes de tennis que vous avez consulté).
Le paramétrage des cookies, le stockage ou leur effacement, ainsi que le stockage des données de sites,
identifiants et mots de passe, la gestion des historiques de navigation, la protection contre les contenus
trompeurs, et la gestion des certificats SSL, s'effectuent dans le navigateur :
→ il existe une option « Effacer les données de navigation ».
La navigation privée temporaire permet de stocker toutes les informations dans un espace qui sera
automatiquement supprimé à la fin de la session.
7. Notions juridiques
Les entreprises, associations, organismes, etc., utilisent
des techniques de Web marketing pour une meilleure
visibilité de leurs sites (voir SEO et SEA).
Des règles de droit doivent être respectées et les des
publications doivent être anticipées.
Ci-contre un affiche extraite du site du gouvernement :
https://www.economie.gouv.fr/apie/propriete-
intellectuelle-publications/parcours-utilisateur-contenu
Toute publication d'informations doit s'assurer qu'aucun
contenu ou commentaire n'est délictueux (injures,
propos racistes, etc.), doit respecter le droit à l'image,
vérifier les droits d'exploitation des ressources (droit
d'auteur ou d'utilisation encadrés par des licences),
respecter le règlement général sur la protection des
données (RGPD) et suivre les recommandations de la
CNIL (Commission nationale de l'informatique et des
libertés).
Remarque : l'hébergeur d'un site n'est pas responsable des contenus ni de leur surveillance, mais il est tenu de
retirer tout contenu illicite s'il en est informé.
SNT / thème WEB 9 / 10 M.Bernaud
Sciences Numériques et Technologie Classe de Seconde Lycée J.Amyot, 2019-2020
Un schéma pour récapituler :
Source : livre SNT 2°, Hatier et Foucher, page 45
SNT / thème WEB 10 / 10 M.Bernaud
