Créer des documents Internet en XML, XSL et CSS

Grâce aux langages XML (eXtensible Markup Language) et XSL (eXtensible Stylesheet Language), les Webmasters disposent d’outils plus riches pour faire vivre leur site. La programmation de pages Web en XML permet à la fois d’enregistrer le contenu dans des documents XML autodescriptifs et autonomes, de programmer dynamiquement la présentation Web dans des pages XSL et enfin, de gérer le format de présentation dans des feuilles de styles CSS (Cascading Style Sheet). Nous montrerons, en prenant comme exemple le texte de cet article, comment structurer le contenu d’un do-cument texte dans une page XML, puis comment réaliser la programmation de sa présentation dans une page XSL pour afficher dynamiquement un sommaire. Enfin, vous verrez comment définir, dans une page CSS, le format de présentation des parties structurant le document.

Organiser le contenu en XML

1.Recommandations de base

La syntaxe rigoureuse du XML peut dé-router les habitués du HTML. À défaut d’être valide (accompagnement de sa propre description au format DTD [Document Type Definition]), un document XML doit d’abord être formé sans erreur de syntaxe. D’autre part, ce langage différencie les majuscules des minuscules. N’oubliez pas qu’à chaque balise ouvrante correspond une balise fermante et, enfin, que toutes les valeurs déclarées dans des attributs doivent être délimitées par des guillemets.2. Composez la page XML de l’article

Un document XML commence toujours par la déclaration de la version du langage XML utilisée. Il convient de déclarer la référence HTTP de la page XSL qui contient la présentation du document. Cela permet d’indiquer au navigateur client qu’il faut aussi charger la page de présentation XSL. Pour structurer le contenu du document, pensez à créer vos propres balises au format HTML, telles que “

“, ““, “” et ““.
Le texte contient des informations de description enregistrées dans un métabloc et plusieurs chapitres. Le métabloc est structuré en 6 éléments : titre, sujet, nom et adresse e-mail de l’auteur, nom du magazine, date et mots clés (index). Deux sections forment un chapitre : le titre et le texte. Le texte du chapitre comprend un ou plusieurs paragraphes ainsi que le code d’exemple. Nous aurions pu décrire la structure de notre document XML dans une page DTD. Ce format n’est pas indispensable pour utiliser une page XML, mais peut servir à gérer des contraintes d’intégrité au niveau du contenu, comme par exemple pour déclarer l’agencement des éléments, ceux qui sont requis ou ceux qui ne peuvent être répétés.

Structurer la présentation en XSL

3. écrivez la feuille xsl
Une page XSL commence toujours par la déclaration de la version du langage XML utilisée et par la référence HTTP au schéma XSL défini sur le site Web du W3C. Le XSL détermine de manière déclarative la façon de transformer un document XML en un autre document XML, HTML ou Wap. Le XSL sert à afficher le document dans une page HTML. En pratique, il faut d’abord créer une page HTML, puis y insérer les ba-lises du document XML qui précisent l’emplacement de l’affichage du contenu dans la page HTML.

Structurer la présentation en XSL

4. Définissez l’en-tête de la page HTML

Par exemple, pour déclarer le titre HTML “TITLE” de la page HTML, utilisez le XSL pour récupérer la valeur contenue dans la structure “article/meta/titre” du document XML. La création de l’index sur les mots clés est un peu plus complexe. Déclarez d’abord la balise HTML ““, puis récupérez l’ensemble des mots clés à l’aide d’une lecture XSL sur chaque enregistrement de la structure XML “article/meta/index”.
Procédez à la concaténation de tous ces mots clés en utilisant une virgule comme séparateur. La balise de test XSL “” vérifie que l’enregistrement n’est pas le dernier mot clé de la liste ; dans ce cas, une virgule doit être insérée comme séparateur. Enfin, saisissez un lien qui associe votre document final à une feuille de style CSS.5. Affichez la description du document

Les techniques précédentes sont de nouveau utilisées pour afficher, au format HTML, le titre du document, ainsi que l’auteur, la date, le sujet et le magazine. Chaque information est sélectionnée dans sa structure XML respective. Créez un hyperlien de type “mailto:” permettant de lier le nom de l’auteur à son adresse e-mail. L’information de cette adresse étant stockée dans l’attribut XML ““, vous devez utiliser l’opérateur “@” pour récupérer la valeur du sous-attribut “email”. Dans le code HTML, rien n’empêche de créer plusieurs identifiants qui pourront être ensuite utilisés dans votre feuille de style CSS.6. Générez dynamiquement un sommaire

Pour cela, listez les titres des chapitres du document à l’aide des commandes XSL. La partie intéressante consiste à créer un hyperlien dynamique dans le sommaire afin d’accéder directement au corps du texte du chapitre correspondant. Utilisez la commande XSL “formatIndex” pour retrouver l’index de chaque chapitre dans le document XML. La commande “” active la fonction XSL correspondante et retourne le résultat du script. La numérotation des chapitres dans le sommaire est assurée à l’aide des balises HTML “

” et “
1. “. Cette numérotation est aussi utilisée pour indexer les hyperliens des chapitres.

   Gérer la mise en forme en CSS

   7. Affichez le texte des chapitres
   
   Enfin, pour chaque élément de type chapitre, affichez son titre et son contenu en utilisant les techniques précitées, à ceci près que le texte du chapitre peut contenir des paragraphes “

   ” ou du code “". Pour les éléments de type paragraphe, insérez le contenu dans des balises "

   " et ceux de type code dans des balises "

   ". Pour distinguer ces deux éléments "
   " et "
   ", appliquez un modèle XSL. Chaque élément utilise ce modèle.8. Créez la page CSS
    			
   Afin de mieux contrôler le format de présentation des structures du document HTML, définissez des règles de style dans une page CSS pour les structures "auteur", "reference", "article" correspondant aux identifiants créés dans la page XSL. Vous pouvez aussi définir des propriétés de format pour des sections HTML prédéfinies telles que "H1", "H2"... Cette feuille de style peut être modifiée ou améliorée à l'aide d'un éditeur Web.
     
    
   🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.