1 Les technologies XML Cours 1.1 : Rappel HTML Janvier 2009

Les technologies XMLLes technologies XML

Cours 1.1 : Cours 1.1 : Rappel HTMLRappel HTML

Janvier 2009 Janvier 2009

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

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

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

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

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

……....

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

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>

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

</head></head>

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>

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

<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>Prix Unitaire</li><li>Prix Unitaire</li>

</ol></ol>

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

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

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

</ol></ol>

</body></body>

</html></html>

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

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

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>

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

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

Premier ExemplePremier Exemple

ExHTML1.htmlExHTML1.html

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!

……..

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>

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

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>

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

Exemple 2Exemple 2

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

Exemple 3Exemple 3

…………..

<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

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

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

</ol></ol>

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

</ul></ul>

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

</body></body>

</html></html>

Exemple 3Exemple 3

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

Exemple 4 Exemple 4

……....

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

ttttttttttttttttt<br>ttttttttttttttttt<br>

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

</font></font>

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

aaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaa<br>

aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>

…………

</font></font>

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

</body></body>

</html></html>

Exemple 4Exemple 4

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

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

Exemple 5Exemple 5

……..

<h2>Tableau de HTML</h2><h2>Tableau de HTML</h2>

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

</tbody></tbody>

</table></table>

</body></body>

</html></html>

Exemple 5Exemple 5

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

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.

Javascript(2) Javascript(2)

Incorporation dans les documents HTMLIncorporation dans les documents HTML

……....

</SCRIPT></SCRIPT>

La balise <SCRIPT> prend l’attribut La balise <SCRIPT> prend l’attribut « LANGUAGE »« LANGUAGE »

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

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 :

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

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…

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

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

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

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;

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

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

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

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.

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

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}

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>

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

<title>ExCSS</title><title>ExCSS</title>

</head></head>

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

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

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}

Utilisation 2/2Utilisation 2/2

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

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

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

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 }

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 Les technologies XML Cours 1.1 : Rappel HTML Janvier 2009

Documents

1 Introduction et Concepts : De SGML à XML 1. Origines et Objectifs 2. SGML et HTML 3. Introduction à XML 4. XML pour quoi faire ?

RECENSEMENT, GESTION ET DIAGNOSTIC D’EXPERTISE DE LA ...€¦ · • Trier, Exporter sous Excel, Word, PDF, HTML, XML, et Imprimer par PR les données routières (PR, Marquage,

Antidot Finder Suite est Une richesse fonctionnelle …...de réponse XML, JSON ou HTML. Les modules logiciels d’AFS ont été conçus pour tirer le meilleur parti des dernières

CPEHN - Site WebSite Web - HTML · 2016-11-25 · Ameliorations graphique – feuille de style, frame,… XML 1998 Extensible Marked Language CSS2 Mai 1998 HTML 4.01 Décembre 1999

XML Technologies - ksi.mff.cuni.czXML Technologies XML DB XML data XML Schema native relational XML DB parsing validation SAX DOM DTD RELAX NG Schematron StAX LINQ querying XPath XQuery

- Sciences.ch · XML n'a pas été conçu prioritairement pour la création de pages web et de ce fait, ne prend en aucun cas la relève de HTML (du moins pas dans

Django - Borer · 2010-04-25 · 6. Les templates Les templates ne contiennent aucun code exécutable (sécurité). N’utilisent pas seulement les formats XML et HTML, mais tous

Introduction à XML : principes, syntaxe, schémas et … · Structure générale d'un fichier XML.....21 6. Exemple de fichier XML - Le courriel ... XML en tant que méta-langage

Les comportements serveur XSLT… · Introduction au XML XML signifie eXtensible Markup Language. Comme le HTML, le XML est une norme SGML (Standard Generalized Markup Language),

COMPTA découpage Online - pc21.fr · Paramètre de sécurité Importer Format Sage ... Format XML Format paramétrable Exporter Format Ligne 100, 30, HTML... Format Sage (PNC, PNM,

Les « gauges xml » (en français jauges xml)

CSI 3525, XML, page 1 XML sources dinspiration: Erik T. Ray, "Learning XML", 1 st ed., OReilly Robert Eckstein with Michel Casabianca, "XML Pocket Reference",

Balises : du HTML au XML

XML Parseurs DotNet - ITFormationEtape 4: définir une méthode de rappel à appeler si une erreur de validation est détectée dans le document XML config.ValidationEventHandler +=

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

Curs 6 2011/2012rf-opto.etti.tuiasi.ro/docs/files/TW_6_2011.pdf · 2012-01-05 · bazat pe XML - Extensible Markup Language XHTML 1.0 –Ianuarie 2000 o reformulare a HTML 4.01 cu

XML et l - LORIA · Environnement XML : DOM, SAX, langages de requêtes Une approche modulaire exploitant du XML XML au cœur de l’intéropérabilité Questions et discussion. 3

XML - dossen.univ-brest.frdossen.univ-brest.fr/apl/data/_uploaded/file/Echange de donnees/XML... · XML n Echange de données n Syntaxe du XML n DTD n Java pour le XML n Lire avec

L'essentiel de XML - Cours XML

Origine et Concepts de base 1. Origines et Objectifs 2. SGML et HTML 3. Introduction à XML 4. XML pour quoi faire ?