HTML5, structuration documentaire

[BONUS] DOCTYPE HTML5 avec XSLT

Génération du DOCTYPE HTML5 avec XSLT

[Exercice BONUS]

Le but de cet exercice est de comprendre les différentes manières de générer le DOCTYPE HTML5 avec XSLT.

Rappel : le DOCTYPE valide en HTML5 est le suivant :

1
<!DOCTYPE html>

On dispose des fichiers xml et xsl suivants :

movies.xml

1
<?xml version="1.0" encoding="UTF-8"?>
2
3
<?xml-stylesheet type="text/xsl" href="movies.xsl"?>
4
5
<movies>
6
  <movie>
7
    <title>Aliens</title>
8
    <year>1986</year>
9
    <rank>8.2</rank>
10
  </movie>
11
  <movie>
12
    <title>Apollo 13</title>
13
    <year>1995</year>
14
    <rank>7.5</rank>
15
  </movie>
16
  <movie>
17
    <title>Pi</title>
18
    <year>1998</year>
19
    <rank>7.1</rank>
20
  </movie>
21
</movies>
movies.xsl
1
<?xml version="1.0" encoding="UTF-8"?>
2
3
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
4
  
5
  <xsl:output
6
    method="html"
7
    doctype-public="-//W3C//DTD HTML 4.01//EN"
8
    doctype-system="http://www.w3.org/TR/html4/strict.dtd"
9
    encoding="utf-8"
10
    indent="yes" />
11
  
12
  <xsl:template match="/">
13
    <html lang="en">
14
      <head>
15
        <title>List of Movies.</title>
16
        
17
        <link rel="stylesheet" href="movies.css" />
18
      </head>
19
      <body>
20
        <table class="movies">
21
          <thead>
22
            <tr>
23
              <th>Title</th>
24
              <th>Year</th>
25
              <th>Rank</th>
26
            </tr>
27
          </thead>
28
          <tbody>
29
            <xsl:for-each select="movies/movie">
30
              <xsl:sort select="rank"/>
31
              <tr>
32
                <td><xsl:value-of select="title"/></td>
33
                <td><xsl:value-of select="year"/></td>
34
                <td><xsl:value-of select="rank"/></td>
35
              </tr>
36
            </xsl:for-each>
37
          </tbody>
38
        </table>
39
      </body>
40
    </html>
41
  </xsl:template>
42
  
43
</xsl:stylesheet>
Ouvrir ces fichiers dans Oxygen. Tester la génération du fichier HTML4 en sortie.
On remarque que les attributs doctype-public et doctype-system permettent de générer le DOCTYPE HTML4 voulu.
Question
Tester la modification des attributs doctype-public et doctype-system, leur suppression, pour essayer d'obtenir le DOCTYPE HTML5. Que se passe-t-il ?
Indice
1
  <xsl:output
2
    method="html"
3
    doctype-system="http://www.w3.org/TR/html4/strict.dtd"
4
    encoding="utf-8"
5
    indent="yes" />
Indice
1
  <xsl:output
2
    method="html"
3
    doctype-public=""
4
    encoding="utf-8"
5
    indent="yes" />
Solution
Si les deux attributs sont omis (valeur vide ou non déclarés), alors le DOCTYPE n'est pas généré.
L'instruction XSLT 1.0 <xsl:text disable-output-escaping='yes'></xsl:text> permet de générer du texte en sortie.
L'attribut disable-output-escaping='yes' permet de reconvertir les caractères HTML échappés en sortie (&amp; en "&" par exemple).
Rappel : les chevrons "<" et ">" correspondent respectivement aux codes suivants, &lt; et &gt;.
Question
Générer le DOCTYPE à l'aide de l'instruction donnée.
Indice
1
<xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;
2
</xsl:text>
Solution
1
<?xml version="1.0" encoding="UTF-8"?>
2
3
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
4
  
5
  <xsl:output
6
    method="html"
7
    encoding="utf-8"
8
    indent="yes" />
9
  
10
  <xsl:template match="/">
11
    <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;
12
    </xsl:text>
13
    <html lang="en">
14
      <head>
15
        <title>List of Movies.</title>
16
        
17
        <link rel="stylesheet" href="movies.css" />
18
      </head>
19
      <body>
20
        <table class="movies">
21
          <thead>
22
            <tr>
23
              <th>Title</th>
24
              <th>Year</th>
25
              <th>Rank</th>
26
            </tr>
27
          </thead>
28
          <tbody>
29
            <xsl:for-each select="movies/movie">
30
              <xsl:sort select="rank"/>
31
              <tr>
32
                <td><xsl:value-of select="title"/></td>
33
                <td><xsl:value-of select="year"/></td>
34
                <td><xsl:value-of select="rank"/></td>
35
              </tr>
36
            </xsl:for-each>
37
          </tbody>
38
        </table>
39
      </body>
40
    </html>
41
  </xsl:template>
42
  
43
</xsl:stylesheet>
Le statut de DOE (disable-output-escaping) et la "DOCTYPE legacy string"
La solution ci-dessus utilise la fonctionnalité DOE (disable-output-escaping), mais celle-ci :
  • n'est qu'une fonctionnalité optionnelle d'un moteur XSLT 1.0 ;
  • est dépréciée en XSLT 2.0.
Les spécifications de HTML5 fournissent une alternative à l'aide de la "DOCTYPE legacy string" : <!DOCTYPE html SYSTEM "about:legacy-compat">.
Question
Modifier le code xsl pour générer un DOCTYPE HTML5 à l'aide de la "DOCTYPE legacy string".
Indice
Utiliser l'attribut doctype-system dans l'instruction XSLT <xsl:output/>.
Solution
1
<?xml version="1.0" encoding="UTF-8"?>
2
3
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
4
  
5
  <xsl:output
6
    method="html"
7
    encoding="utf-8"
8
    doctype-system="about:legacy-compat"
9
    indent="yes" />
10
  
11
  <xsl:template match="/">
12
    <html lang="en">
13
      <head>
14
        <title>List of Movies.</title>
15
        
16
        <link rel="stylesheet" href="movies.css" />
17
      </head>
18
      <body>
19
        <table class="movies">
20
          <thead>
21
            <tr>
22
              <th>Title</th>
23
              <th>Year</th>
24
              <th>Rank</th>
25
            </tr>
26
          </thead>
27
          <tbody>
28
            <xsl:for-each select="movies/movie">
29
              <xsl:sort select="rank"/>
30
              <tr>
31
                <td><xsl:value-of select="title"/></td>
32
                <td><xsl:value-of select="year"/></td>
33
                <td><xsl:value-of select="rank"/></td>
34
              </tr>
35
            </xsl:for-each>
36
          </tbody>
37
        </table>
38
      </body>
39
    </html>
40
  </xsl:template>
41
  
42
</xsl:stylesheet>
[BONUS] L'instruction <xsl:character-map>
La solution précédente ne doit être utilisé que si le moteur XSLT n'est pas capable de générer le DOCTYPE HTML5 standard (en version courte).
Source : spécification HTML5 du W3C.
Nous allons nous intéresser à une solution utilisant une instruction valide en XSLT 2.0, <xsl:character-map>.
On placera cette instruction avant l'instruction <xsl:output>.
La syntaxe de l'instruction :
1
  <xsl:character-map name="name">
2
    <xsl:output-character character="x" string="remplacement de x"/>
3
  </xsl:character-map>
L'instruction <xsl:output-character> utilisée à l'intérieur de <xsl:character-map> prend un unique character et le remplace en sortie par la chaîne string spécifiée.
On utilisera l'attribut use-character-maps="charactermapname" dans l'instruction <xsl:output> pour activer les substitutions lors de la transformation xsl.
Question
Utiliser l'instruction <xsl:character-map> pour générer le DOCTYPE HTML5.
Indice
Tout code d'une entité HTML (&amp; par exemple) présent dans la valeur de string de la balise <xsl:output-character> sera correctement retraduit en son caractère UNICODE en sortie ("&").
Solution
1
<?xml version="1.0" encoding="UTF-8"?>
2
3
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
4
  
5
  <xsl:character-map name="doctype">
6
    <xsl:output-character character="&lt;" string="&lt;"/>
7
    <xsl:output-character character="&gt;" string="&gt;"/>
8
  </xsl:character-map>
9
  
10
  <xsl:output
11
    method="html"
12
    encoding="utf-8"
13
    indent="yes"
14
    use-character-maps="doctype"/>
15
  
16
  <xsl:template match="/">
17
    <xsl:text>&lt;!DOCTYPE html&gt;</xsl:text>
18
    <html lang="en">
19
      <head>
20
        <title>List of Movies.</title>
21
        
22
        <link rel="stylesheet" href="movies.css" />
23
      </head>
24
      <body>
25
        <table class="movies">
26
          <thead>
27
            <tr>
28
              <th>Title</th>
29
              <th>Year</th>
30
              <th>Rank</th>
31
            </tr>
32
          </thead>
33
          <tbody>
34
            <xsl:for-each select="movies/movie">
35
              <xsl:sort select="rank"/>
36
              <tr>
37
                <td><xsl:value-of select="title"/></td>
38
                <td><xsl:value-of select="year"/></td>
39
                <td><xsl:value-of select="rank"/></td>
40
              </tr>
41
            </xsl:for-each>
42
          </tbody>
43
        </table>
44
      </body>
45
    </html>
46
  </xsl:template>
47
  
48
</xsl:stylesheet>
PrécédentPrécédentSuivantSuivant
AccueilAccueilImprimerImprimer
								Rihab Hachem, Cindy Pinvin, Baptiste Perraud, 2014-2016 (Contributions : Stéphane Crozat, les étudiants de l'UTC)
								Paternité - Partage des Conditions Initiales à l'IdentiqueRéalisé avec Scenari (nouvelle fenêtre)