Académique Documents
Professionnel Documents
Culture Documents
et XML
Adil
KENZI
1
Introduction
Le module Technologies Web et XML se
Technologie XML
Environnement de Dveloppement Web
Introduction-Web
Quest-ce que le Web (ou World Wide Web, Toile, WWW,
W3)?
Systme hypertexte public : systme contenant des
Introduction- le Web
Le Web se base sur les
lements :
URL
HTTP
HTML
HTML/XHTML
HTML/XHTML
HTTP
HTTP
Serveur
HTTP
Clients web
(browsers)
URL
URL :: adressage
adressage
PHP,
PHP, asp,
asp, etc.
etc.
4
Introduction -Web
Client
Serveur
Web
HTTP message
HTTP
HTTP
TCP segment
TCP
TCP
IP
IP
HTTP
HTTP
Routeur
IP packet
IP
IP
IP packet
Ethernet
SONET
Ethernet Ethernet
Ethernet
SONET
interface
interface
interface interface
interface
interface
Ethernet
Routeur
IP
IP
IP packet
TCP
TCP
IP
IP
SONET
SONET Ethernet
Ethernet Ethernet
Ethernet
interface
interface
interface
interface interface
interface
SONET link
Ethernet
Introduction-Web
Dfinitions:
Introduction-Web
URL : Uniform Resource Locator
Identifie lendroit o se trouve une ressource sur
le Web.
Dans le cas du Web, ressource = document ou
fragment
Exemple :
http:// www.example.com :
80/reseau/secu/firewall.html #intro
En gnral une URL a la forme :
protocole machine port rpertoire fichier fragment
7
Introduction-Web
Une page web :
contient des objets
dsigne par une adresse (URL)
La plupart des pages Web contiennent :
du code HTML de base
des objets rfrencs
HTTP (HyperText Transfer Protocol) , le plus utilis
Programmation Web-Plan
le langage HTML (HyperText Markup
Language )
Le langage JavaScript
Le langage PHP
9
Principes
de
HTML
Structuration d'un texte l'aide de balises
Page HTML
bla bla
bla bla
bla bla
bla bla
bla bla bla bla bla
ref bla bla bla
bla bla bla ref bla
bla bla bla ref bla
serveur
HTTP
au Maroc
fichier local
au serveur
serveur HTTP
au Japon
serveur
ftp en
Australie
10
HTML : prsentation
gnrale
Langage de description des lments qui
composent un document :
dautres lments :
paragraphes
Un tableau possde des lignes
Une ligne est compose de cases
11
HTML
12
HTML
Les balises peuvent tre imbriqus selon des
environnements
<H1><B>Mon titre</H1></B>
13
documentaires
titres
Paragraphes
tableaux
styles de caractres (gras, italique, soulign)
rfrences des images
rfrences hyper-texte
formulaires
Etc
14
Indentation !
<HEAD>
<TITLE>titre-fenetre</TITLE>
</HEAD>
<BODY>
corps du document
</BODY>
</HTML>
HEAD : pour diffrencier du reste du texte,
contient les titres
TITLE : affich en haut de la fentre
BODY : contient le document
15
17
Balise <P>
<HTML><HEAD>
<TITLE>titre-fenetre</TITLE>
</HEAD><BODY>
<P>Ceci est un paragraphe.</P>
<P>Ceci en est
un autre, le texte sur
plusieur lignes est
reformaté.</P>
</BODY></HTML>
18
Balises de titres
<HTML><HEAD>
<TITLE>titre-fenetre</TITLE>
</HEAD><BODY>
<H1>Titre "H1"</H1>
<P>Texte sous le titre.</P>
<H2>Titre "H2"</H2>
<P>Texte sous le titre.</P>
<H3>Titre "H3"</H3>
<P>Texte sous le titre.</P>
</BODY></HTML>
19
Les caractres
spciaux
Non numrotes
Numrotes
<OL>
<LI></LI>
</OL>
attribut type="1/A/a/I/i" pour <OL>
attribut start="valeur" pour <OL> (valeur de dpart)
attribut value="valeur" pour <LI> (rinitialise le
squencement la nouvelle valeur)
21
...
<UL>
<LI>élément 1</LI>
<LI>élément 2</LI>
<UL>
<LI>élément 3.1</LI>
<LI>élément 3.2</LI>
</UL>
</UL>
...
22
Balises de formatage
de texte
<HTML><HEAD>
<TITLE>titre-fenetre</TITLE>
</HEAD><BODY>
<P>Avant une <B>liste</B> :</P>
<UL><LI><I>élément 1</I></LI>
<LI>élément 2</LI>
<UL><LI>élément 3.1</LI>
<LI>élément 3.2</LI>
</UL></UL>
</BODY></HTML>
23
Exercice
En utilisant seulement lditeur bloc-notes :
Ecrire un programme html affichant les
grandes villes marocaines en utilisant la balise
<ul>
24
Exercice
Ecrire un programme html en utilisant la
balise <ol> :
25
26
Balises de formatage
de texte
La balise <DIV></DIV> permet un
27
Formatage de
caractres
Styles physiques
sont indpendants du navigateur utilis et de sa
configuration
<B>...</B> : gras
<I>...</I> : italique
<TT>...</TT> : machine crire (police largeur fixe)
<STRIKE>...</STRIKE> : texte barr
<U>...</U> : soulign
<SUB>...</SUB> : indice
<SUP>...</SUP> : exposant
<SMALL>...</SMALL> : petite police
<BIG>...</BIG> : grande police
28
Formatage de
caractres
Styles logiques
peuvent dpendre du navigateur utilis et de sa
configuration
<STRONG> : gras
<EM> : mettre un texte en valeur (italique)
<DFN> : dfinition
<CITE> : citation bibliographique
<CODE> : programme informatique
<BLOCKQUOTE> : tabulation+espaces paragraphes
...
29
Exercice
Raliser votre page web personnelle qui
30
31
Balise <A>
Dfinition dun hyperlien <A href="nom">texte</A>
href="nom" : nom du document lier
une URL standard : http://www.ensaf.ac.ma
une adresse mail : mailto:toto@zozo.ma (mais spam)
un chemin relatif : Cours/index2.html
un chemin absolu : / est la racine du serveur Web !
une tiquette : #LABEL
une combinaison URL, chemin relatif, tiquette
dans le document
Balise <A>
L'attribut TARGET
Balise <A>
L'attribut TARGET
Valeurs possibles
Description
_blank
_parent
_self
_top
Nom du cadre
Couleurs
<BODY
bgcolor="#000000" : couleur de fond
text="#000000" : couleur du texte
link="#000000" : couleur des liens non encore visits
vlink="#000000" : couleur des liens dj visits
alink="#000000" : couleur des liens lors du clic
35
36
balises
38
Exercice (2)
Ajouter votre page web personnelle les
lments suivants :
Votre photo
Les liens des tablissements dans lesquels vous
39
Tableaux
Compltement dfinis et normaliss dans
HTML 4.0
Permettent de positionner prcisment les
objets dans le navigateur
Les cases (cellules) peuvent contenir des
donnes multimdia (textes, images, liens...)
Les tableaux sont trs utiliss en particulier
pour grer la mise en page
40
un nouveau paragraphe
Spcification dune ligne
<TR></TR>
marquent le dbut et la fin dune ligne du tableau
41
Balise <TABLE>
Acclrer laffichage des tableaux (HTML 4.0)
fixer le nombre de colonnes
ex : <TABLE cols="nb">
Balise <TABLE>
Epaisseur des bordures du tableau
encadrement du tableau : attribut border
<TABLE border> : quivalent border="1"
paisseur des traits de bordure
<TABLE border="nb_pixels">
Espacements
distance en pixels entre les bords et le contenu
des cellules
<TABLE cellpadding="nb_pixels">
distance entre les cellules du tableau en pixels
<TABLE cellspacing="nb_pixels">
Balise <TABLE>
Image d'arrire plan
<TABLE background="nom_image">
Couleurs du fond et des bords
<TABLE bgcolor="couleur">
<TABLE bordercolor="couleur">
Ombrage
<TABLE bordercolordark="couleur"> : dfinit la
ou une ligne
<TR align="left|center|right"></TR>
<TD align="left|center|right"></TD>
alignement vertical du contenu dans une cellule
ou une ligne
<TR valign="top|middle|bottom"></TR>
<TD valign="top|middle|bottom"></TD>
Couleurs d'arrire plan d'une cellule ou d'une ligne
<TR bgcolor="couleur ou #RRVVBB"></TR>
<TD bgcolor="couleur ou #RRVVBB"></TD>
45
dans la cellule
<TD nowrap>
46
Fusions de cellules
dfinit le nombre de colonnes sur lesquelles
s'tend une cellule
<TH colspan="nombre"></TH> : nombre de
cellules fusionner sur une ligne
dfinit le nombre de lignes sur lesquelles s'tend
une cellule
<TD rowspan="nombre"></TD> : nombre de
cellules fusionner sur une colonne
ces fusions doivent tre cohrentes par rapport
au lignes et colonnes du tableau
Balise <CAPTION align="left|center|right"> :
47
Exercice
Commencer par dfinir un petit tableau
Exercices
Raliser le tableau ci dessous
49
Les cadres
Les cadres
La structure
La
50
Les cadres
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
...
</HEAD>
<FRAMESET>
...
<BODY>
...
Diverses commandes HTML
...
</BODY>
</FRAMESET>
</HTML>
51
Les cadres
Les cadres
La cration
crs
au
sein
des
balises
52
Les cadres
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE> <META NAME="Description"
CONTENT="..."> <HTTP-EQUIV="Date" CONTENT="01/01/2000">
...
</HEAD>
<FRAMESET>
<FRAME
SRC="Adresse du document"
NAME="Nom du
cadre">
...
<BODY>
...
Diverses commandes HTML
...
</BODY>
</FRAMESET>
</HTML>
53
Les cadres
Les cadres
Les dimensions
Une toile peut remplacer une des valeurs et constitue, donc, une
dimension variable.
54
Les cadres
<FRAMESET COLS="33%,33%,34%"> <FRAME SRC=" " NAME="Cadre1">
<FRAME SRC=" " NAME="Cadre2"> <FRAME SRC=" "
NAME="Cadre3"></FRAMESET>
Division verticale en trois parties gales
<FRAMESET ROWS="20%,80%"> <FRAME SRC=" " NAME="Cadre1">
<FRAME SRC=" " NAME="Cadre2"></FRAMESET>
Division horizontale en deux parties
<FRAMESET COLS="240,400"> <FRAME SRC=" " NAME="Cadre1"> <FRAME
SRC=" " NAME="Cadre2"></FRAMESET>
Division horizontale en deux parties sur 640 pixels
<FRAMESET ROWS="120,360"> <FRAME SRC=" " NAME="Cadre1">
<FRAME SRC=" " NAME="Cadre2"> </FRAMESET>
Division horizontale en deux parties sur 480 pixels
55
Les cadres
Les cadres
Les bordures
Les cadres
lattribut de <FRAME>
SCROLLING="yes|no|auto"
indique si la zone doit possder une barre de
dfilement
yes - affiche une barre mme si le document
dfaut)
57
Exercice
Raliser un site pour les cours dispenss
58
Exercice-les cadres
Ecole Nationale des Sciences
Appliques
Logo
1
2
3
4
Le contenu de chaque
Cours
59
Les formulaires
Les formulaires
La structure
L'attribut ENCTYPE="Type
d'encodage des donnes.
d'encodage"
dfinit
la
mthode
60
Les formulaires
Les formulaires
Les caractristiques de transmissions
61
Les formulaires
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
...
</HEAD>
<BODY>
<FORM
ACTION="Adresse cible"
METHOD="Type de transmission">
...
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>
62
Les formulaires
<FORM
action="http://server.com/cgi/handle"
enctype="multipart/form-data"
method="post">
Votre nom ? <INPUT TYPE="text" NAME="Nom"><BR>
Quels fichiers voulez-vous envoyer ? <INPUT TYPE="file"
NAME="fichiers"><BR>
<INPUT TYPE="submit" VALUE="Envoyer">
<INPUT TYPE="reset" VALUE="Annuler">
</FORM>
63
Les formulaires
Les formulaires
Les attributs les plus importants de FORM
Les formulaires
Les formulaires
Les champs d'entre
65
Les formulaires
Type de champ
Les formulaires
Description
button
checkbox
file
hidden
image
password
radio
reset
submit
text
Les formulaires
Les formulaires
Les champs d'entre
67
Les formulairesStructuration
La balise <LEGEND> est une des balises
Exercice
Essayer de crer un formulaire en changeant
TYPE=Type de champ>
69
Les formulaires
Les formulaires
Les champs de saisie
70
Les formulaires
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="text" NAME="boitetxt"
SIZE="38"
MAXLENGTH="48"
VALUE="Champ de saisie d'une largeur de 38 pour
un maximum de 48 caractres">
<INPUT
TYPE="password"
NAME="BteMotPass"
SIZE="30"
MAXLENGTH="30">
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>
71
Les formulaires
Les formulaires
Les champs de saisie
La
L'attribut
dfaut.
72
Les formulaires
<HTML>
<HEAD>
..
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="radio"
Premier item
<INPUT TYPE="radio"
Second item
<INPUT TYPE="radio"
item"> Troisime item
<INPUT TYPE="radio"
item"> Quatrime item
<INPUT TYPE="radio"
item"> Cinquime item
NAME="CaseRadio"
VALUE="Premier item">
NAME="CaseRadio"
VALUE="Second item">
NAME="CaseRadio"
VALUE="Troisime
NAME="CaseRadio"
VALUE="Quatrime
NAME="CaseRadio"
VALUE="Cinquime
</FORM>
...
Diverses commandes HTML
</BODY></HTML>
73
Les formulaires
Les formulaires
Les champs de saisie
La
L'attribut
dfaut.
74
Les formulaires
Les formulaires
Les champs de saisie
<INPUT
TYPE="submit">
TYPE="reset">
cre
un
bouton
cre
un
bouton
Les formulaires
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
<HTTP-EQUIV="Date" CONTENT="01/01/2000">
...
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Bouton">
<INPUT TYPE="reset" VALUE="Recommencer">
<INPUT TYPE="submit" VALUE="Soumettre">
<INPUT TYPE="file" NAME="FichierAttache" ACCEPT="fichier">
...
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>
76
Les formulaires
Les formulaires
Les champs de saisie
Les formulaires
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
...
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="image" NAME= " SALARIE" SRC= "petit_1106.jpg " ALT= "
exemple de bouton image">
...
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>
78
Les formulaires
Les formulaires
Les champs de saisie
Les formulaires
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="hidden"
NAME="EntreeCachee"
visible pour l'utilisateur">
...
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>
VALUE="Valeur non
80
Les formulaires
Les formulaires
Les champs multilignes
L'attribut
lignes.
81
Les formulaires
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
<HTTP-EQUIV="Date" CONTENT="01/01/2000">
...
</HEAD>
<BODY>
<FORM>
<TEXTAREA NAME="txtmulti" COLS="25" ROWS="3" WRAP="virtual"> Ceci est une
boite texte de 25 colonnes et 3 lignes.</TEXTAREA>
<TEXTAREA NAME="txtmulti2" COLS="38" ROWS="5" WRAP="physical"> Ceci est
une boite texte de 38 colonnes et 5 lignes.</TEXTAREA>
...
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>
82
Les formulaires
Les formulaires
Les champs multilignes
Physical
La coupure des lignes est active.
Virtual La coupure des lignes est active pour l'usager mais transmise
sans coupure des lignes.
DISABLED permet la dsactivation de la zone de texte.
READONLY spcifie le mode lecture seule de l'lment.
TABINDEX="Valeur" dfinit un ordre de tabulation.
ALIGN="Type d'alignement" dfinit un alignement de l'lment.
LANG="Langue" dfinit une langue pour l'lment.
DIR="rtl/ltr" dfinit une direction d'criture.
TITLE="Description" dfinit une description affiche dans une bulle.
83
Les formulaires
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<TEXTAREA
NAME="Nom du champ"
COLS="Valeur"
ROWS="Valeur"
WRAP="off/virtual/physical"
DISABLED
READONLY
TABINDEX="Valeur"
LANG="Langue"
TITLE="Description">
Contenu par dfaut
</TEXTAREA>
...
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>
84
Les formulaires
Les formulaires
Les listes de choix
Les listes de choix sont des champs affichant une srie d'items
sous forme soit de liste droulante, soit de liste simple.
85
Les formulaires
Les formulaires
Les listes de choix
L'attribut
dfinit
la
L'attribut
L'attribut
86
Les formulaires
<HTML>
<HEAD> <TITLE>Un titre pertinent</TITLE> </HEAD>
<BODY>
<FORM>
<TEXTAREA NAME="Nom du champ" COLS="Valeur" ROWS="Valeur">
Contenu par dfaut
</TEXTAREA>
<SELECT NAME="listderoul" SIZE="1">
<OPTION VALUE="Premier item">
Premier item
</OPTION>
<OPTION VALUE="Second item">
Second item
</OPTION>
<OPTION VALUE="Troisime item"> Troisime item
</OPTION>
<OPTION VALUE="Quatrime item">
Quatrime item </OPTION>
<OPTION VALUE="Cinquime item" SELECTED> Cinquime item
</OPTION>
</SELECT>
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>
87
EXERCICE
Exercice 2
Exercice 3
lments
Les trois formats prcits restent les plus rpandus sur le World
Wide Web, ainsi le langage HTML les supporte et offre les outils
ncessaire leur intgration dans une page Internet.
91
HTML et le multimdia
(02)
HTML et le multimdia
L'insertion des vidos
HTML et le multimdia
(03)
HTML et le multimdia
L'insertion des vidos
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
<HTTP-EQUIV="Date" CONTENT="01/01/2000
... </HEAD>
<BODY>
<IMG
DYNSRC="Adresse du fichier vido"
START="fileopen/mouseover"
LOOP="Nombre de rptitions"
CONTROLS>
...
Diverses commandes HTML
...
</BODY>
93
</HTML>
HTML et le multimdia
(04)
HTML et le multimdia
Les formats audios
Les formats WAVE, AIFF, ou MIDI sont reconnus dans une page
web et peuvent rendre vos documents HTML plus vivant, mais
au risque de les rendre plus lent au chargement.
94
HTML et le multimdia
(05)
HTML et le multimdia
Lancement d'un son au dmarrage
HTML et le multimdia
(06)
HTML et le multimdia
Lancement d'un son au dmarrage
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
<HTTP-EQUIV="Date" CONTENT="01/01/2000
...
</HEAD> <BODY>
<BGSOUND
SRC="Adresse du fichier audio"
BALANCE="Valeur"
LOOP="true/false"
LANG="Langue"
TITLE="Description">
...
Diverses commandes HTML
...
96
</BODY></HTML>
HTML et le multimdia
(07)
HTML et le multimdia
L'insertion dun son par EMBED
97
HTML et le multimdia
(08)
HTML et le multimdia
L'insertion dun son par EMBED
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
<HTTP-EQUIV="Date" CONTENT="01/01/2000
...
</HEAD> <BODY>
<EMBED
SRC="Adresse du mdia"
PLUGINSPACE="Adresse de l'application"
TYPE="Type d'application">
</EMBED>
...
Diverses commandes HTML
...
</BODY>
98
</HTML>
ATTRIBUTS DE DEMARRAGE
L'attribut
ARCHIVE="Adresse d'archive" spcifie une
adresse d'archive o se trouve le code de la classe.
L'attribut MAYSCRIPT propre Netscape, permet l'applet
d'accder au code javascript contenu dans ma page HTML.
L'attribut OBJECT="donne" spcifie la reprsentation de
l'tat d'excution de l'objet.
L'attribut ID="nom d'identificateur" dfinit pour l'applet un
nom d'identificateur unique au sein de la page.
L'attribut
DOWNLOAD="Valeur" spcifique Internet
explorer, indique lordre de limage.
102
ATTRIBUTS DE TAILLE
ATTRIBUTS D'ALIGNEMENT
L'attribut ALIGN="Type d'alignement"* indique lalignement de
l'application dans la page HTML (Internet explorer).
L'attribut HSPACE="Valeur" dfinit un espace vertical.
L'attribut VSPACE="Valeur" dfinit un espace horizontal.
103
L'attribut
CLASSID="java:Nom
du
fichier
Java"
identifie
l'implmentation de l'objet, la syntaxe pouvant varier selon le type de
l'objet.
L'attribut CODEBASE="Adresse de chargement" identifie l'adresse
partir duquel le code de l'objet sera charg.
L'attribut CODETYPE="Type de l'application" dfinit le type de
contenu associ au code.
L'attribut DATA="Nom" identifie une adresse o l'objet pourra
importer les donnes ncessaires son initialisation.
L'attribut TYPE="Type d'application" spcifie le type des donnes
de l'objet.
105