2. La première page

2.1. La page web

La première page, la voici: elle est rudimentaire comme vous pouvez le voir. De plus, j'ai supprimé le tag <html> et tout ce qui se trouve dans la section <head>.

1 <?xml version="1.0" encoding="iso-8859-1" ?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
3    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4 <body>
5   <h1>Accueil</h1>
6   <p>
7      Ceci est la super page de <b>monprog</b>
8   </p>
9 </body>

A part la première ligne et les tags <html> et <head> manquants, il n'y a aucune différence entre le html et le xml car j'ai respecté les règles d'écriture du xml pour écrire le html. C'est justement cela qu'on appelle le xhtml. Veuillez sauvegarder cette page sous le nom home.xml.

Ici, je voudrais attirer votre attention sur un point particulièrement important sur ce document source home.xml pour éviter des confusions. Notre processeur XSLT est capable de lire un document XML en entrée et de produire du HTML en sortie. Le document précédent ressemble fortement à du XHTML, d'autant plus que comme on a vu, le XHTML est du XML. On pourrait même prendre un document XHTML complet et valide avant de le passer dans la moulinette XSLT. Si l'on pense comme ceci, on aboutira au même résultat je pense. Mais toute évolution pour exporter vers un format autre que le HTML en sera d'autant plus difficile.

Ce document n'est en fait pas du XHTML. C'est un document qui contient une balise body comme racine, et qui reprend un peu de syntaxe du XHTML pour son contenu. Au lieu de h1 j'aurais pu prendre niveau1, ou au lieu de p j'aurais pu prendre para qu'on trouve beaucoup dans docbook. J'ai préféré me rapprocher de XHTML pour éviter dans mes exemples des bouts de code triviaux comme le remplacement d'une balise <important> en <b>. Si vous développez ces exemples pour vous, gardez bien en tête que les balises ont pour rôle de décrire la forme de leur contenu, pas de décrire l'apparence que cela aura en HTML.

2.2. La feuille de style XSLT

Un fichier xsl contient en fait ce qu'on appelle une feuille de style, à ne pas confondre avec les feuilles de style CSS. Voici la feuille de style que nous améliorerons par la suite, et que vous allez appeler main.xsl:

 1 <?xml version="1.0" encoding="ISO-8859-1"?>
 2 
 3 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 4   <xsl:output method="html"
 5 	    encoding="ISO-8859-1"
 6 	    doctype-public="-//W3C//DTD HTML 4.0 Transitional//EN"
 7 	    doctype-system="http://www.w3.org/TR/REC-html40/loose.dtd"
 8 	    indent="yes"
 9 	    />
10 
11   <xsl:template match="/body">
12     <html>
13       <xsl:comment>
14   
15         This web site is (c) 2003 Me
16 	Feel free to get inspiration from this site, as soon as
17 	you leave this comment here.
18   
19         THIS PAGE WAS AUTOMATICALLY GENERATED FROM TEMPLATES.
20 	DO NOT MODIFY ANYTHING IN THIS FILE: IT WILL BE OVERWRITTEN
21 	AND ANY CHANGES WILL BE LOST.
22 
23       </xsl:comment>
24       <head>
25         <link rel="stylesheet" type="text/css" href="monprog.css" />
26         <title><xsl:apply-templates select="/body/h1[position()=1]/*"/></title>
27       </head>
28       <body>
29         <xsl:apply-templates select="@*|node()"/>
30       </body>
31     </html>
32   </xsl:template>
33 
34   <xsl:template match="@*|node()">
35     <xsl:copy>
36       <xsl:apply-templates select="@*|node()"/>
37     </xsl:copy>
38   </xsl:template>
39 
40 </xsl:stylesheet>

Dans ces 40 lignes que vous allez surement trouver illisibles, se trouvent les technologies XML, XSLT, XPATH, et un peu de HTML! Nous allons décortiquer tout cela.

2.3. La feuille de style CSS

La feuille de style CSS dont vous avez peut-être noté la présence ligne 34 ci-dessus ne contient rien de vraiment intéressant ici. J'en reparlerai quand ce sera nécessaire, mais peu parce que les feuilles de style CSS servent beaucoup à l'esthétique d'une page web et peu à sa structure. Et nous, ici, on mettra l'accent sur la structure, juetement. Mais voici un exemple de fichier pour monprog.css:

P { font-size: 14pt; }

2.4. Création de la page web

Pour créer notre première page web, nous devons nous servir d'un processeur xslt. xsltproc et sabcmd (du projet sablotron) sont deux logiciels libres qui peuvent très bien remplir cette tâche. Leur syntaxe de base est la même:

$ xsltproc main.xsl home.xml > home.html
$ sabcmd main.xsl home.xml > home.html

Il faut fournir la feuille de style, puis les pages à transformer. Le code html résultant sort sur la sortie standard, que nous redirigeons vers un fichier. Si vous voulez utiliser des options pour l'un de ces deux programmes, sachez cependant que la compatibilité au niveau syntaxe s'arrête là. Il vous faudra vous référer aux pages de manuel pour en savoir plus. Ajoutez quand même --novalid à xsltproc pour ne pas être ennuyé avec des problèmes de validation si vous n'êtes pas connecté à internet. Sinon la validation peut tout bloquer en allant chercher ce qu'il faut sur internet.

Vous avez maintenant votre page web home.html générée, que vous pouvez visualiser avec votre navigateur. Nous allons maintenant passer à un peu plus de théorie pour comprendre le pavé de 41 lignes qui précédait, et ensuite, nous améliorerons ce pavé pour créer notre site.

création est mise à disposition sous un contrat Creative Commons