Les "Markup Languages"
 
 

GULL - Genève - 02 Mars 2000
Gilbert ROBERT (c) Université de Genève
 gilbert.robert@issco.unige.ch


Plan du cours

 
Qu'est-ce qu'un document?


Information et Document


Le Format idéal d'un document


Trois catégories

HTML

Exemple:
<HTML>
<HEAD>
<TITLE>document test </TITLE>
<!-- Created by: Gilbert ROBERT, Fev-2000 -->
</HEAD>
<BODY>
<H1>document test</H1>
Voici un test!
<ADDRESS> 
<A HREF="http://www.linux-gull.ch/cours/index.html">
Les cours du GULL</A>
</ADDRESS>
</BODY>
</HTML>


HTML est basé sur SGML

SGML est un méta-langage

 
Les limites de SGML et HTML

La solution: XML
 
XML = Extensible Markup Language
XML = Inventez vos tags

 
Le  concept XML
 
Un document XML Un document XML est
<?xml version='1.0' encoding='UTF-8' standalone='yes'?>
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
 <!DOCTYPE exemple SYSTEM './exemple.dtd' >
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE acceuil [
<!ELEMENT accueil (#PCDATA)>
]>
<acceuil>Bonjour!</acceuil>
Namespaces
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE OReilly:Books SYSTEM "sample.dtd">
<OReilly:Books xmlns:OReilly='http://www.oreilly.com/'>
      <OReilly:Product>Webmaster in a Nutshell</OReilly:Product>
      <OReilly:Price>19.99</OReilly:Price>
</OReilly:Books>


<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE OReilly:Books SYSTEM "sample.dtd">
<Books xmlns:OReilly='http://www.oreilly.com/' 
             xmlns:Songline='http://www.songline.com/' >
       <Book>
              <Title> Webmaster in a Nutshell</Title>
              <ISBN> 1-56592-229-8</ISBN>
       </Book>
       <Songline:CD>18231</Songline:CD>
</Books>
Entités
<!ENTITY chapitre1 SYSTEM "chap1.xml">


<!ENTITY XML "Extensible Markup Language">
 
<p> Ce cours parle de &XML;.</p>


<!ENTITY % auteur "toto Dupond">
<!ENTITY droits "tous droits non r&#233;serv&#233;s">
<!ENTITY livre "XML pr&#233;sentation &#xA9; %auteur; 2000 &droits;">


<?XML version"1.0" ?>
<!DOCTYPE doc SYSTEM "mydoc.dtd" [
<!ENTITY chaptitre1 SYSTEM "chap1.xml">
<!ENTITY chaptitre2 SYSTEM "chap2.xml">
<!ENTITY chaptitre3 SYSTEM "chap3.xml">
]>
<doc>
<body>
&chapitre1; &chapitre2; &chapitre3;
</body>
</doc>
Un exemple, vaut mieux que des discours
<H2>Bibliographie XML</H2> 
 <UL> 
     <LI>  Jean-Christophe Bernadac et François Knab, <I>Construire une application XML</I>, Paris, Eyrolles, 1999</LI> 
     <LI>  Alain Michard, <I>XML, Langage et Applications</I>, Paris, Eyrolles, 1998 </LI> 
     <LI>  William J. Pardi, <I>XML en Action</I>, Paris, Microsoft Press, 1999, adapté de l'anglais par James Guerin</LI>
 </UL> 
résultat HTML
 
 <?xml version="1.0" encoding="ISO-8859-1"?> 
 
 <BIBLIO SUBJECT="XML" > 
     <BOOK ISBN="9782212090819" LANG="fr" SUBJECT="applications"> 
         <AUTHOR> 
              <FIRSTNAME>Jean-Christophe</FIRSTNAME> 
              <LASTNAME>Bernadac</LASTNAME> 
          </AUTHOR> 
          <AUTHOR> 
              <FIRSTNAME>François</FIRSTNAME> 
              <LASTNAME>Knab</LASTNAME> 
          </AUTHOR> 
         <TITLE>Construire une application XML</TITLE> 
         <PUBLISHER> 
              <NAME>Eyrolles</NAME> 
              <PLACE>Paris</PLACE> 
          </PUBLISHER> 
         <DATEPUB>1999</DATEPUB> 
     </BOOK> 
     <BOOK ISBN="9782212090529" LANG="fr" SUBJECT="général"> 
          <AUTHOR> 
              <FIRSTNAME>Alain</FIRSTNAME> 
              <LASTNAME>Michard</LASTNAME> 
          </AUTHOR> 
          <TITLE>XML, Langage et Applications</TITLE> 
          <PUBLISHER> 
              <NAME>Eyrolles</NAME> 
              <PLACE>Paris</PLACE> 
          </PUBLISHER> 
          <DATEPUB>1998</DATEPUB> 
     </BOOK> 
     <BOOK ISBN="9782840825685" LANG="fr" SUBJECT="applications"> 
          <AUTHOR> 
              <FIRSTNAME>William J.</FIRSTNAME> 
              <LASTNAME>Pardi</LASTNAME> 
          </AUTHOR> 
          <TRANSLATOR PREFIX="adapté de l'anglais par"> 
              <FIRSTNAME>James</FIRSTNAME> 
              <LASTNAME>Guerin</LASTNAME> 
          </TRANSLATOR> 
          <TITLE>XML en Action</TITLE> 
          <PUBLISHER> 
              <NAME>Microsoft Press</NAME> 
              <PLACE>Paris</PLACE> 
          </PUBLISHER> 
          <DATEPUB>1999</DATEPUB> 
     </BOOK> 
 </BIBLIO>
résultat dans IE5
 mais on peut faire mieux!
Comment utiliser XML?

Document Type Declaration
<?xml version="1.0"?>
<Recipe>
   <Name>Lime Jello Marshmallow Cottage Cheese Surprise</Name>
   <Description>
     My grandma's favorite (may she rest in peace).
   </Description>
   <Ingredients>
      <Ingredient>
         <Qty unit="box">1</Qty>
         <Item>lime gelatin</Item>
      </Ingredient>
      <Ingredient>
         <Qty unit="g">500</Qty>
         <Item>multicolored tiny marshmallows</Item>
      </Ingredient>
      <Ingredient>
         <Qty unit="ml">500</Qty>
         <Item>Cottage cheese</Item>
      </Ingredient>
      <Ingredient>
         <Qty unit="dash"/>
         <Item optional="1">Tabasco sauce</Item>
      </Ingredient>
   </Ingredients>
   <Instructions>
      <Step>
Prepare lime gelatin according to package instructions
      </Step>
      <!-- And so on... -->
   </Instructions>
</Recipe>
<!-- This is the example DTD for the example XML -->
<!ELEMENT Recipe (Name, Description?, Ingredients?, Instructions?)>
<!ELEMENT Name (#PCDATA)>
<!ELEMENT Description (#PCDATA)>
<!ELEMENT Ingredients (Ingredient)*>
<!ELEMENT Ingredient (Qty, Item)>
<!ELEMENT Qty (#PCDATA)>
<!ATTLIST  Qty unit CDATA #REQUIRED>
<!ELEMENT Item (#PCDATA)>
<!ATTLIST  Item optional CDATA "0"  isVegetarian CDATA "true">
<!ELEMENT Instructions (Step)+>
<!ELEMENT Step (#PCDATA)>

Les langages de présentation (style) : CSS et XSL

CSS (Cascading Style Sheets) et
XSL (the Extensible Stylesheet Language)
 
La philosophie d'XML
=
séparer les données/documents des traitements/présentations

 
  1. CSS définit initialement pour le langage HTML.
  2. XSL et langage de transformation normalisé XSLT (XSL Transformation)

CSS (Cascading Style Sheets)

La première version du standard, dite CSS niveau 1 (CSS1), a été publiée en 1996.
En mai 1998, le W3 Consortium a publié une nouvelle version, dite CSS niveau 2 (CSS2).
Celle-ci introduit des possibilités nouvelles par rapport à CSS-1, notamment:

<?xml version='1.0' ?>
<?xml-stylesheet href="FeuilleDeStyle.css" type="text/css" ?>

La règle de style
 
Une règle de style =  un sélecteur  + une ou de plusieurs propriétés ainsi que leur valeur respective.
 
sélecteur {propriété1: valeur ; propriété2: valeur }


 

<STYLE TYPE="text/css">
<!--
H1 { color: red; font-size: 16pt; text-decoration: underline }
-->
</STYLE>
 
 
Exemple de sélecteur de classe:
<HTML>
  <HEAD>
    <TITLE>Titre</TITLE>
    <STYLE TYPE="text/css">
      H1.citation { font-style: italic; font-weight: bold }
    </STYLE>
  </HEAD>
  <BODY>
    <H1 CLASS=citation>La vie est trop courte pour se faire la guerre</H1>
  </BODY>
  </HTML>
 
classe 'citation' pour tous les éléments
.citation { font-style: italic; font-weight: bold }
 
Méthode plus élégante
... 
  <DIV CLASS=aspect1> 
  Ce texte apparaîtra avec les propriétés définies dans la classe aspect1 
  </DIV> 
  ...
<span class="date">991201</span>

Exemple du W3 consortium
Exemple  local du W3C
 
Mais CSS ne pourra pas vous permettre de "transformer" les données.
Il ne peut pas réorganiser ou restructurer les données ou faire des "cross-references".
Pour cela on a besoin de XSL (Extended Style Language)

Introduction à XSLT 
(Extensible Stylesheet Language Transformation)

XSLT est très puissant


 
Un exemple:
 
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="page">
  <xsl:processing-instruction  name="cocoon-format">type="text/html"
   </xsl:processing-instruction>
   <html>
    <head>
     <title>
         <xsl:value-of select="title"/>
     </title>
    </head>
    <body bgcolor="#ffffff">
         <xsl:apply-templates/>
    </body>
   </html>
  </xsl:template>
  <xsl:template match="title">
   <h1 align="center">
    <xsl:apply-templates/>
   </h1>
  </xsl:template>
  <xsl:template match="content">
   <p align="center">
     <xsl:apply-templates/>
   </p>
  </xsl:template>
  <xsl:template match="comment">
   <hr />
     <xsl:apply-templates/>
  </xsl:template>
 
</xsl:stylesheet>
 

<?xml version="1.0"?>
<?xml-stylesheet href="hello-page-html.xsl" type="text/xsl"?>
<?cocoon-process type="xslt"?>
<!-- modified from an example by Stefano Mazzocchi "stefano@apache.org" -->
<page>
 <title>Hello Cocoon friend</title>
 <content>
      Here is some content :)
 </content> 
 <comment>
      Written by DKS/Tecfa, adapted from S.M./the Cocoon samples
 </comment>
</page>
 simple exemple - tecfa
 


 
Le Modèle objet de document (DOM - Document Object Model)
Le Modèle objet de document est un langage normalisé d'interface (API, Application Programming Interface) qui va permettre à un programme (Java) de naviguer dans un arbre XML (ou HTML) et d'en lire ou d'en modifier le contenu
 


 
Avec DOM , HTML et XML les documents peuvent être manipulés comme des objets, au lieu d'être simplement un stream. De point de vue de DOM,  un document est un arbre composé d'objet.
DOM fournit une méthode générale pour accéder aux données structurées d'un document structuré.
Chaque langage qui implémente DOM peut utiliser XML comme une interface pour stocker, retrouver et processer une structure d'objets génériques hiérarchisés.


Templates de base
 
<xsl:apply-templates />
     examine tous les noeuds enfants, voici la règle pour la racine.
    <xsl:template match="/">
          <html>
                <xsl:apply-templates/>
          </html>
    </xsl:template>
 L'attribut "select" de apply-templates
     permet de choisir un enfant nommé (au lieu de tous)
    <xsl:template match="projet">
            <xsl:apply-templates select="titre"/>
    </xsl:template>
xsl:value-of
     prend la valeur de qc et le copie vers le document "sortie"
     autrement dit: sélection d'un seul sous-noeud
    <xsl:template match="project">
         <P>
               <xsl:value-of select="problem/title"/>
         </P>
    </xsl:template>
 


Ce qu'il faut retenir, c'est que pour définir une règle de style il faut :
XSLT (XSL Transformation) va permettre, si nécessaire, de transformer une DTD (un arbre XML) "orientée contenu" en une autre DTD (un autre arbre XML) "orientée restitution" (c'est-à-dire constituée d"objets formateurs" (formatting objects). C'est à ce niveau que l'ordre de restitution final sera établi

Le langage normalisé de feuille de style XSL (Extensible Style Language) va permettre ensuite de spécifier
comment un type de document (= une DTD "orientée restitution") donné va être restitué sur un support donné.

en attendant des browsers XML
 

 [  XML + XSLT -> HTML   ]   =  Java

Les processeurs XSLT: Xalan et Lotus XSL
 
Xalan - est le processeur XSLT du projet Apache/XML (Il est basé sur LotusXSL)
java / C++
Xerces - est le parseur XML utilisé par Xalan (c'est aussi un produit IBM)
java / C++ / Perl
 
Autres alternatives:
 
Le parseur de James Clark (XT)
Saxon



XML + XSL avec Cocoon ( xml.apache.org )
 

Conclusion

 
GULL - Genève - 02 Mars 2000