Vous êtes sur la page 1sur 165

Universit Ibn Zohr Agadir Anne universitaire: 2010-2011

Ecole Nationale des Sciences Appliqu Section: ENSA -2


Dpartement: Gnie Informatique Module: Programmation Web
Responsable: Prof. A. Elyousfi

Le langage HTML
(HyperText Markup
Language)

Abderrahmane ELYOUSFI Dpartement


elyousfiabdo@ieee.org Gnie Informatique
1
Plan du cours
 Introduction
 Structure dun document HTML
 La Mise en forme du texte
 Les Listes
 Les Liens
 Les Images
 Les Tableaux
 Les Frames
 Les Formulaires
 Conclusion

Abdarrahmane ELYOUSFI 2
Introduction au langage HTML
 HTML (HyperText Markup Language) est un langage de balisage
qui permet de structurer le contenu des pages web.
 Cest un langage de description des donnes, et non un langage de
programmation.
 Les instructions de ce langage sont interprtes par les diffrents
navigateurs et les rsultats apparaissent sur lcran.
 le langage HTML est un standard, cest--dire quil sagit de
recommandations publies par un consortium international : le
World Wide Web Consortium (W3C).
 Il existe ce jour plusieurs versions diffrentes de ce langage ayant
toutes une mme base commune, il y a HTML

Abdarrahmane ELYOUSFI 3
Historique du langage HTML
 Historiquement, les langages de balisage sont issus du langage SGML
(Standard Generalized Markup Language) cr en 1986 pour structurer
des contenus trs divers.
 1990 : HTML est cre par Tim Berner-Lee au Centre Europeen de
Recherche Nucleaire (CERN)
 1995 : HTML 2.0 normalisation par l'IETF (Internet Engineering Task
Force)
 1996 : HTML 3.2 ajout des tables, , etc.
 1998 : HTML 4.01 ajout des feuilles de styles, des frames, d'objets, etc.
 2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0
 2002 : XHTML 2.0 en cours de spcification

Abdarrahmane ELYOUSFI 4
Visualisation du code source de la page
g

Abdarrahmane ELYOUSFI 5
Visualisation du code source de la page
n

Abdarrahmane ELYOUSFI 6
La sparation de la forme et du fond

F
Information
textuelle

HTML Navigateur

Mise en Espace de
forme visualisation

Abdarrahmane ELYOUSFI 7
Smantique du langage HTML
 Une balise est un mot cl, une commande du langage
insre dans le corps du document pour introduire un
effet particulier.
<balise> texte format</balise>
 Le caractre < indique le dbut d'une balise,
 Le caractre > indique la fin d'une balise,
 <balise>: balise ouvrante
 </balise>: balise fermante
 Les caractres en dehors d'une balise <...> sont traits en
fonction de la balise qui les prcde,

Abdarrahmane ELYOUSFI 8
Rgles syntaxiques dcriture
 Pour chaque balise ouvrante doit correspondre une balise fermante :

<balise> texte format</balise>


 Si on imbrique plusieurs balises, elles doivent tre refermes dans
l'ordre inverse :

<b1> <b2> texte format</b2> </b1>


 En HTML, on trouve des balises qui nont pas de balise fermante.

<br/> <! Commentaire -->

Abdarrahmane ELYOUSFI 9
Rgles syntaxiques (Notion dattribut)
 Un attribut est un lment, prsent au sein de la balise
ouvrante, permettant de dfinir des proprits supplmentaires.
 Voici un exemple dattribut pour la balise <p> (balise
dfinissant un paragraphe), permettant de spcifier que le texte
doit tre align sur la droite :

<p align="right"> Exemple de paragraphe </p>

 Chaque balise peut comporter un ou plusieurs attributs, chacun


pouvant avoir (aucune,) une ou plusieurs valeurs.

Abdarrahmane ELYOUSFI 10
Structure dun document HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Le doctype prcise au navigateur les
<html> informations sur le document, la version du
langage html, ., etc.
<head> Llment <html> est le conteneur de
Informations relatives au document premier niveau plac en haut de la
</head> hirarchie de tous les lments du
document.
<body> Llment <head> englobe un certain
Informations prsenter sur lcran nombre dinformations comme <title>,
</body> <base>, <link>, <meta>, <script>, <style>
dont nous allons tudier les rles respectifs.
</html>
Llment <body> est le conteneur de
lensemble des lments textuels et
graphiques dune page web.
Abdarrahmane ELYOUSFI 11
Exemple de page HTML
<html >
<head>
<title>Exemple dune page web</title>
</head>
<body>
<h1>Introduction la programmation web</h1>
<h2>Serveurs web</h2>
<p>Chaque programme est crit par un langage spcifique sexcute par un
type de programme serveur. Le type du programme serveur utilis va
conditionner les langages possibles. Voyons quelques exemples :</p>
<ul>
<li>serveur IIS (Internet Information Services) : langage ASP, ASP.NET</li>
<li> serveur Sun Java System Web Server : langage JSP, ASP, PHP</li>
<li> serveur Apache : PHP, Perl, Ruby, Python</li>
</ul>
<h2>Client web</h2>
</body>
</html> Abdarrahmane ELYOUSFI 12
Exemple de page HTML

Abdarrahmane ELYOUSFI 13
Exemple de page HTML
<html>

<head>
<title>
Titre externe du document
</title>
<Meta NAME=keywords
content=liste des mots cls lattention des moteurs de recherchee>
</head>
<body>
Informations prsenter sur lcran
</body>

</html>
Abdarrahmane ELYOUSFI 14
Structure dun document HTML

 Lentte du document contient des


informations pour le rfrencement de la
page. Ces donnes sont dlimites par les
balises <HEAD> et </HEAD>,
 Le corps du document contient tous les
lments visibles afficher dans le
navigateur. Les lments visibles sont
compris entre les balises <BODY> et
</BODY>,

Abdarrahmane ELYOUSFI 15
Mise en forme

Abdarrahmane ELYOUSFI 16
Mise en forme des titres de section

 <h1>Titre de niveau 1</h1>


Titre de niveau 1
 <h2>Titre de niveau 2</h2>
Titre de niveau 2
 <h3>Titre de niveau 3</h3>
 Titre de niveau 3
... ... ... ... ... ...
 <h6>Titre de niveau 6</h6>
 Titre de niveau 6

Abdarrahmane ELYOUSFI 17
Exemple de page HTML
<html >
<head>
<title> Les diffrents niveaux de titre </title>
</head>
<body>
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
</body>
</html>

Abdarrahmane ELYOUSFI 18
Exemples

Abdarrahmane ELYOUSFI 19
Mise en forme des paragraphes
Le format de document HTML permet de grer la notion de
paragraphe laide des tags <p></p>
La balise <p> provoque un saut de ligne avant le paragraphe,
suivit de linsertion dune ligne vierge aprs la fin du
paragraphe.
Un paragraphe ne peut en contenir un autre (le navigateur les
interprte comme des paragraphes successifs...),
Cette balise peut utilise lattribut Align:
Align = {left (par dfaut), right, center, justify}
Pour forcer un retour la ligne dans un paragraphe il faut utiliser la
balise <br>.
Pour forcer le navigateur interprter lespace il faut utiliser
&nbsp;. Abdarrahmane ELYOUSFI 20
Exemple de page HTML
<html >
<head><title>Exemple dune page web</title>
</head>
<body>
<h1>Chapitre 1: Introduction la programmation web</h1>
<h2>Serveurs web</h2>
<p>Chaque programme est crit par un langage spcifique sexcute par un
type de programme serveur.</P>
<P>Le type du programme serveur utilis va conditionner les langages possibles.
Voyons quelques exemples :</p>
<h2>Client web</h2>
<p align=justify>Le client est couramment appel un navigateur. Les navigateurs les
plus connus tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. </p>
<p>Les plus courant acceptent des extensions (Plug-In) permettant dtendre leurs
capacits (lire des vido, recevoir du son ou des films en flot continu,...).</p>
</body>
</html>
Abdarrahmane ELYOUSFI 21
Exemples

Abdarrahmane ELYOUSFI 22
Mise en forme du texte

 Emphasis <em>
Voici un exemple de rendu de <em>
 Strong <strong>
Voici un exemple de rendu de <strong>
 Indice <sub>
Test Voici un exemple de rendu de <sub>
 Exposant <sup>
Test Voici un exemple de rendu de <sup>
Abdarrahmane ELYOUSFI 23
Mise en forme du texte
 Gras <b>
 Voici un exemple de rendu de <b>
 Italique <i>
 Voici un exemple de rendu de <i>
 Soulign <u>
 Voici un exemple de rendu de <u>
 Barr <s>
 Voici un exemple de rendu de <s>
 Petit <small> / Grand <big>
 Voici un exemple de rendu de <small>
Voici un exemple de rendu de <big>
Abdarrahmane ELYOUSFI 24
Exemples de mise en forme complexe
 Les balises de mise en forme sont associatives et il est
possible de les combiner...

 <em>texte important</em>
 <strong>texte trs important</strong>
 <strong><em>texte encore plus important</em></strong>
 <strong><em>texte</em>encore plus important</strong>

 Lordre de fermeture des balises doit tre inverse


lordre douverture de ces dernires.

Abdarrahmane ELYOUSFI 25
Exemple de page HTML
<html >
<head> <title>Exemple dune page web</title>
</head>
<body>
<h1>Chapitre 1: Introduction la programmation en langage C</h1>
<h2>Exercice 1:</h2>
<p>soit x<sub> 1</sub>, x<sub> 2</sub>, x<sub> 3 </sub> trois variables, : </p>
<p>Ecrire un programme en langage C qui permet de :<br/>
-Donner lutilisateur de saisir trois valeurs du clavier<br/>
-stocker ces valeurs dans les trois variables ci-dessus<br/>
-afficher la valeur <em><strong>maximale</strong></em></p>

<h2>Exercice 2:</h2>
<p>soit a, b et c trois variables, : </p>
<P>F(x)=aX<sup>2</sup>+bX+C</p>
Ecrire un programme en langage C qui donne les <em><strong>solutions de
l&eacutequation:</em></strong><br>
<p>F(x)=O</p>
</body>
</html>
Abdarrahmane ELYOUSFI 26
Exemple

Abdarrahmane ELYOUSFI 27
Texte prformat ...
 Dans le langage HTML, un retour la ligne, une tabulation,
une suite du caractre espace dans le code source est un
simple sparateur !

 La balise <Pre> Permet d'crire un texte prformat en


conservant les espaces, les retours la ligne et les tabulations.

 Elle indique au navigateur dafficher les donnes telles


quelles sont mises en forme dans le code source HTML
<pre> <pre>
int main( void ){
voici un texte dont on matrise
return 1;
la mise en forme laffichage }
</pre> </pre>
Abdarrahmane ELYOUSFI 28
Exemple de page HTML
<html >
<head>
<title>Exemple dune page web</title>
</head>
<body>
<h1>Chapitre 1: Introduction &aacute la programmation en langage C</h1>
<h2>Exemple:</h2>
<pre>
void main()
{
int x, y, z;
printf(entrer deux valeurs \n);
scanf(%d%d,&x,&y);
z=x+y;
printf(La somme de %d et %d est gal :%d\n,x,y,z);
}
</pre>
</body>
</html>

Abdarrahmane ELYOUSFI 29
Exemple

Abdarrahmane ELYOUSFI 30
Mise en forme du texte

 La balise <font> permet de changer la police de


caractre utilise ainsi que son style,
Lattribut face : il permet de spcifier le nom de la
police de caractres utiliser,
Lattribut size : il permet de prciser la taille des
caractres afficher (compris entre 1 et 7, 3 par
dfaut),
Lattribut color : il permet de modifier la couleur du
texte afficher.
<font face="Verdana, Arial, Helvetica, sans-serif"
size="5" color="red">mon exemple</font>
Abdarrahmane ELYOUSFI 31
Exemple de page HTML
<html >
<head>
<title>Exemple dune page web</title>
</head>
<body>
<h1>Chapitre 1: Introduction la programmation web</h1>
<h2>Serveurs web</h2>
<font face="Verdana, Arial, Helvetica, sans-serif size= " 5" color="red">
<p>Chaque programme est crit par un langage spcifique sexcute par un type de programme
serveur.</P> </font>
<P>Le type du programme serveur utilis va conditionner les langages possibles.
Voyons quelques exemples :</p>
<h2>Client web</h2>
<p align=justify>Le client est couramment appel un navigateur. Les navigateurs les plus connus
tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. </p>
<p>Les plus courant acceptent des extensions (Plug-In) permettant dtendre leurs </p>
</body>
</html>
Abdarrahmane ELYOUSFI 32
Exemple

Abdarrahmane ELYOUSFI 33
La gestion des couleurs

 Il existe 2 manires de grer les couleurs :


En utilisant le nom de la couleur
16 couleurs de base sont dfinies dans le langage :
(aqua, black, lime, yellow, silver, etc...)
Dautres couleurs peuvent tre connues des navigateurs ...
En spcifiant directement le code RGB de la couleur
 Chaque composante doit possder une valeur comprise entre 0
et 255 (rouge, vert et bleu),
Ces donnes sont exprimer en hexadcimal,
La couleur #C6D418 est compose de #C6 rouge, de #D4 vert
et de #18 bleu.
Abdarrahmane ELYOUSFI 34
La gestion des couleurs

Abdarrahmane ELYOUSFI 35
Les sparateurs

 Afin de sparer les diffrentes parties dun mme


document, le langage HTML propose la balise qui
permet de raliser une ligne horizontale.
 Il est possible de paramtrer la longueur et la largeur de
la ligne,

Abdarrahmane ELYOUSFI 36
Les sparateurs

<HR>
Exemples
Une ligne horizontal par dfaut
(quivalent size=2, align=center
et width=100%).
<HR width=50% size=4 >

ligne horizontal de largeur quivalente


50% de la largeur de page web et de 4
pixels dpaisseur.

<HR width=100px size=8 align=right>

ligne horizontal de 100 pixels de large,


8 pixels dpaisseurs align droite.
Abdarrahmane ELYOUSFI 37
Modification des couleurs

<BODY
Ex BGCOLOR=#880000>
<H1>Hello !</H1> Hello
</BODY>

<BODY BGCOLOR=#880000
TEXT=#FFFFFF > Hello
<H1>Hello !</H1>
</BODY>

BGCOLOR : Couleur du fond de la page.


TEXT : Couleur du texte contenu dans la page.

Abdarrahmane ELYOUSFI 38
Exemple de page HTML
<html >
<head>
<title>Exemple dune page web</title>
</head>
<body bgcolor="#570000 text=#FFFFFF">
<h1>Chapitre 1: Introduction la programmation web</h1>
<h2>Serveurs web</h2>
<font face="Verdana, Arial, Helvetica, sans-serif size= " 5" color="red">
<p>Chaque programme est crit par un langage spcifique sexcute par un type de
programme serveur.</P> </font>
<P>Le type du programme serveur utilis va conditionner les langages possibles.
Voyons quelques exemples :</p>
<h2>Client web</h2>
<p align=justify>Le client est couramment appel un navigateur. Les navigateurs les plus
connus tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. </p>
<p>Les plus courant acceptent des extensions (Plug-In) permettant dtendre leurs </p>
</body>
</html> Abdarrahmane ELYOUSFI 39
Exemple

Abdarrahmane ELYOUSFI 40
La balise <blockquote>

Abdarrahmane ELYOUSFI 41
Exemple

< &lt; > &gt;

Abdarrahmane ELYOUSFI 42
Listes

Abdarrahmane ELYOUSFI 43
Gestion des listes de donnes

 Afin de structurer les informations dans les pages internet, le


standard HTML propose diffrentes balises pour mettre en
forme les documents,
 Les listes puces,
 Les listes numrotes,
 Les listes de description,
 Pour grer des informations plus compltes, il est possible
dimbriquer ces balises,
 Possibilit de modifier le style daffichage des puces et de la
numrotation laide de paramtres.

Abdarrahmane ELYOUSFI 44
Les listes puces

La balise <ul> permet de dfinir une liste


dinformations. Chaque donne de la liste doit tre
encadre par la balise <li> qui indique au navigateur la
prsence dun nouvel item.

<ul>
<li>Premier lment</li> Premier lment
<li>Deuxime lment</li> Deuxime lment
<li>Troisime lment</li> Troisime lment
</ul>

Abdarrahmane ELYOUSFI 45
Utilisation de l'attribut TYPE

Valeurs de l'attribut TYPE :


disc : gros point noir plein (par dfaut)
circle : gros point noir creux
square : petit carr plein
Exemples <ul TYPE=circle>
<li>Premier lment</li>
<li>Deuxime lment</li>
<li>Troisime lment</li>
</ul>
Les listes numrotes

La balise <ol> permet de dfinir une liste


dinformations. Chaque donne de la liste doit tre
encadre par la balise <li> qui indique au navigateur
la prsence dun nouvel item.

<ol>
<li>Premier lment</li> 1. Premier lment
<li>Deuxime lment</li> 2. Deuxime lment
<li>Troisime lment</li> 3. Troisime lment
</ol>

Abdarrahmane ELYOUSFI 47
Utilisation de l'attribut TYPE

Valeurs de l'attribut TYPE :


1 : chiffres arabes
i : chiffres romains en bas de casse
I : chiffres romains en capitales
a : lettres
A : lettres (capitales)
Exemples
<OL TYPE="i">...
<OL TYPE="A">...
Les listes de description

permet de crer une liste de termes, chacun dentre


eux tant suivi de sa dfinition.
L'ensemble de la liste est dlimite par le conteneur <DL>
Le terme dfinir est prcd par un marqueur <DT>
Chaque dfinition est prcd par un marqueur <DD>
Exemple:
<dl>
<dt>terme1</dt> <dd>dfinition 1</dd>
<dt>terme1</dt> <dd>dfinition 2</dd>
<dt>terme1</dt> <dd>dfinition 3</dd>
</dl>
Abdarrahmane ELYOUSFI 49
Exemple (Les listes numrotes)
<html >
<head>
<title>Exemple dune page web</title>
</head>
<body>
<h1>Chapitre 1: Introduction la programmation web</h1>
<ol>
<li><h2>Serveurs web</h2>
<p align=justify>Chaque programme est crit par un langage spcifique sexcute par un type
de programme serveur. Le type du programme serveur utilis va conditionner les langages
possibles. Voyons quelques exemples :</p>
</li>
<li><h2>Client web</h2>
<p align=justify>Le client est couramment appel un navigateur. Les navigateurs les plus
connus tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. Les plus courant acceptent des
extensions (Plug-In) permettant dtendre leurs </p>
</li>
</ol>
</body>
</html>
Abdarrahmane ELYOUSFI 50
Exemple

Abdarrahmane ELYOUSFI 51
Exemple de page HTML
<html >
<head>
<title>Exemple dune page web</title>
</head>
<body>
<h1>Introduction la programmation web</h1>
<h2>Serveurs web</h2>
<p>Chaque programme est &eacutecrit par un langage sp&eacutecifique s&acuteex&eacutecute
par un type de programme serveur. Le type du programme serveur utilis&eacute va conditionner
les langages possibles. Voyons quelques exemples :</p>
<ul>
<li>serveur IIS (Internet Information Services) : langage ASP, ASP.NET</li>
<li> serveur Sun Java System Web Server : langage JSP, ASP, PHP</li>
<li> serveur Apache : PHP, Perl, Ruby, Python</li>
</ul>
<h2>Client web</h2>
</body>
</html> Abdarrahmane ELYOUSFI 52
Exemple (Les listes numrotes)

Abdarrahmane ELYOUSFI 53
Exemple de liste de dfinition
<html >
<head>
<title>Liste de d&eacutefinition</title>
</head>
<body>
<h1>Introduction &agrave la programmation web</h1>
<h2>Ecrire une page web:</h2>
<dl>
<dt>Etape 1:</dt> <dd>lancer l'&eacutediteur de texte bloc Notes</dd>
<dt>Etape 2:</dt><dd>Ecrire le code HTML</dd>
<dt>Etape 3:</dt><dd>Enregistrer le fichier avec l'extension .html</dd>
<dt>Etape 4:</dt><dd>Ouvrir ce fichier par le Navigateur</dd>
</dl>
</body>
</html>
Abdarrahmane ELYOUSFI 54
Exemple

Abdarrahmane ELYOUSFI 55
Exemple

Abdarrahmane ELYOUSFI 56
Exemple1
<html>
<head>
<title>Les listes XHTML</title>
</head>
<body>
<h1>Les listes</h1>
<h2>Les listes ordonnes</h2>
<ol>
<li>
<h3>Le premier jour</h3>
<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi et
rebatur super aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit .. </p>
</li>
<li>
<h3>Le deuxime jour</h3>
<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi et
super aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit lucem ac </p>
</li>
<li> <h3>Le troisime jour</h3>
<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi et
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit lucem ac .</p>
</li>
</ol>
</body>
</html> Abdarrahmane ELYOUSFI 57
Exemple

Abdarrahmane ELYOUSFI 58
Exemple1
<html>
<head>
<title>Les listes imbriques</title>
</head>
<body>
<h1>Listes imbriques</h1>
<ol>
<li> <h2>Le premier jourr</h2>
<ul> <li> <p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi
aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit .. </p></li>
<li>
<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi et
xitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit lucem ac </p></li>
</ul>
<li> <h2>Le deuxime jour</h2>
<ul> <li> <p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem
abyssi et dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona.</p></li>
<li> <p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem
abyssi et dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona.</p></li>
</ul>
</ol>
</body>
</html>

Abdarrahmane ELYOUSFI 59
Exemple

Abdarrahmane ELYOUSFI 60
Exemple1
<html>
<head>
<title>Les listes imbriques</title>
</head>
<body>
<dl>
<dt>XHTML</dt>
<dd><fieldset>eXtensible HyperText Markup Language : le langage moderne de cration de pages web...
</fieldset></dd>
<dt>CSS</dt>
<dd><fieldset>Cascading Style Sheet : le langage de cration des styles et du design...</fieldset></dd>
<dt>PHP</dt>
<dd><fieldset>PHP Hypertext Preprocessor : le meilleur langage de cration de pages dynamiques...
</fieldset></dd>
<dt>SQL</dt>
<dd><fieldset>Structured Query Language : le langage dinterrogation des bases de donnes...
</fieldset></dd>
</dl>
</body>
</html>
Abdarrahmane ELYOUSFI 61
Les liens

Abdarrahmane ELYOUSFI 62
Mise en place de liens entre les pages

 Il est ncessaire de pouvoir inclure des


liens dans vos pages afin de ne pas tre
bloqu,
 Il existe diffrents types de liens,
Les liens internes une page
Les liens externes une page
Relatifs au site internet courant,
Liens externes au site courant.
Abdarrahmane ELYOUSFI 63
Les liens internes une page (ancres)

 Les liens internes servent par exemple raliser un sommaire


(plan) de la page en cours.
 Pour cela, on utilise un tag <a> avec 2 attributs diffrents :
 name : dfinit un point darriv,
 href : spcifie le point darriv ou lon doit aller.

Abdarrahmane ELYOUSFI 64
Exemple
<html >
<head>
<title>Exemple dune page web</title>
</head>
<body>
<h1>Chapitre 1: Introduction la programmation web</h1>
<H2><a href=#Part1 title= Serveur web> Serveur Web</a></H2>
<H2><a href=#Part2 title= Client web> Client Web</a></H2>
<h2><a name= part1 >Serveurs web</a></h2>
<p align=justify>Chaque programme est crit par un langage spcifique sexcute par un type
de programme serveur. Le type du programme serveur utilis va conditionner les langages
possibles. Voyons quelques exemples :</p>
<h2><a name= part2 >Client web</a></h2>
<p align=justify>Le client est couramment appel un navigateur. Les navigateurs les plus
connus tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. Les plus courant acceptent des
extensions (Plug-In) permettant dtendre leurs </p>
</body>
</html>

Abdarrahmane ELYOUSFI 65
Exemple

Abdarrahmane ELYOUSFI 66
Les liens externes avec adresse absolue

 Ces liens permettent de connecter


lutilisateur sur dautres sites internet.
 Cette connexion se fait laide dURL
bien formes.

http://www.ensa-agadir.ac.ma

Abdarrahmane ELYOUSFI 67
Les liens externes

 Exemples:

<a href = "http://www.google.fr"


title = "Lien sur google" >
Lien vers le moteur de recherche google</a>

<a href = "http://www.linuxfr.org"


title = "Des nouvelles du monde libre" >
Un site de news consacr lOpenSource</a>

Abdarrahmane ELYOUSFI 68
Les liens internes
 Exemples
<a href = "meme_repertoire.html"
Lien vers un fichier se trouvant dans le mme rpertoire que le
document courant</a>
<a href = "repetoire/fichier.html"
Lien vers un fichier se trouvant dans un sous rpertoire du
document courant</a>
<a href = "../index.html"
Lien vers un fichier se trouvant dans un parent du document
courant</a>
<a href = "../autre_branche/docs.html"
Lien vers un fichier se trouvant dans une autre branche de
larborescence relativement au document courant</a>

Abdarrahmane ELYOUSFI 69
Les images

Abdarrahmane ELYOUSFI 70
La balise <img> pour les images
 Pour insrer une image dans une page internet,
il existe plusieurs mthodes :
Utilisation de la balise <img> qui permet dintroduire
des images,
Utilisation de la balise <objet> qui est dun usage
beaucoup plus gnral et qui permet d'insrer dautres
objets multimdias,

 Nous concentrerons notre attention sur la


premire balise <img>.

Abdarrahmane ELYOUSFI 71
Exemples daffichage des images

 Exemples
<img
src="MonImage.png"
alt="courte description"
>
<img
src="MaPhoto.jpg"
width=600px
height=50%
alt="Voici une photo de ..."
>
Abdarrahmane ELYOUSFI 72
Les options dinsertion des images

alt : Texte affiche la place de limage si lutilisateur les a dsactives.


width : Spcifie la largeur de limage en pixel ou en pourcentage.
height : Spcifie la hauteur de limage en pixel ou en pourcentage.
align : Dtermine la position de limage vis--vis du texte qui lentoure.
border : Indique si limage doit possder un cadre autour delle. Si cest
le cas, on indique le nombre de pixels le composant.
hspace/vspace : Permet de spcifier un espacement horizontal et vertical
autour de limage.

Abdarrahmane ELYOUSFI 73
Les options dinsertion des images

Alignement
 ALIGN="top" : le haut de l'image est align sur la
partie suprieure de la ligne o elle se trouve
ALIGN="middle" : le milieu de l'image est align sur
le milieu de la ligne o elle se trouve
ALIGN="bottom" : le bas de l'image est align sur le
bas de la ligne o elle se trouve (valeur par dfaut)

Abdarrahmane ELYOUSFI 74
Exemples de mise en forme (1/2)

 Exemples

<img <img
src="Toucan.jpg" src="Toucan.jpg"
width=220px width=220px
height=224px height=224px
border=0 border=2
> >

Abdarrahmane ELYOUSFI 75
Exemples de mise en forme (1/2)

 Exemples

<img <img <img


src="Toucan.jpg" src="Toucan.jpg" src="Toucan.jpg"
width=220px width=220px width=112px
height=224px height=112px height=112px
border=0 > border=0> border=0>

Abdarrahmane ELYOUSFI 76
Exemple
<html >
<head>
<title>Exemple dune page web</title>
</head>
<body>
<img src="Foret.jpg" alt="l'image fort" align="top" width=500 height=150 hspace=20 vspace=5 border=2 />

<h1>Chapitre 1: Introduction la programmation web</h1>


<h2><a href="#Part1" title= "Serveur web"> Serveur Web</a></h2>
<h2><a href="#Part2" title= "Client web"> Client Web</a></h2>
<h2><a name="part1" >Serveurs web</a></h2>
<p align="justify">Chaque programme est crit par un langage spcifique sexcute par un type de
programme serveur. Le type du programme serveur utilis va conditionner les langages possibles. Voyons
quelques exemples :</p>
<h2><a name= "part2" >Client web</a></h2>
<p align="justify">Le client est couramment appel un navigateur. Les navigateurs les plus connus
tant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. Les plus courant acceptent des extensions (Plug-In)
permettant dtendre leurs </p>
</body>
</html>

Abdarrahmane ELYOUSFI 77
Exemple

Abdarrahmane ELYOUSFI 78
Tableaux

Abdarrahmane ELYOUSFI 79
Mise en uvre des tableaux

 Dans les pages web, les tableaux ont plusieurs rles :


 Ils servent prsenter les donnes de manire ordonne,
 Ils permettent de spcifier prcisment comment placer les
informations sur une page web,

 Les tableaux sont normalement composs en HTML


de lignes et de colonnes, 3 balises ncessaires :
 Dclaration du tableau <TABLE>,
 Dclaration dune ligne <TR> (Table Row),
 Dclaration dune colonne <TD> (Table Data).

Abdarrahmane ELYOUSFI 80
Un tableau de 2 lignes et 2 colonnes

Exemples
<TABLE>
<TR>
<TD>Element 1</TD>
<TD>Element 2</TD>
</TR>
<TR>
<TD>Element 3</TD>
<TD>Element 4</TD>
<TR>
</TABLE>

Abdarrahmane ELYOUSFI 81
Un tableau de 2 lignes et 2 colonnes

Exemples

<TABLE BORDER=2>
<TR>
<TD>Element 1</TD>
<TD>Element 2</TD>
</TR>
<TR>
<TD>Element 3</TD>
<TD>Element 4</TD>
<TR>
</TABLE>

Abdarrahmane ELYOUSFI 82
Les attributs des tableaux

border=2 Ce paramtre permet de fixer la largeur des


lignes dlimitant le Tableau.
cellspacing=10 il dfinit lespacement entre les bordures de
chaque cellule.
cellpadding=10 il dfinit la largeur de lespacement entre le
contenu dune cellule et sa bordure.
width=100px Largeur du tableau, fix en dur ou relatif la
width=n% taille de la fentre.

Abdarrahmane ELYOUSFI 83
Exemples de tableaux avancs

 Dfinissons un tableau qui occupe 40% de la largeur


de la fentre qui est compos de 3 colonnes.
<TABLE BORDER=1 with=40% >
<TR>
<TD>Nom</TD>
<TD>Prnom</TD> Nom Prnom Age
<TD>Age</TD>
</TR>
</TABLE>

 Le tableau occupe bien 40% de la largeur, mais


lespace nest pas quitablement rparti entre les
diffrentes cellules composant le tableau.
Abdarrahmane ELYOUSFI 84
Exemples de tableaux avancs

 Corrigeons ce petit dsagrment en spcifiant pour


chaque cellule lespace quelle doit occuper.
<TABLE BORDER=1 with=40% >
<TR>
<TD with=33%>Nom</TD>
<TD with=33%>Prnom</TD>
<TD with=34%>Age</TD>
</TR>
</TABLE>

Nom Prnom Age

Abdarrahmane ELYOUSFI 85
Exemples de tableaux avancs

 Ralisons le mme tableau maintenant sur 2 lignes


<TABLE BORDER=1 with=40% >
<TR>
<TD with=33%>Nom</TD>
<TD with=33%>Prnom</TD>
<TD with=34%>Age</TD>
</TD>
<TR>
<TD with=33%>Ali</TD>
<TD with=33%>Ben Ali</TD>
<TD with=34%>20ans</TD>
</TR>
</TABLE>

Nom Prnom Age


Ali Ben Ali 20 ans
Abdarrahmane ELYOUSFI 86
Exemples de tableaux avancs

 On souhaite maintenant que la premire ligne ne


contienne quune seule cellule (fusion horizontale).
<TABLE BORDER=1 with=40% >
<TR>
<TD COLSPAN=3>Titre Y</TD>
</TR>
<TR>
<TD with=33%>Mohammed</TD>
<TD with=33%>Ben Ali</TD>
<TD with=34%>20ans</TD>
</TR>
</TABLE>

Fusion

Abdarrahmane ELYOUSFI 87
Exemples de tableaux avancs

 On souhaite maintenant que la premire colonne ne


contienne quune seule cellule (fusion verticale).
<TABLE BORDER=1 with=40% >
<TR>
<TD ROWSPAN=2>Titre </TD>
<TD> Nom </TD>
<TD> Prnom </TD>
</TR>
<TR>
<TD with=33%>Mohammed</TD>
<TD with=33%>Ben Ali</TD>
</TR>
</TABLE>

Fusion

Abdarrahmane ELYOUSFI 88
Exemples de tableaux avancs

 Nous allons maintenant faire la mise en forme des


tableaux raliss en formatant le texte compris dans les
cellules. <TABLE BORDER=1 width=40% >
<TR>
<TD COLSPAN=3 ALIGN=center>Titre Y</TD>
</TR>
<TR>
<TD with=33% ALIGN=left>Mohammed</TD>
<TD with=33% ALIGN=center>Ben Ali</TD>
<TD with=34% ALIGN=right>20ans</TD>
</TR>
</TABLE>

Abdarrahmane ELYOUSFI 89
Exemples de tableaux avancs

 Nous allons terminer cette partie en changeant la couleur


des cellules

<TABLE BORDER=1 width=40% >


<TR>
<TD COLSPAN=3 ALIGN=center BGCOLOR=#0000FF >Titre Y</TD>
</TR>
<TR>
<TD with=33% BGCOLOR=#0000FF ALIGN=left >Nom</TD>
<TD with=33% BGCOLOR=#00FF00 ALIGN=center>Prnom</TD>
<TD with=34% BGCOLOR=#FF0000 ALIGN=right>Age</TD>
</TR>
</TABLE>

Abdarrahmane ELYOUSFI 90
Exemple 1

Abdarrahmane ELYOUSFI 91
Exemple 1
<html>
<head>
<title>Tableau lmentaire</title>
</head>
<body >
<table border="1">
<caption>Un tableau lmentaire</caption>
<tr>
<td> Ligne 1 Colonne 1 </td><td> Ligne 1 Colonne 2 </td><td> Ligne 1 Colonne 3 </td>
</tr>
<tr>
<td> Ligne 2 Colonne 1 </td><td> Ligne 2 Colonne 2 </td><td> Ligne 2 Colonne 3</td>
</tr>
<tr>
<td> Ligne 3 Colonne 1 </td><td> Ligne 3 Colonne 2 </td><td> Ligne 3 Colonne 3</td>
</tr>
</table>
</body>
</html>

Abdarrahmane ELYOUSFI 92
Exemple 1

Abdarrahmane ELYOUSFI 93
Exemple 1

<html>
<head>
<title>Tableau lmentaire</title>
</head>
<body >
<table border="1" cellspacing="5px" cellpadding="20" width="70%" frame="hsides" >
<caption>Un tableau lmentaire</caption>
<tr>
<td> Ligne 1 Colonne 1 </td><td> Ligne 1 Colonne 2 </td><td> Ligne 1 Colonne 3 </td>
</tr>
<tr>
<td> Ligne 2 Colonne 1 </td><td> Ligne 2 Colonne 2 </td><td> Ligne 2 Colonne 3</td>
</tr>
<tr>
<td> Ligne 3 Colonne 1 </td><td> Ligne 3 Colonne 2 </td><td> Ligne 3 Colonne 3</td>
</tr>
</table>
</body>
</html>

Abdarrahmane ELYOUSFI 94
Exemple 1

Abdarrahmane ELYOUSFI 95
Exemple 1

<html>
<head>
<title>Tableau lmentaire</title>
</head>
<body >
<table border="1" cellspacing="5px" cellpadding="20" >
<tr align="center">
<td colspan="2"> Colonnes 1 et 2 fusionnes </td><td> Colonne 3 </td>
<td colspan="2"><big> Colonnes 4 et 5 fusionnes </big></td> </tr>
<tr align="center">
<td><big> Colonne 1 </big></td>
<td><big> Colonne 2 </big></td>
<td><big> Colonne 3 </big></td>
<td><big> Colonne 4 </big></td>
<td><big> Colonne 5 </big></td> </tr>
<tr align="center">
<td><big> Colonne 1</big></td>
<td colspan="3"><big> Colonnes 2, 3 et 4 fusionnes </big></td>
<td><big> Colonne 5</big></td> </tr>
</table>
</body>
</html>

Abdarrahmane ELYOUSFI 96
Exemple 2

Abdarrahmane ELYOUSFI 97
Exemple 1

<html>
<head> <title>Tableau lmentaire</title> </head>
<body>
<table border="2" cellspacing="2" width="90%">
<tr align="center">
<td colspan="12"><big> Colonnes 1 12 fusionnes</big> </td> </tr>
<tr align="center">
<td colspan="6"><big> Colonnes 1 6 fusionnes</big> </td>
<td colspan="6"><big> Colonnes 6 12 fusionnes</big> </td> </tr>
<tr align="center">
<td colspan="4"><big> Colonnes 1 4 fusionnes</big> </td>
<td colspan="4"><big> Colonnes 4 8 fusionnes</big> </td>
<td colspan="4"><big> Colonnes 8 12 fusionnes</big> </td></tr>
<tr align="center">
<td colspan="3"><big> Colonnes 1 3 fusionnes </big> </td>
<td colspan="3"><big> Colonnes 4 6 fusionnes </big> </td>
<td colspan="3"><big> Colonnes 7 9 fusionnes </big> </td>
<td colspan="3"><big> Colonnes 10 12 fusionnes</big> </td>
</tr>
</table>
</body>
</html>

Abdarrahmane ELYOUSFI 98
Les frames

Abdarrahmane ELYOUSFI 99
Introduction aux Frames

 Afin de grer un site internet complet avec un menu de


navigation pour passer dune partie du site une autre,
il faut utiliser les frames,
 Les frames permettent de diviser la page web en
plusieurs sous-fentres :
 Intressant pour afficher un menu, des pages utiles, de
la pub, etc,

Abdarrahmane ELYOUSFI 100


Exemple

Abdarrahmane ELYOUSFI 101


Exemple

<html>
<!-- Mirrored from www-igm.univ-mlv.fr/~riazano/ >
<head>
<title>Serge RIAZANOFF - Universit de Marne-la-Valle</title>
</head>
<frameset rows="150,*" >
<frame src="pagehaut.htm" name="bandeau" >
<frameset rows="*, 205">
<frame src="menu.htm" name="menu" >
<frame src="accueil.htm" name="main">
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>

Abdarrahmane ELYOUSFI 102


Exemple de mise en forme classique

Abdarrahmane ELYOUSFI 103


Les balises de manipulation des frames

 Pour dfinir des sous-fentres dans la page web, le langage


HTML met notre disposition deux balises plus leurs
paramtres :
 <FRAMESET> permet de dfinir une zone dcoupe sous forme de
sous fentres,
 <FRAME> permet de spcifier la dfinition dune sous-fentre avec
ses paramtres.
 Les balises sont similaires aux balises <TABLE> et <TR> lors
de la dclaration des tableaux.

La balise <FRAMESET> remplace dans une page


HTML la balise <BODY>.
Abdarrahmane ELYOUSFI 104
Exemple de la division horizontale

d
<HTML>

<HEAD></HEAD>

<FRAMESET ROWS=34%, 66%>


<FRAME>
<FRAME>
</FRAMESET>

</HTLM>

Abdarrahmane ELYOUSFI 105


Exemple
<html>
<frameset rows="100,400,200">
<frame src="pagehaut.html" />
<frame src="pagecentre.html"/>
<frame src="pagebas.html"/>
<noframes>
<body>
Votre navigateur ne supporte pas les cadres.
</body>
</noframes>
</frameset>
</html>

Dans ce cas, le cadre suprieur a une hauteur de 100 pixels, le suivant de 400 pixels
et celui du bas de 200 pixels. Si lutilisateur a un cran de 800x600 pixels, il ne verra
le cadre du bas que partiellement ou pas du tout selon la configuration du navigateur.
Abdarrahmane ELYOUSFI 106
Exemple
<html>
<frameset rows="100,*,200">
<frame src="pagehaut.html" />
<frame src="pagecentre.html"/>
<frame src="pagebas.html"/>
<noframes>
<body>
Votre navigateur ne supporte pas les cadres.
</body>
</noframes>
</frameset>
</html>

Nous avons cre dans cet exemple trois cadres horizontaux, le premier de 100 pixels
de haut, le dernier de 200 pixels de haut, et le cadre central a une hauteur variable,
selon la dfinition de lcran du poste client, laquelle se dfinit laide
Abdarrahmane ELYOUSFI 107
Exemple
<html>
<frameset rows="15%,75%,10%">
<frame src="pagehaut.html" />
<frame src="pagecentre.html"/>
<frame src="pagebas.html"/>
<noframes>
<body>
Votre navigateur ne supporte pas les cadres.
</body>
</noframes>
</frameset>
</html>

Dans ce cas, le partage de la hauteur disponible de lcran se fait toujours selon la


proportion 15 % en haut, 75 % au centre et 10 % en bas, quel que soit lcran de
visualisation de la page.
Abdarrahmane ELYOUSFI 108
Exemple
<html>
<frameset rows="100,75%,*">
<frame src="pagehaut.html" />
<frame src="pagecentre.html"/>
<frame src="pagebas.html"/>
<noframes>
<body>
Votre navigateur ne supporte pas les cadres.
</body>
</noframes>
</frameset>
</html>

Le cadre du haut a toujours 100 pixels de haut, le second 75 % de la hauteur totale de


la fentre disponible, et le cadre du bas dispose du reste.
Abdarrahmane ELYOUSFI 109
Exemple
<html>
<frameset rows="1,5,2">
<frame src="pagehaut.html" />
<frame src="pagecentre.html"/>
<frame src="pagebas.html"/>
<noframes>
<body>
Votre navigateur ne supporte pas les cadres.
</body>
</noframes>
</frameset>
</html>

le cadre suprieur occupera 1/(1 + 5 + 2) soit 1/8 de la hauteur disponible, le suivant


5/8 et le dernier 2/8. Il suffit de changer un seul des coefficients pour que le partage
soit diffrent. Abdarrahmane ELYOUSFI 110
Exemple de la division verticale

d
<HTML>

<HEAD></HEAD>

<FRAMESET COLS=34%, 66%>


<FRAME>
<FRAME>
</FRAMESET>

</HTLM>

Abdarrahmane ELYOUSFI 111


Exemple de mise en forme verticale
<html>
<frameset cols="100,*,20%">
<frame src="pagehaut.html" />
<frame src="pagecentre.html"/>
<frame src="pagebas.html"/>
<noframes>
<body>
Votre navigateur ne supporte pas les cadres.
</body>
</noframes>
</frameset>
</html>

Dans ce cas, le cadre de gauche mesure 100 pixels de large, celui de


droite 20% de la largeur de la fentre et le cadre central occupe la
largeur restante. Abdarrahmane ELYOUSFI 112
Exemple dune division complexe

<HTML>
d
<HEAD></HEAD>

<FRAMESET ROWS=34%, 66%>


<FRAME>
<FRAMESET COLS=34%, 66%>
<FRAME>
<FRAME>
</FRAMESET>

</HTLM>

Abdarrahmane ELYOUSFI 113


Insertion des donnes dans les frames

 Pour ajouter des donnes dans les frames, on doit


utiliser lattribut SRC mis notre disposition dans le
langage HTML,
Lattribut SRC va pointer sur le contenu afficher
dans la sous fentre. Linformation est fournie sous
forme dURL,

Abdarrahmane ELYOUSFI 114


Insertion des donnes dans les frames

Abdarrahmane ELYOUSFI 115


Rsultat de la composition des frames

Abdarrahmane ELYOUSFI 116


Abdarrahmane ELYOUSFI 117
Rsultat de la composition des frames

Abdarrahmane ELYOUSFI 118


Rsultat de la composition des frames

Abdarrahmane ELYOUSFI 119


Rsultat de la composition des frames
<html >
<head>
<title> Les cadres</title>
</head>
<frameset rows="80,*,50">
<frame src="entete.html" name="haut" />
<frameset cols="16%,*,18%">
<frame src="menu.html" name="gauche" />
<frame src="contenu.html" name="centre" />
<frame src="lien.html" name="droit" />
</frameset>
<frame src="adresse.html" name="bas" />
<noframes>
<body>
<p>Votre navigateur ne supporte pas les cadres!</p>
</body>
</noframes>
</frameset>
</html>

Abdarrahmane ELYOUSFI 120


Rsultat de la composition des frames

Abdarrahmane ELYOUSFI 121


Les formulaires

Abdarrahmane ELYOUSFI 122


Utilisation des formulaires de donnes

 Jusqu maintenant nous avons vu une partie du langage


HTML qui ne permet de transmettre linformation dans
un unique sens :
 Du serveur vers le client,
 Nous allons maintenant tudier les formulaires qui
permettent de raliser lopration inverse :
 Transmettre des informations du client vers le serveur,
 La gestion des informations cot serveur sera abord dans
la suite du cours, dans la partie langage cot serveur
PHP,

Abdarrahmane ELYOUSFI 123


Exemple

<html>
<head>
<title>Formulaire de base</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend>Vos donnes personnelles</legend>
<label>Nom : </label> <input type="text" name="nom" maxlength="25" />
<br /><br />
<label>Prnom : </label>
<input type="text" name="prenom" value="Votre prnom" maxlength="25" /><br /><br />
<label>Adresse : </label><input type="text" name="adresse" value="Votre adresse" maxlength="60"/><br /><br />
<label>Pays : </label><input type="text" name="pays" value="Votre pays" maxlength="20" /><br /><br />
<input type="submit" name="envoi" value="Envoyer"/>
</fieldset>
</form>
</Body>
</html>
Abdarrahmane ELYOUSFI 124
Exemple

Abdarrahmane ELYOUSFI 125


Cration de pages visuellement agrables

 Les formulaires sont des parties de pages internet qui vont permettre
lutilisateur de renseigner des informations structures et de les envoyer.

 Afin de raliser cela, le langage HTML met notre disposition la balise


<FORM>,
 Cela permet de dclarer le dbut dun formulaire structur,
 Un formulaire est mis en uvre pour communiquer avec le serveur,
 Llment <fieldset> est trs souvent inclus dans un formulaire. Il a pour
vocation de dlimiter les groupes de composants actifs du formulaire.

 Chaque titre est le contenu dun lment <legend> inclus dans <fieldset>.

Abdarrahmane ELYOUSFI 126


Les attributs de la balise FORM (1/2)

 Action
dsigne le fichier qui est charg de traiter les
donnes du formulaire ct serveur.

http: pour un traitement immdiat cot serveur,


<form action="http ://www.Ensa-agadir.ac.ma/scripts/traitement.php">

Abdarrahmane ELYOUSFI 127


Les attributs de la balise FORM (2/2)

 Method
 Ce paramtre indique la mthode utilise pour envoyer les
donnes, deux mthodes seulement :
GET,
Cette mthode est la mthode par dfaut et ajoute le contenu du
formulaire l'URL spcifi dans ACTION.
Cette mthode a des inconvnients comme la visibilit des donnes et
aussi le nombre de caractre est limit.
POST,
Elle envoie le contenu du formulaire au serveur comme un ensemble
de donnes sans les faire figurer la suite de lURL.
Cette mthode ne prsente pas linconvnient de la mthode Get.
Cest donc celle que nous recommandons dans la plupart des cas.

Abdarrahmane ELYOUSFI 128


La balise <input> dans les formulaires

 Cette balise permet de spcifier les lments mettre en


uvre dans le formulaire pour simplifier / guider
lutilisateur dans sa saisie,
 Cases cocher, listes droulantes, zones de texte, etc...
 Pour cela, lattribut type de la balise <input> peut
prendre les valeurs suivantes :
 Text, Password, CheckBox, Radio, Submit, Reset, File.
 Ces lments sont configurables laide des valeurs
dcrites ci-aprs.

Abdarrahmane ELYOUSFI 129


Les zones de texte (Text)

 Lorsque lattribut type=text, cela indique que


nous ajoutons une zone de texte. Ce type de champs
peut tre paramtr laide des options suivantes :
Size : nombre de caractres maximum visibles dans la
zone de texte (entier),
MaxLength, nombre maximum de donnes que peut
contenir la zone de texte (entier),
Value, chaine de caractres reprsentant les donnes
comprises dans la zone,
ReadOnly, attribut indiquant si la zone est en lecture
seule ou non,

Abdarrahmane ELYOUSFI 130


Exemple

<html>
<head>
<title>Formulaire de base</title>
</head>
<Body>
<form method = "post " action =" traitement .php" >
< fieldset>
<legend>Zones de texte</legend>
<label>Nom : </label> <input type="text" name="nom" maxlength="25" />
<br /><br />
<label>Prnom : </label>
<input type="text" name="prenom" value="Votre prnom" maxlength="25" /><br /><br />
<label>Adresse : </label><input type="text" name="adresse" value="Votre adresse" maxlength="60"/><br /><br />
<label>Pays : </label><input type="text" name="pays" value="Votre pays" maxlength="20" /><br /><br />
</fieldset>
</form>
</Body>
</html>

Abdarrahmane ELYOUSFI 131


Exemple

Abdarrahmane ELYOUSFI 132


La saisie de mot de passe

 Les champs de saisie de mot de passe sont quasi


identiques aux champs de saisie de texte.
 Ils ne comportent quune seule ligne et sont crs
avec le mme lment <input />.
 La diffrence entre ces deux champs rside dans la
valeur de lattribut type qui prend la valeur
password au lieu de text.

Abdarrahmane ELYOUSFI 133


La saisie de mot de passe

<html>
<head>
<title>Formulaire de base</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend> Accs rserv: donner vos login et mot de passe </legend>
<label>Login : </label> <input type="text" name="nom" maxlength="25" />
<br /><br />
<label> Mot de passe : </label>
<input type="password" name="code" maxlength="8" />
</fieldset>
</form>
</Body>
</html>
Abdarrahmane ELYOUSFI 134
La saisie de mot de passe

Abdarrahmane ELYOUSFI 135


La saisie de texte long

 Le texte multilignes est utiliser par exemple pour


permettre lutilisateur de donner un commentaire.
 llment <textarea> cre un champ de saisie de
texte sur plusieurs lignes.
 Les dimensions de la zone de saisie doivent
obligatoirement tre dfinies. Pour cela, il faut
utiliser les attributs suivants :
 cols="N" qui fixe la largeur de la zone N caractres. Le
retour la ligne est automatique dans la zone.
 rows="N" qui fixe la hauteur N lignes.

Abdarrahmane ELYOUSFI 136


La saisie de texte long

<html>
<head>
<title>Formulaire de base</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend> Donnez nous vos impressions</legend>
<label>Tappez vos commentaires</label>
<textarea name="boite" cols="5" rows="15" />
<br /><br />
<input type="submit" value="envoyer" />
<input type="reset" value="Effacer" />
</fieldset>
</form>
</Body>
</html> Abdarrahmane ELYOUSFI 137
La saisie de texte long

Abdarrahmane ELYOUSFI 138


Les boutons radio (Radio)

 Les boutons radio sont typiquement utiliss pour prsenter


plusieurs choix dont la rponse est unique.
 Pour crer un bouton radio, nous utilisons encore une fois
llment <input /> avec un attribut type qui prend la valeur
radio.
 Lensemble des boutons radio avec lesquels on peut oprer un
choix donn constitue un groupe.
 Il faut que tous ses lments aient la mme valeur pour leurs
attributs name.

Abdarrahmane ELYOUSFI 139


Les radio boutons (Radio)

 Value, chane de caractres reprsentant la zone de radio


boutons qui sera exploit par le serveur,
 Checked, cet attribut boolen permet de spcifier si la case
doit tre coche par dfaut,

Abdarrahmane ELYOUSFI 140


Les radio boutons (Radio)
<html>
<head>
<title>Boutons radio</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend> Boutons radio </legend>
<label>Monsieur</label>
<input type="radio" name="sexe" value="Monsieur checked="checked" /> <br /><br />
<label>Madame</label>
<input type="radio" name="sexe" value="Madame" /><br/><br/>
<label>Vous tes fonctionnaire?</label><br/>
<label>Oui</label>
<input type="radio" name="fonctionnaire" value="Madame" />
<label>Non</label> <input type="radio" name="fonctionnaire" value="Madame" />
</fieldset>
</form>
</Body>
</html> Abdarrahmane ELYOUSFI 141
Les radio boutons (Radio)

Abdarrahmane ELYOUSFI 142


Les cases cocher (CheckBox)

 Elles se prsentent graphiquement sous la forme de petits


carrs .
 Elles sont utilises pour un multiple choix.
 Une case cocher est encore cre laide de llment
<input /> dont lattribut type prend cette fois la valeur
checkbox.
 Les attributs name de chacune des cases se doivent alors
de porter des noms diffrents.

Abdarrahmane ELYOUSFI 143


Les cases cocher (CheckBox)

 Lorsque lattribut type=checkbox, les


lments peuvent tre paramtres laide des
options suivantes :
Value, chane de caractres reprsentant le
bouton cocher (cette donne sera exploite par le
serveur),
Checked, cet attribut boolen permet de
spcifier si la case doit tre coche par dfaut,

Abdarrahmane ELYOUSFI 144


Les cases cocher (CheckBox)
<html>
<head>
<title>Boutons radio</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend> Boutons radio </legend>
<label>Quelles sont Vos villes prfres?</label><br/>
<input type="checkbox" name="CHOIX1" value="CASE 1"> Agadir<br>
<input type="checkbox" name="CHOIX1" value="CASE 2"> Ifrane<br>
<input type="checkbox" name="CHOIX" value="CASE 3"> Rabat<br>
</fieldset>
</form>
</Body>
</html>
Abdarrahmane ELYOUSFI 145
Les cases cocher (CheckBox)

Abdarrahmane ELYOUSFI 146


Bouton denvoi

 Le bouton denvoi, gnralement nomms Envoi ou OK.


 Aprs un clic, il dclenche lenvoi des donnes vers le
serveur ou vers un e-mail.
 La manire la plus courante de crer un bouton denvoi
est dutiliser llment <input/>
 Cest lattribut type prend la valeur submit.

Abdarrahmane ELYOUSFI 147


Exemple

<html>
<head>
<title>Formulaire de base</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend>Bouton denvoi</legend>
<label>Login : </label> <input type="text" name="nom" maxlength="25" />
<br /><br />
<label>Mot de passe : </label>
<input type="submit" name="envoi" value="Envoyer"/>
</fieldset>
</form>
</Body>
</html>

Abdarrahmane ELYOUSFI 148


Exemple

sssssss

Abdarrahmane ELYOUSFI 149


Bouton de rinitialisation

 Ce bouton est associ au bouton denvoi, gnralement


nomms Annuler.
 Il remet le formulaire dans son tat initial, y compris les
valeurs par dfaut qui ont pu y tre dfinies.
 La manire la plus courante de crer un bouton denvoi
est dutiliser llment <input/>
 Cest lattribut type prend la valeur reset.
 Comme les boutons denvoi, cest lattribut value qui
contient le texte visible sur le bouton.

Abdarrahmane ELYOUSFI 150


Exemple

<html>
<head>
<title>Formulaire de base</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend>Bouton denvoi</legend>
<label>Login : </label> <input type="text" name="nom" maxlength="25" />
<br /><br />
<label>Mot de passe : </label>
<input type="submit" name="envoi" value="Envoyer"/>
<input type="reset" name="envoi" value="Annuler"/>
</fieldset>
</form>
</Body>
</html>

Abdarrahmane ELYOUSFI 151


Exemple

sssssss

Abdarrahmane ELYOUSFI 152


Le transfert de fichiers

 Dans un formulaire laide de llment <input /> dot


dun attribut type qui prend cette fois la valeur file, on
peut effectuer le transfert de divers fichiers du poste client
vers le serveur.

 Il cre dans le formulaire un champ compos dune zone


de texte pour taper le chemin daccs au fichier et dun
bouton de slection de fichier.

Abdarrahmane ELYOUSFI 153


Exemple

<html>
<head>
<title>Formulaire de base</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend>Transfer de fichier</legend>
<label>Donner le chemin de votre fichier : </label>
<input type="file" name="fichier" /> <br /><br />
<input type="submit" name="envoi" value="Envoyer"/>&nbsp;&nbsp;&nbsp;
<input type="reset" name="envoi" value="Annuler"/>
</fieldset>
</form>
</Body>
</html>
Abdarrahmane ELYOUSFI 154
Exemple

nv

Abdarrahmane ELYOUSFI 155


Les listes de choix (Select)

 Llment <Select> permet de spcifier des


listes droulantes pr-remplies afin de simplifier
la tache de lutilisateur (restreindre ses choix).
 Pour crer une liste droulante, il est ncessaire
de mettre en uvre 2 balises distinctes :
<Select> cette balise permet de spcifier le dbut
dune liste droulante,
<Option> cette balise est utilise afin de spcifier
un lment contenu dans la liste droulante,

Abdarrahmane ELYOUSFI 156


Exemple(size=1)

<html>
<head>
<title>Formulaire de base</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend>Listes de slction</legend>
<select name=pays size=1>
<option>Moroc
<option>Allemagne
<option>France
<option>Etats-Unis
<option>Autriche
<option>Italie
</select>
</fieldset>
</form>
</Body>
</html> Abdarrahmane ELYOUSFI 157
Exemple

nv

Abdarrahmane ELYOUSFI 158


Exemple

<html>
<head>
<title>Formulaire de base</title>
</head>
<Body>
<form method = " post " action =" traitement .php" >
< fieldset>
<legend>Listes de slction</legend>
<select name=pays size=5>
<option>Moroc
<option>Allemagne
<option>France
<option>Etats-Unis
<option>Autriche
<option>Italie
</select>
</fieldset>
</form>
</Body>
</html> Abdarrahmane ELYOUSFI 159
Exemple(Size=4)

nv

Abdarrahmane ELYOUSFI 160


Abdarrahmane ELYOUSFI 161
<html>
<head><title> formulaire</title>
</head>
<body>
<form action="exemple7-14.php" method="post" enctype="multipart/form-data">
<fieldset><legend><b>Vos coordonnes</b></legend>
<label>Nom : </label><input type="text" name="nom" size="40" maxlength="256" value="votre nom" /><br />
<label>Prnom : </label><input type="text" name="prenom" size="40" maxlength="256" value="votre prnom" /><br />
<label>Mail : </label><input type="text" name="mail" size="40" maxlength="256" value="votre mail" /><br />
<label>Code : </label><input type="password" name="code" size="40" maxlength="6"/> <br />
<input type="radio" name="sexe" value="homme" /><label>Homme</label> <br />
<input type="radio" name="sexe" value="femme" /><label>Femme</label> <br />
<select name="pays" size="1" >
<option value="maroc" >Maroc</option>
<option value="France" > France</option>
<option value="Belgique" > Belgique</option>
<option value="Italie" > Italie</option>
<option value="Allemagne" > Allemagne</option>
</select>
</fieldset>

Abdarrahmane ELYOUSFI 162


<fieldset>
<legend><b>Vos gouts</b></legend>
<input type="checkbox" name="pomme" value="pomme" /> Pommes<br />
<input type="checkbox" name="poire" value="poire" /> Poires<br />
<input type="checkbox" name="scoubidou" value="scoubidou" /> Scoubidous<br />
<textarea name="gouts" cols="50" rows="5" >
Dcrivez vos gots en dtail
</textarea>
</fieldset>
<fieldset>
<legend><b>Envoyez nous votre photo</b></legend>
<input type="file" name="fichier" />
<input type="reset" value="Effacer" /> &nbsp;&nbsp;&nbsp;
<input type="submit" value="Envoyer" /><br />
</fieldset>
</form>
</body>
</html>

Abdarrahmane ELYOUSFI 163


Abdarrahmane ELYOUSFI 164
Fin

Abderrahmane ELYOUSFI 165