Vous êtes sur la page 1sur 27

Programmation Web

Programmation WAMP/LAMP Premiers principes

1 - Les principes
Le Web Le HTML Les formulaires d'envoi de donnes

2 - Le WEB
Le Web est un nom donn lensemble hyperdocumentaire form par la totalit des documents disponibles sur Internet travers un protocole particulier : HTTP. Par opposition, Internet est lhyperrseau de transport constitu par l interconnexion des rseaux publics et privs.
3

3 - Le WEB
Le Web est assemblage de technologies diverses. Chaque technologie soccupe dun problme ou aspect particulier de la chane.

Normes de contenu : XHTML, HTML, CSS, XML Automatisation de contenu : Javascript, VBScript Transformateurs : XSL Processeurs : Perl, Php, Python Templating
4

4 - Le WEB (3)
Le principe central du Web, cest la transaction HTTP :
Un metteur (client) envoie une REQUETE Un serveur y rpond.

C est une gnralisation du client-serveur partir de technologies publiques.

5 - Le Web (4)
La REQUETE :
Un message court et format Sa construction suit une norme HTTP Demande un document travers une URL (GET) Dpose des donnes sur le serveur (POST) Consulte les informations propos dune ressoure (HEAD, moins utilis)
6

6 - Le Web (5)
La REQUETE :
Renseigne le serveur sur des aspects de l environnement client Obtient du serveur des informations complmentaires sur la ressource Ces deux procds utilisent les champs dentte.

7 - Le Web (8)
Syntaxe gnrale dune requte :
[VERBE] [URL] [VERSION][EOL] [NOM2]:[VALEUR1][EOL] [NOM2]:[VALEUR2][EOL] [EOL]

[CORPS]
GET http://www.commentcamarche.net HTTP/1.0 Accept : text/html If-Modified-Since : Saturday, 15-January-2000 14:37:11 GMT User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)
8

8 - Le Web (9)
Syntaxe gnrale dune rponse :
[VERSION] [CODE] [STATUT][EOL] [Content-Type]:[VALEUR1][EOL] [NOM2]:[VALEUR2] [EOL] [EOL]

[CORPS DU DOCUMENT]
HTTP/1.0 200 OK Content-Type:text/html Content-Length:1245 Last-Modified:Fri, 14 Jan 2000 08:25:13 GMT

<html><head>...
9

9 - Le Web (10)
Une requte peut galement envoyer un ou plusieurs document dans le corps de document. (document multi-entit. Ex : multipart/formdata). Quelque soit la nature du document (texte ou binaire), il y a toujours une en-tte textuelle. Le document qui revient peut tre le contenu dun fichier (statique) ou un texte fabriqu la demande par un programme (Web dynamique)
10

10 - Le HTML
Le HTML est un langage de description de contenu. Il est le seul qui est interprt par un navigateur Web standard pour produire de laffichage. Il existe dautres standards plus riches mais marginaux (XUL par exemple). Le HTML dcrit le document et ses constituants.
11

11 - Le HTML (1)
Le HTML est un langage de description de contenu. Il est le seul qui est interprt par un navigateur Web standard pour produire de laffichage. Il existe dautres standards plus riches mais marginaux (XUL par exemple). Le HTML dcrit le document et ses constituants.
12

12 - Le HTML (2)
Principes du langage :
Un langage balises :
Balises dimension 0 : <br>, <img> Balises dimension 1 : <a></a>, <p></p>

Les lments ainsi forms peuvent se contenir les uns les autres :
<html><head></head><body></body></html>

Des attributs plus ou moins obligatoires pour prciser des proprits des lments :
<a href="http://...">un lien</a>
13

13 - Le HTML (3)
Les balises et le texte
Le texte du document est ce qui est entre ou autour des balises. Les balises servent dterminer la fonction du texte dans une structure. Ex :
<a href="http://">ce texte est un lien</a>

Les balises peuvent simplement altrer la forme . Ex :


<b>en gras</b>, <i>en italiques</i>

Les primitives premires du HTML ont une smantique documentaire : <p>, <h1>, <cite>, <address>,
<blockquote>, <ul>, <ol>, <li>
14

14 - Le HTML (4)
LHypermedia, lagencement et les changes
Un deuxime jeu important du HTML concerne ltablissement des hyperliens : <a>, <link>, <base> Un troisime jeu important du HTML concerne la gestion de lorganisation visuelle (lagencement) : <table>,
<thead>, <tbody>, <tr>, <td>, <colgroup>, <cols>, <div>, <span>, <iframe>, <frameset>, <frame>

Un dernier jeu du HTML concerne la rcupration de donnes travers des formulaires: <form>, <input>,
<select>, <textarea>, <label>

15

15 - Le HTML (5)
La constitution du document
Un document HTML EST un document HTML :
<html>...</html>

ou pas ? : <p>...</p> Un document est de linformation + de la mta-information :


<html><head>...meta...</head><body>information. ..</body></html> Le HEAD : sert enregistrer des informations complmentaires (mots-clefs, feuilles de styles applicables, des scripts utiliser, des chargements annexes, etc) Le BODY : Contient la structure de la partie visible du document.
16

16 - Le HTML (6)
Les deux critures
La forme srialise :
<html><head>...meta...</head><body>...informatio n...</body></html>

La forme structure :
<html> <head> ...meta </head> <body> ...information </body> </html>
17

17 - Le HTML (7)
La constitution dun document linaire
Un document textuel se construit selon un principe documentaire historique (des titres, des sous-titres et des paragraphes) :
... <body> <h1>Titre 1 : Premire partie</h1> <h2>Titre 2</h2> <p> contenu </p> <h2>Titre 2</h2> <p> contenu </p> <h1>Titre 1 : Deuxime partie</h1> ...
18

18 - Le HTML (8)
La constitution dun document agenc
Un document agenc utilise des tables ou des blocs.
La stratgie par table : Convient bien aux interfaces formelles et structures (applications informatiques, applications de gestion, donnes structures, donnes tabulaires). A des inconvnients : Accessibilit , cot de calcul de lagencement quand trop de tables sont imbriques. La stratgie par blocs : Est issue du monde de la PAO. Elle convient aux informations scnarises A des inconvnients : difficult de lecture de la structure. Difficult de matrise du calage graphique. Impose la connaissance des feuilles de style CSS
19

19 - Le HTML (9)
Lagencement en tables
... <table> <thead> <tr> <th>Titre 1</th> <th>Titre 2</th> </tr> </thead> ...
TITRE1 TITRE2

Cellule fusionne

... <tbody> <tr> <td> </td> <td> </td> </tr> <tr> <td colspan="2"> Cellule fusionne </td> </tr> </thead> </table> 20 ...

20 - Le HTML (10)
Lagencement en blocs
... <div> <p> bloc 1 </p> </div> ... <div> <span>Bloc 2</span> </div>
Bloc 1 Bloc 2

Les DIV reprsentent des lments bloc . Les SPAN reprsentent une frontire identifiable autour dun texte en ligne . Les DIV doivent tre agencs laide de primitives de feuille de style :
<div style="width: 100px; height: 80px; position: relative; left: 30px;"> </div>

21

21 - Le HTML (11)
Lchange de donnes avec le serveur
En rception : rponse une requte (mode habituel) En mission : Envoi de donnes par
lURL : cest le mode GET dans lequel on passe des variables un formulaire : en GET mais plus gnralement en POST , permet de passer des variables issues de saisies dutilisateur.

22

22 - Le HTML (12)
Le formulaire HTML :
Un lment-bloc encadrant des champs dentre de donne :
... <form name="formulaire" method="POST" action="view.php"> ... Champs de saisie ... <input type="submit" name="go_btn" value="zyva!!"> </form> ...

23

23 - Le HTML (13)
Les lments de formulaire :
Champ de texte :
<input type="text" name="nom" value="valeur initiale">

Case cocher :
<input type="checkbox" name="nom" value="valeur_envoyee" [CHECKED] >

Boutons radio :
<input type="radio" name="nom_de_groupe" value="valeur_envoyee" [CHECKED] >

Plusieurs radio portant le mme nom de groupe fonctionnent

en exclusion

24

24 - Le HTML (14)
Les lments de formulaire (suite) :
Liste de slection :
<select name="nom" [MULTIPLE] > <option value="code">libell</option> <option value="code" [SELECTED] >libell</option> </select>

Zones de texte :
<textarea name="nom" cols="30" rows="8">Contenu initial</textarea>

Champ cach :
<input type="hidden" name="nom" value="valeur">
25

25 - Le HTML (15)
La prsentation des formulaires :
Elle combine en gnral les lments de formulaire et les tables :
<form name="formulaire" action="view.php"> <table width="100%"> <tr> <td align="right">Libell</td> </tr> <tr> <td align="left"> <input type="text" name="nom" size="30"> </td> </tr> </table> </form>
26

Fin du cours

27