I&W I&W

But

Internet et Web
rd i te s
i nte
on
Comprendre Internet

Comprendre le fonctionnement des uc tiactuellement

o d pages véhiculées sur
Laure Brisoux - Devendeville le Net
Écrire des pages «&
repr
ion
proprement »
u s
Diff
[Link]@[Link]

2022-2023

1 / 160 2 / 160
I&W I&W

Organisation Organisation : nouveau format

Un maïtre mot : curiosité

r d ite s Chaque TP a un sujet précis ;

rdite s
Cours :
in te Le cours et internet seront des ressources.
inte
tion (voir ENT) tion
2 cours les 8 & 22 septembre
TP sur machine : 9 séances dès le u12cseptembre u c
od
les TP sont en binômes ;

e p r e p od ;
Les TP sont notés à chaque rséance
Planning
& r & r : 0.
Les plannings s n
ioENT, sio n
En cas d’absence injustifiée

ff u sont variables d’une semaine sur l’autre. Être attentif aux

Conseil iffu
Di
affichages, mails, Moodle, informations données en cours ou TP.
En cas de reconfinement, tout sera indiqué sous Moodle.
D
Préparez vos sujets à l’avance....

M3C
Contôle continu (moyenne des TP) avec seconde session.

3 / 160 4 / 160
I&W I&W
Plan

Organisation : nouveau format Plan

te s te s
Au programme :

rdi r d i
inte
TP0 : prise en main de l’environment (commun EI & Bases de prog)
in te
tion tion
TP1 : HTTP & HTML
uc uc
od od Partie III : le langage CSS
TP2 : Bases de HTML
r r
Partie II : le langage HTML

r e p
TP3 : Images & navigation
re p
& Partie I : Internet &
1 Plan
n n
Partie IV : Javascipt/jQuery
iIIo io
TP4 : CSS

iff u s ff u s
Di
TP5 : CSS
D
TP6 : Animations
TP7 : jQuery
TP8 : Log & trace

5 / 160 6 / 160
I&W I&W
Plan Plan
Partie I : Internet Partie II : le langage HTML

Partie I : Internet Partie II : le langage HTML

r dite s rd ite s
in te in te
u c ion de l’Internet
tservices u c tion
10 Généralités

od World Wide Web od11 Première page

5 Les
r r
7 Pourquoi faire ?
p p
2 Introduction
3 Un peu d’histoire
& re E-mail
& re
4
s io n
Les services de l’Internet 6 Les réseaux : TCP/IP
8 Historique
s io n
u u
12 Que peut-on faire en HTML ?

Di ff 9
Diff
Objectif

7 / 160 8 / 160
I&W I&W
Plan Plan
Partie III : le langage CSS Partie IV : Javascipt/jQuery

Partie III : le langage CSS Partie IV : Javascipt/jQuery

rdite s r d ite s
i nte in te
c
14uLes
ion
tpropriétés u c tion
od od
17 JQuery

re pr 16 Introduction
re pr
& &
13 Introduction 18 Javascript : Un langage de
o n 15 Les Formulaires
io n
usi s programmation
ff u
D i Diff

9 / 160 10 / 160
I&W I&W
Introduction

Plan

Première partie I rdite s rd ite s

inte inte
uc tion u c ion de l’Internet
4 Lestservices

rod
Internet...
e p prod
r re
2 Introduction

& &
5 Les services de l’Internet

s io n s ion
u u
3 Un peu d’histoire

Diff Diff
6 Les réseaux : TCP/IP

11 / 160 12 / 160
I&W I&W
Introduction Un peu d’histoire

Introduction Plan
Internet omniprésent dans la vie quotidienne

te s te s
Télétravail
Commandes
rd i rd i
Information
in te inte
tion ion de l’Internet
Jeu
4 Lestservices
....
uc u c
Nombreux équipements
e p r oddébit (85,2% des français en 2021) prod
r re
2 Introduction

fixe& &
abonnement Haut ou très haut 5 Les services de l’Internet
ordinateurn
u s io portable 3
u s ion
Un peu d’histoire
ff
Di smartphone
ordinateur
Diff
6 Les réseaux : TCP/IP

tablette
imprimante
...

Comment les ordinateurs communiquent-ils entre eux ?

Comment les informations circulent-elles ?
13 / 160 14 / 160
I&W I&W
Un peu d’histoire Un peu d’histoire

Un peu d’histoire Solution

Contexte : fin de la seconde guerre mondiale

rdite s Création d’un réseau « maillé »
rdite s
Arrivée de la force de dissuasion atomique
in te? inte
tion tion
Comment continuer à communiquer en cas d’attaque
u c uc
e prod e prod
& r & r
s io n s io n
ff u ff u
Di Di

15 / 160 16 / 160
I&W I&W
Un peu d’histoire Les services de l’Internet

Solution Plan

d ite s
Création en 1969 d’Arpanet (« Advanced Research Projects Agency
r rd ite s
Network ») aux USA
in teÉtats-Unis par inte
n Agency »)
tioProjects
premier réseau à transfert de paquets développé aux
ion de l’Internet
4 Lestservices
u c u c
od prod
la DARPA (« Defense Advanced Research
2 nœuds au départ
re p r 2 Introduction
re
& &
5 Les services de l’Internet
n
io du protocole TCP/IP pour uniformiser le réseau
23 en 1971, jusqu’à
s
111 en 1977
s ion
u u
3 Un peu d’histoire
iff
en 1974
D
création
toujours en vigueur Diff
6 Les réseaux : TCP/IP

1992 création du World Wide Web avec la création du langage

HTML et protocole d’échange HTTP

17 / 160 18 / 160
I&W I&W
Les services de l’Internet Les services de l’Internet

Les services de l’Internet Plan

rd ite s rd ite s
in te in te
tion tionWide Web
L’e-mail (ou mél - courriel) 5 Les services de l’Internet
uc u c
od prod E-mail
Usenet (les news) World
r
2 Introduction
e p
r protocole par lequel on peut envoyer
Telnet (ouverture de session)
re
n & &
ion
FTP (File Transfert Protocol),
o données
ides
3 Un peu d’histoire

u s
ou recevoir
ff
i (World Wide Web) u s
iff de l’Internet
6 Les réseaux : TCP/IP

D
WWW 4 Dservices
Les

19 / 160 20 / 160
I&W I&W
Les services de l’Internet Les services de l’Internet
World Wide Web World Wide Web

World Wide Web World Wide Web

r d ite s rd i te s
in te in te
Méthode d’exploration de l’Internet par u c tiodenl’HyperTexte, et mis tionà partir de liens
Service Internet d’accès aux ressources ducréseau
u
od (1990). On parle du « Web » hypertexte (des « pointeurs »), suro d il suffit de « cliquer » pour se
l’usage
e p r
r le « World Wide Web » ou « W3 »
au point par le chercheur Tim Berner-Lee
re p r lesquels

n & &
connecter (accéder) à d’autres serveurs et obtenir une information

ion
même si en réalité on évoque

u s io spécifique.
u s
Di ff Diff

21 / 160 22 / 160
I&W I&W
Les services de l’Internet Les services de l’Internet
E-mail E-mail

E-mail SPAM

rdite s rd ite s
inte in te
Courriel
uc tion Pourriel
u c tion
Mél
e prod e
L’encombrement délibéré d’un forum
pr dde discussion ou d’un compte
osollicités,
& r &
e-mail par l’envoi de messagesr non telles que les annonces à
n on (54% des courriers envoyés en mars 2020 sont des
mail

u s io en 1971. u eni avril 2014).

s
caractère publicitaire

Di ff
L’e-mail a été inventé
Diff
SPAMs, 74%

23 / 160 24 / 160
I&W I&W
Les réseaux : TCP/IP Les réseaux : TCP/IP

Plan Illustration envoi de mail

rd ite s r d ite s
inte in te
ion de l’Internet tion
Pierre veut envoyer un mail à Martin
4 Lestservices
u c u c
prod d
L’adresse mail de celui-ci est : martin@[Link]
Soulève plusieurs problèmes :epro
re r
2 Introduction

& &
5 Les services de l’Internet

ion n
o ? : interrogation du DNS (Domain Name
imachine)
Est-ce que l’adresse existe ? Où envoyer le message physiquement
s s
1

u u
3 Un peu d’histoire

Diff ff
i une machine particulière.
6 Les réseaux : TCP/IP (sur quelle
D
Serveur)

25 / 160 26 / 160
I&W I&W
Les réseaux : TCP/IP Les réseaux : TCP/IP

DNS Illustration envoi de mail

rdite s rd ite s
inte Pierre veut envoyer un mail à Martin
inte
uc tion u c tion
L’adresse mail de celui-ci est : martin@[Link]

e prod Soulève plusieurs problèmes :

e p rod
& r & r ? Où envoyer le message physiquement
n n
Est-ce que l’adresse existe
io o
1
(sur quelle imachine)
ff us u s ? : interrogation du DNS (Domain Name
iff une machine particulière.
Di D
Serveur)
Comment se passe ce « voyage » (routage) ?
2

27 / 160 28 / 160
I&W I&W
Les réseaux : TCP/IP Les réseaux : TCP/IP

Première étape : découpage et encapsulation TCP/IP

rdite s r d i te s
inte in te
tion n
tioforme
Transmission Control Protocol/Internet Protocol
uc u c
od o d
Protocole pour échanger les données sous de paquets

re pr 3 valeurs indispensables : pr
re
n & une adresse IP&
onde sous-réseau
io
(enfin deux)

us u s i
ff Diffune adresse de passerelle (routeur)
un masque

Di

... [Link] [Link] .... ur ...

IP source IP Destination
29 / 160 30 / 160
I&W I&W
Les réseaux : TCP/IP Les réseaux : TCP/IP

Une adresse IP ? ? ? Une adresse IP ? ? ?

r d ite s rdite s
inte 4 Octets séparés par des .
inte
Base même du protocole TCP/IP
u c tion u c t
Les octets sont écrits sous forme décimaleion
p d et le poste sur un réseau
oréseau
Identifie (de manière unique)rle Octet entre 0 et 255
p rod
TCP/IP
& r e & re
Exemples : [Link], [Link], ...

s io n s n
io Adresse IP (Numéro IP)
u u
poste = ordinateur, smartphone, tablette, imprimante, fax ...

Diff Di ff Adresse du réseau Adresse du poste

31 / 160 32 / 160
I&W I&W
Les réseaux : TCP/IP Les réseaux : TCP/IP

Seconde étape : envoi des paquets sur le réseaux Routage

Chaque nœud oriente les paquets grace à l’IP destination

rdite s rdite s
inte inte
uc tion uc tion
e prod e prod
& r & r
s io n s io n
ff u ff u
Di Di

33 / 160 34 / 160
I&W I&W
Les réseaux : TCP/IP Les réseaux : TCP/IP

Troisème étape : reconstitution du message Comment se passe le voyage

rdite s rd i te s
inte Le nœud (routeur) s’interroge alors pour savoir ce qu’il
inte faire des
doit

uc tion données :
u c
n
tioréseau
e prod ro dsous-réseau) ; qu’il dessert
soit l’adresse IP destination fait partie
p
du

& r & re dire aïguiller les données vers leur

directement (utilité du masque de

s io n s ioIl npeut disposer de plusieurs chemins possibles, il choisit

soit il doit « router » c’est-à
ff u u
iff adéquat.
Di
destination.
D
le chemin

35 / 160 36 / 160
I&W I&W
Pourquoi faire ?

Plan

Deuxième partie II rdite s rd ite s

inte in te
tion tion
10 Généralités
uc u c
e prod HTML
Le langage 7 Pourquoi faire ?
e prod11 Première page
& r & r
s io n 8 Historique
s io n
u u
12 Que peut-on faire en HTML ?

Diff 9 Di ff
Objectif

37 / 160 38 / 160
I&W I&W
Pourquoi faire ? Historique

Pourquoi faire ? Plan

rd ite s rd ite s
in te in te
tionsites web tion
10 Généralités
c c
Définir un langage permettant d’élaborer des

r
Ensemble de pages web (ou Html)u
odsous forme de graphe 7 Pourquoi faire ?
r u
od11 Première page
re p
Organisées (de façon logique)
re p
La transition entre& &
s o n les pages (ou navigation s’effectue grâce aux liens
i(références
8 Historique
s io n
u u
12 Que peut-on faire en HTML ?
iff
HyperText
D
à d’autres pages)
9 Di ff
Objectif

39 / 160 40 / 160
I&W I&W
Historique Historique

Historique HTML5

rdite s HTML5=HTML+CSS+JavaScript
rdite s
inte Une grammaire simplifiée
inte
1989
uc tion Un doctype simplifié
u c tion
1995 HTML 2.0
e prod e rod
Des nouveaux éléments sémantiques
ppériphériques
& r
1997 : HTML 3.2. et 4.0
Des nouveaux élémentsrde
&de champs de formulaire
s n
i:oHTML5 Des nouveaux n
s io types
u
2007-2014
ff u
Di Diff
HTML5
L’idée d’HTML5 est de structurer le document et d’appliquer le CSS
pour mettre en valeur cette structure.

41 / 160 42 / 160
I&W I&W
Historique Historique

[Link]
/[Link]

rdite s rdite s
te te
Les références aux différentes pages se font à l’aide d’adresses
in in
ion tion
appelées URL (Uniform Ressource Locator - Localisateur de
Ressources Uniformes)
uc t uc
p rod
Identifiant de Ressources HTML
e http:// : protocole utilisé ro d
e p
Exemple :
& r & r
n https on
ftp

u s io
[Link]
u s i
Di ff Diff

43 / 160 44 / 160
I&W I&W
Historique Historique

HTTP : Protocole ? [Link]

/[Link]

te s te s
http:// : protocole utilisé
i i
Protocole

te rd
Un protocole informatique (ou parfois tout simplement un protocole ftp
te r d
in in
tion [Link] : nom du serveur ion
https
quand le contexte de l’informatique est clair) est un ensemble de règles

uc
qui régissent les échanges de données ou le comportement collectif de
u ct
prod
processus ou d’ordinateurs en réseaux ou d’objets connectés. Un
e
d
pro des pages web
une machine accessible de l’extérieur
e
& r
protocole a pour but de réaliser une ou plusieurs tâches concourant à un
par opposition au &
r
dont le rôle est de transmettre

io n o n client
usila machine qui :demande
fonctionnement harmonieux d’une entité générale. Wikipédia
ff us
i d’un protocole ? iff
qui est la page
D
Intérêt D
/˜devendev/chez_moi/
dossiers
cheminement dans l’arborescence des
On parle tous la même langue
On se comprend /˜devendev/ : racine des fichiers html configurée sur le serveur. Par
défaut : répertoire public_html en racine de l’utilisateur.
Les protocoles sont normalisés
/˜devendev/chez_moi/ : dans le repertoire chez_moi du répertoire
public_html
[Link] : nom du fichier (page HTML)
45 / 160 46 / 160
I&W I&W
Historique Historique

te s te s
[Link] /[Link]

i i
devendev

rd rd
[Link]

inte inte
tion tion
public_html

[Link]

uc uc
od od
GET /~devendev/chez_moi /[Link] http/1.0 GET /~devendev/chez_moi /[Link] http/1.0

r r
A.c chez_moi

re p o
+

o& re p v
n & n
La racine des fichiers html B.c

io io
[Link]

us us
= public_html

Diff Diff [Link]

l

47 / 160 48 / 160
I&W I&W
Historique Historique

te s te s
[Link] /[Link]

rdi rdi
inte inte
tion tion
[Link]

uc uc
od od
GET /~devendev/chez_moi /[Link] http/1.0

re pr re pr
n & n &
us io us io
Diff Diff

49 / 160 50 / 160
I&W I&W
Historique Historique

Plusieurs « navigateurs » :
Opéra ;
Firefox ; Rôle d’un navigateur
Internet Explorer ;

te s te s
Safari ; Traduire le contenu du fichier HTML sur écran. Il ne faut donc pas

rdi r di
oublier qu’il y a un intermédiaire entre le fichier et l’affichage écran.
Chrome ...
inte in te
tion tion;
Le navigateur n’a pas un rôle de vérificateur :

uc jamais une page HTML générera unecerreur

u
e prod e p r»o;
d
& r r
le navigateur fait « au mieux
le « mieux des uns&
s io n s n
io donc avoir deux rendus différents !
» n’est pas le « mieux des autres » ;

ff u ff u
Di Di
une page peut

Attention
Ce n’est pas parce que la page « apparaît » correctement qu’elle l’est ! ! !

51 / 160 52 / 160
I&W I&W
Historique Historique

Différences entre utilisation d’un serveur et ouvrir Un peu d’histoire

localement un fichier ?

rdite s HTML : Hypertext Markup Language

rdite s
in te Origine : 1989-1992, à la base du WWW
inte
n tion (W3C)
ctio
1995 : HTML 2.0
u
il faut un compte que la machinedlocale u c
accessible de partout rep
ro e pr od
1995 : Création du World Wide Web Consortium
r
n &un protocole de communication 4.0 &
1996 : CSS 1
1997 : HTML n
s io
le navigateur utilise
s io2
D ffuutiliser les services du serveur (php, bdd, ...)
on ipeut
D iff
1998 : u
CSS
2007- : HTML 5.0
2014- : CSS 3
Chaque version apporte son lot de nouvelles fonctionnalités

53 / 160 54 / 160
I&W I&W
Historique Historique

Exemple de morceau de texte en HTML Exemple de morceau de texte en HTML

rdite s rdite s
inte inte
uc tion <UL> <LI> Un bout de texte </LI>uct
ion
r d color&eacute;e </A></LI>
oTableau
<UL><LI> Un bout de texte </LI>
p pr d color&eacute;e</A></LI>
oTableau
re
<LI> <A HREF="[Link]">
& re
<LI> <A HREF="[Link]">
&
n n
</UL>
io io
</UL>

ff us ff us
Di Di

55 / 160 56 / 160
I&W I&W
Objectif Objectif

Plan Le langage HTML : Objectif

rd ite s rdite s
in te in te
tion tion
10 Généralités
u c u c
od11 Première page od
Langage
r r
7 Pourquoi faire ?

re p Vocabulaire
r e p
n & n &
io io
8 Historique Règles de grammaire (règles d’écriture : très simple)

ff us 12 Que peut-on faire en HTML ?

ff u s
9 Di
Objectif Di

57 / 160 58 / 160
I&W I&W
Généralités Généralités

Plan Le langage HTML : Généralités

rd ite s rd ite s
in te in te
tion onpages a changé :
tides
10 Généralités
u c u c
od od ;
Remarques Avec HTML5 la philosophie de l’écriture
r r
7 Pourquoi faire ?

re p orientation contenu et pasp

r e contenant

n & 11 Première page

La mise en forme &
n est fortement déléguée aux CSS
io io
8 Historique

ff us ff u s
9 Di
Objectif
12 Que peut-on faire en HTML ?
Di

59 / 160 60 / 160
I&W I&W
Généralités Généralités

Le langage HTML : Généralités Le langage HTML : Généralités

rdite s r d ite s
in te nteIl fait beau ce
de itexte
n HTML utilise des
tleiolangage
Par exemple, pour mettre en gras la portionn
io beau ce matin, il vous
matin et la apparaître sous la forme :cIltfait
u c
Pour réaliser la présentation d’un texte
TAGS ou délimiteurs ou baliseso d u
e pr à une portion de texte, vous devez, suffira d’écrire
e p r od
r r
n &encadrer cette portion de texte entre deux balises Exemple de balises n &
pour apporter une modification

s io
dans le cas général,
u u s ioce matin</B>
Diff Di ff
<B>Il fait beau

61 / 160 62 / 160
I&W I&W
Généralités Généralités
Remarques

Le langage HTML : Généralités Le langage HTML : Remarques

Si TOTO et TITI sont deux noms de balise on ne pourra jamais

te s te s
écrire :
r d i rdi
B est le nom de la balise
in te inte
tion n
<TOTO>Texte1<TITI>Texte2</TOTO>Texte3</TITI>

ct: io
on s’aperçoit que ce nom est répété dans le délimiteur de fin précédé
du signe /
d u c comme les parenthèses, il faudradu
deoparenthèsage, et le balisage avec
r ro écrire
e p
r sous la forme :
Ceci correspond à une sorte
r e p
n &
deux délimiteurs se présentera
n&
sio o
<TOTO>Texte1<TITI>Texte2</TITI>Texte3</TOTO>
s i
Balisageiffu iffu :
D D
Exemple
<nomBalise>Texte</nomBalise>
<I>Il fait<B>beau </B>ce matin</I>

ce qui donnera :
Il fait beau ce matin
63 / 160 64 / 160
I&W I&W
Généralités Première page
Remarques

Le langage HTML : Remarques Plan

te s te s
Dans certaines balises, on peut adjoindre un (ou plusieurs) attribut

r d i rd i
te te
Celui-ci permet de préciser une autre action à excécuter sur la
in 10 Généralités in
iolanforme : tion
portion de texte

u c t
Dans ce cas, le balisage se présentera sous
u c
rod rod11 Première
7 Pourquoi faire ?

e p
<nomBalise Attribut=valeur>Texte</nomBalise>
r re p page

& n&
Exemple : <A HREF="[Link]"> Le texte </A> L’encodage, un problème

ionprécis
8 Historique
s
Dans certains
à unff u
cas, il suffit d’une seule balise pour agir sur le texte
u s io réccurent ...

D i Diff
moment 9 Objectif
12 Que peut-on faire en HTML ?
Dans ce cas, on trouvera <nomBalise> ou <nomBalise/>
Exemple : <HR>
Enfin, le nom des balise peut être écrit indifféremment en majuscules
ou en minuscules

65 / 160 66 / 160
I&W I&W
Première page Première page

Le langage HTML : Première page Focus sur la balise <!DOCTYPE ...>

r d it es La première balise :
r d i t es
Dans un document on trouve 4 couples de balises :
in te déclaration du type de document ;
in te
<HTML>...</HTML> : marquent le débutiet
c t onla fin du document c t on la page a été écrite.
indique au navigateur dans quel type de iHTML
<HEAD>...</HEAD> : marquent d u
o l’entête: permettent u
od W3C ( ) ;
prHEAD) p r
de la page Sert à :
e
<TITLE>...</TITLE> r(dans e
& r(qui le prennent en compte) d’ignorer toute
titre à la pagen &
de donner un faire valider les pages par le validateur 1

s io : entourent le corps du document Permet auxio n

u us non conforme ;
navigateurs

Di ff
<BODY>...</BODY>
D iff
instruction
Précédé par la balise <!DOCTYPE ...> Sans cela, le navigateur va essayer d’interpréter quitte à essayer des
syntaxes des versions antérieures.

1. http ://[Link]/
67 / 160 68 / 160
I&W I&W
Première page Première page

Focus sur la balise <!DOCTYPE ...> Le langage HTML : Première page

rdite s r d ite s
inte Reprenons...
in te
uc tion <HTML>...</HTML> : marquent le débutiet
u c t onla fin du document
od <HEAD>...</HEAD> : marquent d
o l’entête: permettent
Syntaxe version 5 :

re pr <TITLE>...</TITLE> r(danse prHEAD)

de la page
<!DOCTYPE HTML>
n & titre à la pagen & de donner un

u s io u s io apparaissant sur nom du signet sur le navigateur

Di ff D iff
<BODY>...</BODY> : entourent le corps du document
Précédé par la balise <!DOCTYPE ...>

69 / 160 70 / 160
I&W I&W
Première page Première page

Le langage HTML : Première page Le langage HTML : Première page -simple-

<!DOCTYPE HTML>
Remarque : Dans la balise <HEAD>. On pourra trouver, une autre
rd i te s <HTML LANG="fr">
rdite s
balise (ou directive) <META> :
in te de la <HEAD>
inte
tionde recherche ) qui seront tion
<META NAME="AUTHOR" CONTENT="MOI">
Ce sont des informations (importantes pour l’interprétation
page où son référencement par les c c
u u
<META NAME="KEYWORDS" CONTENT="BLA,BLI,BLU">
od maisle pas od
moteurs

r e p r
lues par le serveur, le navigateur visualisées ;
re p
<META CHARSET="UTF-8">
r
& (CONTENT), ou encore un ensemble de mots clés &
Ces informations sont généralement nom (NAME) de l’auteur <TITLE>
(AUTHOR), n n
s io le contenu
utrouvera aussipourra us io
premier titre

D iff
(KEYWORDS)
On
qui être examiné par les moteurs de recherche ;
CHARSET qui indique l’encodage de la page Di
</HEAD>ff
</TITLE>

Autre couple de balises « non interprétées » : <!-- et --> <BODY>

permettent d’insérer des commentaires dans la page. Ma première page en HTML
<!-- Et mon premier commentaire -->
</BODY>
</HTML>

71 / 160 72 / 160