Programmation Web

Dr. BOUBENIA Mohamed

[Link]@[Link]
Enseignant-Chercheur
Laboratoire des Systèmes Informatiques
Faculté d’Informatique
Département S.I
10/10/2024
Programmation Web
Plan de cette séance

1. 1. Objectif
Notions du du
de base module
Web
2. Fondements du Web
3. Contenu du module
4. Evaluation

2
Programmation Web

1. Notions de base du Web

1
Objectif du module

3
Programmation Web
1. Objectif du module

HTML

Programmation Web CSS

JavaScript
Objectifs:
Au terme de ce cours, l'étudiant devra être capable de concevoir
un site Web statiqus, interactif et dynamique avec des
fonctionnalités du côté client autant que du côté serveur. Il devra
aussi se familiariser avec les technologies Web de base.

Programmation Web !
4
Chapitre 1: Introduction
Fondements du Web
10/10/2024
Programmation Web
2. Les Fondements du Web

Internet ? Web

6
Programmation Web
2. Les Fondements du Web

Internet ≠ Web
Pour comprendre la relation de l'un avec l'autre,
il faut revenir sur l'invention de ces deux technologies.

7
Programmation Web
2. Les Fondements du Web
Inventé dans les années 60.
L'Internet Objectif: Faire communiquer plusieurs machines distantes.

"[...] Nous pensons que nous entrons dans une

ère technologique dans laquelle nous pourrons
interagir avec la richesse des informations
vivantes, non seulement de la manière passive
avec laquelle nous nous sommes habitués à
utiliser des livres et des bibliothèques, mais en
tant que participants actifs dans un processus
continu, en lui apportant quelque chose par
notre interaction avec lui [...]"
J.C.R. Licklider, Robert W. Taylor,
“The Computer as a Communication Device”,
in Science and Technology 76, pp 21-31, 1968.

Les inventions >

8
Programmation Web
2. Les Fondements du Web
Inventé dans les années 60.
L'Internet Objectif: Faire communiquer plusieurs machines distantes.

Les inventions nécessaires

Le modem
Équipement capable d’envoyer des données
numériques sur une ligne téléphonique (analogique)

0101011010
Ligne
Modem téléphonique Modem

9
Programmation Web
2. Les Fondements du Web
Inventé dans les années 60.
L'Internet Objectif: Faire communiquer plusieurs machines distantes.

Les inventions nécessaires Commutation automatique (Switching)

Le modem
Équipement capable d’envoyer des données
numériques sur une ligne téléphonique (analogique)
B
D

C
A
0101011010
Ligne
Modem téléphonique Modem Si A veut parler à D, il doit
trouver une route filaire pour
l’atteindre. (A-B-D ou A-C-D)
De manière intelligente,
résiliente et automatique.
...Un autre problème >
10
Programmation Web
2. Les Fondements du Web
Inventé dans les années 60.
L'Internet Objectif: Faire communiquer plusieurs machines distantes.

Les inventions nécessaires Avec 4 ordinateurs c'était facile…mais après il fallait une stratégie plus intelligente.

11
Programmation Web
2. Les Fondements du Web
Inventé dans les années 60.
L'Internet Objectif: Faire communiquer plusieurs machines distantes.

Les inventions nécessaires Avec 4 ordinateurs c'était facile…mais après il fallait une stratégie plus intelligente.

Un autre besoin :
Formaliser une manière d'identifier chaque
machine de manière unique.
Les adresses IP

[Link] [Link]
[Link]

[Link]:8080
[Link]
PORT [Link]
(On reviendra dessus plu tard) ...Un autre problème >
12
Programmation Web
2. Les Fondements du Web
Inventé dans les années 60.
L'Internet Objectif: Faire communiquer plusieurs machines distantes.

Les inventions nécessaires

Les adresses IP c’est bien, mais c’est pas pour les humains.

13
Programmation Web
2. Les Fondements du Web
Inventé dans les années 60.
L'Internet Objectif: Faire communiquer plusieurs machines distantes.

Les inventions nécessaires

Les adresses IP c’est bien, mais c’est pas pour les humains.

Exemple

Pour plus d’information sur l’USTHB:

Visitez : [Link]

Pas pratique, difficile à retenir….

14
Programmation Web
2. Les Fondements du Web
Inventé dans les années 60.
L'Internet Objectif: Faire communiquer plusieurs machines distantes.

Les inventions nécessaires

Les adresses IP c’est bien, mais c’est pas pour les humains.

Exemple

Pour plus d’information sur l’USTHB:

Visitez : [Link]

Pas pratique, difficile à retenir….

Pour plus d’information sur l’USTHB:

Visitez : [Link]

15
Programmation Web
2. Les Fondements du Web
Inventé dans les années 60.
L'Internet Objectif: Faire communiquer plusieurs machines distantes.

Les inventions nécessaires

Les adresses IP c’est bien, mais c’est pas pour les humains. DNS:
Domain Name System
Exemple

Pour plus d’information sur l’USTHB:

Visitez : [Link]

• Associe pour une ip un nom facile à retenir.

Pas pratique, difficile à retenir…. • Les humains utilisent les noms de domaine.
• Les machines utilisent les adresses numériques.
• Mais vous pouvez aussi utiliser les IP, ça marche.

Pour plus d’information sur l’USTHB:

Visitez : [Link]

16
Programmation Web
2. Les Fondements du Web
Inventé dans les années 60.
L'Internet Objectif: Faire communiquer plusieurs machines distantes.

L’évolution

17
Programmation Web
2. Les Fondements du Web

Modem
Swtich HTML
IP HTTP
DNS Hyperliens

Internet ≠ Web
Les années 60 En 1989

Internet c'est pas le fait d'avoir des sites Web.

Le web c'est tous ces sites sur lesquels vous naviguez.
Le Web n’est qu’une des applications d’Internet, mais c’est lui
qui a rendu les médias grand public attentifs à Internet.

18
Programmation Web
2. Les Fondements du Web
World Wide Web (WWW), ou la toile d’araignée (en français).
Le WEB Inventé 1989, au CERN, par Sir Tim Berners Lee.

Tim Berners Lee –

L’Inventeur du WEB

19
Programmation Web
2. Les Fondements du Web
World Wide Web (WWW), ou la toile d’araignée (en français).
Le WEB Inventé 1989, au CERN, par Sir Tim Berners Lee.

Tim Berners Lee –

L’Inventeur du WEB

Centre Européen pour La recherche Nucléaire

• Des physiciens provenant du monde entier.

• Des formats de document différents,
• Des logiciels différents
• Des Système d'exploitation différents.

20
Programmation Web
2. Les Fondements du Web
World Wide Web (WWW), ou la toile d’araignée (en français).
Le WEB Inventé 1989, au CERN, par Sir Tim Berners Lee.

Tim, qui est alors Ingénieur logiciel au Cern, se sent Tim Berners Lee –
frustré par cette masse hétérogène d'information, et
L’Inventeur du WEB
décide alors de revoir la façon dont l'information est
structurée, et la façon dont on y accède.
Il travaille alors sur la mise en place d'un système
Centre Européen pour La recherche Nucléaire HyperText distribué, Intitulé World Wide Web.

• Des physiciens provenant du monde entier. La première Page Web

• Des formats de document différents, [Link]
• Des logiciels différents
• Des Système d'exploitation différents.

De quoi il s'agit ?
21
Programmation Web
2. Les Fondements du Web
World Wide Web (WWW), ou la toile d’araignée (en français).
Le WEB Inventé 1989, au CERN, par Sir Tim Berners Lee.

Le projet 3W se définit comme une initiative de recherche d'information hypermédia.

Hypermédia fait ici référence à de
l'hypertext qui inclut non seulement
du texte mais aussi des images du son
et des vidéos, compris dans une page
Web.

Hypertext:
Texte cliquable, qui permet de
naviguer facilement d'une
page web à une autre.

Page Web ?
22
Programmation Web
2. Les Fondements du Web

Le WEB
1. Notions de base du Web

C’est quoi une page Web ?

23
Programmation Web Exemple de page
Web
2. Les Fondements du Web

Le WEB

bouton

24
Programmation Web
2. Les Fondements du Web

Le WEB C’est quoi un site Web ?

1. Notions de base du Web
Liens externes

…et parfois des liens dits «externes», c'est-à-

dire de pages hébergées par un autre serveur.
Un site web est un ensemble de pages Web
stockés sur un ordinateur. Un site web est
habituellement architecturé autour d'une Liens internes
page centrale, appelée «page d'accueil» et
proposant des liens vers un ensemble d'autres
pages hébergées sur le même serveur,…
25
Programmation Web
2. Les Fondements du Web

Le WEB Comment accéder à un site Web?

1 2
On ouvre un navigateur Web : On saisit l'adresse du site Web Résultat:
(client Web) auquel on veut accéder le site en question s’ouvre,
(ex: [Link]) (on obtient une page Web)
appelé URL
(Uniform Resource Locator)
Chrome

ou Firefox

ou Opera

Etc…
26
Programmation Web
2. Les Fondements du Web

Le WEB

Mais techniquement,
comment ça marche?

27
Programmation Web
2. Les Fondements du Web

Le WEB Mais techniquement, comment ça marche?

Le moment où on saisit l’adresse Le moment où la page Web s’affiche
Que passe-t-il
entre ces deux
moments ?

Il se passe, en arrière plan,

des étapes que vous ne
verrez pas, a fin de vous Mais, vous devez savoir un
simplifier la vie. minimum sur ces étapes afin de
créer un site Web.

28
Programmation Web
2. Les Fondements du Web

En quoi
consiste ces étapes ?

29
Programmation Web
2. Les Fondements du Web
En quoi consiste ces étapes ?
Quand vous dites "je vais sur un site Web", voici (de
manière simplifiée) ce qui se passe en arrière plan :

30
Programmation Web
2. Les Fondements du Web
En quoi consiste ces étapes ?
Quand vous dites "je vais sur un site Web", voici (de
manière simplifiée) ce qui se passe en arrière plan :

Le Navigateur

1
Vous saisissez
l’adresse du Site

Vous
31
Programmation Web
2. Les Fondements du Web
En quoi consiste ces étapes ?
Quand vous dites "je vais sur un site Web", voici (de
manière simplifiée) ce qui se passe en arrière plan :
Serveur
Web
2
Demande
la page Web

Le Navigateur

1
Vous saisissez
l’adresse du Site

Vous
32
Programmation Web
2. Les Fondements du Web
En quoi consiste ces étapes ?
Quand vous dites "je vais sur un site Web", voici (de
manière simplifiée) ce qui se passe en arrière plan :
Serveur
Web
3
2 Répond
Demande en envoyant
la page Web la page Web.

Le Navigateur

1
Vous saisissez
l’adresse du Site

Vous
33
Programmation Web
2. Les Fondements du Web
En quoi consiste ces étapes ?
Quand vous dites "je vais sur un site Web", voici (de
manière simplifiée) ce qui se passe en arrière plan :
Serveur
Web
3
2 Répond
Demande en envoyant
la page Web la page Web.
(un document HTML)

Le Navigateur

1
Vous saisissez
l’adresse du Site

Vous
34
Programmation Web
2. Les Fondements du Web
En quoi consiste ces étapes ?
Quand vous dites "je vais sur un site Web", voici (de
manière simplifiée) ce qui se passe en arrière plan :
Serveur
Web
3
2 Répond
Demande en envoyant
la page Web la page Web.
(un document HTML)

Le Navigateur

1 4
Lit le document HTML
Vous saisissez
Et il vous affiche la
l’adresse du Site
page Web.

Vous
35
Programmation Web
2. Les Fondements du Web
En quoi consiste ces étapes ? CTRL+U
Quand vous dites "je vais sur un site Web", voici (de (pour voir ce code HTML sur le navigateur)
manière simplifiée) ce qui se passe en arrière plan :
Serveur
Web
3
2 Répond
Demande en envoyant
la page Web la page Web.
(un document HTML) Le Navigateur
a interprété le code HTML
Le Navigateur

1 4
Lit le document HTML
Vous saisissez
Et il vous affiche la
l’adresse du Site
page Web.

Vous
36
Programmation Web
2. Les Fondements du Web

Serveur
Web
Grâce au Protocole HTTP
(Hypertext Transfer Protocol) Réponse
Requête
Un protocole de communication Envoie un document
client-serveur HTML.

URL

37
Programmation Web
2. Les Fondements du Web

Serveur Ce sont les éléments du Web

Web
Grâce au Protocole HTTP
(Hypertext Transfer Protocol) Réponse
Requête
Un protocole de communication Envoie un document
client-serveur HTML.

Client
(navigateur)
URL

38
Programmation Web
2. Les Fondements du Web
HTML: HyperText Markup Langage

Vous devez
apprendre à écrire
un document HTML

Si vous voulez créer

une page Web…

39
Programmation Web
2. Les Fondements du Web
CSS (Cascading Style Sheets): Feuilles de Style
Titres
Le HTML permet de remplir Listes
et de structurer le contenu Paragraphes
de la page:

Images
…

Rendre la plus
présentable ?
Comme ceci Un document
Il faut ajouter CSS
autre chose !

40
Programmation Web
2. Les Fondements du Web
HTML: HyperText Markup Langage
Titres
Le HTML permet de remplir Listes
et de structurer le contenu Paragraphes
de la page:

Images
…

Rendre la plus
présentable ?
Comme ceci Un document
Il faut ajouter CSS
autre chose !
Couleur de texte
Police d’écriture

Positionnement
des images

41
Programmation Web
2. Les Fondements du Web
Site Web Statique (Seulement avec HTML+CSS)

Serveur
Web
Suffisant pour
la présentation
Requête Réponse
HTTP HTML+CSS.

Navigateur

42
Programmation Web
2. Les Fondements du Web
Site Web Statique (Seulement avec HTML+CSS+JS) Interactif

Serveur
Web
Suffisant pour Interactivité
+
la présentation (Côté Client)
Requête Réponse Exemple:
HTTP HTML+CSS. • Capturer les actions utilisateur (cliques)
+ • Faire des calcules
JavaScript • Valider des formulaires
(tout ce qu’on peut faire avec un langage de
JavaScript: programmation)
bout de programme exécuté Navigateur
côté client (dans la navigateur)

43
Programmation Web
2. Les Fondements du Web

Site Statique
vs
Site Dynamique

44
Programmation Web
2. Les Fondements du Web
Site Dynamique
+ bout de programme exécuté
côté serveur: Java / PHP / JavaScript /python
Serveur Le contenu des pages Web n’est pas
Web statiques:
Le contenu d'une page web est
construit dynamiquement. Peut donc
varier en fonction d'informations
Requête Réponse (heure, nom de l'utilisateur, formulaire
HTTP HTML+CSS. rempli par l'utilisateur, etc.) qui ne
+
sont connues qu'au moment de sa
JavaScript
consultation.

Navigateur
JavaScript

45
Programmation Web
2. Les Fondements du Web
Site Dynamique
Programmation côté serveur:
Java / PHP / JavaScript /python
< Requêtes SQL Serveur
Données > Web
Eventuellement utiliser
une base de données:
Stocker/Consulter Réponse
Requête
HTTP HTML+CSS.
+
JavaScript

Navigateur
JavaScript

46
Programmation Web

3
Contenu du cours

47
Programmation Web
3. Contenu du cours Site dynamique
(programmation
Les bases de données Chapitre 5 Chapitre 4 côté serveur)

Serveur
Web
Base de données

HTML

Chapitre 1
Site
CSS
Statique
Chapitre 2

Chapitre 3
Interactivité Navigateur
(programmation JavaScript Chapitre 0
côté client)
Introduction

48
Programmation Web

Modalité d’Evaluation

49
Programmation Web
4. Evaluation
Modalité d'Evaluation

Contrôle continu TP /20

/20
Note TP (Projet à remettre ou test) /20

Note EMD (examen écrit) /20 (x2)

Crédits : 3 Coefficient : 2

50
Programmation Web

Merci

51