Vous êtes sur la page 1sur 30

Technologies (du) Web

Unité d’enseignement: UEF 2.1.2


1 / 30
Technologies (du) Web
Semestre : 3
Unité d’enseignement: UEF 2.1.2
Matière 4 : Technologies du Web
VHS : 45h00 (Cours: 1h30, TD: 1h30)
Crédits : 4
Coefficient : 2
Objectifs de l’enseignement :
Déé couvrir lé conténu ét lé conténant d'uné pagé Wéb qui
préé sénté dés informations sur Intérnét. Déé couvrir lés notions
dé basé sur lé fonctionnémént du modéè lé cliént-sérvéur. ÉÉ criré
ét modifiér dés pagés Wéb dans un langagé normaliséé dé
déscription dé conténus.
Connaissances préalables recommandées :
Lés difféé rénts typés dé réé séaux. 2 / 30
Contenu de la matière :
Chapitre 1. Introduction (2 Semaines) Introduction au Web :
historique d'Internet et du Web Internet, Le modèle client-
serveur.
Chapitre 2. Structure d'un document HTML (4 Semaines)
Généralités, Principe de balisage. XML et DTD. Les
principales balises HTML (Formatage de texte, Mise en page,
tableaux). Les notions de url et de liens. Les Frames. CSS
Chapitre 3. Les langages de script côté client (3 Semaines)
Introduction. Javascript. VB script. jQuery
Chapitre 4. Les langages de script côté serveur (3 Semaines)
Introduction. PHP. ASP. JSP. Connexion et manipulation des
bases de données
Chapitre 5. Technologies Web avancées (3 Semaines) AJAX,
Framework JEE : Struts. Conception de sites Web 3 / 30
Mode d’évaluation/Références :
Évaluation :
Contrôle continu : 40% ;
Examen : 60%.

Références bibliographiques :
● Programmation Web avec PHP – C. Lacroix, N. Leprince, C.
Boggero, C. Lauer – éditions Eyrolles
● Vos premiers pas avec PHP 4 – J. Engels – éditions Eyrolles
● Grand livre PHP4 & MySQL – G. Leierer, R. Stoll – éditions
Eyrolles

4 / 30
Défnition (Wikipédia)

Les technologies web sont un ensemble de
technologies qui composent et utilisent le World Wide
Web (généralement abrégé en Web) et ses normes. Le
web été créé en 1990 comme application de partage
d'informations puis est devenu une plate-forme à part
entière sur laquelle sont développées régulièrement
des nouvelles technologies1. Les bases de ces
technologies sont le protocole réseau HTTP (abr. de
Hypertext Transfer Protocol), normalisé par l'IETF et le
format de document HTML (abr. de Hypertext Markup
Language), normalisé par le W3C.
5 / 30
Historique d’internet (wikipédia)

Remonte au développement des premiers réseaux de
télécommunication

L’idée d’un réseau informatique, permettant aux
utilisateurs de diférents ordinateurs de
communiquer, se développa par de nombreuses
étapes successives → au « réseau des réseaux »
(network of networks) = Internet

Internet = développements technologiques
+ regroupement des infrastructures réseau
existantes et des systèmes de
télécommunications 6 / 30
Historique d’internet (wikipédia)

Le concept d’internet repose sur un système
décentralisé, permettant au réseau de fonctionner
malgré la destruction d'une ou plusieurs nœuds

2 phases d’accèleration :
– fn des années 1960-1970 : application pratique des
concepts évoqués à la fn des années 1950
– Pendant les années 1990, apparition du World
Wide Web (www).

7 / 30
Le modèle de Baran (Paul Baran)

Considéré comme un des acteurs principaux de la
création d'Internet.

Il avait réalisé qu'un système centralisé était
vulnérable car la destruction de son noyau provoquait
l'anéantissement des communications.

Eu l'idée, en 1964, de créer un réseau sous forme de
grande toile.

Il mit donc au point un réseau hybride d'architectures
étoilées et maillées dans lequel les données se
déplaceraient de façon dynamique, en « cherchant »
le chemin le moins encombré, et en « patientant » si
toutes les routes étaient encombrées.
8 / 30

Cette technologie fut appelée « packet switching ».
L'ARPANET

1969, indépendamment de tout objectif militaire, le réseau
expérimental ARPANET fut créé par l'ARPA (Advanced Research
Projects Agency dépendant du DOD, Department of Defense) afn
de relier quatre instituts universitaires :
– Le Stanford Institute ;
– L'université de Californie à Los Angeles ;
– L'université de Californie à Santa Barbara ;
– L'université d'Utah.

Le réseau ARPANET est aujourd'hui considéré comme le réseau
précurseur d'internet. Il comportait déjà à l'époque certaines
caractéristiques fondamentales du réseau actuel :
– Un ou plusieurs nœuds du réseau pouvait être détruits sans

perturber son fonctionnement ;


– La communication entre machines se faisait sans machine

centralisée intermédiaire ; 9 / 30
– Les protocoles utilisés étaient basiques.
Le protocole TCP

Le protocole NCP, utilisé sur le réseau ARPANET ne
permettait pas de gérer de contrôle d'erreur

Bob Kahn, arrivé à l'ARPA depuis 1972, commença à
travailler sur les bases d'un nouveau protocole, déjà baptisé
TCP, permettant d'acheminer des données sur un réseau en
les fragmentant en petits paquets.

En 1976, le DoD décida de déployer le protocole TCP sur le
réseau ARPANET, composé de 111 machines reliées entre
elles.

En 1978, le protocole TCP fut scindé en deux protocoles :
TCP et IP, pour constituer ce qui allait devenir la suite
TCP/IP.

10 / 30
Le DNS

1984 : Le système de nommage DNS, utilisé de nos jours, fut
mis en œuvre afn de pallier le manque de souplesse du
nommage par table de nommage (mise à jour manuelle des
correspondances entre le noms de machines et leur adresse
sur des fchiers textes sur chacune des machines).

11 / 30
Les RFC

1969, S. Crocker de l'université de California met au point le
système « Request for Comments » (RFC).

Il s'agit de documents présentés sous forme de note,
permettant aux chercheurs d'échanger leurs travaux.

12 / 30
Le World Wide Web

1980, Tim Berners-Lee, un chercheur au CERN de Genève,
mit au point un système de navigation hypertexte et
développa, avec l'aide de Robert Cailliau, un logiciel baptisé
Enquire permettant de naviguer selon ce principe.

1990, Tim Berners-Lee met au point le protocole HTTP
(Hyper Text Tranfer Protocol), ainsi que le langage HTML
(HyperText Markup Language) permettant de naviguer à
l'aide de liens hypertextes, à travers les réseaux →
Naissance du World Wide Web.

13 / 30
Modèle Client-Serveur

L'environnement client/serveur désigne un mode de
communication organisé par l'intermédiaire d'un
réseau entre plusieurs ordinateurs . " cela signife que
des machines clientes ( machines faisant partie du
réseau ) contactent un serveur qui leur fournit des
services.

14 / 30
Modèle Client-Serveur

En général, les serveurs sont des ordinateurs dédiés
au logiciel serveur qu'ils abritent

Ils sont dotés de capacités supérieures à celles des
ordinateurs personnels en puissance de calcul, les
entrées-sorties et les connexions réseau.

Les clients sont souvent des ordinateurs personnels
ou des appareils individuels (téléphone, tablette ...),

Un serveur peut répondre aux requêtes d'un grand
nombre de clients simultanément.

15 / 30
Avantages du Modèle Client-Serveur


Information centralisée

La complexité du traitement et la puissance de calcul
sont à la charge du ou des serveurs

Sécurité plus importante : les serveurs sont en
général très sécurisés contre les attaques de pirates.

Fiabilité plus importante et Facilité d'évolution : Une
architecture client/serveur est évolutive car il est très
facile de rajouter ou d'enlever des clients, et/ou des
serveurs.

16 / 30
Inconvénients du Modèle Client-Serveur

Problème de charge si le nombre de client augmente
à un instant donné (les architectures distribuées
fonctionnent mieux en ajoutant de nouveaux
participants).

Si le serveur n'est plus disponible, plus aucun des
clients ne fonctionne (les architectures distribuées
continuent à fonctionner, même si plusieurs
participants quittent le réseau).

Les coûts de mise en place et de maintenance
peuvent être élevés.

Asymétrie de l'information au proft des serveurs (les
clients ne peuvent communiquer entre eux). 17 / 30
Types d'architecture

Architecture pair à pair (peer-to-peer ou P2P) : chaque
programme connecté est susceptible de jouer tour à tour le
rôle de client et de serveur.

architecture à 2 niveaux ou une architecture deux tiers (two-
tier architecture) : le client demande une ressource au serveur
qui la fournit à partir de ses propres ressources.

architecture à 3 niveaux ou une architecture trois tiers (three-
tier architecture en anglais) ajoute un niveau supplémentaire à
l'architecture à 2 niveaux, permettant de spécialiser les
serveurs dans une tâche précise (+ de fexibilité, sécurité et
performance)

architecture à N niveaux ou architecture N tiers (N-tier
architecture) ajoute encore des niveaux supplémentaires à
l'architecture à 3 niveaux, permettant de spécialiser les
18 / 30
serveurs davantage.
Types d'architecture

19 / 30
Types de client

Client léger : le traitement des requêtes du client est
entièrement efectué par le serveur, le client recevant
les réponses « toutes faites » (ie. Il s’occupe de
l’afchage).

Client lourd : le traitement des requêtes du client
(applications de bureau, applications mobile) est
partagé entre le serveur et le client.

Client "riche" Un interface graphique plus évolué
permet des fonctionnalités comparables à celles d'un
client "lourd". Les traitements sont efectués
majoritairement sur le serveur, la réponse "semi-fnie"
étant envoyée au poste client qui est capable de la
fnaliser et de la présenter. 20 / 30
Langage HTML

Langage universel utilisé pour communiquer sur le Web.

L’information est transportée sur le réseau, pour aboutir sur un
poste client puis interprétée grâce à un programme appelé
navigateur ou browser.

HTML est un langage universel qui s'adapte à toutes les plate-
formes (Windows, Unix/Linux, MacOs, ...)

Il existe diférents browser, dont les plus connus sont FireFox,
Chrome, Opera, Internet Explorer de Microsoft ...

Pour transiter le plus rapidement possible sur les câbles du
réseau, HTML a adopté un format de texte très compact mais
aussi peu sophistiqué.

En plus du texte, il faut inclure des instructions pour le browser.
Ces instructions seront diférenciées du texte par les signes < et
>. Ces "instructions" s'appellent des tags ou des balises.
21 / 30

Version actuellement en vigueur est HTML 5
Création d’un document HTML
<HTML> "première ligne du document"
<head> "ouverture de la zone d'entête"
<title> "titre de la page suivi de </title>"
</head> "fermeture de la zone d'entête."
<body> "ouverture du corps du document"
"Mettre le texte et les images ici"
</body> "fin du corps du document"
</HTML> "fin du document HTML"

22 / 30
Document HTML minimal
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> Titre de la page </title>
</head>
<body>
... <!-- Le reste du contenu --> ...
</body>
</html>

23 / 30
Formatage du texte
Le formatage d'une page commence généralement par le choix et l'usage
d'entêtes prédéterminées qui s'échelonnent de H1 à H6 (niveaux). La
commande H1 est la plus grosse disponible, H6 la + petite.
<center> </center> : Permet de centrer du texte
<P> donne un changement de paragraphe
<br> donne un simple changement de ligne
<b></b>donne un texte en gras: texte en gras
<strong></strong>donne un texte en gras également: texte en gras
<EM></EM> donne un texte en italique: texte en italique
<I></I> donne également un texte en italique: texte en italique
<CITE></CITE>donne aussi un texte en italique: texte en italique
<TT></TT>donne un texte formaté avec une fonte à espacement constant
<pre></pre> obligent le navigateur à afficher un texte préformaté. Le
navigateur respecte alors les fins de ligne (retours de chariot). 24 / 30
<BLOCKQUOTE></BLOCKQUOTE> permet d'emprisonner
un paragraphe telle une citation en alinéa
<STRIKE></STRIKE> permet de rayer un texte
<SUB></SUB> permet d'utiliser les indices dans des
formules comme dans l'exemple qui suit: H 2 O.
<SUP></SUP> permet d'utiliser les exposants dans des
formules

25 / 30
Caractères spéciaux
Certains caractères ont une signification spécifique dans HTML. Pour
les utiliser comme tels dans une page, il faut utiliser les commandes
alternatives pour les afficher correctement à l'écran.

&lt; pour: <


&gt; pour: >
&amp; pour: &
&quot; pour: "

26 / 30
Images
- Les navigateurs HTML reconnaissent généralement deux formats
d'images; les images GIF et les images JPEG.
- L'insertion d'une image est possible en tapant la commande
suivante: <img src="images/serviette50.gif">
- Le segment IMG SRC indique qu'il s'agit de la source d'une image,
le premier terme entre les guillemets indique le nom du dossier où se
trouve la ou les images,
le deuxième terme indique le nom du fichier contenant l'image et le
format de celle-ci.
Une image en format GIF se termine par .GIF alors qu'une image en
format JPEG se termine par .JPEG ou .JPG .
La taille de l'image est déterminée par le fichier lui-même.
On peut placer par exemple une grande image occupant l'ensemble
de l'écran: 27 / 30
Les liens
- Pour insérer un pointeur (lien hypertexte), il faut indiquer une référence
(URL) et un élément, texte ou image, visible à l'écran sur lequel on doit
cliquer pour y accéder. exemple de code pour obtenir un pointeur:
<A HREF="dossier/menu_du_jour.HTML">Menu du jour</A>.
Le pointeur apparaît alors en couleur contrastée et souligné dans le
navigateur
Les pointeurs peuvent diriger le navigateur vers des sites HTTP, FTP,
TELNET, TN3270, GOPHER ou USENET.
On peut aussi entrer directement sur un fichier sur le système local ou sur un
réseau local.
La commande A NAME : enregistre un point d'accès à l'intérieur d'un
document HTML. On peut ensuite référer directement à ce point précis avec
une commande A HREF. La commande peut se taper directement comme
ceci: <a name="Gopher">, ce qui indique au navigateur où se trouve la
section visée. Pour se rendre à cet endroit, 28 / 30
<a href="manuel8.html#Gopher">Gopher</a>.
Les Tableaux
<TABLE></TABLE> Cette commande est la
commande principale pour ouvrir une zone de
tableaux.
<TR></TR> Commande pour définir une rangée. Il
faut utiliser une séquence <TR></TR> pour chacune
des rangées requises, à l'intérieur de la zone
<TABLE></TABLE>
<TD></TD> Commande pour spécifier les données
pour chaque rangée.

29 / 30
Outils pour l’édition HTML
deux types d’éditeurs HTML
- Les éditeurs HTML WYSIWYG, « What you see is
what you get »
NVU
KompoZer
Amaya
OpenElement
- Les éditeurs HTML de codes et les IDE
Bluefish
Visual Studio Code
Notepad++
Atom ... 30 / 30

Vous aimerez peut-être aussi