LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION

LE WEB
Contenus et capacités attendues

Contenus Capacités attendues

Repères historiques Définir les étapes du développement du Web.
Connaitre certaines notions juridiques (licence, droit
Notions juridiques
d’auteur, droit d’usage, valeur d’un bien).
Hypertexte Maitriser les renvois d’un texte à différents contenus.
Distinguer ce qui relevé du contenu d’une page et de son
Langages HTML et CSS style de présentation. Étudier et modifier une page HTML
simple.
Décomposer l’URL d’une page. Reconnaitre les pages
URL
sécurisées.
Décomposer le contenu d’une requête HTTP et identifier
Requête HTTP
les paramètres passés.
Inspecter le code d’une page hébergée par un serveur et
Modelé client/serveur
distinguer ce qui est exécuté par le client et par le serveur.
Mener une analyse critique des résultats fournis par un
Moteurs de recherche :
moteur de recherche. Comprendre que toute requête laisse
principes et usages
des traces.
Maitriser les réglages les plus importants concernant la
gestion des cookies, la sécurité ́ et la confidentialité ́ d’un
Paramètres de sécurité ́
navigateur.
d’un navigateur
Sécuriser sa navigation en ligne et analyser les pages et
fichiers.

EXEMPLES D’ACTIVITÉS

_ Construire une page Web simple contenant des liens hypertextes, la mettre en
ligne.

_ Modifier une page Web existante, changer la mise en forme d’une page en
modifiant son CSS. Insé rer un lien dans une page Web. _ Comparer les paramé trages
de diffé rents navigateurs.

_ Utiliser plusieurs moteurs de recherche, comparer les ré sultats et s’interroger sur
la pertinence des classements.

_ Ré aliser à la main l’indexation de quelques textes sur quelques mots puis choisir
les textes correspondant à une requê te.

Prof Yann Mfere

1
 LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION
_ Calculer la popularité d’une page à l’aide d’un graphe simple puis programmer
l’algorithme.

_ Paramé trer un navigateur de maniè re qu’il interdise l’exé cution d’un programme
sur le client.

_ Comparer les politiques des moteurs de recherche quant à la conservation des

informations sur les utilisateurs.

_ Effacer l’historique du navigateur, consulter les cookies, paramé trer le navigateur

afin qu’il ne garde pas de traces.

_ Utiliser un outil de visualisation tel que Cookieviz pour mesurer l’impact des
cookies et des traqueurs lors d’une navigation.

_ Ré gler les paramè tres de confidentialité dans son navigateur ou dans un service en
ligne.

Prof Yann Mfere

2
 LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION
REPEW RES HISTORIQUES

Ted Nelson est un sociologue amé ricain. Il publie en 1965 le concept d’hypertexte
numé rique : un texte numé rique contenant des liens vers d’autres textes numé riques
ainsi interconnecté s.

Tim Berners-Lee, chercheur britannique, a inventé le Web au CERN en 1989. AW

l’origine, le projet, baptisé « World Wide Web », a é té conçu et dé veloppé pour que
des scientifiques travaillant dans des université s et instituts du monde entier puissent
s'é changer des informations instantané ment.

Le premier navigateur web graphique par une é quipe de chercheurs du National Center
for Supercomputing Applications de l'université de Illinois aux Etats Unis. Il est
rebaptisé Mosaic Netscape en 1994.

Un Amé ricain dé nommé Dan Kohn avait lancé un site web appelé Net Market et sa
premiè re vente fut un CD de Sting. Plus tard en 1994, la compagnie Pizza Hut a
é galement commencé à vendre des pizzas en ligne.

En 1993, Mosaïc intè gre des formulaires et des images.

Le spages web s’enrichissent en 1995 en inté grant des langages comme PHP et
JavaScript qui les rendent dynamiques

En septembre 2014, la barre du milliard de sites Web est franchie pour la premiè re
fois. En 2019 on compte prè s de 1,7 milliard de sites. Il y aurait plus de 4 milliards
d’internautes.

Prof Yann Mfere

3
 LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION

LES DROITS SUR INTERNET

Tout ce qu’on trouve sur internet (textes, images, photos, etc) est la proprié té de son
auteur et ne peut ê tre utilisé sans son autorisation.

Il existe les droits d’auteur en France, ou le copyright aux Eo tats-Unis. Mais la

dimension mondiale du Web et l’impossibilité de contrô ler le respect des diffé rentes
lé gislations a donné naissance à de nouvelles pratiques, comme les licences Creatives
Commons.

d’un site web

LE FONCTIONNEMENT DU WEB :S U.R.L

l’U.R.L.

Une URL (Uniform Ressource Locator) est l’adresse d’une ressource d’un site Web.
Elle indique où se trouve cette ressource dans l’arborescence du site.

Protocole Chemin d’accè s à la ressource

[Link]

Nom de domaine

LE FONCTIONNEMENT DU WEB : REQUÊTES HTTP

Le Web s’appuie sur un dialogue entre clients et serveurs.
Les clients sont des applications qui se connectent au Web, comme les navigateurs.

Ils envoient des requêtes aux serveurs où sont stocké es les donné es.
Ces requê tes utilisent le protocole HTTP (HyperText Transfert Protocol), permettant
aux ordinateurs de communiquer entre eux.

GET /HTTP/1.1
Host : [Link]
User-Agent : Mozilla/5.0 (Windows NT 10.0 ; WIN64 ; X64 ; rv:65.0)
GECKO/200100101
Firefox/65.0
Prof Yann Mfere
4
 LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION
Accept : text/html
Accept-Language : fr-FR,fr,q=0.8,en-US;q=0.6,en;q=0.4
Referer : [Link]

Le fonctionnement du Web : client / serveur

Une fois la requête reçue, le serveur renvoie une ré ponse (3).

SCIENCES NUMEo RIQUES ET TECHNOLOGIE

Exemple de ré ponse du serveur

HTTP/1.1 200 OK
Date: Thu, 15 feb 2019 [Link] GMT
Server: Apache/2.0.54 (Debian GNU/Linux) DAV/2 SVN/1.1.4
Connection: close
Transfer-Encoding: chunked
Content-Type: text/html; charset=ISO-8859-1
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
</head>
<body>
<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous
bien compris ? </p>
</body>
</html>

-t

Prof Yann Mfere

5
 LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION

LES MOTEURS DE RECHERCHE

Les moteurs de recherche sont indispensables au bon fonctionnement du Web. Ils
permettent de trouver des informations dans des pages dont on ne connaît pas
l’adresse, voir dont on ignore l’existence.

Qwant est un moteur de recherche cré é en France et lancé en version bêta le 16

fé vrier 2013.
Contrairement à Google, lorsque vous effectuez une recherche sur Qwant, aucun
cookie de traçage n'est dé posé sur votre navigateur. La recherche n'est pas stocké e
sur le serveur, ni associé e à votre profil pour ê tre ré utilisé e plus tard.

Prof Yann Mfere

6
 LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION

LES LANGAGES DU WEB : LE HTML

Contrairement à une page ré alisé e avec un logiciel de traitement de texte, on
peut accé der au code source d’une page web. Ce code dé crit le contenu de ce
document.

Les pages web sont é crites en HTML (HyperText Markup Language). C’est un langage
de balisage : il permet d’insé rer dans le document des balises qui dé finissent ce que
signifient les diffé rentes parties du texte, et de cré er des liens.

Ce langage n’est pas compilé : il est interpré té par le navigateur web.

Le principe consiste à encadrer un texte par deux balises complé mentaires :

- avant le texte : <balise>
- aprè s le texte : </balise>

Exemples :
- dé crire un paragraphe :

- dé crire un titre de niveau 1 :

<h1>Qu’est ce que le Lorem Ipsum ?</h1> - dé crire un lien vers un site :

<p>Contrairement à une opinion

ré pandue, le Lorem Ipsum n'est pas...</p>

par le navigateur web.

Ces balises peuvent s’imbriquer :

<a href="[Link] siteLorem ipsum</a>

<p>Un lien vers <a href="[Link] site

Lorem ipsum</a> sur lequel vous pouvez cliquer.</p>

La forme globale d’un document HTML est L’en-tê te la suivante :

Prof Yann Mfere

7
 LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION
Il regroupe des informations qui ne sont pas affiché es par le navigateur dans la page
:

le titre de la page,
des mé tadonné es (auteur, mots-clé s,...), Les ré fé rences aux feuilles de style,...

●●●

<head>
<meta charset="utf-8">
<!--On peut insé rer des commentaires-->
<title>Le lycé e</title>
<link rel="stylesheet" href="[Link]">

</head>

<!DOCTYPE html>
<html>

<head>
...
</head>
<body>
...
</body>
</html>

En-tête

Corps

Page

La partie <body>

Elle contient l’ensemble de la page web qui sera affiché e : le contenu et les balises.

Quelques balises : emier code

<head>
<meta charset="utf-8">
<title>Une premiè re page</title>
</head>
<body>
<h1>Le titre principal</h1>
<h2>Une liste non numé roté e</h2>

Prof Yann Mfere

8
 LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION
<ul>
<li>Choix 1</li>
<li>Choix 2</li>
<li>Choix 3</li>
</ul>
<h2>Un premier texte</h2>
<p>Ceci est un premier paragraphe
contenant du texte.<br>Ici un lien vers un
<a href="[Link] site de
faux-texte.</a> pour cré er des
paragraphes.</p>
<h2>Une image</h2>
<img src="[Link]
alt="Une image de snt">
</body>
<br> Saut de ligne
<h1> 1er niveau de titre, à utiliser une seule fois, pour le titre principal.
<h2> à <h6> Titres de niveau 2 à 6.
<a> Lien hypertexte
<img> Image
<strong> Renforcement

<head>
<meta charset="utf-8">
<title>Une premiè re page</title>
</head>
<body>
<h1>Le titre principal</h1>
<h2>Une liste non numé roté e</h2>
<ul>
<li>Choix 1</li>
<li>Choix 2</li>
<li>Choix 3</li>
</ul>
<h2>Un premier texte</h2>
<p>Ceci est un premier paragraphe
contenant du texte.<br>Ici un lien vers un
<a href="[Link] site de
faux-texte.</a> pour cré er des
paragraphes.</p>
<h2>Une image</h2>
<img src="[Link]
alt="Une image de snt">
</body>

Prof Yann Mfere

9
 LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION
Avec n’importe quel é diteur de texte ! AW ne pas confondre avec un traitement de
texte...
Sous Windows, vous pouvez té lé charger la version portable de Notepad++ :

1) Se rendre sur le site [Link]

2. 2) Cliquer sur Downloads puis sur la derniè re « release ».

3. 3) Choisir la version « zip package »

4) Dans Windows, dé compresser le fichier et copier le dossier obtenu dans sa clé
USB.

ce fichier a

<head>
<meta charset="utf-8">
<title>Une premiè re page</title>
</head>
<body>
<h1>Le titre principal</h1>
<h2>Une liste non numé roté e</h2>
<ul>
<li>Choix 1</li>
<li>Choix 2</li>
<li>Choix 3</li>
</ul>
<h2>Un premier texte</h2>
<p>Ceci est un premier paragraphe
contenant du texte.<br>Ici un lien vers un
<a href="[Link] site de
faux-texte.</a> pour cré er des

Prof Yann Mfere

10
 LYCE% E D’EXCELLENCE CONVENTIONNE% DE LA REVOLUTION
paragraphes.</p>
<h2>Une image</h2>
<img src="[Link]
alt="Une image de snt">
</body>

LES LANGAGES DU WEB : LE STYLE CSS [Link]

Le langage CSS (Cascading Style Sheets, feuilles de style en cascade) permet de

dé finir la maniè re dont sont affiché es les é lé ments de la page en leur appliquant des
styles : arriè re- plan, police, marges, bordures,...

body {
background-color:black ;
font-family:calibri ;
}
h1 {
background-color:#2e6ed6 ;
color:#ele8f2 ;
text-align:center ;

} h2 {

color:orange ;
}

p{

color:white ;
}

« Lefond »

« Laforme »

AW ajouter dans la partie « head » du code HTML :

<link rel="stylesheet" href="[Link]">

Prof Yann Mfere

11