1 Introduction aux Web Services Partie 1. Technologies XML Cours 1.1 : Rappel HTML Janvier 2013.

1

Introduction aux Web Introduction aux Web ServicesServices

Partie 1. Technologies Partie 1. Technologies XMLXML

Cours 1.1 : Cours 1.1 : Rappel HTMLRappel HTML

Janvier 2013Janvier 2013

2

PRESENTATION DU COURS 1/2PRESENTATION DU COURS 1/2

0 : Rappel du HTML : pages statiques, styles0 : Rappel du HTML : pages statiques, styles

1 : Introduction au langage XML :1 : Introduction au langage XML : XML DTD XML-Schema

2 : XHTML 2 : XHTML

3 : Transformation de documents XML :3 : Transformation de documents XML : XPath XSLT

4 :Présentation de documents XML :4 :Présentation de documents XML : XSL Fo

5 : Langages XML5 : Langages XML

3

PRESENTATION DU COURS 2/2PRESENTATION DU COURS 2/2

6 : Les APIs XML 6 : Les APIs XML

7 : XML et les architectures N-tiers7 : XML et les architectures N-tiers

8 : Technologies liées à XML8 : Technologies liées à XML EJB Web Services

9 : Exemples d9 : Exemples d’’applications de XMLapplications de XML

4

Du HTML vers XMLDu HTML vers XML

Chapitre 0 : Rappel du HTMLChapitre 0 : Rappel du HTML

HTML – langage de base pour la création des interfaces des HTML – langage de base pour la création des interfaces des services web. services web.

Premier pas vers description de contenuPremier pas vers description de contenu

Spécification HTML 4 – 1999, Spécification HTML 4 – 1999,

Spécification HTML 5 – décembre 2007Spécification HTML 5 – décembre 2007

Premier « Working Draft » public –février 2008Premier « Working Draft » public –février 2008

5

Eléments du HTMLEléments du HTML

Balises : Balises :

1.1. Balises de structure du documentBalises de structure du document

2.2. Balises de formatageBalises de formatage

3.3. Balises de listes Balises de listes

4.4. Balises des hyperliensBalises des hyperliens

5.5. Balises des images et des images mapsBalises des images et des images maps

6.6. Balises de tableauxBalises de tableaux

7.7. Balises de formulairesBalises de formulaires

8.8. Balises des cadresBalises des cadres

9.9. Balises de contenus executablesBalises de contenus executables

Balises possèdent des attributsBalises possèdent des attributs*Ce rappel est loin d*Ce rappel est loin d’’être exhaustif et ne donne que des éléments être exhaustif et ne donne que des éléments nécessaires pour ce coursnécessaires pour ce cours

6

Balisesde la structure (1)Balisesde la structure (1)

<HTML> </HTML> - balise obligatoire<HTML> </HTML> - balise obligatoire

<HEAD> </HEAD> - contient les balises qui composent <HEAD> </HEAD> - contient les balises qui composent ll’’entête du documententête du document

<BODY> </BODY> - contient l<BODY> </BODY> - contient l’’ensemble des contenus des ensemble des contenus des balises qui composent le corps dbalises qui composent le corps d’’un documentun document

<TITLE> </TITLE> donne un titre descriptif d<TITLE> </TITLE> donne un titre descriptif d’’un document, sun document, s’’affiche dans la barre de navigateuraffiche dans la barre de navigateur

<STYLE> </STYLE> - spécifie les propriétés du style <STYLE> </STYLE> - spécifie les propriétés du style relatives au documentrelatives au document

……....

7

Exemple des Balises de Exemple des Balises de structure(1)structure(1)

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr">



<style type = "text/css"><style type = "text/css">

body { font-family: Helvetica; color: black;font-size: 16px}body { font-family: Helvetica; color: black;font-size: 16px}

h2 {font-family: Arial; color: blue;font-size: 22px}h2 {font-family: Arial; color: blue;font-size: 22px}


</style></style>

<head><head>

<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/><meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/>

<meta name="auteur" content="Mme Benois-Pineau"/><meta name="auteur" content="Mme Benois-Pineau"/>

<meta name="Mots-clés" content="Rappel,html,pages statiques"/><meta name="Mots-clés" content="Rappel,html,pages statiques"/>

<title>Facture</title><title>Facture</title>

</head></head>

8

Exemple des Balises de Exemple des Balises de structure(2)structure(2)

<body><body><h2>Définition d'une facture</h2><h2>Définition d'une facture</h2>

<ol type "i" compact><ol type "i" compact>

<li><h3>Définition d'une ligne</h3></li><li><h3>Définition d'une ligne</h3></li>

<ol type"i" compact><ol type"i" compact>

<li>Numéro de l'item</li><li>Numéro de l'item</li>

<li>Référence de l'item</li><li>Référence de l'item</li>

<li>Désignation</li><li>Désignation</li>

<li>Qté item</li><li>Qté item</li>

<li>Prix Unitaire</li><li>Prix Unitaire</li>

</ol></ol>

<li><h3>Totaux</h3></li><li><h3>Totaux</h3></li>

<ol type "i" compact><ol type "i" compact>

<li>Total HT</li><li>Total HT</li>

<li>Taux de TVA %</li><li>Taux de TVA %</li>

<li>TVA</><li>TVA</>

<li>Total TTC</li><li>Total TTC</li>

</ol></ol>

</ol></ol>

</body></body>

</html></html>

Exemple « Balises de structure »Exemple « Balises de structure »

9

Premier exemple HTML – plus complexePremier exemple HTML – plus complexe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr">



<style type = "text/css"><style type = "text/css"> body { font-family: Helvetica} body { font-family: Helvetica}

h2 {font-family: Arial; color: blue;font-size: 22px} h3 {font-family: Arial; color: blue;font-size: 16px} .reponse h2 {font-family: Arial; color: blue;font-size: 22px} h3 {font-family: Arial; color: blue;font-size: 16px} .reponse { color:red; font-weight: bold; } { color:red; font-weight: bold; }

</style> </style>

<head> <head>

<meta<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1" http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> />

<title>TD1</title> <title>TD1</title>

</head></head>

<body> <body>

<h2>Premier exemple HTML complété </h2> <h2>Premier exemple HTML complété </h2>

<a href="#installation">Installer et configurer Tomcat</a> <br></br> <a href="#installation">Installer et configurer Tomcat</a> <br></br>

<a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a> <h3>En <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a> <h3>En guise d'introduction</h3> guise d'introduction</h3> <<br>Dans cet exemple nous essayons de montrer quelques fonctionnalités simples </br> br>Dans cet exemple nous essayons de montrer quelques fonctionnalités simples </br>

<a name="installation"></a> <a name="installation"></a>

<h3>Ne rien faire pour le moment</h3> <h3>Ne rien faire pour le moment</h3>

<a name="td1"> <h3> Une page statique </h3></a> <a name="td1"> <h3> Une page statique </h3></a>

</body></body> </html> </html>

10

Premier ExemplePremier Exemple

ExHTML1.htmlExHTML1.html

11

Balises de formatage(2) Balises de formatage(2)

2.2. Balises de formatageBalises de formatage

« Mélange du contenu et du style : « du fond et de la « Mélange du contenu et du style : « du fond et de la forme »forme »

<B> texte </B>, - texte en gras <B> texte </B>, - texte en gras

<font> texte <font>, <font> texte <font>,

<BR>…</BR> - saut de ligne<BR>…</BR> - saut de ligne

<HR></HR> - insertion d<HR></HR> - insertion d’’une ligne horizontaleune ligne horizontale

Utiliser les feuilles de style CSS! Utiliser les feuilles de style CSS!

……..

12

Exemple 2Exemple 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<--exemple 2 avec les elements de formattage en plus----/><--exemple 2 avec les elements de formattage en plus----/><style type = "text/css"><style type = "text/css">

body { font-family: Helvetica}body { font-family: Helvetica}



.reponse { color:red; font-weight: bold; }.reponse { color:red; font-weight: bold; }

</style> </style>

<head><head><meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/><meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/>

<title>TD1</title><title>TD1</title>

</head></head>

<body><body>

<h2>Deuxième exemple HTML</h2><h2>Deuxième exemple HTML</h2>

<font size=7 color="red" face="Helvetica"><font size=7 color="red" face="Helvetica">

Quelques formatages locaux desapprouvés par W3CQuelques formatages locaux desapprouvés par W3C

</font></font><a href="#installation">Installer et configurer Tomcat</a><br></br><a href="#installation">Installer et configurer Tomcat</a><br></br>

<a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a><a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a>

<hr></hr><hr></hr><a name="installation"></a><a name="installation"></a>

<h3>Ne rien faire pour le moment</h3><h3>Ne rien faire pour le moment</h3>

<a name="td1"> <h3> Une page statique </h3></a><a name="td1"> <h3> Une page statique </h3></a>

</body></body>

</html></html>

13

Exemple 2Exemple 2


14

Balises pour formatage Balises pour formatage locallocal

Balise div : signifie « division » ou partie dBalise div : signifie « division » ou partie d’’une une page, page, <html><html>

<body><body><h3>This is a header</h3><h3>This is a header</h3>

<p>This is a paragraph.</p><p>This is a paragraph.</p>

<div style="color:#00FF00"><div style="color:#00FF00">

<h3>This is a header</h3><h3>This is a header</h3>

<p>This is a paragraph.</p><p>This is a paragraph.</p></div></div>

</body></body>

</html></html>

Exemple div Exemple div

15

Balises de liste (3)Balises de liste (3)

HTML4 : Listes de définitions, listes numérotées, HTML4 : Listes de définitions, listes numérotées, listes à puces, compatibilité HTML3.2listes à puces, compatibilité HTML3.2

<li type= « type de liste » start=« valeur <li type= « type de liste » start=« valeur initiale » compact value=3>texte</li>initiale » compact value=3>texte</li>

OL – listes numérotées, - OL – listes numérotées, - 

<ol type=i/a/… start=« valeur initiale » <ol type=i/a/… start=« valeur initiale » compact/> compact/>

UL – listes avec les pucesUL – listes avec les puces

<ul type=« disc »/ « square »/ « circle » <ul type=« disc »/ « square »/ « circle » compact/>compact/>

16

Exemple 3Exemple 3

…………..

<body><body>

<h2>Troisième exemple HTML</h2><h2>Troisième exemple HTML</h2>

<li type="i" start= 3 value=4>nous commensons</li><li type="i" start= 3 value=4>nous commensons</li>

attributs sont sans effetattributs sont sans effet

<ol type ="a" compact><ol type ="a" compact>

<li> action1 </li><li> action1 </li>


</ol></ol>


<li> <a href="#installation">Installer et configurer Tomcat</a></li><li> <a href="#installation">Installer et configurer Tomcat</a></li>

<li> <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a></li><li> <a href="#td1">Réaliser une page html avec quelques contrôles Javascript</a></li>

</ol></ol>

<ol type="a" compact start= 3><ol type="a" compact start= 3>


<li>action4</li><li>action4</li>

</ol></ol>

<ul type=disc compact><ul type=disc compact>

<li> Les actions sont à specifier</li><li> Les actions sont à specifier</li>

</ul></ul>

<hr></hr><hr></hr>

<a name="installation"></a><a name="installation"></a>


<a name="td1"><a name="td1">

<h3> Une page statique </h3></a><h3> Une page statique </h3></a>

</body></body>

</html></html>

17

Exemple 3Exemple 3


18

Balises dBalises d’’hyperliens(4)hyperliens(4)

<a> <a>

Deux fonctions : Deux fonctions :

1. associée à l1. associée à l’’attribut HREF définit un hyperlienattribut HREF définit un hyperlien

2. associée à l2. associée à l’’attribut « name » définit un ancre attribut « name » définit un ancre à là l’’intérieur du document intérieur du document

- possibilité de naviguer dans des documents - possibilité de naviguer dans des documents volumineux volumineux

19

Exemple 4 Exemple 4

……....

<body><body>

<a name = "sommaire"></a><a name = "sommaire"></a>

<h2>Balises des hyperliens HTML</h2><h2>Balises des hyperliens HTML</h2>


<li> <li> <a href="#installation">Installer et configurer Tomcat</a><a href="#installation">Installer et configurer Tomcat</a></li></li>

<li> <li> <a href="#Page">Réaliser une page html avec quelques contrôles Javascript</a><a href="#Page">Réaliser une page html avec quelques contrôles Javascript</a></li></li>

</ol></ol>

<hr></hr><hr></hr>

<font size=1 color= blue face = Arial><font size=1 color= blue face = Arial>

ttttttttttttttttt<br>ttttttttttttttttt<br>

ttttttttttttttt<br>ttttttttttttttt<br>……....

</font></font>

<hr></hr><hr></hr>

<a name="installation"></a><a name="installation"></a>


<a href=#sommaire> Retour </a> <br></br><a href=#sommaire> Retour </a> <br></br>

<font size=1 color= green face = Arial><font size=1 color= green face = Arial>

aaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaa<br>

aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>

…………

</font></font>

<a name=« Page"><a name=« Page">

<h3> Une page statique </h3></a><h3> Une page statique </h3></a>

</body></body>

</html></html>

20

Exemple 4Exemple 4


21

Balises de tableaux (6)Balises de tableaux (6)

<table align=« left/center/right » <table align=« left/center/right » border=« épasseur » bgcolor=« couleur »border=« épasseur » bgcolor=« couleur »

Width=« largeur en %de fenêtre/pels» Width=« largeur en %de fenêtre/pels» cols=« nombre de colonnes »cols=« nombre de colonnes »

……</table></table>

Balises corrélativesBalises corrélatives

<caption>,<thead>, <caption>,<thead>, <tfoot>,<tbody>,<colgroup>,<col>,<tr>,<th,<tfoot>,<tbody>,<colgroup>,<col>,<tr>,<th,<td><td>

22

Balises de tableaux(6)Balises de tableaux(6)

<colgroup> : permet de définir des propriétés <colgroup> : permet de définir des propriétés communes à un gourpe de colonnescommunes à un gourpe de colonnes

<colgroup span=3 align=« center » <colgroup span=3 align=« center » valign=« top »>valign=« top »>

</colgroup></colgroup> <tr> </tr> définit une ligne de tableau<tr> </tr> définit une ligne de tableau <td> </td> définit une cellule à l<td> </td> définit une cellule à l’’interieur de trinterieur de tr <th> </th> de même<th> </th> de même Attribut importan :colspan Attribut importan :colspan <tr align= « left » colspan=3>….</tr><tr align= « left » colspan=3>….</tr>

23

Exemple 5Exemple 5

…….. <body><body> <h2>Tableau de HTML</h2><h2>Tableau de HTML</h2> <table border 1><table border 1> <tbody><tbody>

<tr><tr> <td align="center">Première colonne du premier groupe : centrée </td><td align="center">Première colonne du premier groupe : centrée </td> <td align="right">Seconde colonne du premier groupe : alignée à droite</td><td align="right">Seconde colonne du premier groupe : alignée à droite</td> <td align="center">premiere colonne du second groupe : centrée</td><td align="center">premiere colonne du second groupe : centrée</td> <td align="center">seconde colonne du second groupe : centrée</td><td align="center">seconde colonne du second groupe : centrée</td> </tr></tr> <tr><tr> <td align="center">1.1</td><td align="center">1.1</td> <td align="right">1.2</td><td align="right">1.2</td> <td align="center">2.1</td><td align="center">2.1</td> <td align="center">2.2</td><td align="center">2.2</td> </tr></tr> </tbody></tbody> </table></table> </body></body> </html></html>

24

Exemple 5Exemple 5


25

Balises de formulairesBalises de formulaires

Balise <form>Balise <form>

Elle regrouppe les éléments du formulaire : Elle regrouppe les éléments du formulaire : boutons, champs de saisie, etc..boutons, champs de saisie, etc..

Elle possède les attributs: method, Elle possède les attributs: method, action,enctype, name, accept, onsubmit,onreset, action,enctype, name, accept, onsubmit,onreset, accept-charset accept-charset

Attribut Attribut methodmethod – indique comment sont – indique comment sont envoyées les données: POST ou GETenvoyées les données: POST ou GET

Analyse conjointe avec JavascriptAnalyse conjointe avec Javascript

26

Javascript(1)Javascript(1)

Contenu executable : <script>Contenu executable : <script> Pourquoi un script : ajout des actions aux pages Pourquoi un script : ajout des actions aux pages

web statiquesweb statiques Un script sUn script s’’exécute coté client exécute coté client Javascript apporte un ensemble assez complet Javascript apporte un ensemble assez complet

de « fonction set » de commandes intégrées, de « fonction set » de commandes intégrées, permettant dpermettant d’’effectuer des calculs, de manipuler effectuer des calculs, de manipuler les chaînes de caractères, dles chaînes de caractères, d’’emmètre des sons, emmètre des sons, dd ’’ouvrir des nouvelles fenêtres et URL, douvrir des nouvelles fenêtres et URL, d’’accéder accéder aux informations fournies par laux informations fournies par l’’utilisateur dans utilisateur dans un formulaire HTML et de les vérifier.un formulaire HTML et de les vérifier.

27

Javascript(2) Javascript(2)

Incorporation dans les documents HTMLIncorporation dans les documents HTML <SCRIPT><SCRIPT> …….... </SCRIPT></SCRIPT> La balise <SCRIPT> prend lLa balise <SCRIPT> prend l’’attribut attribut

« LANGUAGE »« LANGUAGE » <SCRIPT LANGUAGE=« JavaScript »></SCRIPT><SCRIPT LANGUAGE=« JavaScript »></SCRIPT> <SCRIPT LANGUAGE="JavaScript" <SCRIPT LANGUAGE="JavaScript"

SRC="fichierSource.js"></SCRIPT> - fichier à SRC="fichierSource.js"></SCRIPT> - fichier à partpart

28

Javascript (3)Javascript (3)

Fonctions et objets Fonctions et objets Javascript est un langage –objet dérivé de Java Javascript est un langage –objet dérivé de Java Un objet est ensemble des données et de méthodes. Un objet est ensemble des données et de méthodes. Javascript opère les objets des navigateurs Web Javascript opère les objets des navigateurs Web et possède ses propres objets. et possède ses propres objets. Exemple : Exemple : <form action="" class="cadre" name="formulaire1"> <form action="" class="cadre" name="formulaire1"> (<a href="#" onClick="document.formulaire1.reset();">Nettoyer</a>)(<a href="#" onClick="document.formulaire1.reset();">Nettoyer</a>)

-objet form de HTML, méthode reset;-objet form de HTML, méthode reset; -objet document de HTML – indique le document actif.-objet document de HTML – indique le document actif. -objet « link » = balise a+attribut href -objet « link » = balise a+attribut href

29

Objets HTML et JavascriptObjets HTML et Javascript

Javascript accède aux objets prédéfinis de HTMLJavascript accède aux objets prédéfinis de HTML

DocumentDocument

FormForm

AppletApplet

ArgumentArgument

HistoryHistory

ImageImage

LinkLink

OptionOption

Plugin…Plugin…

30

Objets HTML : propriétés, Objets HTML : propriétés, méthodes, événementsméthodes, événements

Pour chaque objet sont définisPour chaque objet sont définis

(1) Propriétés (attrs)(1) Propriétés (attrs)

(2) Méthodes(2) Méthodes

(3) Evénements(3) Evénements

Exemple : objet InputExemple : objet Input

Propriétés : name, value, defaultValuePropriétés : name, value, defaultValue

Méthodes : focus(), blur(), select(), submit()Méthodes : focus(), blur(), select(), submit()

31

Exemple(1)Exemple(1)

Source .htmlSource .html

Source .jsSource .js //Initialisation des tableaux contenant les comptes et leur libelle//Initialisation des tableaux contenant les comptes et leur libelle personnes = new Array();personnes = new Array(); libelleComptes = new Array();libelleComptes = new Array(); nbPersonnes= 0;nbPersonnes= 0;

//Initialisation du tableau des erreurs//Initialisation du tableau des erreurs tableauErreurs = new Array(tableauErreurs = new Array( /* 0 *//* 0 */ 'Le nom doit être renseigné','Le nom doit être renseigné', /* 1 *//* 1 */ 'Le prénom doit être renseigné','Le prénom doit être renseigné', /* 2 *//* 2 */ 'L\'année de naissance doit être renseignée','L\'année de naissance doit être renseignée', /* 3 *//* 3 */ 'L\'année de naissance ne doit comporter que 'L\'année de naissance ne doit comporter que

des chiffres'des chiffres' ););

// Affiche le message de l erreur dont le numero est passe en argument// Affiche le message de l erreur dont le numero est passe en argument function afficheErreur(numeroErreur)function afficheErreur(numeroErreur) {{ alert(tableauErreurs[numeroErreur]);alert(tableauErreurs[numeroErreur]);

}}

32

Exemple (2):JavascriptExemple (2):Javascript

//Ajout d'une personne//Ajout d'une personne

function ajout()function ajout()

{{ nom = document.formulaire1.nom.value;nom = document.formulaire1.nom.value;

if (nom.length != 0)if (nom.length != 0)

{ prenom=document.formulaire1.prenom.value;{ prenom=document.formulaire1.prenom.value;

if (prenom.length != 0)if (prenom.length != 0)

{{

anneeNaissance=document.formulaire1.annee.value;anneeNaissance=document.formulaire1.annee.value;

if (anneeNaissance.length != 0)if (anneeNaissance.length != 0)

{{

if ( isNaN(anneeNaissance) == false )if ( isNaN(anneeNaissance) == false )

{{

personnes[nbPersonnes]=nom;personnes[nbPersonnes]=nom;

nbPersonnes ++;nbPersonnes ++;

affiche_personne(); }affiche_personne(); }

elseelse

{{

document.formulaire1.annee.value="";document.formulaire1.annee.value="";

afficheErreur(3);afficheErreur(3);

}}

}}

elseelse

{{

afficheErreur(2);afficheErreur(2);

}}

}}

elseelse

{ afficheErreur(1); }{ afficheErreur(1); }

}}

elseelse

{ afficheErreur(0); }{ afficheErreur(0); }

}}

33

Exemple 3: JavascriptExemple 3: Javascript//Affichage des personnes//Affichage des personnes

function affiche_personne()function affiche_personne()

{ {

texte="";texte="";

for(i=0;i<nbPersonnes;i++)for(i=0;i<nbPersonnes;i++)

{{

//Ajout d une nouvelle ligne dans le texte//Ajout d une nouvelle ligne dans le texte

texte += personnes[i]+"\n";texte += personnes[i]+"\n";

}}

//Affichage du texte//Affichage du texte

document.formulaire1.listePersonnes.value=texte;document.formulaire1.listePersonnes.value=texte;

}}

/****************************************************************/****************************************************************

//Verification du code postal//Verification du code postal

//code retour://code retour:

//// 0 : OK0 : OK

//// 3 : presence de lettres dans le code postal3 : presence de lettres dans le code postal

//// 4 : le code postal fait moins de 5 chiffres4 : le code postal fait moins de 5 chiffres

function verification_code_postal()function verification_code_postal()

{ retour = 0;{ retour = 0;

valeur =document.formulaire1.code.value;valeur =document.formulaire1.code.value;

if ( valeur.length != 5 )if ( valeur.length != 5 )

{{

document.formulaire1.code.value="";document.formulaire1.code.value="";

retour = 4;retour = 4;

}}

if ( isNaN(valeur) == true )if ( isNaN(valeur) == true )

{{

document.formulaire1.code.value="";document.formulaire1.code.value="";

retour = 3;retour = 3;

}}

afficheErreur(retour);afficheErreur(retour);

return retour;return retour;

}}

34

Balise des cadresBalise des cadres

La balise <frame> sert à afficher une page htmlLa balise <frame> sert à afficher une page html

à là l’’intérieur dintérieur d’’une autre page htmlune autre page html

<frame src=« mapage.html »><frame src=« mapage.html »>

La configuration de la page courante est effectuée à lLa configuration de la page courante est effectuée à l’’aide de aide de la balise framesetla balise frameset

<frameset cols=« 33%,33%,33% »><frameset cols=« 33%,33%,33% »>

<frameset rows=« 200 »><frameset rows=« 200 »>

<frame src=« mapage.html »/><frame src=« mapage.html »/>

</frameset></frameset>

</frameset></frameset>

35

FEUILLES DU STYLE CSSFEUILLES DU STYLE CSS

Comment modifier dynamiquement l’aspect du Comment modifier dynamiquement l’aspect du document HTML? document HTML?

solutions : CSSsolutions : CSS

CSS : Cascading Style Sheet le standard adopté CSS : Cascading Style Sheet le standard adopté par W3Cpar W3C

36

Principes de CSSPrincipes de CSS

Une Feuille de style CSS = liste de règles, Une Feuille de style CSS = liste de règles, chacune indiquant les noms des éléments chacune indiquant les noms des éléments auquelles elles s’appliquent et les paramètres de auquelles elles s’appliquent et les paramètres de style qui doivent être utilisés. style qui doivent être utilisés.

37

Syntaxe 1/2Syntaxe 1/2

La syntaxe de base doit respecter le modèle :La syntaxe de base doit respecter le modèle :element { propriété: valeur }element { propriété: valeur }body {color: blue}body {color: blue}p {font-family: arial}p {font-family: arial}

Il est possible de grouper les éléments lors dIl est possible de grouper les éléments lors d’’une définitionune définitionh1, h2, h3 {color:green }h1, h2, h3 {color:green }

La définition de classe permet dLa définition de classe permet d’’affiner un élémentaffiner un élémentelement.classe {propriété: valeur }element.classe {propriété: valeur }p.droit {text-align: right}p.droit {text-align: right}

Il ne peut y avoir quIl ne peut y avoir qu’’une classe par élément HTMLune classe par élément HTML Dans la cas ou lDans la cas ou l’’on ne précise pas lon ne précise pas l’’élément de base de la élément de base de la

classe celle-ci sclasse celle-ci s’’applique à tous les éléments HTMLapplique à tous les éléments HTML

38

Balises de formattage des Balises de formattage des pagespages

Balise div : definit « division », partie dBalise div : definit « division », partie d’’un document html à utiliser avec des styles un document html à utiliser avec des styles particuliers. particuliers.

Ex ( W3Schools)Ex ( W3Schools)

<html><html>

<body><body>



<div style="color:#00FF00"><div style="color:#00FF00">



</div></div>

</body></body>

</html></html>

39

Syntaxe 2/2Syntaxe 2/2

Il est possible de spécifier des règles ne Il est possible de spécifier des règles ne ss’’appliquant quappliquant qu’’à un seul élément en utilisant à un seul élément en utilisant son id.son id.

Le style peut sLe style peut s’’appliquer sur un élément appliquer sur un élément

element#id { propriété: valeur }element#id { propriété: valeur }

p#par1 {font-family: arial}p#par1 {font-family: arial}

Ou sur le premier id trouvéOu sur le premier id trouvé

*#id { propriété: valeur }*#id { propriété: valeur }

*#par1 {font-family: arial}*#par1 {font-family: arial}

40

Utilisation 1/2Utilisation 1/2

Les styles peuvent être définis: Les styles peuvent être définis:

1.1. Dans un fichier à part, lié à lDans un fichier à part, lié à l’’aide de laide de l’’instructioninstruction<head><link rel="stylesheet" type="text/css"

href="<fichier.css>"/></head>

2.2. Directement dans le fichier HTMLDirectement dans le fichier HTML<head><style type="text/css">P {color: blue}</style></head>

41

Exemple de HTML/CSSExemple de HTML/CSS

Fichier HTMLFichier HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tansitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <head><head> <link rel="StyleSheet" href="styleEx7.css" type="text/css" media="screen"/> <link rel="StyleSheet" href="styleEx7.css" type="text/css" media="screen"/> - balise de structure <link>- balise de structure <link> <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/><meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1"/> <title>ExCSS</title><title>ExCSS</title> </head></head>

<body><body> <h2>Definition des chansons</h2><h2>Definition des chansons</h2> <dd> Ma chanson (identification de la définition d'un terme)<dd> Ma chanson (identification de la définition d'un terme)

<ul> <ul> <li> par l'auteur</li><li> par l'auteur</li> <li> Producteur : Dupond</li><li> Producteur : Dupond</li> <li> Editeur : Maison edition</li><li> Editeur : Maison edition</li> <li> Duree : 6:20</li><li> Duree : 6:20</li> <li> Date : 1978</li><li> Date : 1978</li> <li> Artiste : Toto</li><li> Artiste : Toto</li> </ul></ul>

</body></body> </html></html> ExHTML7_CSS.htmlExHTML7_CSS.html

Attribut rel Specifie la relation entre les fichiers

42

Feuille de styleFeuille de style

Fichier .cssFichier .css

body { font-family: Helvetica}body { font-family: Helvetica}



li {font-family:Arial; color:green;fontsize: 14px}li {font-family:Arial; color:green;fontsize: 14px}

43

Utilisation 2/2Utilisation 2/2

3.3. Directement dans la définition de lDirectement dans la définition de l’’élémentélément

<p style="color : red;text-align: right">

La valeur réelle du style est l’union de toutes les définitions.

De plus une notion d’héritage existe ainsi la définition de body impacte les paragraphes

44

PrioritéPriorité

Il existe des priorités dans lIl existe des priorités dans l’’ordre de présence des stylesordre de présence des styles

– Les styles définis dans un élément HTML sont les plus Les styles définis dans un élément HTML sont les plus prioritairesprioritaires

– Ensuite viennent les éléments définis dans le Ensuite viennent les éléments définis dans le headhead du du fichierfichier

– Ensuite viennent les éléments définis dans une feuille Ensuite viennent les éléments définis dans une feuille de style externede style externe

– Ensuite viennent les styles par défaut du navigateursEnsuite viennent les styles par défaut du navigateurs

45

Pratique avancées 2/3Pratique avancées 2/3

Les pseudos classes :Les pseudos classes :

– Ce sont des classes prédéfinies ( active, hover, Ce sont des classes prédéfinies ( active, hover, link, visited, :first-child, :lang)/link, visited, :first-child, :lang)/

Element:pseudo-classe { propriété: valeur }a:link {color: #FF0000 }a:visited { color:#FFFF00 }

– Les pseudos classes se combinent avec les classesLes pseudos classes se combinent avec les classes

element.classe:pseudo-classe a.red:visited { color: #FFFFFF }

46

RéférencesRéférences

http://www.w3c.org/Style/CSShttp://www.w3c.org/Style/CSS

http://www.w3schools.com/csshttp://www.w3schools.com/css

http://www.websitetips.com/css/index.htmlhttp://www.websitetips.com/css/index.html

1 Introduction aux Web Services Partie 1. Technologies XML Cours 1.1 : Rappel HTML Janvier 2013.

Documents

Transcript of 1 Introduction aux Web Services Partie 1. Technologies XML Cours 1.1 : Rappel HTML Janvier 2013.