Technologies Web

et XML
Adil
KENZI
1

Introduction
Le module Technologies Web et XML se

compose des lments de module suivants:

Programmation Web
Le langage HTML
Le langage Javascript
Le langage PHP

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

documents lis entre eux par des hyperliens permettant de

passer automatiquement dun document lautre.

Diffrence entre le Web et Internet?

Internet : Rseau mondial dordinateurs permettant aux
utilisateurs de communiquer (courrier lectronique), de
publier des informations (Web), de transfrer des donnes
(FTP), de travailler distance (telnet, etc.), . . .
Le Web est une application dinternet
3

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:

Le client web : un navigateur (Internet Explorer, Firefox, Google

Chrome, Safari. . .)
Demande au serveur des informations
Affiche des pages pour lutilisateur
Le serveur web (Serveur HTTP) : Apache, IIS de Microsoft
Reoit en permanence les requtes des clients
Renvoie les documents correspondants

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

des protocoles de communication sur le World

Wide Web. Permet un client Web dindiquer
quelle page il veut obtenir, et au serveur Web de
lui rpondre en lui donnant cette page.
8

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 :

Entte, titre, paragraphe, image, lien

Chaque lment peut lui-mme tre compos

dautres lments :

Une entte possde un titre et une srie de

paragraphes
Un tableau possde des lignes
Une ligne est compose de cases

11

HTML

Dfinit la structure logique dun document WEB

Bas sur la notion de balise
Les balises permettent de structurer chaque partie du document et

servent par exemple au navigateur pour raliser la mise en page du

document.
Les balises sont dfinies entre <>
<BALISE></BALISE>
La syntaxe :

<BALISE attributs > contenu </BALISE>

on peut aussi avoir des balise de cette forme :
<BALISE attributs >
BALISE : mot cl dsignant un lment particulier
Attributs : reprsente les diffrents paramtres associs llment, sous la
forme dune liste de nom="valeur" ou nom=valeur , spars par des espaces
contenu : peut contenir du texte ou dautres balises

12

HTML
Les balises peuvent tre imbriqus selon des

rgles bien dfinies

<H1><B>Mon titre</B></H1>

Il nest pas permis de faire chevaucher des

environnements
<H1><B>Mon titre</H1></B>

Les minuscules/majuscules ninterviennent

pas dans la dfinition des balises

13

HTML - les bases

Les balises dnotent des "constructions"

documentaires
titres
Paragraphes
tableaux
styles de caractres (gras, italique, soulign)
rfrences des images
rfrences hyper-texte
formulaires
Etc
14

Structure minimale dun

document
<HTML>

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

Balise <HR> et Balise

<BR>
Balise <HR> : trait horizontal
<HR size="2"> (en pixels)
<HR width="30%">
<HR width="100"> (en pixels)
<HR align="center/left/right">
<HR noshade> (pas de relief)
pas de fermeture
Balise <BR> : saut de ligne
passage la ligne
pas de fermeture
16

Balise <P> et Balises

de titres
Balise <P>
dbut d'un nouveau paragraphe
fermeture optionnelle en HTML mais obligatoire en
XHTML (en XML, toute balise ouverte doit tre ferme)
attribut align="center/left/right/justify" (justify pas
toujours interprt)
Balises <Hn></Hn>, n varie de 1 6
affectent la taille des caractres (taille dcroissante)
texte en caractres gras et suivi d'un saut de ligne
attribut align="center/left/right"
<Hn> est considr comme un paragraphe et ne doit
pas tre plac dans <P></P>

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&eacute;.</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

Pour tre sr qu'ils soient correctement

interprts par tous les navigateurs :

caractres accentus : &<lettre><accent>;

accent : acute (aigu), grave (grave), circ (^), uml

()
exemples : &eacute; (), &Icirc; (), &uuml; ()
autres caractres :

&ntilde; (), &ccedil; (), &szlig; (), &copy;

()
&aelig; (), &amp; (&), &nbsp; (espace), &quot;
(")
&gt; (>), &lt; (<)
20

Balises <UL> <OL>

<LI> - listes

Non numrotes

<UL> : Unnumbered List

<LI></LI> : List Item
</UL>
attribut type="square/circle/disc" pour <UL> ou <LI>
(priorit au tag interne en HTML !)

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

Balises <UL> et <LI>

...

<UL>
<LI>&eacute;l&eacute;ment 1</LI>
<LI>&eacute;l&eacute;ment 2</LI>
<UL>
<LI>&eacute;l&eacute;ment 3.1</LI>
<LI>&eacute;l&eacute;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>&eacute;l&eacute;ment 1</I></LI>
<LI>&eacute;l&eacute;ment 2</LI>
<UL><LI>&eacute;l&eacute;ment 3.1</LI>
<LI>&eacute;l&eacute;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

alignement droite, gauche ou au centre

attribut align="left/center/right"
attribut nowrap : le contenu n'est pas renvoy

la ligne automatiquement --> ascenseur

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

inclut les lments suivants :

Nom et prnom :
Adresse :
Formation :
Projets raliss :
Connaissances en informatiques :
Langues parles :
etc.

30

Balises pour les liens hypertexte

<HTML><HEAD>
<TITLE>titre-fenetre</TITLE>
</HEAD><BODY>
<P>texte avec un <A href="cible.html">
lien hyper-texte</A>.</P>
</BODY></HTML>

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

texte : texte utilis pour dcrire/reprsenter le lien

dans le document

Dfinition d'une tiquette

<A name="LABEL"></A>
le texte entre <A> et </A> n'est pas une zone
cliquable
32

Balise <A>
L'attribut TARGET

L'utilisation de l'attribut TARGET permet de diriger

l'ouverture d'un document cible vers une fentre
dtermine du navigateur.

Cet attribut est surtout utilis dans le cas ou une

page Internet est structure autour des cadres.

Il est possible d'ouvrir une page cible dans la fentre

contenant le lien, ou dans une seconde fentre ou
encore dans des cadres (ou frames).

Dans ce contexte particulier, les pages cibles risquent

de s'ouvrir dans le mauvais cadre.

L'attribut "TARGET="Cadre cible" dfinit la fentre

dans laquelle la page cible doit s'afficher.

Balise <A>
L'attribut TARGET

Valeurs possibles

Description

_blank

Ouverture de la page cible dans une nouvelle fentre

_parent

Ouverture de la page cible dans le cadre parent

_self

Ouverture de la page cible dans le cadre hte

_top

Ouverture de la page cible dans la fentre hte

Nom du cadre

Ouverture de la page cible dans le cadre portant le

nom cit

Balise <BODY> - paramtre la

page
Fond dcran
<BODY background="nom_image">

rptition d'une image sur lcran du navigateur

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

Noms des couleurs

en clair : aqua, black, gray, olive...
en notation hexadcimale RGB

35

Balise <IMG> - insertion

dimages
<HTML><HEAD>
<TITLE>titre-fenetre</TITLE>
</HEAD><BODY>
<P>Texte sur l'image.</P>
<P><IMG src="logo.jpg"></P>
<P>Texte sous l'image.</P>
</BODY></HTML>

36

Balise <IMG> - insertion

dimages
Insertion d'une image dans un document :
<IMG src="nom"
nom local ou URL distante
extensions : jpeg, gif, xbm ...
<IMG height="hauteur" width="largeur"
informe le navigateur de la hauteur et la largeur de
l'image en pixels (vite au navigateur de les calculer)
peut aussi permettre de redimensionner l'image
<IMG align="bottom/middle/top/left/right"
alignement par rapport au texte (left et bottom par
dfaut)
37

Balise <IMG> - insertion

dimages
<IMG
border="nb_pixels"
affiche un cadre autour de l'image

<IMG vspace="nb_pixels" hspace="nb_pixels"

tailles des marges (espacement image/texte)
<IMG alt="ceci est une info-bulle"
dfinit un commentaire pour l'image
affich la place de l'image pendant le
tlchargement
affiche une info-bulle quand la souris passe sur
l'image (certains navigateurs seulement)
donne des infos aux indexeurs
L'attribut alt est aussi utilisable dans d'autres

balises

38

Exercice (2)
Ajouter votre page web personnelle les

lments suivants :
Votre photo
Les liens des tablissements dans lesquels vous

avez fait votre formation

Structurer votre CV en utilisant les tiquettes

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

Balises <TABLE> <TR> <TH> <TD>

<TABLE></TABLE> dfinit un tableau dans

un nouveau paragraphe
Spcification dune ligne
<TR></TR>
marquent le dbut et la fin dune ligne du tableau

Spcification des cellules

Cellules den-tte (centr, en gras)
<TH></TH>
Cellules de donnes
<TD></TD>

41

Balise <TABLE>
Acclrer laffichage des tableaux (HTML 4.0)
fixer le nombre de colonnes

ex : <TABLE cols="nb">

fixer la taille du tableau

par dfaut, la taille est calcule automatiquement par
le navigateur en fonction du contenu des cellules et
de la taille de la fentre
largeur fixe
<TABLE width="nb_pixels ou %"> : taille en pixels ou %
par rapport la fentre
hauteur fixe
<TABLE height ="nb_pixels ou %">
42

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">

Positionnement du tableau dans la page

<TABLE align="left|center|right">
43

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

couleur la plus sombre de lombrage

<TABLE bordercolorlight="couleur"> : dfinit la
couleur la plus claire de lombrage
44

Balises <TR>, <TH>

et
<TD>
Attributs
communs aux lignes et cellules
alignement horizontal du contenu dans une cellule

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

Balises <TH> et <TD>

-Largeur
cellules
et hauteur d'une cellule
La hauteur pour une cellule est applique

toutes les cellules de la ligne

La largeur dune cellule est applique toutes
les cellules de la colonne.
il

suffit de formater une seule cellule

les tailles sont prises en compte si non contraires la
taille du tableau, sinon le navigateur essaie
dharmoniser

<TH width="nb_pixels|%" height="nb_pixels|

%">

Empcher le passage automatique la ligne

dans la cellule
<TD nowrap>

46

Fusion de cellules - Balise <CAPTION>

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"> :

permet de donner un titre au tableau

47

Exercice
Commencer par dfinir un petit tableau

comportant 3 lignes et 4 colonnes. La

premire ligne contiendra les mots "un",
"deux", "trois", "quatre". La seconde, les mots
"one", "two", "three", "four". Enfin, la dernire
ligne sera compose des chiffres 1, 2, 3 et 4.
laide de lattribut <table border>, ajouter
une bordure votre tableau. Modifier
galement lespace entre les cellules et la
largeur de votre tableau. Essayer diffrentes
valeurs pour chacune de ces balises.
48

Exercices
Raliser le tableau ci dessous

49

Les cadres
Les cadres
La structure

Les cadres (frames) permettent de fractionner la

surface d'affichage en plusieurs parties afin
d'afficher diffrentes pages HTML simultanment
dans le navigateur.
Ces cadres servent notamment afficher d'un ct
une srie de liens comme un menu ou un
sommaire et de l'autre ct des pages contenant
des informations en relation.

La commande <FRAMESET> marque le dbut de

la dfinition des cadres.
commande </FRAMESET> marque la fin de la
dfinition des cadres.

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

Les cadres sont

<FRAMESET>.

crs

au

sein

des

balises

La balise <FRAME> fabrique des cadres

La balise <FRAME> possde les attributs suivants :

L'attribut SRC="Adresse du contenu" dfinit le contenu

du cadre.
L'attribut NAME="Nom du cadre" permet de nommer le
cadre.
L'attribut LONGDESC="Adresse du document" spcifie un
document dfinissant le contenu du cadre.

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

Deux attributs permettent de dfinir des dimensions pour chacun

des cadres.

L'attribut COLS="Largeur1,Largeur2,..." dfinit une largeur pour les

cadres.
L'attribut ROWS="Hauteur1,Hauteur2,..." dfinit une hauteur pour les
cadres.
Les deux attributs acceptent des valeurs en pourcentage ou en pixels.

Une toile peut remplacer une des valeurs et constitue, donc, une
dimension variable.

Dans un environnement de cadres, la division se fera soit

verticalement soit horizontalement, les deux ensembles tant
impossible.

Pour oprer une division horizontale et verticale, il faudra crer deux

<FRAMESET> imbriqus l'un dans l'autre.

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

Un attribut permet aux cadres de crer une bordure

autour d'eux. D'autres appliquent une couleur cette
bordure ou en fixe la taille.
L'attribut FRAMEBORDER="Valeur" dtermine selon le
choix l'affichage d'une bordure en trois-dimensions ou
standard.
L'attribut BORDER="Valeur en pixel" dfinit la largeur de
la bordure pour les cadres.
L'attribut BORDERCOLOR="couleur" dfinit une couleur
de bordure.
56

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

est plus petit que le cadre

no - n'affiche jamais la barre - des parties du

document peuvent ne pas tre atteinte

auto - la barre apparat si ncessaire (valeur par

dfaut)

57

Exercice
Raliser un site pour les cours dispenss

lENSA en se basant sur les cadres

Dans le premier cadre, vous affichez le nom de

lecole et son logo

Dans un deuxieme cadre, vous crez la liste
des cours dispenss sous forme dun ensemble
de liens hypertextes
Lorsque vous cliquez sur un lien donn, le
contenu de ce lien saffiche

58

Exercice-les cadres
Ecole Nationale des Sciences
Appliques
Logo
1
2
3
4

Le contenu de chaque
Cours

La liste des cours

dispenss

59

Les formulaires
Les formulaires
La structure

Le formulaire permet de transmettre des informations fournies par

l'utilisateur vers un serveur.
La commande <FORM> marque le dbut du formulaire

Les caractristiques de transmissions

La balise <FORM> possde deux attributs spcifiant

Une adresse ou le formulaire devra tre envoy ; une adresse

destinatrice

L'attribut ACTION="Adresse cible" dfinit l'adresse destinatrice

sur le site.

La mthode de transmission sur le rseau Internet.

L'attribut METHOD="Type de transmission" dfinit le type de

transmission.

L'attribut ENCTYPE="Type
d'encodage des donnes.

d'encodage"

dfinit

la

mthode

60

Les formulaires
Les formulaires
Les caractristiques de transmissions

Il y a deux mthodes d'accs au serveur http, GET et

POST :

La mthode GET fait en sorte que l'information passe

par la variable QUERY_STRING pour interprter les
donnes.
Cette mthode devrait tre utilise quand l'objet de la
demande est d'obtenir de l'information du serveur.
Elle permet de transfrer une faible quantit de
donnes, au maximum 256 caractres.

La mthode POST permet de changer ou ajouter des

informations au serveur.
Celle-ci provoque l'envoi de fichiers complets au
serveur.

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

L'attribut NAME="Nom du formulaire" dfinit un nom

pour le formulaire courant.
L'attribut TARGET="Nom du cadre" dfinit le cadre
destinataire qui doit afficher les rsultats du
formulaire.
L'attribut LANG="Langue" dfinit une langue pour
l'lment.
L'attribut DIR="rtl/ltr" dfinit une direction d'criture.
L'attribut TITLE="Description" dfinit une description
affiche dans une bulle.
64

Les formulaires
Les formulaires
Les champs d'entre

La commande <INPUT> dfinit un champ d'entre.

L'attribut NAME="Nom du champ d'entre" dfinit une

chane de caractres pour le champ d'entre.
L'attribut TYPE="Type de champ" dfinit le type de
donne du champ de saisie.

65

Les formulaires
Type de champ

Les formulaires

Description

button

Cration d'un bouton poussoir

checkbox

Cration de cases cocher

file

Cration d'un bouton de slection de fichier

hidden

Cration d'un champ cache

image

Cration d'un bouton image

password

Cration d'un champ autorisant la saisie de mot de passe

radio

Cration de cases radios

reset

Cration d'un bouton de rinitialisation

submit

Cration d'un bouton de soumission

text

Cration d'un lment de saisie de texte.

66

Les formulaires
Les formulaires
Les champs d'entre

Les attributs des champs d'entre

Attributs permettent d'apporter de nombreuses fonctionnalits amliorant

l'ergonomie, la convivialit et la prsentation.

DISABLED permet la dsactivation de l'lment.

READONLY spcifie le mode lecture seule de l'lment.

ALIGN="Type 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" une description affiche dans une bulle.

VALUE="Chane de caractres" dfinit la valeur du paramtre

envoy l'application traitant le formulaire si l'lment est slectionn.

67

Les formulairesStructuration
La balise <LEGEND> est une des balises

implmentes pour mettre en forme plus

aisment des fomulaires.
Elle est utilise l'intrieur du tag
<fieldset> qui englobe son contenu dans un
cadre.
L'intrt de la balise <LEGEND> est de
pouvoir dcouper un formulaire en catgories,
chacune ayant pour titre le titre insr dans la
balise legend.
68

Exercice
Essayer de crer un formulaire en changeant

chaque fois lattribut Type

<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
...
</HEAD>
<BODY>
<FORM>
<INPUT
NAME="Nom du champ"
...
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>

TYPE=Type de champ>

69

Les formulaires
Les formulaires
Les champs de saisie

Les champs de saisie servent dans la plupart des cas

saisir des valeurs (ge, nombre quelconque, etc.)
ou des mots (nom, adresse, etc.) ainsi que des motsde-passe.
La commande <INPUT TYPE="text"> cre un champ
de saisie d'une seule ligne.
La commande <INPUT TYPE="password"> cre un
champ de saisie mot-de-passe.

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

Les cases radios

Les

cases radios permettent l'utilisateur de faire

un seul choix parmi plusieurs options possibles.
commande <INPUT TYPE="radio"> cre une case
radio.

La

L'attribut

dfaut.

CHECKED slectionne une case par

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

Les cases cocher

Les cases cocher font parties en gnral d'un
groupe d'options dans lequel un usager peut
slectionner un ou plusieurs items contrairement
aux cases radios.
commande <INPUT TYPE="checkbox"> marque
la fin du formulaire.

La

L'attribut

dfaut.

CHECKED slectionne une case par

74

Les formulaires
Les formulaires
Les champs de saisie

Les boutons de commande permettent aprs le renseignement

des diffrents lments d'un formulaire par un utilisateur
d'envoyer vers le destinataire les informations ou encore
d'annuler le processus.
La commande <INPUT
d'enregistrement.
La commande
d'annulation.

<INPUT

TYPE="submit">
TYPE="reset">

cre

un

bouton

cre

un

bouton

La commande <INPUT TYPE="file"> cre un bouton fichier

attach.
L'attribut ACCEPT="Nom du bouton" spcifie le type de fichier
attach.
75

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 boutons images

Les images peuvent se substituer aux boutons de commandes
standards l'instar des hyperimages et partant d'accomplir des
fonctions identiques aux boutons prcits.

La commande <INPUT TYPE="image"> spcifie la cration

d'un bouton base d'une image.
L'attribut SRC="Adresse de l'image" permet d'affecter une
image la commande.
L'attribut USEMAP="Adresse de l'image" permet d'affecter une
image en coordonnes (image-map) la commande.
L'attribut ALT="Texte" affiche une description de l'image.
77

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 entres caches

Les entres caches permettent, lors de l'envoi, de joindre au

formulaire une information non visible pour l'utilisateur.

Lorsque la balise <INPUT> possde le type hidden, elle

n'accepte plus que deux attributs, en l'occurrence NAME et
VALUE.

La commande <INPUT TYPE="hidden"> spcifie la cration

d'une entre cache
L'attribut NAME="Nom du champ" permet d'affecter un nom
l'entre cache.
L'attribut VALUE="Valeur de la variable" permet d'affecter une
valeur l'entre cache.
79

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

Un champ multiligne permet d'entrer un texte de

plusieurs lignes dans une zone de saisie.
La commande <TEXTAREA> dfinit une zone de texte.

La commande </TEXTAREA> ferme la zone de texte.

L'attribut NAME="Nom du champ" dfinit un nom

pour la zone de texte.
L'attribut COLS="Valeur" spcifie un nombre de
caractres sur une ligne

L'attribut

lignes.

ROWS="Valeur" spcifie un nombre de

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

Les attributs de TEXTAREA

WRAP="off/virtual/physical" dfinit la prsence de coupure de ligne.

Off La coupure de ligne dsactive.

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.

Les listes de choix peuvent autoriser la multislection d'items.

La commande <SELECT> dfinit une liste de choix.

L'attribut NAME="Nom du champ" spcifie un nom pour l'lment.

L'attribut SIZE="Valeur"* dfinit le type de liste et le nombre d'items.

Une valeur dfinie 1 provoque une liste droutante.

Un valeur suprieure 1 provoque une liste simple.

L'attribut MULTIPLE permet de crer une liste choix multiple.
L'attribut TABINDEX="Nombre" dfinit la position de la liste dans
l'ordre de tabulation.
L'attribut DISABLED permet de rendre la liste inactive.

85

Les formulaires
Les formulaires
Les listes de choix

La commande <OPTION> dclare une entre dans la

liste.
VALUE="Nom de l'entre"
slection d'un item par dfaut.

L'attribut

dfinit

la

SELECTED dfinit la slection d'un item

par dfaut.

L'attribut

LABEL="Chane de caractres" dfinit un

label pour l'option.

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

HTML et le multimdia (01)

HTML et le multimdia
Les formats vidos

Un document HTML peut accueillir divers

multimdias tels que des vidos ou des sons.

lments

Les vidos au format AVI ou quicktime consomment

normment de mmoire, une seconde avec une dfinition de
320x240, 16 millions de couleurs et 15 images par secondes
reprsente environ 3 mga-octets sans compression.

Le format MPEG permet une compression efficace pour une

dgradation infime par rapport aux deux autres. Le rsultat est
immdiatement visible non seulement au niveau de
l'occupation mmoire mais aussi par voie de consquence au
niveau du temps.

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

La commande IMG, utilise pour l'affichage d'image, permet galement d'insrer

dans une page Web des fichiers vidos au format AVI, Quicktime ou MPEG auxquels
s'ajoutent les mondes VRML (Virtual Reality Modeling Language).
La commande <IMG DYNSRC="Adresse du fichier vido"> insre une
vido ou un monde VRML.
L'attribut
START="fileopen/mouseover"* dfinit la mthode de
dmarrage d'une vido. Deux options sont possible :

FILEOPEN (valeur de dfaut) signifie que le vido dbutera lorsque le

document sera compltement charg,
MOUSEOVER signifie que le vido dmarrera lorsque l'usager
dplacera la souris devant l'animation.

L'attribut LOOP="Nombre de rptitions" dtermine le nombre de

rptitions d'une vido.
L'attribut CONTROLS" permet l'affichage des lments de
contrle
Les autres attributs de cette balise sont identiques celles de la
commande d'insertion d'image.
92

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

Le son est soumis aux mmes exigences que les vidos, le

temps de tlchargement et la capacit en mmoire.

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.

En consquence, les fichiers au format MIDI seront

gnralement prfrs pour leur trs faible consommation en
ressource, prs de dix milles fois infrieurs au premier.

Il existe plusieurs outils permettant de lire des fichiers audios

partir d'une page Web.

Windows Media Player : dit par Microsoft,

Quicktime Player: dit par Apple,
Real Player : dit par Real Networks,
Crescendo : dit par LiveUpdate.

94

HTML et le multimdia
(05)
HTML et le multimdia
Lancement d'un son au dmarrage

Une commande spciale permet de dmarrer la lecture

d'un fichier audio WAVE, MIDI, AIFF ou AU lors du
chargement d'un document HTML.
La commande <BGSOUND ...> permet de lancer un
fichier audio au chargement de la page HTML.

L'attribut SRC="Adresse du mdia" indique l'adresse du

fichier sonore jouer.
L'attribut BALANCE="Valeur" dtermine la balance stro
entre une valeur de -10 000 +10 000.
L'attribut LOOP="true/false" permet de faire jouer un fichier
sonore en boucle.
L'attribut LANG="Type de langue"* spcifie la langue utilise.
L'attribut
TITLE="Description"
permet
d'ajouter
un
commentaire dans une bulle.
95

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

Cette commande permet d'insrer dans un document HTML,

des fichiers multimdias vidos ou audios de diffrents
types ; AVI, Quicktime, MPEG, MIDI, WAVE, MP3, etc.
La commande <EMBED ...> insre un fichier multimdia.et la
commande </EMBED> termine la commande prcite.

L'attribut SRC="Adresse du mdia" indique l'adresse du fichier

multimdia jouer.
L'attribut PLUGINSPACE="Adresse de l'application" indique l'adresse
de l'application.
L'attribut TYPE="Type d'application" spcifie le type d'application
destine lancer le fichier.

La commande <NOEMBED ...> insre un contenu alternatif si

la commande EMBED n'est pas supporte.

La commande </NOEMBED> termine la commande prcite.

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>

HTML et les autres

langages(01)
HTML et les autres langages
L'insertion d'applet Java

Aujourd'hui par sa puissance et sa souplesse, Java,

conu en 1990 par Sun Microsystem, est devenu le
langage incontournable pour la programmation
Internet.

Le langage Java est capable de dvelopper de

vritables
applications professionnelles
grant
parfaitement toutes les techniques lies au
multimdia et l'interactivit.

Java se distingue, galement, par sa facult

savoir solliciter intelligemment les ressources de
l'ordinateur client afin d'effectuer une partie du
travail

donc de soulager le serveur. Autrement dit, le serveur

envoie des donnes aux ordinateurs clients qui se
99
chargent alors des calculs lis aux animations

HTML et les autres langages (02)

HTML et les autres langages
L'insertion d'applet Java

Un applet Java est un module externe contenant du code

pr compil qui s'excute par l'intermdiaire du navigateur
de la machine d'un client.

Ainsi, il s'avre que le navigateur de l'usager doit

imprativement tre capable de supporter la technologie
Java, soit de contenir les ressources propres ce langage
sans quoi, le programme sera purement et simplement
ignor par le navigateur.

La commande <APPLET> insre une applet Java dans une

page HTML et la commande </APPLET> ferme l'applet Java.

L'attribut CODE="Nom de la classe" dfinit le nom de la classe du

code excuter.
L'attribut CODEBASE="Adresse du code" spcifie l'adresse depuis
laquelle le code est rcupr.
100

HTML et les autres langages (03)

HTML et les autres langages
L'insertion d'applet Java
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
<HTTP-EQUIV="Date" CONTENT="01/01/2000">
...
</HEAD>
<BODY>
<APPLET CODE="Nom de la classe"
CODEBASE="Adresse du code">
...
</APPLET>
...
Diverses commandes HTML
...
</BODY>
</HTML>
101

HTML et les autres langages (03)

HTML et les autres langages
L'insertion d'applet Java

Les attributs de APPLET

Tous les attributs se placent au sein de la balise <APPLET...>.

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

HTML et les autres langages (04)

HTML et les autres langages
L'insertion d'applet Java

Les attributs de APPLET

ATTRIBUTS DE TAILLE

L'attribut BORDER="Valeur" dfinit la largeur de la bordure pour une

application vido.
L'attribut HEIGHT="Valeur" dfinit la hauteur de l'application.
L'attribut WIDTH="Valeur" dfinit la largeur de l'application.
L'attribut BGCOLOR="Couleur" applique une couleur d'arrire plan
pour l'application.

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

HTML et les autres langages (05)

HTML et les autres langages
L'insertion d'applet Java

Les attributs de APPLET

ATTRIBUTS DIVERS
L'attribut NAME="Nom de l'instance" dtermine un
nom d'instance courante de l'applet.
L'attribut
ALT="Texte" spcifie un texte de
remplacement en cas d'incapacit d'excution de
l'applet.
L'attribut LANG="Type de langue"* spcifie la langue
utilise.
L'attribut TITLE="Description" permet d'ajouter un
commentaire.
104

HTML et les autres langages (06)

HTML et les autres langages
L'insertion d'applet Java

L'insertion par OBJECT

Cette commande permet d'insrer dans un document HTML, des objets

multimdias de diffrents types tels que les contrles ActiveX ou des
modules Flash ainsi que des programmes crits en Java.
La commande <OBJECT ...> insre un fichier multimdia et la
commande </OBJECT> termine la commande prcite.

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

HTML et les autres langages (07)

HTML et les autres langages
L'insertion d'applet Java

L'insertion par OBJECT

<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
<HTTP-EQUIV="Date" CONTENT="01/01/2000">
...
</HEAD>
<BODY>
<OBJECT
CLASSEID="java:fichier classe"
CODETYPE="application/java"
TYPE="Type d'application"
CODEBASE="Adresse de chargement"
DATA="Nom">
.
..
</OBJECT>
...
Diverses commandes HTML
... </BODY>
106