Vous êtes sur la page 1sur 20

Modèles de programmation via le service Web

 Rappel du service HTTP : Modèle de document dynamique avec CGI


Requête CGI
HTML / xhtml Navigateur Un
Protocole HTTP HTTPD CGI
HTML prog.
Document généré 80
Machine serveur
TCP/IP
 Le serveur HTTP dispose une interface, dit CGI (Commun Gateway Interface),
permettant d’invoquer l’exécution d’un programme quelconque se trouvant sur la
même machine serveur selon un ordre venant du client web :
 l’ordre d’exécution sera sous forme d’un hyperlien avec quelques conventions
spécifique
 Le serveur HTTP reçoit cet ordre, il organisera ensuite l’exécution du programme
demandé. La communication entre le programme et le serveur HTTPD est assurée par :
les entrées/sorties standard (STDIN et STDOUT) et un ensemble de variables
d’environnement du serveur HTTPD
 Le résultat de l’exécution sera envoyé par le serveur HTTP au client web

Modèles de programmation via le service Web Codage d’une URL


Tabulation %09 < %3C
 NOTION d’URL (Uniform Resource Locator) :
Espace %20 = %3D
 Un URL représente une identification d’un endroit où stocke une ressource sur le
réseau Internet " %22 > %3E
 Une ressource peut-être stockée à plusieurs endroits, elle possède dont un ou # %23 ? %3F
plusieurs URL % %25 @ %40
 Format d’un URL : (note : le symbole [xxx] signifie que xxx est facultatif)
& %26 [ %5B
Protocole:// Hôte [:Port] Chemin Nom [#Ancre] [?Paramètres] ( %28 \ %5C
) %29 ] %5D
 Exemple 1 : une ressource statique est un fichier html + %2B ^ %5E
http:// deptinfo.unice.fr /~renevier/ iut , %2C ' %60
. %2E { %7B
 Exemple 2 : une ressource dynamique générée par un programme cgi :
/ %2F | %7C
http:// iihm.imag.fr /cgi-bin/Vitesse2/ vitesse2.bat ?Keywords=unsa&SearchEngine=Goo
gle&Kind=Search&InfoSpace=&MaxInf : %3A } %7D
oNumber=100&VitesseMode=Win
; %3B ~ %7E
3 4
Modèles de programmation via le service Web Modèles de programmation via le service Web
 NOTION d’URI (Uniform Resource Identificator) :  Le passage de paramètres à un programme CGI :
 Format de paramètre : en texte ASCII
 Un URI représente une identification de l’origine d’une ressource sur le réseau
 chaque paramètre comprend 2 opérandes «Nom-de-variable » et «Valeur-de-
Internet
variable » reliées par le symbole ‘=‘
 Une ressource peut-être stockée à plusieurs endroits, mais ces copies ont la
 les paramètres sont reliés par le symbole ‘&’
même origine. Une ressource a donc un et un seul URI
 Convention : certaines règles de transformation automatique sont appliquées : le
 Format d’un URI : <type document | Propriétés | Origine> caractère d’espace (‘ ‘) est remplacé par ‘+’, …
 Exemple : La version 4.01 de HTML impose la spécification de l’URI de
définition de ce langage (un DTD) dans la première ligne du document : var1 = val1 & var2 = val2 & … & varn = valn

 Modes de passage de paramètres :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  GET : la chaîne de paramètres est envoyée avec l’URL après le caractère ‘?’ et sera

"http://www.w3.org/TR/html4/strict.dtd"> déposée dans une variable d’environnement, appelé QUERY_STRING du service


HTTP (sur la machine serveur). Avantage : simple; Inconvénient : taille limitée à
200 caractères
 POST : la chaîne de paramètre sera envoyée indépendamment de l’URL et dirigée
vers le fichier STDIN (Standard INPUT) du programme CGI. Avantage : taille
illimitée, traitement standard
5 6

Modèles de programmation via le service Web Modèles de programmation via le service Web
 Rappel du modèle de programmation Client/Serveur sur Internet :
 Le retour de données depuis d’un programme CGI au serveur HTTP :
une application CL/SV sur le réseau Internet est constitué de 2 parties :
 Format de données de retour : Texte HTML
 Un programme Client de l’application et
 Mode de passage du CGI vers le serveur HTTP : les données sorties du  Un programme Serveur de l’application
STDOUT (Standard OUTPUT) du programme CGI seront redirigées à l’entrée
standard ( stdin) du service HTTP qui les transmet au Client Web
Programme Programme
 Ce résultat peut être n’importe quel document multimédia, depuis le simple Protocole de l’app.
Client de l’app. Serveur de l’app.
texte ascii jusqu’à la vidéo. Dans le cas où la requête d’un client se limite à
demander au serveur de lui fournir un fichier, le serveur se base sur l’extension
de ce fichier pour déterminer son type TCP/IP
 Conformément au protocole HTTP, il faut alors transmettre ce type dans l’en-
tête, avec la clause ‘Content-type: typeDocument’, pour que le navigateur sache Programme Client Programme Serveur
comment décrypter les informations qui lui proviennent par la suite • Interface d’utilisateur • Réalisation de services
 Exemple : Pour un fichier HTML par exemple, l’extension est le plus souvent • Non permanent • Processus permanent
.html, et la valeur de typeDocument est ‘text/html’ • Orienté graphique • Orienté traitement
• Langage intermédiaire • Ports TCP exclusifs

7 8
Modèles de programmation via le service Web Modèles de programmation via le service Web
 Modèle de programmation web à 2-tiers :  Les limites de la première approche
 Tiers Client : Programme interface comprenant des outils de présentation et de  Côté Client : absence des outils de programmation et les outils de présentation

programmation : HTML, Plug-in, JavaScript, Style, Applet Java sont limités à la capacité du langage HTML
 Tiers Serveur : Programme de services, appelé « objets de métiers », développé  Côté Serveur : absence des outils de développement adaptés, la communication

depuis un environnement de développement normalisé, dit pré processeur de avec le serveur HTTP est à automatiser
HTTP, Par exemple : PHP, JSP, ASP  Côté Protocole : les paramètres sont passés en mode texte avec un format
imposé (absence de sécurité et capacité limitée) et deux modes de récupération
Partie client Partie serveur fixes (GET et POST)
Protocole App.
de l’application de l’application

Renforcer les Normaliser les


Navigateur Automatiser
Outils Pré outils de outils de
HTML HTTP HTTPD processeur le processus de
Prog. programmation développement
communication
TCP/IP 80 TCP/IP et de présentation du côté
Client/Serveur
du côté CLIENT SERVEUR
9 10

Modèles de programmation via le service Web Modèles de programmation via le service Web
 Modèle de programmation web à 2-tiers :  Modèle de programmation web à 3-tiers :
 Outils de présentation pour CLIENT :

 HTML/XML : Langage cadre permet d’une présentation de base et une intégration


1er-Tiers de « Client » : 2e-Tiers d’ «Objets de 3e-Tiers de «Bases de
des différents modes de programmations et de présentation multimédia Programmation interface métier » : Programmation de données » :
 CSS2 : Langage de définition de style de présentation pour les balises HTML. Il d’utilisateur services liés à l’application Programmation des
permet d’une présentation plus fine et paramétrable réelle sources de données pour
 Plug-in : Des programme d’interprète des types de données multimédia permettant
l’application
au navigateur d’afficher ces données (word, excel, …)
Partie client Partie serveur Partie SGBD
 Outils de programmation pour CLIENT : Protocole App. SQL
de l’application de l’application de l’application
 JavaScript : Langage de programmation intégré dans le HTML, permettant de
manipuler les objets documentaires de HTML, de créer et capturer et manipuler des
évènements sur interface et d’effectuer des calculs
Navigateur Médiateur
 Applets Java, Flash, etc. Pré
Outils de base de SGBD
HTML HTTP HTTPD processeur
Prog. données
TCP/IP 80 TCP/IP TCP/IP TCP/IP

11 12
Protocole HTTP Requête HTTP

 HTTP (HyperText Transfer Protocol) : protocole le plus utilisé sur  Envoyée au serveur par le navigateur, composée des éléments
Internet depuis 1990. suivants
 La version 0.9 était uniquement destinée à transférer des données sur  Une ligne de requête (3 éléments séparés par un espace)
Internet (en particulier des pages Web écrites en HTML).  La méthode

 La version 1.0 du protocole (la plus utilisée) permet désormais de transférer  L'URL

des messages avec des en-têtes décrivant le contenu du message en utilisant  La version du protocole utilisé par le client (généralement HTTP/1.0)

un codage de type MINE.  Les champs d'en-tête de la requête: ensemble de lignes facultatives
 Transfert de fichiers localisés grâce à une URL entre un navigateur (le donnant des informations supplémentaires sur la requête et/ou le
client (navigateur, OS)
client) et un serveur Web (httpd).
 Ces lignes sont composées d'un nom (type d'en-tête) suivi de deux points (:)
 Le navigateur effectue une requête HTTP
et de la valeur
 Le serveur traite la requête puis envoie une réponse HTTP  Le corps de la requête: ensemble de lignes optionnelles séparées des
 RFC 1945 - Hypertext Transfer Protocol -- HTTP/1.0 lignes précédentes par une ligne vide
 RFC 2616 - Hypertext Transfer Protocol -- HTTP/1.1  Permet (par exemple) un envoi de données par une commande POST lors
de l'envoi de données au serveur par un formulaire
13 14

Requête HTTP Commande d’une requête http

 Syntaxe (<crlf> = saut de ligne):


Commande Description
METHODE URL VERSION<crlf>
EN-TETE : Valeur<crlf>
...
GET Requête de la ressource située à l'URL spécifiée
EN-TETE : Valeur<crlf> Requête de l'en-tête de la ressource située à l'URL
Ligne vide<crlf> HEAD
spécifiée
CORPS DE LA REQUETE
Envoi de données au programme situé à l'URL
 Exemple de requête HTTP: POST
spécifiée
GET http://www.commentcamarche.net HTTP/1.0
Accept : text/html PUT Envoi de données à l'URL spécifiée
If-Modified-Since : Saturday, 15-January-2000 14:37:11 GMT
User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95) DELETE Suppression de la ressource située à l'URL spécifiée

15 16
Entêtes d’une requête http Entêtes d’une requête http
Nom de l'en-tête Description Nom de l'en-tête Description
Type de contenu accepté par le navigateur (par Content-Length Longueur du corps de la requête
Accept
exemple text/html). Content-Type
Type de contenu du corps de la requête (par exemple
text/html).
Accept-Charset Jeu de caractères attendu par le navigateur
Date Date de début de transfert des données
Accept-Encoding Codage de données accepté par le navigateur
Utilisé par les machines intermédiaires entre le browser et
Forwarded
Langage attendu par le navigateur (anglais par le serveur
Accept-Language
défaut) From Permet de spécifier l'adresse e-mail du client
Authorization Identification du navigateur auprès du serveur If-Modified-Since
Permet de spécifier que le document doit être envoyé s'il a
été modifié depuis une certaine date
Content-
Type de codage du corps de la requête Link Relation entre deux URL
Encoding
Orig-URL URL d'origine de la requête
Content-
Type de langage du corps de la requête Referer URL du lien à partir duquel la requête a été effectuée
Language
Chaîne donnant des informations sur le client, comme le
User-Agent nom et la version du navigateur, du système
17 18
d'exploitation

Réponse HTTP Réponse HTTP

 Une ligne de statut:  Syntaxe


VERSION-HTTP CODE EXPLICATION<crlf>
 La version du protocole utilisé
EN-TETE : Valeur<crlf>
 Le code de statut ...
 La signification du code EN-TETE : Valeur<crlf>
Ligne vide<crlf>
 Les champs d'en-tête de la réponse: ensemble de lignes facultatives CORPS DE LA REPONSE
donnant des informations supplémentaires sur la réponse et/ou le serveur.  Exemple de réponse HTTP:
 Ces lignes sont composées d'un type d'en-tête suivi de deux points (:) et de la HTTP/1.0 200 OK
valeur de l'en-tête Date : Sat, 15 Jan 2000 14:37:12 GMT
Server : Microsoft-IIS/2.0
 Le corps de la réponse: contient le document demandé
Content-Type : text/HTML
Content-Length : 1245
Last-Modified : Fri, 14 Jan 2000 08:25:13 GMT

19 20
Entêtes des réponses HTTP Code réponse HTTP
Code Message Description
Nom de l'en-tête Description 10x Message d'information Ces codes ne sont pas utilisés dans la version 1.0 du protocole
Content-Encoding Type de codage du corps de la réponse 20x Réussite Ces codes indiquent le bon déroulement de la transaction
200 OK La requête a été accomplie correctement
Content-Language Type de langage du corps de la réponse
Elle suit une commande POST, elle indique la réussite, le
Content-Length Longueur du corps de la réponse 201 CREATED corps du reste du document est sensé indiquer l’URL à
laquelle le document nouvellement créé devrait se trouver.
Type de contenu du corps de la réponse (par exemple
Content-Type La requête a été acceptée, mais la procédure qui suit n'a pas
text/html). 202 ACCEPTED
été accomplie
Date Date de début de transfert des données PARTIAL Lorsque ce code est reçu en réponse à une commande GET,
203
INFORMATION cela indique que la réponse n'est pas complète.
Expires Date limite de consommation des données
Le serveur a reçu la requête mais il n'y a pas d'information à
204 NO RESPONSE
Utilisé par les machines intermédiaires entre le browser renvoyer
Forwarded
et le serveur Le serveur indique au navigateur de supprimer le contenu des
205 RESET CONTENT
champs d'un formulaire
Redirection vers une nouvelle URL associée au
Location Il s'agit d'une réponse à une requête comportant l'en-tête
document 206 PARTIAL CONTENT
range. Le serveur doit indiquer l'en-tête content-Range
Server Caractéristiques du serveur ayant envoyé la réponse
21 22

Code réponse HTTP Code réponse HTTP


Code Message Description Code Message Description
Ces codes indiquent que la ressource n'est plus à 40x Erreur due au client Ces codes indiquent que la requête est incorrecte
30x Redirection
l'emplacement indiqué
La syntaxe de la requête est mal formulée ou est
Les données demandées ont été transférées à une 400 BAD REQUEST
301 MOVED impossible à satisfaire
nouvelle adresse
Le paramètre du message donne les spécifications des
Les données demandées sont à une nouvelle URL, formes d'autorisation acceptables. Le client doit
401 UNAUTHORIZED
302 FOUND mais ont cependant peut-être été déplacées reformuler sa requête avec les bonnes données
depuis... d'autorisation
Cela implique que le client doit essayer une nouvelle PAYMENT Le client doit reformuler sa demande avec les bonnes
303 METHOD adresse, en essayant de préférence une autre 402
REQUIRED données de paiement
méthode que GET
403 FORBIDDEN L'accès à la ressource est tout simplement interdit
Si le client a effectué une commande GET
NOT conditionnelle (en demandant si le document a été Classique! Le serveur n'a rien trouvé à l'adresse
304 404 NOT FOUND
MODIFIED modifié depuis la dernière fois) et que le spécifiée.
document n'a pas été modifié il renvoie ce code.
23 24
Code réponse HTTP Langage HTML
Code Message Description  Langage à balises :
 Une balise : une instruction de mise en forme
Ces codes indiquent qu'il y a eu une erreur interne du
50x Erreur due au serveur  Une balise : contient des textes et/ou des autres balises autorisées
serveur
 Une balise : structure le texte
Le serveur a rencontré une condition inattendue qui l'a
 Avant : une balise : mise en forme
500 INTERNAL ERROR empêché de donner suite à la demande (comme quoi il
leur en arrive des trucs aux serveurs...)  Navigateur : recherche des balises et interprétation
 <NOM_DE_BALISE>….</NOM_DE_BALISE>
Le serveur ne supporte pas le service demandé (on ne peut
501 NOT IMPLEMENTED  & (caractères spéciaux) : "&#code ascii;". Ex :
pas tout savoir faire...)
 il y a : &amp; /& ; &lt; / < ; &gt; / >
Le serveur a reçu une réponse invalide de la part du serveur
 &eacute; / é (note les caractères s'obtiennent par la &+lettre+accent; les
502 BAD GATEWAY auquel il essayait d'accéder en agissant comme une
accents étant acute, grave, circ, cedil, tilde et aussi les ligatures avec lig, e.g.
passerelle ou un proxy
&aelig; / æ).
Le serveur ne peut pas vous répondre à l'instant présent, car  Liens hypertexte :
le trafic est trop dense (toutes les lignes de votre
503 SERVICE UNAVAILABLE  Chaque document HTML peut être représenté par un URL comme une ressource
correspondant sont occupées veuillez rappeler
ultérieurement)
sur Internet.
 Un document HTML peut contenir des liens vers les autres documents HTML
La réponse du serveur a été trop longue vis-à-vis du temps ou les autres sources de données (multimédia, programme)
504 GATEWAY TIMEOUT pendant lequel la passerelle était préparée à l'attendre
 Outil de validation : http://validator.w3.org
(le temps qui vous était imparti est maintenant écoulé...)
25 26

Fichier HTML minimum DTD


 Version html 4.01
 Notion liée à XML (eXtensible Markup Language)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  DTD (Document Type Definition) : vérifier qu'un document XML est
"http://www.w3.org/TR/html4/strict.dtd"> conforme à une syntaxe donnée (modèle).
 une grammaire
<HTML>  document valide par rapport à une DTD
<HEAD>
 Une DTD définie de 2 façons :
<TITLE>
 sous forme interne (inclure la grammaire dans le document)
</TITLE>
</HEAD>  sous forme externe (fichier local ou URL contenant la grammaire)

<BODY>
</BODY>

</HTML>

27 28
DTD Exemple de DTD
 Définition d’un élément suivant la syntaxe : <! ELEMENT Nom Modèle >
 Modèle
 ANY : L'élément peut contenir tout type de données  <!ELEMENT personne (nom,prenom,telephone),email? >
 EMPTY : L'élément ne contient pas de données spécifiques  <!ELEMENT nom (#PCDATA) >
 #PCDATA : L'élément doit contenir une chaîne de caractères  <!ELEMENT prenom (#PCDATA) >
 Le mot clé #PCDATA doit nécessairement être écrit entre parenthèses, sinon
 <!ELEMENT telephone (#PCDATA) >
risque d'obtenir une erreur du parseur.
 <!ELEMENT email (#PCDATA) >
Opérateur Signification Exemple

+ L'élément doit être présent au minimum une fois A+  <personne>


 <nom>Renevier</nom>
* L'élément peut être présent plusieurs fois (ou aucune) A*
 <prenom>Philippe</prenom>
? L'élément peut être optionnellement présent A?
 <telephone>04….</telephone>
| L'élément A ou l'élément B peuvent être présents A|B
 <email>Philippe.Renevier@unice.fr</email>
, L'élément A doit être présent et suivi de l'élément B A,B
 </personne>
Les parenthèses permettent de regrouper des éléments afin
() (A,B)+
de leur appliquer les autres opérateurs
29 30

DTD DTD

 Attribut : <! ATTLIST Elément Attribut Type >  Entités : déclarer un groupe d'éléments sous un nom afin de ne pas avoir à réécrire
 Type représente le type de donnée de l'attribut, il en existe trois: ces derniers plusieurs fois dans la DTD
 une meilleure lisibilité
 littéral: une chaîne de caractères, mot clé CDATA
 un contrôle accru sur le contenu
 l'énumération: une liste de valeurs possibles pour limiter le choix de l'utilisateur. Syntaxe
 une plus grande facilité de mise à jour
 <! ATTLIST Elément Attribut (Valeur1 | Valeur2 | ... ) >
 On distingue plusieurs types d'entités dans XML :
 <! ATTLIST Elément Attribut (Valeur1 | Valeur2 ) "valeur par défaut" > (valeur par  les entités générales
défaut entre guillemets)  <!ENTITY nom_de_l_entite "Contenu de l'entite">
 atomique: identifiant unique, mot clé ID.  <!ENTITY site "http://deptinfo.unice.fr/~renevier/L2">
 Caractère obligatoire d’un attribut (optionnel) : le faire suivre d’un mot clé particulier :  usage : <site>&site;</site>
 #IMPLIED : optionnel  les entités paramètres

 #REQUIRED : obligatoire  <!ENTITY % nom_de_l_entite definition>

 #FIXED : valeur par défaut (à préciser entre guillemets) sinon défini.  les entités caractères
 &amp; : & &lt; : < &gt; : > &apos; : ‘ &quot; : «
 <!ENTITY nom_de_l_entite "&#xCODEHEXA;">
 <! ATTLIST disque IDdisk ID #REQUIRED type (K7|MiniDisc|Vinyl|CD) "CD" >
 <!ENTITY ccedille "&#x00E7;">

31 32
Déclaration de DTD HTML 4.01 Langage HTML
 BALISES DE BASE
 HTML 4.01 strict DTD : tous les éléments et attributs déclarés et non  Format général de balise :
dépréciés (deprecated) et qui ne sont pas lié au frameset.  Les balises conteneurs : les balises contiennent de textes et des balises
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" autorisées. Une balise conteneur est utilisée pour présenter ou structurer le
"http://www.w3.org/TR/html4/strict.dtd"> texte et les balises qui lui appartiennent.
 HTML 4.01 transitional DTD : strict DTD + deprecated (présentation Exemple : <H1> Mon document </H1> <!-- titre -->
visuelle).  Les balises vides : qui sont destinées à insérer un élément hors du texte dans
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" le document : séparateur, saut paragraphe, saut de ligne, image, …
"http://www.w3.org/TR/html4/loose.dtd"> Exemple : <HR /> <!-- ajouter un séparateur horizontal -->
 HTML 4.01 Frameset DTD : transitional DTD + frame.
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" Balises conteneur
"http://www.w3.org/TR/html4/frameset.dtd"> <nom_Balise {attribut="val"}> Balises vides
Corps_balise (texte et balises) <nom_Balise {attribut="val"} />
</nom_Balise>
{attibut="val"} : liste de couples attribut=‘val’ séparés par des espaces

33 34

Propriétés des Balises html xhtml

 Propriétés générales (mais pas systématiques)  Version « xml » de HTML


 Pour écrire un document xhtml (valide) à partir d'un document html 4 valide :
 id, class (document-wide identifiers)  bien fermer les balises (ou tags)

 lang (language information), dir (text direction)  document soit bien structuré (il faut bien fermer les balises dans le bon ordre)

 title (element title)  balises et attributs en minuscule (sensible à la casse).

 style (inline style information )  fermer les éléments vides (e.g. <br />)

 valeurs des attributs entre guillemets et chaque attribut a une valeur

 onclick, ondblclick, onmousedown, onmouseup, onmouseover,  (la minimisation n'est pas autorisée : <input checked="checked" />)
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic  généralement l'attribut name est à remplacer par l'attribut id
events )

35 36
Fichier xhtml minimal Les autres déclarations de dtd xhtml

<?xml version="1.0" encoding="UTF-8"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1- "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<title>titre de la page</title> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
</head>

<body>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"


</body> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

</html>

37 38

Balises HTML / xhtml Balises Structurelles


 html : définition du document
 un head, un body

 Balises structurelles  Start tag: optional, End tag: optional


 head : partie comprenant les entêtes et meta-données du document
 Balises contenant du texte  Un TITLE obligatoire
 Balise hypertext  META, SCRIPT, STYLE, etc. optionnelles

 Balises de listes  Start tag: optional, End tag: optional


 title : titre du document
 Balises de mise en forme (dépréciées !!)  Titre de la page (en haut du navigateur)
 Balises de table (tableaux)  Contient du texte

 Balises de formulaire  Start tag: required, End tag: required


 body : corps du document
 Balises d’objets, images et applets  Start tag: optional, End tag: optional
 les images cliquables  Partie centrale du navigateur

 Balises de Frame  « block » ou script


 ins et del
 Balises Meta (entêtes)  « block » : p | h1 | h2 | h3 | h4 | h5 | h6 | ol | ul | dl | pre | div | noscript | blockquote |
form | hr | table | fieldset | address
 Attribut spécifique : onload, onunload

39 40
Balises Structurelles (regroupement) Balises Structurelles (titres)

 div  h1 | h2 | h3 | h4 | h5 | h6
 « flow » : « block » ou « inline »  « inline »
 « inline » :
 Rendu par défaut dépendant du navigateur et de la plate-forme
 texte (PCDATA)
 Start tag: required, End tag: required
 phrase : em | strong | dfn | code | samp | kbd | var | cite | abbr | acronym
 Plus l’indice est petit, plus le titre est important
 special : a | img | object | br | script | map | q | sub | sup | span | bdo

 formulaire : input | select | textarea | label | button


 En prime : adress
 inline inclut aussi fontstyle : tt | i | b | big | small (depreciated)
 « inline »
 Start tag: required, End tag: required

 span  Start tag: required, End tag: required

 « inline »

 Start tag: required, End tag: required

 ne font que regroupé : partage de style, dhtml, etc.  exemple/baliseH.html

41 42

Balises Textuelles (phrases) Balises Textuelles (quotations et indices)

 em - emphasis, strong - stronger emphasis, dfn - définition, code - bout de  blockquote


code, samp - sample, kbd - keyboard : texte à entrer par l'utilisateur, var -  « block » ou script
variable d'un programme, cite - citation ou une référence, abbr -  « block level » ; citation longue
abbréviation, acronym
 attribut spécial cite (uri)
 phrase ou fontstyle
 start tag: required, end tag: required
 start tag: required, end tag: required
 q
 « inline » (citation courte)
 exemple/balisePhrase.html
 attribut spécial cite (uri)

 start tag: required, end tag: required

 indice sub, exposant : sup


 « inline »

 start tag: required, end tag: required

43 44
Balises Textuelles (lignes et paragraphes) Balises Textuelles (changement)
 p (paragraph)
 « inline » : pas de <p> dans un <p> !!  ins et del
 « block level »  flow (block ou inline)

 Start tag: required, End tag: optional  spéciaux : tantôt block-level tantôt inline (mais pas les deux)

 br (line break)  Start tag: required, End tag: required

 vide !  Attribut : cite (uri) et dateTime

 note : pour un espace non « cassable » &nbsp; (ou &#160; or &#xA0;) : non – YYYY-MM-DDThh:mm:ssTZD : 1994-11-05T08:15:30-05:00
breakable space… • YYYY = four-digit year : 1994
 Start tag: required, End tag: forbidden • MM = two-digit month (01=January, etc.)
 pre (texte pré-formaté) • DD = two-digit day of month (01 through 31)
 espace et retours à la ligne conservé • hh = two digits of hour (00 through 23) (am/pm NOT allowed)
 « inline » sauf IMG | OBJECT |BIG | SMALL | SUB | SUP • mm = two digits of minute (00 through 59)
 Start tag: required, End tag: required • ss = two digits of second (00 through 59)
• TZD = time zone designator : -05:00 écart avec GMT (côte est US)
 exemple/baliseP.html

45 46

Balise hypertext Balise Listes


 balise anchor (ancre) : a.  ul (non ordonnée) ou ol (ordonnée)
 référencer une page par son URI  (LI)+
 <a href="http://deptinfo.unice.fr">….</a>
 Start tag: required, End tag: required
 Start tag: required, End tag: required
 Attributs dépréciés : type (1, A, a, i, I) ; start (ol : une valeur de début) ; compact
 définir une nouvelle attache pour être la cible d'autre lien
 balise vide  li (list item)
 <a id="nom de l'ancre" /> (id ou name) ou <a…> … </a>  « Flow »
 référence : href= "URI#nom de l'ancre« (lien local si URI ="")  Start tag: required, End tag: optional
 « inline » excepté a
 Attributs dépréciés : type, value (une valeur), compact
 Attributs
 name (id)
 dl (Définition list)
 href (uri)  (dt | dd)+
 hreflang = langcode : langue de la destination, seulement quand il y a href  Start tag: required, End tag: required
 type = content-type (MIMETYPE : ftp://ftp.isi.edu/in-
 dt (term) ou dd (définition)
notes/iana/assignments/media-types/.)
 rel = relation entre le document courant et la cible (quand href)  dt : « inline » et dd : « flow »

– Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary,  Start tag: required, End tag: optional
Copyright, Chapter, Section, Subsection, Appendix ,Help, Bookmark
 rev = idem rel (dans le sens inverse)
 charset = encodage de la cible
 exemple/baliseList.html
47 48
Balise hr Balises de mise en forme (dépréciées !!)
<B> …</B> Gras
 Séparation horizontale <I>…</I> Italique
 "block level" <center>…</center> Centrer les éléments (textes, images)
 Balise vide <BIG>…</BIG> En plus gros
 Start tag: required, End tag: forbidden <SMALL>…</SMALL> En plus petit
 Attributs (tous dépréciés) <S>…</S> ou <STRIKE></STRIKE> Texte rayé
 noshade (pas de valeur) : pas d’ombre <U>…</U> Texte souligné
 size (nombre de pixels) : épaisseur du trait <TT>…</TT> Style teletype (courrier)
 width (nombre de pixels ou poucentage) : longueur du trait <BLINK>…</BLINK> Texte clignotant

 Attributs dépréciés !
 align (center, left, right, justify)

 bgcolor (couleur de fond)

49 50

Balises de mise en forme (dépréciées !!) Balises Table


 table
 (caption?, (col*|colgroup*), thead?, tfoot?, tbody+)
 Attributs
 Les polices de caractères peuvent être modifiées sur l'ensemble d'une page
 summary (texte)
par la balise : <BASEFONT SIZE=valeur>  align (déprécié, left,center ou right)
 Valeur sert à changer la taille de la police par défaut. Sept tailles sont  width (largeur en pixel ou pourcentage)
disponibles et la valeur par défaut est 3, la plus grosse étant de valeur 6  cellspacing (pixel ou %) -- spacing between cells --
 cellpadding (pixel ou %) -- spacing within cells --
 Une partie de texte peut voir sa taille modifiée si elle est entourée de la
 frame = void|above|below|hsides|lhs|rhs|vsides|box|border (cadre autour du tableau):
balise : <FONT SIZE=valeur> ..</FONT>
• void: No sides. This is the default value.
 Valeur sert à spécifier , ici encore, 7 tailles de polices (le défaut étant 3) • above: The top side only.
 La syntaxe SIZE=+i ou i peut être compris entre 1 et 7 est admise, elle permet • below: The bottom side only.
de donner une taille relative par rapport à la taille en cours • hsides: The top and bottom sides only.
• vsides: The right and left sides only.
 <FONT COLOR="#FF0000">permet de colorier les caractères (ici en
• lhs: The left-hand side only.
rouge)</FONT> donne comme résultat : • rhs: The right-hand side only.
• box: All four sides.
permet de colorier les caractères (ici en rouge) • border: All four sides.

51 52
Balises Table Balises Table
 table
 thead (entêtes) et tfoot (pieds) et tbody (corps)
 Attributs (suite)
 tr+
 rules = none|groups|rows|cols|all (les traits internes)
 même nombre de colonne
• none: No rules. This is the default value.
• groups: Rules will appear between row groups and column groups only.  ordre d’apparition

• rows: Rules will appear between rows only.  tbody toujours requis sauf si unique et pas de thead ni de tfoot
• cols: Rules will appear between columns only.  start tag: required, end tag: optional
• all: Rules will appear between all rows and columns.  colgroup
 border = pixel (épaisseur du trait externe)  col*
 Processus d’affichage
 regroupement de colonnes
 Résumé

 Titre
 attribut : span (nombre) width (% ou relative (poids) )

 Entêtes et pieds  start tag: required, end tag: optional


 Calcul du nombre de colonne (nombre de ligne donné par nombre de TR)  col
 Rendu des cellules
 vide
 Start tag: required, End tag: required
 caption (titre)  regroupement d’attributs pour des colonnes

 inline  attribut : span (nombre) width (% ou relative (poids) )


 Start tag: required, End tag: required  start tag: required, end tag: forbidden

53 54

Balise Table Balises de formulaire : fieldset

 tr (ligne)  Mise en forme des formulaires


 (th | td)+  Cadre

 start tag: required, end tag: optional  Utilisable en dehors des formulaires

 th (titre) ou td (data) : les cellules  fieldset


 « flow »  Des espaces (blancs), Une legend, (flow)*

 attribut  Start tag: required, End tag: required

 rowspan = nombre de ligne  legend


 colspan = nombre de colonne  « inline »

 start tag: required, end tag: optional

 exemple/baliseTable.html

55 56
Balises de formulaire : form Balises de formulaire : input
 Contient des éléments de contrôle de formulaire (bouton, champs, etc.)
 Définit selon un type :
 « block » (sauf form) ou script
 text : champs d’entrée de texte.
 Attributs
 action (uri)  password : l’écho sont des ‘*’. sécutité pauvre.

 method ("get" ou "post")  checkbox

– get : envoi dans l’url des paires key/value : ?toto=val&titi=val2&…  radio (radiobutton)
– post : envoi  submit : un bouton pour envoyer
 enctype (pour une méthode "post")  image : un bouton submit graphique. Attribut src donne l’URI de l’image.
– Par défaut : application/x-www-form-urlencoded - encodage : espace devient Utiliser l’attribut alt. Les coordonnées du clic sont passés au server sous la
+ et les autres non alphanumériques %HH et les retours à la ligne : "CR LF" forme name.x et name.y ; mais à ne pas trop utiliser
(i.e., `%0D%0A' )
 problème d’accéssibilité : navigateur non graphique, clic difficile, etc.
– multipart/form-data - envoi en différentes parties (types à préciser à la
source)  à remplacer par plusieurs boutons submit ou par des scripts côtés client.

 accept-charset (liste - , - d’encodage possible pour les caractères acceptés par le  reset (bouton).
server)  button : bouton sans comportement prédéfini (script)
 Accept (liste - , - de types de contenu acceptés par le server)  hidden : champs caché (parfois utile pour passer une valeur masquée)
 events : onsubmit et onreset
 file : sélection d’un fichier
 Start tag: required, End tag: required

57 58

Balises de formulaire : input Balises de formulaire : select


 select : menu
 ( optgroup | option )+
 attributs
 Balise vide
 name : nom de contrôle
 Start tag: required, End tag: forbidden  size (nombre) : nombre d’éléments visibles pour une scroll list

 Attributs  multiple (pas de valeur) : permet la sélection multiple


 start tag: required, end tag: required
 type
 option
 name : nom de contrôle (très important)  #pcdata (texte)

 value (valeur initiale ou libellé) : optionnel sauf pour radio et checkbox  attributs
 selected : pour présélectionner l’élément
 size (en pixel sauf pour text et password où c’est un nombre de caractère)
 value (texte) : pour donner une valeur autre que le texte (#pcdata)
 maxlength : pour text ou password : nombre de caractères maximum  label (texte) : pour faire apparaître un autre nom (plus court) à la charge du

 checked : pour radio et checkbox


navigateur !! (pas sûr que cela fonctionne !!)
 start tag: required, end tag: optional
 src : pour image : la source (ne pas oublier alt)
 optgroup
 exemple/baliseInput.html  regrouper les options : (option)+
 attribut : label (texte) : libellé
 start tag: required, end tag: required
 exemple/baliseSelect.html
59 60
Balises de formulaire : textarea Balises de formulaire : label

 Champs d’entrée sur plusieurs lignes  Permet d’associer un texte à un élément de formulaire sans texte
 textarea  inline

 #PCDATA : texte initiale  Start tag: required, End tag: required

 Attributs  Attaché par l’attribut for


 name : nom de contrôle  Valeur = id d’un champ de contrôle

 cols : nombre de colonne

 rows : nombre de ligne

 Start tag: required, End tag: required

61 62

Balises de formulaire : navigation Balises de formulaires : attributs


 Transfert de focus
 Souris
 Attributs des contrôles
 readonly (pas de valeur)
 Clavier : tabulation ou touche raccourcie

 Tabulation : attribut tabindex (numéro) – input et textarea


 a, area, button, input, object, select et textarea. – élément non modifiable mais inclus dans la navigation
 1) Ceux qui ont l’attribut : de la plus petite à la plus grande valeur. Pas  disabled (pas de valeur)
forcément consécutifs. En cas d’égalité, ordre d’apparition (flots de caractère) – button, input, optgroup, option, select, et textarea.
 2) Ceux qui ne n’ont pas (impossible ou non donné) : ordre d’apparition
– élément exclu de la navigation
 3) Les désactivés (c.f. transparent suivant) ne participent pas.
– élément grisé
 Touche raccourcie : attribut (un caractère)
 a, area, button, input, label, legend et textarea.

 sous windows : besoin de la touche alt en plus…

 exemple/baliseNav.html

63 64
Balises d’objets, images et applets Balises d’objets, images… : object
 Attributs communs à img, object et applet  object : inclusion générique
 width (nombre) : largeur en pixel  Besoin éventuel de plugin (ex: une applet)
 height (nombre) : hauteur en pixel  (param | flow)*
 alt (texte) : texte alternatif  Attributs
 Codebase (uri): chemin de référence, qui complète les chemins relatifs des attributs
 Ne pas donner de texte si l’image est décorative (formatage : une puce) classid, data et archive. Par défaut : la position du document
 Ne pas remplir avec un texte « bidon »  data (uri) : donne la localisation de l’objet

 IMG  classid (uri) : précise la position d’une implémentation de l’objet. Alternative ou


complément à data (selon objet)
 Balise vide
 archive (uri-list) : listes d’URIs séparés par des espaces. Précise des archives contenant
 Dans inline des éléments utilisés par l’objet. Permet des les précharger.
 Attributs  type (content-type) : précise le type de contenu de l’objet spécifié par data. Optionnel
mais permet au navigateur de ne pas charger pour rien un objet non supporté.
 src (uri) : source de l’image
 codetype (content-type) : précise le type de contenu de l’objet spécifié par classid.
 alt : obligatoire Optionnel mais permet au navigateur de ne pas charger pour rien un objet non supporté.
(par défaut égal à type)
 longdesc (uri) pour donner des informations plus conséquentes qu’avec alt.
 declare (pas de valeur) : Lorsqu’il est présent, le booléen inidque que l’objet doit être
 Redimensionnement !! instancié.
 Start tag: required, End tag: forbidden  standby (text) : message à afficher pendant le chargement

65 66

Balises d’objets, images… : param Balises d’objets… : Exemples du W3C


<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
<PARAM name="height" value="40" valuetype="data">
 Spécifie un paramètre sous formes key / value <PARAM name="width" value="40" valuetype="data">
This user agent cannot render Python applications.
 Balise vide
</OBJECT> </P>
 Start tag: required, End tag: forbidden

 Attributs <!-- First, try the Python applet -->


 name (texte) : nom du paramètre (sensible à casse selon l’objet) <P><OBJECT title="The Earth as seen from space"
classid="http://www.observer.mars/TheEarth.py">
 value (texte) : valeur associée à un nom. Interprétation par l’objet
<!-- Else, try the MPEG video -->
 valuetype (data | ref | object)
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
 data (valeur par défaut) : valeur passée comme chaîne de caractères <!-- Else, try the GIF image -->
 ref : c’est une URI <OBJECT data="TheEarth.gif" type="image/gif">
 object : référence à un autre objet du document (id) <!-- Else render the text --> The <STRONG>Earth</STRONG> as seen from
space.
 Type (content-type) : précise le type des ressources en cas de valuetype="ref"
</OBJECT>
</OBJECT>
</OBJECT> </P>
67 68
Balises d’objets, images… : APPLET Images Cliquables
 Balise APPLET déprécié
 Utilisation de OBJECT  des images contenant des zones servant de liens
 public String getParameter(String name)  xhtml 1.0
 Exemples (pas de codebase : les .class sont au même endroit) :  Pour la mise en place d’une image cliquable, on doit composer 2 balises :
<P><OBJECT codetype="application/java" classid="java:Bubbles.class"  une balise Image IMG pour charger l’image
width="500" height="500">  une balise MAP pour définir les zones et les liens concernés
Java applet that draws animated bubbles.  la référence à la balise Map est faite par l’attribut USEMAP
</OBJECT></P>  Deux types d’images cliquables
 Côté client (le plus fréquent et préférable) : traitement par le navigateur
<OBJECT codetype="application/java" classid="AudioItem" width="15"
 Côté serveur (c.f. plus loin) : traitement sur le serveur
height="15">
<PARAM name="snd" value="Hello.au|Welcome.au"> Java applet that plays a
welcoming sound.
</OBJECT>

69 70

Images Cliquables : map Images Cliquables : côté serveur


 map
 (block | area)+
 Désigné dans une balise IMG l’attribut usemap…
 Possib le uniquement pour img et input.
 qui fait référence à l’attribut name (texte) de cette MAP  IMG avec l’attribut ismap dans un A
 Attribut id obligatoire (et identique à name)  INPUT de type "image".
 Start tag: required, End tag: required
 Un clic sur la zone provoque l’envoie des coordonnées
 area
 Exemple :
 Balise vide
 Attributs
 <P><A href="http://www.acme.com/cgi-bin/competition">

 shape = default|rect|circle|poly
<IMG src="game.gif" ismap alt="target"></A></P>
 coords = coordinates  Envoie des coordonnées du clic : URI du A+`?' + x et y, séparés par une
– rect: left-x, top-y, right-x, bottom-y. virgule
– circle: center-x, center-y, radius (pixel ou %)  http://www.acme.com/cgi-bin/competition?10,27
– poly: x1, y1, x2, y2, ..., xN, yN. (x1=xN et y1=yN)
 nohref (pas de valeur)

 exemple/baliseMap.html

71 72
Balises de Frame Balises de Frame
 LES CADRES : Balise FRAMESET remplace la balise BODY dans le document
concerné, qui doit être chargé en premier :
 Balises FRAMESET et FRAME permettent de définir des fenêtres dans une  Syntaxe :
page HTML, chacune de ces fenêtres se comportant comme une page
<FRAMESET> Corps </FRAMESET>
HTML indépendante. Ainsi on peut disposer d'un ascenseur pour chacune
 La balise FRAMESET comprend deux attributs
de ces zones, faire défiler des textes ou des images dans chacune d'entre
 ROWS=hauteur1,hauteur2,...
elles.
 COLS=largeur1,largeur2,...
 Les frames mettent en jeu deux éléments :
 Les valeurs peuvent être des pixels (par exemple 40) , des pourcentages (par exemple
 la balise FRAMESET définissant la taille des fenêtres qui remplace la balise
20%) ou des résultantes (par exemple *).
BODY. Le document contenant les framesets doit être lancé en premier. Les
balises Framesets pourront être emboîtées permettant de définir une hiérarchie
de fenêtres, dans laquelle les nœuds intermédiaires sont des fenêtres virtuelles et <FRAMESET ROWS=20%,*>
les nœuds feuilles sont des fenêtres réelles <FRAME …>
 la balise FRAME définissant le contenu des fenêtres au niveau feuille de la <FRAMESET COLS=30%,*>
<FRAME …>
hiérarchie de fenêtre. <FRAME … >
</FRAMESET>
</FRAMESET>
73 74

Balises de Frame Balises de Frame


 LES CADRES : Balise FRAME est une balise vide qui définit les
caractéristique d’une fenêtre réelle :
 Syntaxe : <FRAME attributs >
 Préciser la cible pour les éléments qui créent des liens (A, LINK), des
images cliquable (AREA) et des formulaires (FORM).
 La balise FRAME comprend plusieurs attributs

 SRC=URI : donne l'URI (valeur initiale) à mettre dans la FRAME


 Attributs targets
 NAME=nom de la fenêtre : donne le nom de la fenêtre.  Frame target names
 MARGINWIDTH=valeur : donne la valeur (en pixels) des marges pour la  Sauf pour les noms suivants, les noms donnés doivent être alphabétique
fenêtre.  Noms réservés
 MARGINHEIGHT=valeur : donne la valeur (en pixels) de l'en-tête et du bas  _blank : nouvelle fenêtre
de page de la fenêtre.
 _self : dans le même cadre
 SCROLLING="yes|no|auto" : permet les flèches déroulantes de défilement
 _parent : dans le frameset parent
du texte.
 NORESIZE Ce flag indique que la taille de la fenêtre n'est pas redéfinissable  _top : dans la même fenêtre (en remplacement des frames)

par l'utilisateur.
 Frameborder (1 | 0)

 longdesc = URI : pour indiquer une description longue

75 76
Balises de Frame Balises Meta (entêtes)

 Frame interne : IFRAME  <meta> donne à votre document des informations qui seront lues par le
 flow
serveur httpd. Ces informations sont généralement votre nom (NAME), le
nom de l'auteur (AUTHOR), le contenu (CONTENT), une directive HTTP-
 Attribut : longdesc, name, width, height, src, frameborder, marginwidth, EQUIV qui prend souvent la valeur Expires, Keywords, Reply_to. La
marginheight, scrolling directive Expires est utilisée par la plupart des navigateurs pour donner une
 Équivalent à OBJECT avec un fichier html date à partir de laquelle la page ne doit plus être conservée dans le cache
de votre logiciel mais bien rechargée sur le serveur à chaque passage sur la
page.
 Alternative : NOFRAME  <meta http-equiv="Expires" content="Tue, 20 Aug 2006 14:25:27 GMT">
 La balise <NOFRAMES> </NOFRAMES> permet de créer une page HTML  <base href= ...> donne la base de l'adresse URL qui sera placée devant les
visible par ceux qui ne disposent pas d'un outil compatible références relatives dans le document, de façon à ce que hors contexte les
fichiers soient cherchés à l'adresse : BASE adresse relative
 <link href=adresse
rel=top|contents|index|glossary|copyright|next|previous|help|search
rev=top|contents|index|glossary|copyright|next|previous|help|search
title=valeur> établit un lien avec un autre document (de style en particulier)

77 78