diff options
Diffstat (limited to 'files/fr/web/api/xsltprocessor/generating_html')
| -rw-r--r-- | files/fr/web/api/xsltprocessor/generating_html/index.md | 267 |
1 files changed, 130 insertions, 137 deletions
diff --git a/files/fr/web/api/xsltprocessor/generating_html/index.md b/files/fr/web/api/xsltprocessor/generating_html/index.md index 59286d20d5..535ee31fe5 100644 --- a/files/fr/web/api/xsltprocessor/generating_html/index.md +++ b/files/fr/web/api/xsltprocessor/generating_html/index.md @@ -4,188 +4,181 @@ slug: Web/API/XSLTProcessor/Generating_HTML translation_of: Web/API/XSLTProcessor/Generating_HTML original_slug: XSLT_dans_Gecko/Génération_de_HTML --- -<p></p><ol> -<li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li> -<li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li> -<li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li> -<li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li> -<li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li> -</ol><p></p> +1. [Introduction](/fr/docs/XSLT_dans_Gecko) +2. [Exemple basique](/fr/docs/XSLT_dans_Gecko/Exemple_basique) +3. [Génération de HTML](/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML) +4. [Différences entre les navigateurs](/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs) +5. [Ressources](/fr/docs/XSLT_dans_Gecko/Ressources) -<h2 id="G.C3.A9n.C3.A9ration_de_HTML">Génération de HTML</h2> +## Génération de HTML -<p>Une application courante de XSLT dans les navigateurs est la transformation de code XML en HTML du coté du client. Le second exemple va transformer un document d'entrée (example2.xml), qui contient des informations à propos d'un article, en un document HTML.</p> +Une application courante de XSLT dans les navigateurs est la transformation de code XML en HTML du coté du client. Le second exemple va transformer un document d'entrée (example2.xml), qui contient des informations à propos d'un article, en un document HTML. -<p>L'élément <code><body></code> de l'article contient maintenant des éléments HTML (des balises <code><strong></code> et <code><em></code>, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud <code>xsl:output</code> de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, <code><a href="http://devedge.netscape.com/2002/de">http://devedge.netscape.com/2002/de</a></code>, à qui nous donnons le préfixe myNS <code>(xmlns:myNS="http://devedge.netscape.com/2002/de")</code>.</p> +L'élément `<body>` de l'article contient maintenant des éléments HTML (des balises `<strong>` et `<em>`, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud `xsl:output` de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, [`http://devedge.netscape.com/2002/de`](http://devedge.netscape.com/2002/de), à qui nous donnons le préfixe myNS `(xmlns:myNS="http://devedge.netscape.com/2002/de")`. -<p><small><strong>Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source</strong></small> Document XML (example2.xml): <div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"></p> +**Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source** Document XML (example2.xml): \<div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"> -<pre class="eval"><?xml version="1.0"?> -<?xml-stylesheet type="text/xsl" href="example.xsl"?> - <myNS:Article xmlns:myNS="<a href="http://devedge.netscape.com/2002/de">http://devedge.netscape.com/2002/de</a>"> - <myNS:Title>Mon article</myNS:Title> - <myNS:Authors> - <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author> - <myNS:Author>M. Bar</myNS:Author> - </myNS:Authors> - <myNS:Body> - En <em>Espagne</em>, les <strong>pluies</strong> se concentrent - principalement dans les plaines. - </myNS:Body> - </myNS:Article> -</pre> + <?xml version="1.0"?> + <?xml-stylesheet type="text/xsl" href="example.xsl"?> + <myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de"> + <myNS:Title>Mon article</myNS:Title> + <myNS:Authors> + <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author> + <myNS:Author>M. Bar</myNS:Author> + </myNS:Authors> + <myNS:Body> + En <em>Espagne</em>, les <strong>pluies</strong> se concentrent + principalement dans les plaines. + </myNS:Body> + </myNS:Article> -<p>La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à <code>HTML</code> à l'aide de l'élément <code>xsl:output</code>. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML.</p> +La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à `HTML` à l'aide de l'élément `xsl:output`. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML. -<p><small><strong>Figure 3 : feuille de style XSL avec 2 espaces de nommage</strong> (example2.xsl)</small> feuille de style XSL (example2.xsl):</p> +**Figure 3 : feuille de style XSL avec 2 espaces de nommage** (example2.xsl) feuille de style XSL (example2.xsl): -<pre> <?xml version="1.0"?> - <xsl:stylesheet version="1.0" - xmlns:xsl="http://www.w3.org/1999/XSL/Transform" - xmlns:myNS="http://devedge.netscape.com/2002/de"> + <?xml version="1.0"?> + <xsl:stylesheet version="1.0" + xmlns:xsl="http://www.w3.org/1999/XSL/Transform" + xmlns:myNS="http://devedge.netscape.com/2002/de"> - <xsl:output method="html"/> - ... - </xsl:stylesheet> -</pre> + <xsl:output method="html"/> + ... + </xsl:stylesheet> -<p>Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML.</p> +Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML. -<p><small><strong>Figure 4 : Création du document HTML de base</strong></small> feuille de style XSL (example2.xsl):</p> +**Figure 4 : Création du document HTML de base** feuille de style XSL (example2.xsl): -<pre> ... - <xsl:template match="/"> - <html> + ... + <xsl:template match="/"> + <html> - <head> + <head> - <title> - <xsl:value-of select="/myNS:Article/myNS:Title"/> - </title> + <title> + <xsl:value-of select="/myNS:Article/myNS:Title"/> + </title> - <style type="text/css"> - .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;} - </style> + <style type="text/css"> + .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;} + </style> - </head> + </head> - <body> - <p class="myBox"> - <span class="title"> - <xsl:value-of select="/myNS:Article/myNS:Title"/> - </span> <br /> + <body> + <p class="myBox"> + <span class="title"> + <xsl:value-of select="/myNS:Article/myNS:Title"/> + </span> <br /> - Auteurs : <br /> - <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> - </p> + Auteurs : <br /> + <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> + </p> - <p class="myBox"> - <xsl:apply-templates select="//myNS:Body"/> - </p> + <p class="myBox"> + <xsl:apply-templates select="//myNS:Body"/> + </p> - </body> + </body> - </html> - </xsl:template> - ... -</pre> + </html> + </xsl:template> + ... -<p>Nous avons besoin de trois <code>xsl:template</code> supplémentaires pour parachever l'exemple. Le premier <code>xsl:template</code> est utilisé pour les nœuds <code>Author</code>, alors que le deuxième traite le nœud <code>body</code>. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation.</p> +Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exemple. Le premier `xsl:template` est utilisé pour les nœuds `Author`, alors que le deuxième traite le nœud `body`. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation. -<p><strong><small>Figure 5 : Les 3 modèles finaux</small></strong> feuille de style XSL (example2.xsl):</p> +**Figure 5 : Les 3 modèles finaux** feuille de style XSL (example2.xsl): -<pre> ... - <xsl:template match="myNS:Author"> - -- <xsl:value-of select="." /> + ... + <xsl:template match="myNS:Author"> + -- <xsl:value-of select="." /> - <xsl:if test="@company"> - :: <strong> <xsl:value-of select="@company" /> </strong> - </xsl:if> + <xsl:if test="@company"> + :: <strong> <xsl:value-of select="@company" /> </strong> + </xsl:if> - <br /> - </xsl:template> + <br /> + </xsl:template> - <xsl:template match="myNS:Body"> - <xsl:copy> - <xsl:apply-templates select="@*|node()"/> - </xsl:copy> - </xsl:template> + <xsl:template match="myNS:Body"> + <xsl:copy> + <xsl:apply-templates select="@*|node()"/> + </xsl:copy> + </xsl:template> - <xsl:template match="@*|node()"> - <xsl:copy> - <xsl:apply-templates select="@*|node()"/> - </xsl:copy> - </xsl:template> - ... -</pre> + <xsl:template match="@*|node()"> + <xsl:copy> + <xsl:apply-templates select="@*|node()"/> + </xsl:copy> + </xsl:template> + ... -<p>La feuille de style XSLT finale est donc :</p> +La feuille de style XSLT finale est donc : -<p><small><strong>Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source</strong></small> feuille de style XSL :</p> +**Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source** feuille de style XSL : -<pre> <?xml version="1.0"?> - <xsl:stylesheet version="1.0" - xmlns:xsl="http://www.w3.org/1999/XSL/Transform" - xmlns:myNS="http://devedge.netscape.com/2002/de"> + <?xml version="1.0"?> + <xsl:stylesheet version="1.0" + xmlns:xsl="http://www.w3.org/1999/XSL/Transform" + xmlns:myNS="http://devedge.netscape.com/2002/de"> - <xsl:output method="html" /> + <xsl:output method="html" /> - <xsl:template match="/"> - <html> + <xsl:template match="/"> + <html> - <head> + <head> - <title> - <xsl:value-of select="/myNS:Article/myNS:Title"/> - </title> + <title> + <xsl:value-of select="/myNS:Article/myNS:Title"/> + </title> - <style type="text/css"> - .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;} - </style> + <style type="text/css"> + .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;} + </style> - </head> + </head> - <body> - <p class="myBox"> - <span class="title"> - <xsl:value-of select="/myNS:Article/myNS:Title"/> - </span> <br /> + <body> + <p class="myBox"> + <span class="title"> + <xsl:value-of select="/myNS:Article/myNS:Title"/> + </span> <br /> - Authors: <br /> - <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> - </p> + Authors: <br /> + <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> + </p> - <p class="myBox"> - <xsl:apply-templates select="//myNS:Body"/> - </p> + <p class="myBox"> + <xsl:apply-templates select="//myNS:Body"/> + </p> - </body> + </body> - </html> - </xsl:template> + </html> + </xsl:template> - <xsl:template match="myNS:Author"> - -- <xsl:value-of select="." /> + <xsl:template match="myNS:Author"> + -- <xsl:value-of select="." /> - <xsl:if test="@company"> - :: <b> <xsl:value-of select="@company" /> </b> - </xsl:if> + <xsl:if test="@company"> + :: <b> <xsl:value-of select="@company" /> </b> + </xsl:if> - <br /> - </xsl:template> + <br /> + </xsl:template> - <xsl:template match="myNS:Body"> - <xsl:copy> - <xsl:apply-templates select="@*|node()"/> - </xsl:copy> - </xsl:template> + <xsl:template match="myNS:Body"> + <xsl:copy> + <xsl:apply-templates select="@*|node()"/> + </xsl:copy> + </xsl:template> - <xsl:template match="@*|node()"> - <xsl:copy> - <xsl:apply-templates select="@*|node()"/> - </xsl:copy> - </xsl:template> - </xsl:stylesheet> -</pre> + <xsl:template match="@*|node()"> + <xsl:copy> + <xsl:apply-templates select="@*|node()"/> + </xsl:copy> + </xsl:template> + </xsl:stylesheet> -<p>{{PreviousNext("XSLT dans Gecko:Exemple basique", "XSLT dans Gecko:Différences entre les navigateurs")}}</p> +{{PreviousNext("XSLT dans Gecko:Exemple basique", "XSLT dans Gecko:Différences entre les navigateurs")}} |