13.2 HTML/XHTML, CSS, XML

Submitted by Hagen Graf on 16. May 2008 - 11:54

Les sigles HTML/XHTML, CSS et XML désignent des technologies Internet exploitées dans Joomla!. Toutes ont été standardisées par le consortium W3 (http://www.w3.org/).

13.2.1 HTML/XHTML

Vous savez que le réseau Web se fonde sur le langage de description de pages HTML (HyperText Markup Language). Rappelons qu’il s’agit non pas d’un langage de programmation, mais d’un langage précisant l’aspect des informations sur un écran distant du serveur.

Tout texte un peu long est constitué d’éléments structurels : titres, sous-titres, paragraphes de texte, listes, mots en gras ou en italique, tableaux, etc. Le principe de HTML est d’insérer des codes spéciaux appelés balises (tags) entre les mots du texte. Une balise se distingue en commençant par un signe < et en se terminant par un signe >. Voici comment est codé un texte qui doit être affiché en tant que titre de premier niveau :

<h1>Je suis un grand titre</h1>

C’est dans le navigateur du visiteur que les balises sont interprétées et supprimées du texte tout en affichant ce texte selon les règles définies pour le type de balise concerné.

HTML est un langage très simple à apprendre. Vous trouverez des dizaines de sites et de livres qui vous en expliqueront les rudiments.

HTML ne progresse plus, car il est remplacé progressivement par son descendant XHTML dans sa version 1.06.

13.2.2 CSS

CSS signifie Cascading Stylesheets ou feuilles de style en cascade. C’est un complément au langage HTML rendu nécessaire pour permettre une plus grande richesse de mise en page des sites Web. Ce n’est pas non plus un langage de programmation ; il s’agit d’un vocabulaire pour définir les propriétés d’une série de styles, propriétés qui sont applicables aux contenus de certaines balises HTML.

Les directives CSS permettent par exemple de stipuler que les titres de premier niveau doivent être affichés en corps 18 dans la police Arial non gras avec un espace entre paragraphes de 15 mm.

Ce genre de contrôle de l’aspect est impossible avec les seules balises HTML, car ce langage n’avait pas prévu d’aller aussi loin à l’époque de sa conception. De nos jours, une grande richesse visuelle et une forte cohérence visuelle des sites Web sont devenues indispensables, surtout pour les sites de commerce électronique.

Trois approches sont possibles pour exploiter des styles CSS dans des pages HTML. Voyons-les de la plus locale à la plus globale.

Au niveau local d’un fichier HTML

Dans ce cas, les instructions CSS sont insérées au début du fichier HTML dans une balise <style> :

<head>
<title>Nom du fichier</title>
<style type="text/css">
<!--
   /* ... Instructions CSS ... */
-->
</style>
</head>

Dans un fichier CSS indépendant

La solution la plus effi cace et la plus répandue consiste à créer un fichier de feuilles de style à extension .css qui devient de ce fait exploitable par toute une série de fichiers HTML. Il suffit d’insérer une référence à ce fichier au début de chaque fichier HTML concerné. C’est l’approche choisie dans Joomla! :

<head>
<title>Nom du fichier</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>

À l’intérieur d’une balise HTML

Vous pouvez insérer des instructions CSS à l’intérieur d’une balise HTML, mais la lisibilité s’en
ressent :

<body>
<h1 style="... Instructions CSS ...">...</h1>
</body>

Combinaisons

Les trois approches peuvent se combiner et se contredire au sein d’un même fichier HTML. Vous pouvez définir des règles de base dans le fichier CSS externe, qui s’appliquent à toutes les pages, sauf à celles dans lesquelles le même style est redéfini. Mais cette méthode entraîne rapidement de grosses difficultés de maintenance. Il est préférable de faire évoluer le fichier CSS partagé.

13.2.3 XML

Le langage de marquage étendu XML (Extended Markup Language) est un univers à lui seul. Il
constitue en effet un métalangage, c’est-à-dire un langage pour définir des langages tels que le
HTML. Son origine remonte aux années 1960 avec le langage SGML (Standard Generalized Markup Language). Dans notre contexte, XML nous permet de décrire les métadonnées des templates qui vont servir à l’installateur de templates et à l’affichage dans le Gestionnaire de templates de Joomla!.

Le principe reste d’insérer des balises entre chevrons :

<name>Livre Joomla!</name>

L’énorme différence est qu’en XML aucune balise n’a d’effet intrinsèque. Vous êtes entièrement
libre de définir la structure arborescente de balises et sous-balises et les noms des balises (mais des standards se mettent en place au niveau planétaire pour assurer les échanges de données).

»