Cours Programmation Web

Introduction
Principes de base
Évolution et élaboration d'un document Web

Enseignant : Yassine MBAREK

ISET Jendouba
yassine.mbarek@gmail.com
Principes de base
 Internet et Web
● Internet : International Network
– Réseau informatique mondial créé par
l'interconnexion de réseaux de télécommunications
et d'ordinateurs.
- L'ensemble utilise un même protocole de communication : TCP/IP,
(Transmission Control Protocol / Internet Protocol)
● Web :
– Système de communication fonctionnant en
hypermédia
– il n'est plus utile de connaître la localisation de ce que l'on
cherche

2
Principes de base

Document, Navigateur, Site et

Serveur Web (1/4)
● Document Web : fichier texte stocké sur
un serveur. Il décrit les données et leurs
règles d'affichage selon une norme
– SGML, HTML, DHTML, XHTML, XML, …

3
Principes de base

Document, Navigateur, Site et

Serveur Web (2/4)
● Navigateur Web : logiciel capable de
télécharger un document Web, et de
l'interpréter en respectant la norme utilisée
– Internet Explorer, Netscape, Mozilla, Opera
– Safari, Konqueror, ...

4
Principes de base

Document, Navigateur, Site et

Serveur Web (3/4)
● Site Web : Ensemble de documents Web
liés entre-eux hébergés sous un Serveur Web
– http://fr.wikipedia.org/wiki/Internet

5
Principes de base

Document, Navigateur, Site et

Serveur Web (4/4)
● Serveur Web : Ordinateur stockant
physiquement un ou plusieurs sites Web
– fr.wikipedia.org

6
Principes de base

 Les acteurs du Web

7
Principes de base

 Transmission de pages (1/2)

● Objectif : d'un point quelconque du réseau,
recevoir un document demandé

8
Principes de base

 Transmission de pages (2/2)

● Requête : demande d’un document se trouvant à
une certaine adresse, et suivant un protocole
d’échange défini

9
Principes de base
 Recherche du serveur
● Protocoles :
– http : Hyper Text Transfer Protocol
– ftp : File Transfer Protocol
● Site :
– Nom <-> N° IP (Domain Name Service)

10
Principes de base

 Recherche du document
● Si un répertoire ou une page n'existe pas,
le serveur renvoie une erreur (404)
● Si pas de droit d'accès, erreur d'identification
● Sinon retourne la page

11
Principes de base

12
Principes de base

 Fonctionnement du Web
 Le client (navigateur ou browser) dialogue avec
un serveur Web selon le protocole HTTP
 Le serveur vérifie la demande, les autorisations et
transmet l'information
 Le navigateur interprète le fichier reçu et l'affiche
(le navigateur, un plug-in ou un helper)
 A ce schéma de base, peuvent s'ajouter :
 des contrôles par compte individuel, par domaine, par
adresse IP...
 des exécutions de code côté serveur et/ou côté client

13
Principes de base
 Vision côté client (1/2)
 Le Web est un ensemble de pages (documents) pouvant
contenir des liens vers d'autres pages n'importe où dans le
monde
 Consultation des pages via un navigateur
 L'utilisateur suit ces liens par simple click
--> notion d'hypertexte (information répartie)
 Le navigateur (browser)
 analyse l'URL demandée
 demande au DNS l'adresse IP du site distant
 établit une connexion TCP vers le numéro de port de l'URL
(80 par défaut)
 formule la requête au serveur

14
Principes de base
 Vision côté client (2/2)
 Le navigateur (browser)
 va rechercher la page demandée
 interprète les commandes de formatage et de mise en forme
(police, gras, couleurs...)
 va rechercher et afficher des images,
 des animations (code JavaScript, gifs...)
=> affiche la page correctement formatée
 Paramétrage à plusieurs niveaux
 valeurs par défaut du navigateur
 valeurs fixées dans le document
 préférences de l'utilisateur (navigateur)
exemples : couleur des liens (visités ou non), du texte, fond de la
page, polices...

15
Principes de base
 Vision côté serveur
 Le serveur est en permanence à l‘écoute des requêtes
formulées par les clients (qui peuvent être très nombreux !)
 Il vérifie la validité de la requête...
 adresse correcte (URL)
 client autorisé à accéder au document
 … et y répond : envoi du texte, des images, du code à
exécuter sur le client, d'un message d'erreur, d'une
demande d'authentification, ...
 Il peut exécuter un programme localement qui va générer
une réponse HTML (pages dynamiques)

16
Principes de base

 Les débits (1/2)

● Débit : nombre de bits par seconde

● Le débit dépend donc de la qualité de la
connexion de l'utilisateur final...
● ...MAIS également des liaisons empruntées pour
transférer le document

17
Principes de base

 Les débits (2/2)

● Modem : 56 kb/s
● ADSL : 128 / 512 kb/s; 512 / 8192 kb/s
● SDSL : 144 kb/s – 4096 kb/s
● Ethernet : 100 - 1000 Mb/s
● LS : 1, 10, ..., Gb/s

18
Principes de base

 Optimisations (1/2)
● Est-il nécessaire de se connecter
systématiquement au serveur pour récupérer les
documents ?
● Cache locale :

19
Principes de base
 Optimisations (2/2)
● Est-il nécessaire de se connecter
systématiquement au serveur pour récupérer les
documents ?
● Cache(s) intermédiaire(s)

20
Évolution et élaboration d'un document
Web
 Origine et buts (1/3)
● SGML
– Création en 1986
– Standard Generalized Markup Language
– Créé afin d'échanger simplement des
documents
– Documents statiques
– Décrit par un système de balises

21
Évolution et élaboration d'un document
Web
 Origine et buts (2/3)
● Hyperlien
– Création en 1990 par Tim Berners-Lee
– Permet de relier dynamiquement des
documents

22
Évolution et élaboration d'un document
Web
 Origine et buts (3/3)
● LE HTML
– Est la fusion entre:
● le principe de langage à balises
● le principe de lien dynamique
– Balises normalisées
– Interprétées par un navigateur
– Système de base d'internet

23
Évolution et élaboration d'un document
Web
 Structure d'un document (1/5)
● Document :
– Structure logique d'emboîtement de sous parties
● Langage à balises se basant sur la structure
inhérente du document

24
Évolution et élaboration d'un document
Web
 Structure d'un document (2/5)

25
Évolution et élaboration d'un document
Web
 Structure d'un document (3/5)
● Une partie contient :
– Ses propres règles typographiques
– Charte de couleurs
– Fontes, ...
● Une sous-partie est contenue dans une
plus grande partie
● Le document est l'ensemble des parties

26
Évolution et élaboration d'un document
Web
 Structure d'un document (4/5)
● Les balises (tags)
– Servent à distinguer les différentes parties
– Représentées par des chevrons
● Ouvrant <balise>
● Fermant </balise>
● Insensible à la casse
<BaLise> = <balise> = <BALISE>

27
Évolution et élaboration d'un document
Web
 Structure d'un document (5/5)

28
Évolution et élaboration d'un document
Web
 Règles et balises HTML (1/2)
● Différentes familles de balises
– Balises de structure
– Balises de formatage
– Balises auto fermantes
– Balises d'hyper lien et de navigation
● Une balise peut avoir des options
– qui s'appliquent sur toute la partie
– <balise opt1="val1" opt="val2" …>

29
Évolution et élaboration d'un document
Web
 Règles et balises HTML (2/2)

30
Évolution et élaboration d'un document
Web
 Éditeurs Web (1/2)
● Écriture en langage HTML :
– Connaître les balises et leurs options
– Connaître les codes couleurs et caractères spéciaux
– Connaître les incompatibilités des navigateurs
– Quelques éditeurs :
● Bloc Note
● Ultra Edit
● PhPEdit
● NotePad ++

31
Évolution et élaboration d'un document
Web
 Éditeurs Web (2/2)
● Écriture WYSIWYG :
– On ne s'intéresse qu'au contenu et à la mise en forme
– Traduction automatique en HTML par le logiciel
– Besoin de retouches HTML
– Quelques éditeurs :
● (M.S.) Word (sauvé sous .html)
● (M.S.) FrontPage, (N.t.) Composer
● (M.M.) Dreamweaver
● NVU

32