Programmation de sites web statiques et dynamiques extended Markup Language () Jean CARTIER MASTER INI jcartier@laposte.net 1
extented Markup Language () Le HTML est un langage très bien adapté à la diffusion d'informations sur le réseau mais peu structuré, et pas extensible Nouveaux besoins pour le Web - commerce en ligne - adaptation du contenu aux nouveaux support - intégration du Web dans les SI des entreprises - échange de données : serveurs Web avec d'autres applications (SGBD, tableurs,...) - d'où en 1997 : définition par le W3C de (dérivé de SGML) 2
Principe Contenu.sgml Structure.dtd présentation.dssl SGML 1986 contenu information "brute" structure organisation du document contenu présentation +.html présentation.css HTML 1989 présentation rendu graphique contenu.xml structure.dtd présentation.xsl 1997 3
Notion Structure d'un document (.dtd) fondamentale C'est la définition - de l'ensemble des balises autorisées dans le contenu - de l'ordre dans lequel elles doivent être utilisées d'où le terme DTD (Document Type Definition) (termes équivalents : type de document, classe de document) Exemple Le document correspondant à une œuvre littéraire comporte - un nom d'auteur et plusieurs ouvrages - chaque ouvrage a un titre et s'étend éventuellement sur plusieurs tomes - chaque tome est divisé en chapitre - chaque chapitre a un titre et est divisé en paragraphes - chaque paragraphes comporte du texte 4
Document Déclaration version utilisée DTD utilisée pour ce document Corps du document <?xml version="1.0"?> <!DOCTYPE individu SYSTEM "individu.dtd" > <individu> <nom>cartier</nom> <prenom>jean</prenom> Balise <!DOCTYPE... > - individu : nom de la balise principale du document - SYSTEM PUBLIC : niveau de diffusion de la DTD (privé public) - "individu.dtd" : URL de la DTD <individu> <nom> <prenom> : les balises définies dans la DTD individu.dtd 5
Document Autre exemple : <?xml version="1.0" encoding="iso-8859-1"?> <film> <titre>x-men</titre> <acteurs> <personne>hugh Jackman</personne> <personne>patrick Stewart</personne> <personne>famke Janssen</personne> </acteurs> <realisateur>bryan Singer</realisateur> <annee>2000</annee> <texte>dans la lignée de Superman</texte> <note>4</note> <producteur>twentieth Century Fox</producteur> </film> 01.xml 6
Règles d'écriture des documents Document valide syntaxiquement - respecter la casse des balises <individu> différent de <INDIVIDU> - toujours clore une balise ouverte <nom>... </nom> - raccourci pour les balises "vides" <hr></hr> = <hr/> - valeur des attributs entre guillemets <individu id="123"> - ne pas entrelacer des ouvertures et fermetures de balises différentes <nom>... <prenom>... </nom>... </prenom> est interdit Document conforme à sa DTD - toutes les balises utilisées sont définies dans la DTD - elles sont utilisées dans l'ordre spécifié dans la DTD 7
DTD Possibilité d'écrire ses propres DTD ou de réutiliser celles existantes DTD HTML 4.0 donne XHTML (reformulation en de HTML 4.0) Concrètement aucune différence entre XHTML et HTML 4.0 (mêmes balises) Sauf - toutes les balises doivent être en minuscules - le document XHTML doit être valide - le document XHTML doit être conforme Autres DTD existantes - MathML : formules mathématiques - SVG : figures géométriques - CML : description de molécules - AML : format d'échanges de données astronomiques - SMIL : format desynchronisation de données multimédia - RSS : Syndication de contenu Il y en a de nombreuses autres existantes et à venir 8
Définition de DTD 1. Définition des balises autorisées <!ELEMENT... > 2. Définition de leurs attributs <!ATTLIST... > 3. Définition de constantes <!ENTITY... > La balise <!ELEMENT... > définit un identificateur de balise un type de balise <!ELEMENT nombalise typebalise > Types de base ( = type des données entre <nombalise> et </nombalise> ) - #PCDATA : du texte brut sans balise - ANY : du texte et/ou des balises - EMPTY : rien équivaut à balise "vide" ex. : <HR></HR> ou plus simplement <HR/> 9
Définition de DTD Types composés Enchaînement d'autres balises spécifiés à l'aide des opérateurs, séquence ( ) regroupement + répétition 1 ou n fois alternative? optionnelle * répétition 0 ou n fois Erreur en cas de non conformité d'une balise par rapport à son type Exemples <!ELEMENT individu ( nom, prenom ) > <!ELEMENT nom (#PCDATA) > <!ELEMENT prenom (#PCDATA) > <!ELEMENT livre (titre,auteur,sommaire?,chapitre+) > 10
Tests de conformité / à la DTD individu <individu> <nom>ochon</nom> Non conforme Il faut un nom et un prénom <!ELEMENT individu ( nom, prenom ) > <!ELEMENT nom (#PCDATA) > <!ELEMENT prenom (#PCDATA) > <!ELEMENT livre (titre,auteur,sommaire?,chapitre+) > <individu> <nom>ochon</nom> <prenom>paul</prenom> <prenom>pierre</prenom> Non conforme Il faut un seul prénom <!ELEMENT individu ( nom, prenom ) > <!ELEMENT nom (#PCDATA) > <!ELEMENT prenom (#PCDATA) > <!ELEMENT livre (titre,auteur,sommaire?,chapitre+) > <individu> <nom>ochon</nom> <prenom>paul</prenom> <age>15</age> <individu> <nom> Ochon <prenom>paul</prenom> </nom> Non conforme <!ELEMENT individu ( nom, prenom ) > <!ELEMENT nom (#PCDATA) > La <!ELEMENT balise prenom <age> (#PCDATA) n'est > pas <!ELEMENT livre (titre,auteur,sommaire?,chapitre+) > définie Non conforme <!ELEMENT individu (, prenom ) > <!ELEMENT La balise nom (#PCDATA) <nom> > ne doit <!ELEMENT prenom (#PCDATA) > <!ELEMENT livre (titre,auteur,sommaire?,chapitre+) > contenir que du texte brut pas de balises 11
Définition de DTD Définition des attributs des balises (définies avec <!ELEMENT... >) La balise <!ATTLIST... > définit un identificateur d'attribut un type d'attribut une valeur par défaut pour l'attribut ou une caractérisation de l'attri <!ATTLIST nombalise nomattribut typeattribut valeurpardefaut > ou <!ATTLIST nombalise nomattribut typeattribut caractérisation > 12
Types possibles pour un attribut ( = type des données entre nomattribut= Définition de DTD - CDATA : du texte - énumération : liste de valeurs légales séparées par - ID : une valeur unique pour cet attribut dans le doc. - IDREF : une valeur d' ID existante dans le doc. - IDREFS : une liste espacées d' IDREF - NMTOKEN : un mot clé (sans espace) - NMTOKENS : une liste espacées de NMTOKEN Erreur en cas de non conformité d'une valeur par rapport à son type 13
Définition de DTD Valeur par défaut : dans le cas d'une énumération Caractérisation d'un attribut - #REQUIRED : attribut obligatoire - #IMPLIED : attribut facultatif - #FIXED valeur : attribut à valeur fixe (ne pouvant être changée) Erreur en cas d'absence d'un attribut #REQUIRED ou de changement de valeur d'un attribut #FIXED Exemples <!ATTLIST individu nosecuritesociale ID #REQUIRED > <!ATTLIST individu situation (mineur majeur) "mineur" > <!ATTLIST nom nomdejeunefille CDATA #IMPLIED > 14
Tests de conformité / à une DTD <!ELEMENT graphe (noeud arc)* > <!ELEMENT noeud EMPTY > <!ELEMENT arc EMPTY > <!ATTLIST noeud numero ID #REQUIRED > <!ATTLIST arc source IDREF #REQUIRED > <!ATTLIST arc destin IDREF #REQUIRED > <graphe> <noeud> <noeud/> </graphe> <graphe> <noeud numero="12" /> <noeud numero="12" /> </graphe> <graphe> <noeud numero="12" /> <noeud numero="13" /> <arc source="12" destin="14" /> </graphe> Non conforme L'attribut numero est obligatoire Non conforme L'attribut numero n'est pas unique Non conforme L'attribut destin="14" ne fait pas référence à une valeur d' ID existan 15
DTD <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE film [ <!ELEMENT film (titre, acteurs, realisateur, annee, texte, note?, producteur?)> <!ELEMENT titre (#PCDATA)> <!ELEMENT realisateur (#PCDATA)> <!ELEMENT annee (#PCDATA)> <!ELEMENT note (#PCDATA)> <!ELEMENT acteur (personne+)> <!ELEMENT personne (#PCDATA)> <!ELEMENT texte ANY> ]> <film> <titre>x-men</titre> <acteurs> <personne>hugh Jackman</personne> <personne>patrick Stewart</personne> <personne>famke Janssen</personne> </acteurs> <realisateur>bryan Singer</realisateur> <annee>2000</annee> <texte>dans la lignée de Superman</texte> <note>4</note> <producteur>twentieth Century Fox</producteur> </film> Exemple de DTD interne 16
DTD <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE film SYSTEM "03.dtd"> <film> <titre>x-men</titre> <acteurs> <personne>hugh Jackman</personne> <personne>patrick Stewart</personne> <personne>famke Janssen</personne> </acteurs> <realisateur>bryan Singer</realisateur> <annee>2000</annee> <texte>dans la lignée de Superman</texte> <note>4</note> <producteur>twentieth Century Fox</producteur> </film> DTD externe <!ELEMENT film (titre, acteurs, realisateur, annee, texte, note?, producteur?)> <!ELEMENT titre (#PCDATA)> <!ELEMENT realisateur (#PCDATA)> <!ELEMENT annee (#PCDATA)> <!ELEMENT note (#PCDATA)> <!ELEMENT acteur (personne+)> <!ELEMENT personne (#PCDATA)> <!ELEMENT texte ANY> 17
Document Encodage caractères spéciaux < < > > & & Commentaires <!--... --> <!-- Ceci est un commentaire et sera ignoré --> <!-- moins moins inférieur --> --> <!-- moins moins inférieur --> --> non oui Sections de données brutes à ne pas interpréter <![CDATA[... ]]> <![CDATA[ Ici <nom> n'est pas une balise: c'est du texte ]]> <![CDATA[ crochet crochet supérieur ]]> ]]> non <![CDATA[ crochet crochet supérieur ]]> ]]> oui 18
Autres possibilités Schema DTD pour la définition de DTD. Les DTD sont définies comme des Avantages - 1 seul et même langage pour les docs et la définition de leurs DTD (plus de balises <!ELEMENT >, <!ATTLIST >, <!ENTITY >,...) - les types de données de base utilisables dans les DTD (#PCDATA, ANY, E ont été enrichis (entier, réel, chaîne, date, liste,...) NameSpaces (Espaces de nommage) Utilisation des balises provenant de +sieurs DTD dans un doc. Déclaration - attribut réservé xmlns fournissant un nom et l'url de sa DTD associée - peut être ajouté à n'importe quelle balise (en général, la 1ère du docume - peut être utilisé plusieurs fois <balise xmlns:nomdespace="url associée"... > <html xmlns:m="http://www.w3.org/1998/math/mathml" xmlns:s="http://www.w3.org/2000/svg" > <s:svg width="2cm" height="0.6cm"> 19
Affichage d'un document 1ère solution : Internet Explorer 5 normal : aucune présentation n'est définie 20
Affichage d'un document 2ème solution : Internet Explorer 5 + feuille de style CSS titre { display: block; } personne { display: block; font-family: Arial; font-size: 14pt; font-weight: bold; color: red; } realisateur { display: block; font-style: italic; color: blue; } annee { display: block; } texte { display: block; font-style: bold; color: blue; } note { display: block; font-style: italic; color: blue; } producteur { display: block; font-style: italic; color: blue; } 04.css <?xml version="1.0"?> <?xml-stylesheet href="04.css" type="text/css"?> 04.xml Solution provisoire et limitée par les capacités de CSS 21
Affichage d'un document : extensible Stylesheet Language (X Principe du XSLT Règles de pattern matching sur un document règle = balise + actions <xsl:template match="une balise à détecter"> action à entreprendre lorsque la balise est rencontrée Algorithme pour toutes les règles pour les toutes les balises identiques à celle de la règle appliquer les actions de la règle sur le sous-arbre de la balise Remarque : Plus généralement la balise est une expression Xpath 22
Actions Les actions peuvent contenir - des balises à générer - des commandes XSLT Principales commandes XSLT <xsl:value-of select="expression de chemin" /> sélectionne le noeud correspondant à l'expression de chemin XPath dans le sous-arbre de la balise <xsl:apply-templates /> réexamine les règles avec le sous-arbre de la balise 23
Exemple XSLT <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/wd-xsl"> <xsl:template match="/"> <h1>le 1er nom est <xsl:value-of select="promotion/individu/nom" /> </h1> </xsl:stylesheet> 05.xsl <?xml version="1.0"?> <?xml-stylesheet href="05.xsl" type="text/xsl"?> <promotion> <individu nosecuritesociale="271"> <nom>cartier</nom> <prenom>jean</prenom> <individu nosecuritesociale="171"> <nom>ochon</nom> <prenom>paul</prenom> </promotion> 05.xml 24
Exemple XSLT Résultat 25
2eme exemple XSLT <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/wd-xsl"> <xsl:template match="/"> <html><body> <xsl:apply-templates/> </body></html> <xsl:template match="promotion"> <table border="1"> <xsl:apply-templates/> </table> <xsl:template match="individu"> <tr> <xsl:apply-templates/> </tr> <xsl:template match="nom"> <td> <xsl:value-of select="."/> </td> <xsl:template match="prenom"> <td> <xsl:value-of select="."/> </td> </xsl:stylesheet> 06.xsl 26
2eme exemple XSLT + 06.xsl <?xml version="1.0"?> <?xml-stylesheet href="06.xsl" type="text/xsl"?> <promotion> <individu nosecuritesociale="271"> <nom>cartier</nom> <prenom>jean</prenom> <individu nosecuritesociale="171"> <nom>ochon</nom> <prenom>paul</prenom> </promotion> 06.xml Résultat 27
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/wd-xsl"> <xsl:template match="/"> <html><body> <xsl:apply-templates/> </body></html> <xsl:template match="promotion"> <table border="1"> <xsl:apply-templates/> </table> <xsl:template match="individu"> <tr> <xsl:apply-templates/> </tr> <xsl:template match="nom"> <td> <xsl:value-of select="."/> </td> <xsl:template match="prenom"> <td> <xsl:value-of select="."/> </td> </xsl:stylesheet> <xsl:template match="/"> <html><body> </body></html> <?xml version="1.0"?> <?xml-stylesheet href="06.xsl" type="text/xsl"?> <promotion> <individu nosecuritesociale="271"> <nom>cartier</nom> <prenom>jean</prenom> <individu nosecuritesociale="171"> <nom>ochon</nom> <prenom>paul</prenom> </promotion> 28
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/wd-xsl"> <xsl:template match="/"> <html><body> <xsl:apply-templates/> </body></html> <xsl:template match="promotion"> <table border="1"> <xsl:apply-templates/> </table> <xsl:template match="individu"> <tr> <xsl:apply-templates/> </tr> <xsl:template match="nom"> <td> <xsl:value-of select="."/> </td> <xsl:template match="prenom"> <td> <xsl:value-of select="."/> </td> </xsl:stylesheet> <xsl:template match="promotion"> <html><body> <table border=1> </table> </body></html> <?xml version="1.0"?> <?xml-stylesheet href="06.xsl" type="text/xsl"?> <promotion> <individu nosecuritesociale="271"> <nom>cartier</nom> <prenom>jean</prenom> <individu nosecuritesociale="171"> <nom>ochon</nom> <prenom>paul</prenom> </promotion> 29
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/wd-xsl"> <xsl:template match="/"> <html><body> <xsl:apply-templates/> </body></html> <xsl:template match="promotion"> <table border="1"> <xsl:apply-templates/> </table> <xsl:template match="individu"> <tr> <xsl:apply-templates/> </tr> <xsl:template match="nom"> <td> <xsl:value-of select="."/> </td> <xsl:template match="prenom"> <td> <xsl:value-of select="."/> </td> </xsl:stylesheet> <xsl:template match="individu"> <xsl:template match="individu"> <html><body> <table border=1> <tr> </tr> <tr> </tr> </table> </body></html> <?xml version="1.0"?> <?xml-stylesheet href="06.xsl" type="text/xsl"?> <promotion> <individu nosecuritesociale="271"> <nom>cartier</nom> <prenom>jean</prenom> <individu nosecuritesociale="171"> <nom>ochon</nom> <prenom>paul</prenom> </promotion> 30
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/wd-xsl"> <xsl:template match="/"> <html><body> <xsl:apply-templates/> </body></html> <xsl:template match="promotion"> <table border="1"> <xsl:apply-templates/> </table> <xsl:template match="individu"> <tr> <xsl:apply-templates/> </tr> <xsl:template match="nom"> <td> <xsl:value-of select="."/> </td> <xsl:template match="prenom"> <td> <xsl:value-of select="."/> </td> </xsl:stylesheet> <xsl:template match="nom"> <xsl:template match="nom"> <html><body> <table border=1> <tr> <td>cartier</td> </tr> <tr> <td>ochon</td> </tr> </table> </body></html> <?xml version="1.0"?> <?xml-stylesheet href="06.xsl" type="text/xsl"?> <promotion> <individu nosecuritesociale="271"> <nom>cartier</nom> <prenom>jean</prenom> <individu nosecuritesociale="171"> <nom>ochon</nom> <prenom>paul</prenom> </promotion> 31
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/wd-xsl"> <xsl:template match="/"> <html><body> <xsl:apply-templates/> </body></html> <xsl:template match="promotion"> <table border="1"> <xsl:apply-templates/> </table> <xsl:template match="individu"> <tr> <xsl:apply-templates/> </tr> <xsl:template match="nom"> <td> <xsl:value-of select="."/> </td> <xsl:template match="prenom"> <td> <xsl:value-of select="."/> </td> </xsl:stylesheet> <xsl:template match="prenom"> <xsl:template match="prenom"> <html><body> <table border=1> <tr> <td>cartier</td> <td>jean</td> </tr> <tr> <td>ochon</td> <td>paul</td> </tr> </table> </body></html> <?xml version="1.0"?> <?xml-stylesheet href="06.xsl" type="text/xsl"?> <promotion> <individu nosecuritesociale="271"> <nom>cartier</nom> <prenom>jean</prenom> <individu nosecuritesociale="171"> <nom>ochon</nom> <prenom>paul</prenom> </promotion> 32
Autres commandes XSLT <xsl:for-each select="pattern"> sélectionne l'ensemble des parties du doc. qui correspondent au pattern <xsl:process> à l'intérieur d'un <xsl:for-each> fournit l'élément suivant dans l'ensemble des parties du doc. ce qui permet d'itérer sur l'ensemble <xsl:if test="pattern">... </xsl:if> test si un pattern est présent ou non <xsl:counter name="string"> définit un compteur <xsl:counter-increment name="string"> incrémente un compteur <xsl:counter-reset name="string"> remet à zéro un compteur 33
Moteurs XSLT Essentiellement transformation vers un langage de balisage (ex. : XH Mais aussi vers PDF, LaTeX, RTF, PostScript,... client moteur XSLT requête + XSLT serveur client requête XHTML moteur XSLT serveur 34
Ressources W3C www.w3.org Apache xml.apache.org traduction ->HTML (parser, moteur XSLT, suppor software site www.xmlsoftware.com "Initiation à " (chez Wrox) - Editeur Eyrolles Navigateurs Internet Explorer Mozilla + CSS + XSLT www.mozilla.org Netscape 6 + CSS home.netscape.com/netscape Opera 5 + CSS www.opera.com + CSS + XSLT www.microsoft.com/ie/ Visualiseurs de DTD Viewer DTD explorer... www.alphaworks.ibm.com/tech/xmlviewer www.mathweb.org/~paul/dtdexplorer/ 35