1 Les technologies XML Cours 1.1 : Rappel HTML Janvier 2009

1

Les technologies XMLLes technologies XML

Cours 1.1 : Cours 1.1 : Rappel HTMLRappel HTML

Janvier 2009 Janvier 2009

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 XMLXqueryXMIXUL

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 d’applications de XML9 : Exemples d’applications 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’être exhaustif et ne donne que des éléments *Ce rappel est loin d’ê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 l’entête du documentl’entête du document

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

<TITLE> </TITLE> donne un titre descriptif d’un document, <TITLE> </TITLE> donne un titre descriptif d’un document, s’affiche dans la barre de navigateurs’affiche 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’une ligne horizontale<HR></HR> - insertion d’une 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">


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

15

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>

16

Exemple 3Exemple 3


17

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

<a> <a>

Deux fonctions : Deux fonctions :

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

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

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

18

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>

19

Exemple 4Exemple 4


20

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>

21

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’interieur de tr<td> </td> définit une cellule à l’interieur 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>

22

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>



</tr></tr>

</tbody></tbody>

</table></table>

</body></body>

</html></html>

23

Exemple 5Exemple 5


24

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

25

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 s’exécute coté client Un script s’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 d’effectuer des calculs, de manipuler permettant d’effectuer des calculs, de manipuler les chaînes de caractères, d’emmètre des sons, les chaînes de caractères, d’emmètre des sons, d’ouvrir des nouvelles fenêtres et URL, d’accéder d’ouvrir des nouvelles fenêtres et URL, d’accéder aux informations fournies par l’utilisateur dans aux informations fournies par l’utilisateur dans un formulaire HTML et de les vérifier.un formulaire HTML et de les vérifier.

26

Javascript(2) Javascript(2)

Incorporation dans les documents HTMLIncorporation dans les documents HTML

<SCRIPT><SCRIPT>

……....

</SCRIPT></SCRIPT>

La balise <SCRIPT> prend l’attribut La balise <SCRIPT> prend l’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

27

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

28

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…

29

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()

30

Exemple(1)Exemple(1)

Source .htmlSource .html

Source .Source .jsjs

//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 des 'L\'année de naissance ne doit comporter que des chiffres'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]);

}}

31

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); }

}}

32

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;

}}

33

Balise des cadresBalise des cadres

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

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

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

La configuration de la page courante est effectuée à l’aide de La configuration de la page courante est effectuée à l’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>

34

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 standrad adopté CSS : Cascading Style Sheet le standrad adopté par W3Cpar W3C

35

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.

36

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 d’une définitionIl est possible de grouper les éléments lors d’une définitionh1, h2, h3 {color:green }h1, h2, h3 {color:green }

La définition de classe permet d’affiner un élémentLa définition de classe permet d’affiner 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 qu’une classe par élément HTMLIl ne peut y avoir qu’une classe par élément HTML

Dans la cas ou l’on ne précise pas l’élément de base de la Dans la cas ou l’on ne précise pas l’élément de base de la classe celle-ci s’applique à tous les éléments HTMLclasse celle-ci s’applique à tous les éléments HTML

37

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 s’appliquant qu’à un seul élément en utilisant s’appliquant qu’à un seul élément en utilisant son id.son id.

Le style peut s’appliquer sur un élément Le style peut s’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}

38

Utilisation 1/2Utilisation 1/2

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

1.1. Dans un fichier à part, lié à l’aide de l’instructionDans un fichier à part, lié à l’aide de l’instruction<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>

39

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


<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

40

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}

41

Utilisation 2/2Utilisation 2/2

3.3. Directement dans la définition de l’élémentDirectement dans la définition de l’é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

42

PrioritéPriorité

Il existe des priorités dans l’ordre de présence des stylesIl existe des priorités dans l’ordre 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

43

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 }

44

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

Documents

1 Les technologies XML Cours 1.1 : Rappel HTML Janvier 2009