[PDF] Le langage XHTML cours pdf

(1)

Le langage XHTML

(2)

Le langage XHTML

Nicolas Royackkers

<nicolas.royackkers AT u-picardie POINT fr> Historique des versions

Version 1.1 2008-10-15

Chapitre 1 : mise à jour de la section « Les fondements du web ». Chapitre 2 : mise à jour de la section « Généalogie ». Chapitre 3 : création de la section « Évolutions futures ». Chapitre 4 : mise à jour des sélections de logiciels. Ensemble du document : mise à jour des liens externes.

Version 1.0 2007-01-19

Version initiale du document

Résumé

Le web est basé sur des pages écrites en HTML ou en XHTML, ce second langage étant destiné à remplacer le premier. Dans ce cours, nous présentons d’abord les caractéristiques communes à tous les langages XML. Puis nous étudions le langage XHTML de manière détaillée. Une dernière partie est consacrée aux outils de développement permettant de réaliser et de valider des pages web en XHTML.

Chapitre 1. Le World Wide Web

1. Les fondements du web

Le World Wide Web, ou web, a été inventé par Tim Berners-Lee

(http://fr.wikipedia.org/wiki/Tim_Berners-Lee) en 1989. C’est un ensemble de documents mis à disposition sur le réseau de communication Internet. Le web est un système dit hypertexte, car il est formé de documents liés entre eux par des hyperliens. Un hyperlien, ou lien hypertexte, permet de passer automatiquement de la consultation d’un document à celle d’un autre document qui lui est lié. World Wide Web signifie littéralement « la toile d’araignée mondiale ». Elle est tissée symboliquement par les innombrables hyperliens qui lient les documents.

Le protocole de communication du web est le HTTP, abréviation de l’anglais HyperText Transfer Protocol. Il permet d’échanger tout type de document entre un serveur HTTP et un client HTTP (navigateur web). Les documents de base du web, qui forment la plus grande part de son contenu et le structurent, sont les pages web. Une page web est un document contenant du texte mais qui peut être relié à des images fixes ou animées, des sons ou encore d’autres types de documents.

Actuellement, il existe deux langages utilisés pour écrire les pages web : le HTML (HyperText Markup

Language) et le XHTML (eXtensible HyperText Markup Language). HTML a été créé en 1991 et a

accompagné le développement du web à ses débuts. Ce langage a beaucoup évolué au fil des années mais sa dernière version date de 1999. XHTML a quant à lui été créé en 2000. C’est une version modernisée du langage HTML, destiné à remplacer ce dernier. C’est le langage XHTML que nous allons étudier dans ce cours, afin d’apprendre à réaliser des pages web.

(3)

2. La vie d’une page web

En premier lieu, il est important de connaître le cheminement des pages web : comment sont-elles désignées et transmises ? Quels sont les programmes qui les manipulent ?

Imaginons une page web déjà existante, produite par exemple par l’Université de Picardie. Elle est stockée sur le disque dur d’un ordinateur situé à Amiens et connecté à Internet. Sur cet ordinateur, il fonctionne en permanence un programme qui gère les demandes de pages web en provenance d’Internet. Ce programme s’appelle un serveur HTTP, car il est à l’écoute des requêtes utilisant le protocole HTTP et il doit les satisfaire. Le logiciel serveur HTTP le plus couramment utilisé s’appelle Apache.

Imaginons maintenant un étudiant qui souhaite accéder à la page web précitée. Il se trouve par exemple à Paris, à Singapour ou à Yaoundé. Sur son ordinateur connecté à Internet, il commence par démarrer un navigateur web. Techniquement parlant, ce logiciel est un client HTTP. En effet, il est capable de dialoguer avec un serveur HTTP n’importe où dans le monde afin de récupérer les pages web qui sont gérées par celui-ci. Les navigateurs web les plus connus aujourd’hui sont Internet Explorer, Firefox et Opera.

Dans son navigateur préféré, notre étudiant tape ensuite l’adresse de la page web qu’il désire consulter, par exemple http://www.u-picardie.fr/annuaire.html. Cette adresse s’appelle une URL, pour

Uniform Ressource Locator. Il s’agit d’une chaîne de caractères qui identifie un document de manière unique

sur Internet. L’URL d’un site ou d’une page web commence toujours par la séquence de caractères http://, qui, vous l’aurez deviné, fait référence au protocole de communication HTTP. Quand la touche Entrée est pressée, le navigateur (client HTTP) envoie une requête au serveur HTTP de l’Université de Picardie. Celui-ci reçoit et analyse la requête. En retour, le serveur envoie au navigateur un document : la page web, sous forme d’un fichier XHTML. En principe, le serveur envoie également une feuille de style (fichier CSS), définissant la façon dont la page web doit être présentée. Enfin, selon le contenu de la page, d’autres fichiers peuvent être également transférés : des images fixes, des animations, des sons, des programmes (scripts), etc.

Une fois toutes les données nécessaires parvenues au navigateur, le rendu de la page est effectué. Le plus souvent, elle sera affichée sur un écran. Cependant, le périphérique de sortie n’est pas nécessairement un moniteur. Par exemple, notre étudiant veut peut-être imprimer la page qu’il vient de recevoir. Dans ce cas, il obtiendra un document papier, dont la présentation sera sans doute différente de celle produite par un écran. Les personnes handicapées ont recours à d’autres périphériques, comme par exemple des plages Braille, composés de pièces mécaniques mobiles retranscrivant le texte en Braille (écriture tactile lue avec les doigts). La page web sera alors représentée d’une tout autre manière que sur un écran d’ordinateur. Les non-voyants peuvent également utiliser des synthétiseurs vocaux. Dans ce cas, le contenu de la page sera rendu de manière sonore et non graphique ou tactile. Un contenu donné, défini dans un fichier XHTML, peut donc être représenté par différents périphériques ou média de sortie très différents.

(4)

Une page XHTML peut être rendue par divers périphériques de sortie, qui produiront des représentations physiques très différentes de ce document.

Les possibilités de variation de représentation d’un document ne s’arrêtent pas là. Fixons le périphérique de sortie en prenant pour exemple le plus courant : un écran d’ordinateur. Si aucune feuille de style n’a été envoyée par le serveur, le navigateur affichera la page à l’écran selon un mode défini par défaut : les éléments sont présentés les uns en dessous des autres, les textes sont affichés simplement en noir sur fond blanc, etc. Si elle existe, la feuille de style peut définir n’importe quelle présentation visuelle de la page. Par exemple, le menu sera placé en haut et à gauche, les titres seront affichés en bleu marine sur fond jaune, le fond de la page contiendra une image décorative, etc. Ainsi, le rendu d’un document XHTML par un périphérique donné peut être personnalisé grâce à une ou plusieurs feuilles de style.

(5)

Pour un périphérique de sortie donné (ici un écran), un document XHTML possède un rendu par défaut, qui peut être modifié en profondeur grâce aux feuilles de styles. Ce schéma utilise trois représentations différentes de la page d’accueil du site CSS Zen Garden (http://www.csszengarden.com/tr/francais/) (affichée sans style (http://www.csszengarden.com/zengarden-sample.html), puis avec le style Dazzling Beauty (http://www.csszengarden.com/tr/francais/?cssfile=/195/195.css&page=0) et enfin le style Icicle Outback (http://www.csszengarden.com/tr/francais/?cssfile=/200/200.css&page=0)).

Résumé. HTTP, qui régit la communication sur le web, est un protocole client-serveur. Le logiciel client est un navigateur. Il adresse une requête à un serveur HTTP gérant des documents. Celui-ci envoie en retour une page sous forme d’un fichier XHTML. Cette page web est enfin représentée par le logiciel client pour pouvoir être lue ou écoutée sur un périphérique. La représentation physique du contenu du document dépend du média de sortie d’une part et de la feuille de style associée à la page d’autre part.

Chapitre 2. Les langages à balises

1. Généalogie

HTML et XHTML appartiennent à la même famille. L’histoire de celle-ci éclaire les rapports entre ces deux langages.

Au commencement était le SGML, pour Standard Generalized Markup Language. Ce langage a été développé au début des années 80 et normalisé par l’ISO en 1986. SGML est un langage de balisage, ou langage de description à balises. Il permet de décrire, non pas des documents, mais des langages de description de documents. C’est pourquoi SGML est appelé un métalangage de description. Un langage créé à partir de SGML s’appelle une application SGML, ou, plus simplement, un langage SGML. Les langages SGML ont été très utilisés pour gérer la documentation interne de grandes entreprises industrielles, mais aussi de certaines administrations ou organismes de recherche. Le langage SGML le plus célèbre est toutefois le HTML, qui a permis le développement du web à partir de 1991.

(6)

Le principal inconvénient de SGML est sa complexité, qui le rend difficile à apprendre et a limité sa diffusion. C’est pourquoi XML, pour eXtensible Markup Language, a été créé. XML est une version simplifiée de SGML. Il a été développé par le W3C en 1999. XML reprend les grands principes de SGML mais n’en conserve que les aspects les plus utiles. XML a rencontré immédiatement un grand succès et a trouvé un grand nombre d’applications. De nouveaux langages ont été créés avec XML. Beaucoup de langages SGML ont également été redéfinis avec XML. On parle alors de reformulation d’un langage SGML en un langage XML. C’est ce qui s’est passé pour les langages du web : HTML (langage SGML) a été reformulé en XHTML (langage XML).

L’arbre généalogique de la grande famille des langage de balisage comporte donc deux branches principales. La plus ancienne, qui tend à devenir obsolète, a pour ancêtre le métalangage SGML et comprend le langage HTML. La plus récente, qui concentre toute l’attention désormais, a pour ancêtre le métalangage XML et comprend le langage XHTML.

Arbre généalogique des langages de balisage pour le web.

Concrètement, comment se comparent les deux langages XHTML et HTML ? On peut répondre en donnant la liste de leurs principaux points communs et de leurs principales différences.

Points communs :

HTML (norme 4.01 Strict) et XHTML (norme 1.0 Strict) possèdent exactement les mêmes fonctionnalités ; en d’autres termes, ils permettent de créer des pages structurées de manière identique Ces deux langages sont correctement interprétés par tous les navigateurs récents

Différences :

XHTML possède une syntaxe légèrement différente de HTML ; par exemple, XHTML est sensible à la casse alors que HTML ne l’est pas ; toutes ses balises s’écrivent en minuscules alors que celles de HTML sont écrites en majuscules

(7)

comme son nom l’indique, XHTML est un langage extensible, alors que HTML est figé ; cela signifie que des éléments peuvent être ajoutés au langage selon les besoins de certains utilisateurs Pour en savoir plus : dans les spécifications de XHTML 1.0, le W3C recense les différences entre les langages HTML 4.01 Strict et XHTML 1.0 Strict (http://www.la-grange.net/w3c/xhtml1/#diffs). Ce document imprimable (http://universite.online.fr/supports/pdf/xhtml_memo.pdf) les résume en une page.

2. Les grands principes de XML

Tous les langages XML partagent les mêmes structures et les mêmes règles syntaxiques de base. Nous allons les présenter en utilisant un langage XML fictif qui possède des balises écrites en français.

Dans le cadre de l’harmonisation du format des documents qu’elle utilise, la Confrérie des Joyeux Marmitons (ou CJM) a créé un langage XML qu’elle a baptisé RML, pour Recipe Markup Language (littéralement : « langage de balisage pour les recettes de cuisine »). Dans ce langage, la recette de l’oeuf à la coque s’écrit par exemple de la manière suivante :

<?xml version="1.0" encoding="iso-8859-15" ?>

<!DOCTYPE rml PUBLIC "-//CJM//DTD RML 1.0//FR" "http://www.cjm.org/DTD/rml1.dtd"> <!- une recette à la portée de tous -->

<recette> <titre>L’oeuf à la coque</titre> <durees> <temps_preparation unite="minute">1</temps_preparation> <temps_cuisson unite="minute">3</temps_cuisson> </durees> <ingredients> <liste_non_ordonnee>

<element_de_liste>un oeuf bien frais</element_de_liste> <element_de_liste>du pain</element_de_liste> <element_de_liste>du sel</element_de_liste> </liste_non_ordonnee> </ingredients> <preparation> <liste_ordonnee>

<element_de_liste>faire bouillir de l’eau</element_de_liste>

<element_de_liste>y plonger l’oeuf et déclencher le minuteur</element_de_liste> <element_de_liste>découper le pain en mouillettes</element_de_liste>

<element_de_liste>retirer l’oeuf après 3 minutes de cuisson</element_de_liste>

<element_de_liste>dans un coquetier, casser son extrémité supérieure</element_de_liste> <element_de_liste>saler légèrement et déguster avec les mouillettes</element_de_liste> </liste_ordonnee>

</preparation> <illustration>

</recette>

De façon très classique, cette recette se compose successivement d’un titre, de l’indication des durées de préparation et de cuisson, de la liste des ingrédients, de la procédure de préparation et enfin de la photo du plat préparé.

2.1. Éléments et balises

Tous les langages XML ont pour but de décrire la structure d’un document. Ils utilisent pour cela des balises, qui délimitent des éléments.

Une balise commence par le caractère < (inférieur) et se termine par le caractère > (supérieur). Exemple : <recette>

(8)

Il existe trois types de balises : les balises ouvrantes, les balises fermantes et les balises sans contenu. Les balises ouvrantes et fermantes s’utilisent par paires pour délimiter un contenu. Exemple :

<titre>L’oeuf à la coque</titre>

La balise ouvrante, écrite en premier, est <titre> et la balise fermante est </titre>. Les deux balises possèdent le même nom mais la balise ouvrante commence par le caractère < et la balise fermante par les caractères </. La séquence délimitée par une balise ouvrante et sa balise fermante définissent un élément du document XML. Dans notre exemple, la séquence <titre>L’oeuf à la coque</titre> définit l’élément titre de la recette et spécifie sa valeur (la chaîne de caractères « L’oeuf à la coque »).

Les balises sans contenu s’utilisent seules et non par paires. Elles ne délimitent aucune partie du document. Exemple :

<image source="oeuf_a_la_coque.jpg" description="photo d’un oeuf à la coque" /> Cette balise insère une image dans le document. Les balises sans contenu sont à la fois ouvrantes et fermantes. Elles commencent comme les balises ouvrantes par le caractère < mais se terminent par les caractères /> (et non le caractère > seulement).

2.2. Attributs

Dans l’exemple précédent, nous pouvons remarquer que la balise image n’est pas seulement composée de son nom. En effet après le nom de la balise, se trouvent deux attributs. Un attribut est une expression de type propriété="valeur". Ainsi, source="oeuf_a_la_coque.jpg" et description="photo d’un oeuf à la coque" sont deux attributs de la balise image. Le premier spécifie le nom du fichier à afficher et le second donne une brève description de l’image.

Autre exemple de balise utilisant un attribut dans notre recette : <temps_cuisson unite="minute">3</temps>

Ici, un attribut est utilisé pour préciser l’unité de la durée spécifiée. Comme on le voit, les attributs ne sont pas réservés aux balises sans contenu. Les balises ouvrantes peuvent également utiliser des attributs. En revanche, une balise fermante ne répète pas les attributs de sa balise ouvrante et ne comporte donc jamais d’attribut.

La liste des attributs utilisables pour une balise donnée dépend du langage. Certaines balises n’admettent aucun attribut, d’autres en admettent un ou plusieurs. Certains attributs sont obligatoires et d’autres sont optionnels.

2.3. Structure et représentation

Un langage XML permet de donner une description sémantique et structurelle d’un document. La sémantique se rapporte au sens ou au rôle des éléments du document. Des balises comme ingredients par exemple définissent la nature du texte qu’elles délimitent : un ensemble d’ingrédients. C’est le rôle de ce texte qui est spécifié et non sa structure. D’autres balises apportent une description structurelle. La balise liste_non_ordonnee par exemple définit seulement la structure du texte qu’elle délimite, mais pas du tout la nature de son contenu. D’autres balises enfin peuvent avoir un rôle mixte (sémantique et structurel).

La structure du document est également donnée par l’imbrication des différents éléments XML qui le composent. Dans notre exemple, la balise <recette> est la première ouverte et </recette> est la dernière fermée. Elles englobent toutes les autres balises et l’ensemble du contenu textuel. L’élément recette est appelé l’élément racine du document. Viennent ensuite les éléments XML déclarés dans l’élément recette. Ce sont titre, durees, ingredients, préparation et illustration. Ces éléments sont les éléments enfants de l’élément recette. L’élément recette est appelé l’élément parent de ces éléments. Bien sûr, les éléments enfants peuvent eux-mêmes posséder des enfants et ainsi de suite. Tous les éléments faisant partie de l’ascendance d’un élément sont appelés ses ancêtres. Tous les éléments

(9)

faisant partie de sa descendance sont ses descendants.

Les éléments XML et leur imbrication structurent fortement le document. Cette structure peut être représentée de différentes manières. L’une d’elle est un arbre. On place d’abord l’élément racine, puis on dessine ses enfants, puis les enfants des enfants, et ainsi de suite jusqu’aux feuilles de l’arbre (contenu textuel du document).

Arbre des éléments XML de la recette de l’oeuf à la coque.

Une autre représentation de la structure du document peut être donnée grâce à l’écriture même de celui-ci. Dans notre exemple, nous avons utilisé l’indentation pour mettre en évidence l’imbrication des différents éléments. La convention est de décaler à droite les enfants d’un élément par rapport à celui-ci. On visualise ainsi immédiatement les différents niveaux d’imbrication et la structure du document.

L’indentation facilite beaucoup l’écriture et la lecture du document par un être humain. Cependant, elle n’a rien d’obligatoire, puisque les programmes qui traitent les documents XML, appelés processeurs XML, n’en tiennent pas compte. Il en est de même pour les sauts de ligne. Ainsi, ce n’est pas parce qu’on écrit deux éléments de texte l’un en-dessous de l’autre qu’ils seront représentés ainsi lors du rendu du document.

2.4. Prologue

Les trois premières lignes de notre recette sont un peu particulières et méritent quelques explications. La première ligne du document s’appelle le prologue XML ou simplement le prologue.

<?xml version="1.0" encoding="iso-8859-15" ?>

Il commence par la chaîne de caractères <?xml et se termine par ?>. Cet élément particulier indique que le document qui suit est écrit dans un langage XML. Le prologue peut comporter des attributs dont l’ordre est fixé, dont :

version : le numéro de version de la norme XML utilisée par le langage

encoding : l’encodage des caractères utilisé par le fichier ; iso-8859-15 correspond au jeu de caractères des langues occidentales (symbole de l’euro inclus)

(10)

Le prologue XML n’est pas obligatoire mais son emploi est recommandé. S’il est utilisé, le prologue doit constituer la première ligne du document.

2.5. DTD

La seconde ligne de notre recette est la déclaration de la DTD. Elle spécifie le langage utilisé dans le document.

<!DOCTYPE RML PUBLIC "-//CJM//DTD RML 1.0//FR" "http://www.cjm.org/DTD/RML1.dtd">

DTD est l’abréviation de Document Type Definition, qui signifie littéralement définition de type de document. Ce terme désigne tout simplement les spécifications du langage dans lequel le document est écrit. Nous avons mentionné plus haut que XML était un langage permettant de créer d’autres langages. En fait, il permet de créer des DTD, donc des spécifications (ou définitions) de langages. En pratique, la DTD d’un langage XML contiendra notamment :

la liste de toutes les balises utilisables dans le langage

la liste des attributs obligatoire et optionnels pour chaque balise

les règles d’imbrication entre les balises, c’est-à-dire, pour chaque balise, la liste des balises enfants qui sont obligatoires ou optionnelles et l’ordre dans lequel elles peuvent apparaître

Le dernier point mérite une attention particulière. En effet, il faut toujours avoir l’esprit que les éléments d’un document XML ne peuvent pas être écrits dans n’importe quel ordre. La DTD du langage utilisé impose à ce niveau des contraintes plus ou moins fortes. Reprenons notre exemple, en considérant la balise recette. La DTD du langage RML doit fournir la liste ordonnée de ses balises enfants. Ainsi, on peut imaginer que devront apparaître dans un élément recette, obligatoirement et dans cet ordre, les éléments titre, durees, ingrédients et préparation, tandis que l’élément illustration sera optionnel et n’apparaîtra éventuellement qu’en dernière position.

Nous n’irons pas plus loin dans la description des DTD. Leur réalisation n’intéresse que les concepteurs de langages XML. La plupart des développeurs n’auront jamais à créer de DTD. En revanche, l’utilisation d’une DTD déjà écrite, donc d’un langage XML existant pour réaliser un document, est aujourd’hui courante.

La déclaration d’une DTD dans un document commence par la chaîne de caractères <!DOCTYPE et se termine par >. Savoir interpréter la déclaration d’une DTD n’est pas nécessaire pour l’utiliser. En général, la chaîne de caractères à insérer dans le document est fournie par l’organisme qui a créé le langage. Pour les plus curieux, voici quelques explications

(http://fr.selfhtml.org/xml/regles/declaration_type_document.htm#dtd_externe) sur ce type de déclaration, qui peut paraître au premier abord bien obscure.

La déclaration de DTD, c’est-à-dire la déclaration du langage utilisé dans le document, doit apparaître après le prologue et avant l’élément racine. En pratique, elle occupe généralement la seconde ligne.

2.6. Commentaires

La troisième ligne de notre recette est un commentaire. <!- une recette à la portée de tous -->

Un commentaire commence par la chaîne de caractères <!- et se termine par -->. Il peut contenir n’importe quelle chaîne hormis la séquence de caractères -- (deux tirets successifs). Des commentaires peuvent être insérés à tout endroit du document, sauf à l’intérieur d’une balise. Ils sont ignorés par les processeurs XML.

(11)

Les commentaires sont à usage de documentation interne. En général, ils sont peu utiles dans un document XML, dans la mesure où le balisage explicite par lui-même le sens et la structure du document.

2.7. Document bien formé

Comme nous l’avons mentionné plus haut, tous les langages XML partagent les mêmes règles syntaxiques. Un document qui les respecte est dit bien formé. Passons ces règles en revue.

Un document possède un élément racine et un seul.

Dans notre exemple, cela signifie que nous n’aurions pas pu écrire deux éléments recette juxtaposés dans le même document (pour y faire figurer deux recettes de cuisine différentes). La balise ouvrante et la balise fermante de l’élément racine ne doivent apparaître qu’une seule fois et englober tout le contenu.

Toute balise ouverte est refermée.

En pratique, cette règle impose de :

ne pas oublier la balise fermante correspondant à chaque balise ouvrante

ne pas oublier de fermer en interne les balises sans contenu, en les terminant par /> Un élément enfant est complètement inclus à l’intérieur de son parent.

Cela signifie que la balise ouvrante de l’élément enfant doit être placée après la balise ouvrante de son parent et que la balise fermante de l’élément enfant doit être placée avant la balise fermante de son parent.

Exemple correct :

<a><b>du texte</b></a> Exemple incorrect :

<a><b>du texte</a></b>

Les noms de balises et les noms d’attributs sont écrits en minuscules. Exemples corrects : <recette> .. </recette> <temps_cuisson unite="minute">3</temps_cuisson> Exemples incorrects : <RECETTE> .. </RECETTE> <RECETTE> .. </recette> <temps_cuisson UNITE="minute">3</temps_cuisson>

Les attributs ont toujours une valeur, qui est placée entre guillemets (simples ou doubles). Exemple correct :

(12)

Exemples incorrects :

Les caractères qui jouent un rôle dans le balisage ne peuvent pas être utilisés dans le texte du document. On les remplace par des séquences de caractères spéciales, appelées entités prédéfinies, qui sont données par le tableau suivant :

Caractère Entité prédéfinie < < > > " " ’ ' & & Exemples corrects :

<citation>"Être ou ne pas être, telle est la question."</citation>

<titre>Martin & fils</titre> Exemples incorrects :

<citation>"Être ou ne pas être, telle est la question."</citation> <titre>Martin & fils</titre>

Signalons enfin qu’il existe d’autres règles concernant la dénomination des éléments. Par exemple, le nom d’une balise ne peut pas commencer par un chiffre. Cependant, nous ne détaillerons pas ces règles ici puisqu’elles ne concernent que les concepteurs de langages XML et non leurs utilisateurs.

2.8. Document valide

Un document valide par rapport à une DTD est un document :

bien formé, c’est-à-dire qui respecte les règles syntaxiques décrites précédemment

qui respecte les contraintes définies dans la DTD (balises et attributs permis, règles d’imbrication des éléments du langage, etc.)

En d’autres termes, un document valide respecte d’une part les règles communes à tous les langages XML et d’autre part les règles spécifiques au langage XML dans lequel il est écrit.

Créer un document bien formé est relativement facile (aux fautes de frappe près). Obtenir un document valide est souvent plus difficile car cela impose de connaître et de respecter scrupuleusement toutes les règles du langage. Il existe heureusement des outils de validation automatiques permettant au développeur de corriger rapidement ses documents.

(13)

Chapitre 3. Le langage XHTML

Entrons maintenant dans le vif du sujet avec le langage de création de pages web XHTML. XHTML est un langage XML. Toutes les notions qui ont été abordées au chapitre précédent sont donc applicables au XHTML. Ceci va faciliter considérablement la présentation du langage, puisque nous connaissons déjà ses règles syntaxiques de base. Il nous reste à découvrir les balises qu’il utilise (et leurs attributs) ainsi que les contraintes sur leur ordonnancement.

1. Les différentes normes

Le langage XHTML a été créé par le World Wide Web Consortium (http://www.w3.org/), plus connu sous le nom de W3C. Il s’agit d’un consortium industriel fondé en 1994. Le W3C effectue un travail de normalisation et de recommandation, dans le but d’améliorer le niveau d’interopérabilité et d’accessibilité du web.

Pour en savoir plus : Les buts du W3C (http://www.isoc-gfsi.org/standards/w3c.html)

Le W3C a publié les spécifications de la version 1.0 de XHTML en 2000. Le langage est décliné en trois versions, qui possèdent chacune une DTD : Strict, Transitional et Frameset. Seule la version Strict respecte l’esprit du XML, à savoir décrire la structure et la sémantique d’un document, et non sa présentation. Les deux autres versions ont été créés dans le but de proposer une équivalence complète aux différentes variantes du langage HTML 4.01. Ce langage possède en effet trois versions : Strict, Transitional et Frameset.

En 2001, le W3C publie les spécifications de la version 1.1 de XHTML. Les changements par rapport au XHTML 1.0 Strict sont peu nombreux :

les éléments du langage restent les mêmes, mais ils sont regroupées en modules fonctionnels (c’est pourquoi le XHTML 1.1 est appelé XHTML modulaire)

deux attributs obsolètes disparaissent

l’annotation ruby, utilisé par certaines langues asiatiques, est introduite

À l’attention de celles et ceux qui connaissent bien le langage HTML et ses différentes normes, voici un tableau récapitulant les équivalences entre XHTML et HTML. Les versions mentionnées sur une même ligne possèdent les mêmes fonctionnalités :

Normes XHTML Normes HTML - HTML 3.2 (1997) - HTML 4.0 (1997) XHTML 1.0 Frameset (2000) HTML 4.01 Frameset (1999) XHTML 1.0 Transitional (2000) HTML 4.01 Transitional (1999) XHTML 1.0 Strict (2000) HTML 4.01 Strict (1999) XHTML 1.1 (2001) -

Dans ce cours, nous étudierons la version la plus récente du langage XHTML, à savoir le XHTML 1.1. Note

Tous les exemples présentés dans la suite sont valides pour les versions 1.1 et 1.0 Strict du langage XHTML, qui sont très proches l’une de l’autre.

(14)

2. DTD

Les spécifications du XHTML 1.1 sont publiées par le W3C dans la DTD disponible à l’adresse : http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

La déclaration de la DTD s’effectue en insérant la mention suivante dans le document à réaliser : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

3. Structure d’une page

L’élément racine d’un document XHTML s’appelle html. Il a obligatoirement deux enfants : head suivi de body. head constitue l’entête du document et contiendra diverses informations sur celui-ci. body est le corps du document et englobera tout son contenu textuel.

L’élément head possède un seul enfant obligatoire, qui doit être son premier descendant : title (titre du document). Quant à l’élément body, il ne doit pas être vide, c’est-à-dire qu’il doit compter au moins un enfant parmi ceux qui sont permis par la DTD. L’élément p, qui définit un paragraphe de texte, étant généralement le plus courant dans le corps d’une page, on considère par convention que body doit au moins posséder un élément enfant p.

En n’oubliant pas le prologue XML et la déclaration de la DTD du langage, on déduit de ce qui précède la structure minimale d’un document XHTML vide :

<?xml version="1.0" encoding="iso-8859-15"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> </head> <body> <p></p> </body> </html>

Remarquons que la valeur de l’attribut encoding du prologue est donnée ici à titre indicatif. Le jeu de caractères employé dans le document dépend en effet de l’éditeur de texte utilisé pour écrire celui-ci et de la configuration de ce logiciel. Selon les cas, on pourra aussi employer l’encodage iso-8859-1, UTF-8 ou d’autres encore. Il revient à l’auteur du document d’adapter la valeur de l’attribut encoding en fonction de la configuration qu’il utilise.

Signalons également que le prologue XML, et donc la déclaration de jeu de caractères employé dans le document, n’est pas correctement interprété par certains navigateurs anciens. Afin de s’assurer que cette information sera prise en compte dans tous les cas, il est donc prudent de répéter la déclaration correspondante. Ceci peut être effectué dans l’entête du document, grâce à une balise meta sur laquelle nous reviendrons plus tard :

(http://www.loc.gov/standards/iso639-2/php/French_list.php) : fr pour le français, en pour l’anglais, de pour l’allemand, etc. La balise html ouvrante s’écrira donc de préférence ainsi :

(15)

On en déduit la structure recommandée d’un document XHTML vide, destiné à accueillir un contenu rédigé en français :

?xml version="1.0" encoding="iso-8859-15"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Afin de ne pas avoir à saisir ce squelette pour chaque nouvelle page créée, il est bon de le stocker dans un fichier. Le voici : xhtml_page_minimale_recommandee.html

On notera au passage que l’extension d’un fichier XHTML est « .html ». Les extensions « .xhtml » et « .htm » sont aussi parfois utilisées.

Pour en savoir plus : Introduction aux espaces de noms XML (http://xmlfr.org/documentations/tutoriels/050912-0001)

4. Entête

L’entête du document est délimité par les balises <head> et </head>. Il peut contenir des informations diverses sur celui-ci, mais aussi des références à d’autres fichiers.

Comment l’a vu, le seul élément obligatoire dans un entête, et celui qui doit apparaître en premier, est le titre du document. Exemple :

<title>Université de Picardie Jules Verne - Présentation</title>

Une bonne pratique est de donner un titre composé de deux parties séparées par un tiret. La première rappelle le nom du site et la seconde indique le thème de la page. Le titre est la seule information contenue dans l’entête qui sera affichée par le navigateur. Cet affichage est réalisé dans une zone appelée barre de titre, située en haut de la fenêtre. Dans les navigateurs modernes proposant des onglets, le titre de la page, éventuellement tronqué à droite, s’affiche également dans l’onglet :

Les autres éléments de l’entête sont optionnels et peuvent apparaître dans n’importe quel ordre. Les éléments les plus utilisés sont meta, link et script.

L’élément meta permet d’inclure toutes sortes d’informations concernant le document. Ces informations pourront être utilisées par le navigateur ou par les moteurs de recherche. Chaque élément meta prend la forme d’un couple propriété-valeur. Le nom de la propriété est défini par les attributs name ou http-equiv. La valeur est définie par l’attribut content. Voici quelques exemples courants.

(16)

L’encodage du document (jeu de caractères) :

Le nom de l’auteur de la page :

Une liste des principaux mots-clés associés au contenu de la page :

L’élément link permet de définir un lien avec un autre document. Il est le plus souvent employé pour désigner une feuille de style externe, qui sera utilisée lors du rendu de la page dans le navigateur. Exemple : <link rel="stylesheet" type="text/css" href="css/general.css" media="screen" /> Les feuilles de style et leur utilisation seront étudiées dans la séquence de cours suivante.

Enfin, l’élément script permet d’insérer un script dans la page. Exemple avec un programme JavaScript contenu dans un fichier externe :

Notons que script peut également être utilisé dans le corps d’un document XHTML (élément body). L’utilisation de JavaScript dans les pages web est décrite dans une autre séquence de cours.

Tous les exemples de ce chapitre sont regroupés dans cette page. Astuce

Si vous cliquez sur le lien précédent, votre navigateur affichera une page vide. C’est normal, puisqu’aucun contenu n’a été placé dans le corps du document, c’est-à-dire entre les balises <body> et </body>. L’intérêt ici est le code source. Pour le visualiser, il suffit de réaliser un clic droit dans la page. Un menu contextuel s’affiche alors et doit comporter une ligne intitulée « code source », « affichage de la source » ou autre mention équivalente. Sélectionner cette option ouvre une nouvelle fenêtre contenant le code XHTML du document. Ce code peut ainsi être étudié, sélectionné ou encore sauvegardé.

5. Corps

Le corps de la page est l’endroit où doit être placé l’ensemble du contenu du document. Le balisage XHTML permet de décrire la structure et la sémantique de ce contenu.

5.1. Éléments bloc et éléments en ligne

L’élément body (corps du document) admet un grand nombre d’éléments d’enfants. Ils sont tous optionnels et l’ordre de leur apparition n’est pas contraint. La seule règle à respecter et que le corps du document doit comporter au moins un élément enfant.

Presque tous les éléments qui peuvent être enfant de l’élément body sont de type bloc (block en anglais). Un élément de type bloc délimite un contenu de taille relativement importante. Affiché par un navigateur, ce contenu prendra la forme d’un rectangle et apparaîtra donc comme un bloc. L’archétype de l’élément bloc est le paragraphe de texte. Lorsque l’on observe une page de texte en prenant un peu de recul, on distingue

(17)

immédiatement cette structure en blocs de la page.

Dans le corps d’un document XHTML, des éléments d’un autre type peuvent également apparaître : ce sont les éléments de type en ligne (inline en anglais). Un élément de type en ligne délimite un contenu de taille réduite. Il s’agit le plus souvent d’une portion de texte, par exemple quelques mots que l’on souhaite mettre en valeur dans une phrase. Un élément en ligne est donc situé à l’intérieur d’un élément bloc.

Les éléments du langage XHTML qui peuvent apparaître dans le corps du document peuvent donc être séparés en deux catégories : les éléments bloc d’une part et les éléments en ligne d’autre part. De façon générale, les éléments blocs permettent de structurer le corps de la page. Les éléments en ligne permettent de structurer ou de marquer sémantiquement le texte à l’intérieur des blocs. Plus précisément :

sauf exception, un élément bloc peut contenir des éléments blocs, des éléments en ligne et des données (du texte)

un élément en ligne peut contenir des éléments en ligne et des données, mais jamais d’élément bloc Bien que cela puisse être modifié grâce aux feuilles de style, le type de l’élément influence également la façon dont il sera positionné par rapport aux autres lors du rendu de la page dans un navigateur. Ainsi, les éléments blocs seront affichés les uns en dessous des autres (ex: paragraphes successifs). En général, un espace vierge sera même inséré automatiquement à la fin de l’affichage d’un bloc, créant une séparation visuelle avec le bloc suivant. Les éléments en ligne seront quant à eux affichés simplement les uns à la suite des autres dans le cours du texte (« sur la suite de la ligne », ou encore « alignés avec les éléments précédents », d’où la dénomination « en ligne »).

Dans la suite, nous préciserons pour chaque élément présenté s’il possède le type bloc ou le type en ligne.

5.2. Titres et paragraphes

Les éléments de base de toute page de texte, qu’elle soit publiée sur le web ou non, sont les titres et les paragraphes.

Il existe six niveaux de titres possibles en XHTML. Ce sont : h1, h2, h3, h4, h5 et h6 (h est ici l’abréviation du mot anglais header). L’élément h1 est un titre de niveau 1, qui est le niveau le plus élevé dans la hiérarchie des titres. On l’utilise en général pour titrer la page. Les éléments h2 peuvent être considérés comme des titres de chapitres, h3 comme des titres de sections, h4 comme des titres de sous-sections, etc. Exemple :

<h1>Présentation</h1>

Un paragraphe de texte est défini par l’élément p. Exemple :

<p>A mi-chemin entre Paris et Lille (moins d’une heure de train chacune),

à deux heures de Bruxelles, à quatre heures d’Amsterdam et à cinq heures de Londres, l’université de Picardie est au coeur de l’Europe.</p>

Les titres et les paragraphes sont des éléments de type bloc. Par défaut, les navigateurs afficheront un espacement après chaque titre et chaque paragraphe. Exemple du corps d’une page comportant un titre général et deux chapitres :

<body>

<h1>Présentation</h1>

<h2>Amiens au coeur de l’Europe</h2> <p>

A mi-chemin entre Paris et Lille (moins d’une heure de train chacune), à deux heures de Bruxelles, à quatre heures d’Amsterdam et à cinq heures

de Londres, l’université de Picardie est au coeur de l’Europe. </p>

(18)

L’université de Picardie Jules Verne est présente dans six villes de la région : Amiens, Beauvais, Creil, Saint-Quentin, Laon, Cuffies-Soissons. </p>

<p>Bienvenue à l’Université de Picardie !</p> </body>

Observez le rendu de cet exemple dans votre navigateur préféré. Note

Dans la suite, nous omettrons de faire figurer les balises <body> et </body> dans les exemple de code, puisque tous les éléments présentés figurent dans le corps du document.

Remarquons que les sauts de ligne figurant dans le texte contenu par un élément bloc sont ignorés lors du rendu de la page par un navigateur. Ainsi, les deux écritures suivantes donneront un affichage identique, sur une seule ligne :

<p>Bienvenue à l’Université de Picardie !</p> et

<p>Bienvenue

à l’Université de Picardie !</p>

Pour provoquer un saut de ligne à l’affichage sans pour autant changer de paragraphe, on utilise l’élément sans contenu br (abréviation de l’anglais break rule). Exemple :

<p>Bienvenue<br />

à l’Université de Picardie !</p>

5.3. Sémantique du texte

Dans le texte d’une page, certains mots ou certaines expressions ont un rôle particulier. XHTML offre de nombreuses balises ayant un rôle sémantique pour les repérer. Comme on peut s’y attendre, presque toutes délimitent des éléments en ligne.

5.3.1. Emphase

L’emphase consiste à mettre en avant une portion de texte. Il s’agit de montrer qu’un mot ou une expression possèdent une importance particulière. XHTML offre deux niveaux de mise en valeur : faible, avec l’élément em et forte avec l’élément strong. Exemple :

<p><em>Ce texte</em> est important, mais <strong>celui-ci</strong> est encore plus important !</p>

5.3.2. Citations

Deux éléments permettent de définir des citations : l’élément en ligne q (pour quote en anglais) et l’élément bloc blockquote. Le choix se fera selon la longueur de la citation et son rôle dans le texte. Exemples : <p>Boileau a écrit : <q>Ce qui se conçoit bien s’énonce clairement</q>.</p> <blockquote>

<p>

Posons pour maxime que les premiers mouvements de la nature sont toujours droits : il n’y a point de perversité originelle dans le coeur humain.

Il ne s’y trouve pas un seul vice dont on ne puisse dire comment et par où il est entré. </p>

(19)

Remarquons que l’élément blockquote ne peut contenir directement du texte. Ce dernier doit être inséré dans un élément enfant de type bloc, par exemple un paragraphe.

L’élément cite permet de préciser l’auteur ou la source d’une citation. S’agissant d’un élément en ligne, il peut être utilisé avec q comme avec blockquote. Exemple :

<p><q>Ce qui se conçoit bien s’énonce clairement.</q> <cite>Boileau</cite></p>

5.3.3. Indice et exposant

XHTML n’est pas un langage adapté à l’écriture d’expressions mathématiques complexes. Il permet cependant d’exprimer les notions d’indice et d’exposant grâce aux éléments sub et sup respectivement. Exemples :

<p>La formule chimique du dioxyde de carbone s’écrit CO<sub>2</sub>.</p> <p>y = x<sup>4</sup> - 3x<sup>2</sup> + 1</p>

5.3.4. Informatique

Pour repérer un fragment de code informatique dans un texte, on utilise l’élément en ligne code. Exemple : <p>Les instructions <code>a=b-a; b=a; a=b+a;</code> permettent d’inverser les valeurs des variables a et b sans déclarer de variable supplémentaire.</p> L’élément en ligne var est plus spécifique et permet d’indiquer le nom d’une variable ou d’un paramètre. Exemple :

<p>N’oublions pas d’initialiser <var>$compteur</var> à zéro.</p>

Pour faire figurer du code source comportant plusieurs lignes dans une page XHTML, on a recours à l’élément pre (abréviation de l’anglais preformatted). pre est un élément bloc particulier. Le texte qu’il contient est affiché dans un navigateur tel qu’il figure dans le fichier XHTML. Ainsi, les passages à la ligne et les tabulations sont ici pris en compte. Exemple :

<p>Un tout petit programme en langage C :</p> <pre>

int main(void) { return 0; }

</pre>

Rappelons que les caractères utilisés par le balisage ne peuvent pas être employés dans le texte de la page. Si par exemple vous souhaitez publier sur le web un cours sur le langage XHTML, les exemples de code devront être adaptés en remplaçant les caractères interdits par des entités prédéfinies :

<p>Utilisation de la balise p :</p>

<pre><p>Ceci est un paragraphe de texte.</p></pre>

Toujours dans le domaine informatique, XHTML offre l’élément en ligne kbd (abréviation de keyboard), qui permet de désigner des commandes à saisir au clavier. Exemple :

<p>Pour lister les fichiers du répertoire courant sous Linux, entrez la commande <kbd>ls -l</kbd></p>

L’élément en ligne samp (abréviation de sample) repère quant à lui les sorties d’un programme. Exemple : <p>L’instruction <code>echo ’Bonjour’;</code>

(20)

5.3.5. Abréviation, acronyme et définition

Terminons par trois balises en ligne dont le nom est assez facile à retenir : abbr identifie une abréviation, acronym un acronyme et dfn un terme à définir (ou définition de terme). Exemples :

<p><abbr>fr</abbr> est une abréviation répertoriée par l’<acronym>ISO</acronym> pour désigner la langue française.</p>

<p>Le <dfn>XHTML</dfn> est un langage de balisage utilisé pour réaliser des pages web.</p> Tous les exemples de balisage sémantique du texte ont été regroupés dans cette page. Observez le rendu par défaut de chacun d’eux dans votre navigateur préféré. Vous remarquerez quelques bizarreries, comme par exemple la mise entre guillemets automatique effectuée pour les citations en ligne mais pas pour les citations dans un bloc. D’autres éléments sémantiques ne possèdent pas de rendu spécifique par défaut et ne se distinguent pas du texte courant. Évidemment, tout ceci peut être modifié à l’aide de feuilles de style.

5.4. Listes

Les listes simples constituent des éléments bloc à vocation uniquement structurelle. On distingue les listes non ordonnées ul (unordered list) et les listes ordonnées ol (ordered list). Une liste doit comporter un ou plusieurs éléments enfants li (list item). Il s’agit des éléments de la liste, également de type bloc, qui contiennent les différentes parties du texte. Reprenons l’exemple de la recette de l’oeuf à la coque :

<h1>Recette de l’oeuf à la coque</h1> <h2>Ingrédients</h2>

<ul>

<li>un oeuf bien frais</li> <li>du pain</li>

<h2>Préparation</h2> <ol>

<li>faire bouillir de l’eau</li>

<li>y plonger l’oeuf et déclencher le minuteur</li> <li>découper le pain en mouillettes</li>

<li>retirer l’oeuf après 2 minutes de cuisson</li>

<li>dans un coquetier, casser son extrémité supérieure</li> <li>saler légèrement et déguster avec les mouillettes</li> </ol>

Lors du rendu du document par défaut, une liste non ordonnée sera représentée par une liste à puces, tandis qu’une liste ordonnée sera représentée sous la forme d’une liste numérotée.

Une liste de définitions possède un rôle à la fois structurel et sémantique. Elle est spécifiée par l’élément bloc dl (definition list). Une liste de définitions doit comporter une ou plusieurs paires d’éléments enfants dt (definition term) et dd (definition description), qui sont tous deux de type bloc. dt contient le terme à définir et dd contient le texte de sa définition. Notons qu’un même terme peut posséder plusieurs définitions différentes (un seul élément dt, plusieurs éléments dd). De même, une définition unique peut correspondre à plusieurs termes différents (plusieurs éléments dt, un seul élément dd). Exemple, avec la définition française de quelques verbes du patois Picard :

(21)

<p>Un peu de Picard :</p> <dl> <dt>Acoufter (v.)</dt> <dd>Recouvrir</dd> <dd>Habiller</dd> <dt>Acouter (v.)</dt> <dd>Écouter</dd> <dt>Acquiérer (v.)</dt> <dt>Caire (v.)</dt> <dt>Querre (v.)</dt> <dd>Aimer</dd> </dl>

Les trois exemples de listes précédents sont regroupés dans cette page. Note

Les listes de définitions ne servent pas uniquement à écrire des glossaires ou des lexiques. Elles peuvent être employées par exemple pour mettre en forme un dialogue ou une interview. L’élément dl possède alors un rôle uniquement structurel. L’article suivant présente encore d’autres types d’utilisation : Les listes de définitions : mal utilisées ou mal comprises ? (http://www.pompage.net/pompe/listesdefinitions/)

5.5. Liens

Nous voici parvenus au coeur du langage XHTML : les liens hypertextes ou hyperliens ou tout simplement liens. Permettant de lier une page avec n’importe quel autre document, ils sont sans doute à l’origine du formidable succès qu’a rencontré le web.

Un lien est inséré à l’aide de l’élément en ligne a (abréviation de l’anglais anchor). La balise ouvrante a comporte l’attribut obligatoire href, qui spécifie l’adresse de la page désignée par le lien (URL du document cible). L’élément a possède également des attributs optionnels qui peuvent être utiles dans certains cas. Citons notamment :

hreflang et/ou xml:lang : spécifient la langue du document cible (utile si elle est différente de la langue utilisée dans le document source)

title : donne une brève description du document désigné par le lien, généralement affichée sous forme d’une info-bulle lors du survol du lien par le pointeur de souris

type : précise le type MIME du document cible (utile si ce dernier ne peut être interprété par le navigateur, comme un fichier ZIP, PDF, etc.)

On peut distinguer plusieurs catégories de liens : les liens vers d’autres sites, les liens vers d’autres pages du même site, les liens internes à une page et enfin les liens spéciaux.

Exemple de lien vers un autre site, également appelé lien externe : <p>Pour plus d’informations, consultez

le site du <a href="http://www.w3.org" hreflang="en">W3C</a>.</p>

Le lien ci-dessus désigne le nom de domaine d’un site, ce qui est équivalent à un lien vers sa page d’accueil. On peut aussi créer des liens directs vers toute autre page ou rubrique d’un site :

<p>Pour plus d’informations, consultez

le site du <a href="http://www.w3.org" hreflang="en">W3C</a>, en particulier la rubrique consacrée

aux <a href="http://www.w3.org/MarkUp/" hreflang="en"> langages de balisage pour le web</a>.</p>

(22)

Quand un lien est défini entre deux pages d’un même site (lien interne), on peut se contenter d’indiquer le nom du fichier cible comme valeur de l’attribut href. Exemple :

<p>N’hésitez pas à <a href="contact.html">nous contacter</a> !</p>

Les choses se compliquent un peu lorsque la page cible ne se trouve pas dans le même répertoire que la page source. Il faut dans ce cas indiquer le chemin relatif du fichier source vers le fichier cible, en utilisant des barres obliques (écriture POSIX) et non des barres obliques inversées (écriture Windows). Exemple avec un fichier cible se trouvant dans un sous-répertoire nommé produits :

<p><a href="produits/disques.html">Disques durs</a></p>

Plutôt que de pointer vers l’ensemble d’une page, on peut vouloir créer un lien vers un endroit précis du document, par exemple le début d’un chapitre particulier. Pour cela, la page cible doit comporter une ancre. Une ancre est définie par l’élément a, mais en utilisant cette fois l’attribut id. Exemple :

<h2><a id="promo">Fins de stock en promotion</a></h2>

id est l’identifiant de l’élément. Il s’agit d’un nom (ou étiquette) qui permet de l’identifier dans la page. De manière à ne pas créer d’ambiguïté, deux éléments ne peuvent pas posséder le même identifiant dans la même page. En d’autres termes, la valeur donnée à un attribut id ne peut apparaître qu’une seule fois dans un même document XHTML.

Pour créer un lien vers une ancre placée dans une page cible, on fait suivre le nom du fichier cible du signe dièse et du nom de l’ancre. Exemple :

<p><a href="produits/disques.html#promo">Disques durs</a> en promotion !</p> Notons que cette technique permet également de créer des liens internes à une page. Dans ce cas, on peut omettre le nom du fichier cible. Exemple d’un lien placé en fin de page et permettant de retourner au début d’un seul clic :

Déclaration de l’ancre au début du premier élément bloc... <h1><a id="haut"></a>Les liens</h1>

...et, plus bas dans la page, déclaration du lien vers cette ancre : <p><a href="#haut">Haut de page</a></p>

Terminons ce tour d’horizon avec les liens spéciaux. Ceux-ci n’utilisent pas le protocole HTTP et vont déclencher l’exécution d’un autre logiciel. L’exemple le plus courant est celui d’un lien de type mailto, qui va ouvrir le logiciel de messagerie configuré par défaut :

<p><a href="mailto:nicolas.royackkers AT u-picardie POINT fr ">Contacter l’auteur</a> du cours</p>

Avertissement

Des programmes robots parcourent en permanence le web afin de récolter les adresses électroniques figurant dans les sites et les inscrire dans les carnets d’adresses de spammeurs. Leur technique est simple : rechercher dans le code les chaînes de caractères comportant le caractère @ et au moins un point. Faire figurer en clair une adresse électronique dans une page web provoquera donc rapidement l’envahissement du compte de courrier correspondant par d’innombrables messages non sollicités. Afin d’éviter ce fléau, il faut rendre l’adresse illisible pour les robots en réalisant un encodage de celle-ci. Différentes méthodes, plus ou moins complexes, peuvent être utilisées dans ce but. Pour en savoir plus, consultez par exemple : Coder les adresses email dans vos pages web (http://aspirine.org/emailcode.php).

(23)

Tous les exemples de code précédents sont réunis dans cette page. On constate que les liens sont rendus en bleu et soulignés par défaut. Ceci a le mérite d’être très repérable, mais cette représentation n’est pas des plus lisibles et se révèle parfois peu esthétique (selon la charte graphique du site). Là encore, les feuilles de style viendront à notre secours en temps voulu.

5.6. Images

Les navigateurs sont capables d’afficher des images dans les pages web. Les formats d’image supportés nativement par tous les navigateurs sont au nombre de trois : GIF, PNG et JPEG. Les deux premiers sont des formats utilisant une compression sans perte, le troisième offre une compression bien supérieure (dont le taux est réglable), mais au prix de la perte de certains détails de l’image.

Les images ne peuvent pas être codées directement dans un document XHTML : chaque image à insérer doit être stockée dans un fichier séparé. On y fait référence dans la page grâce à l’élément img (abréviation de

image). img est un élément en ligne et sans contenu (balise auto-fermante). Il comporte deux attributs obligatoires :

src : l’adresse du fichier contenant l’image à afficher

alt : un texte court décrivant le contenu de l’image ; cet attribut est indispensable pour les périphériques de sortie non visuels (plage Braille, synthétiseur vocal, etc.) ou encore les navigateurs n’affichant pas les images

Exemple :

<p><img src="images/tournesols.jpg" alt="champ de tournesols" /></p> L’élément img comporte différents attributs optionnels, dont on peut citer :

longdesc : une description de l’image sous la forme d’un texte long (complète si besoin la description fournie par alt)

height : hauteur d’affichage de l’image, en pixels width : largeur d’affichage de l’image, en pixels

Bien que l’utilisation de height et width soit courante, elle est déconseillée en pratique. En effet, ces attributs sont généralement employés pour afficher une image avec des dimensions différentes de ses dimensions normales. Or, cela provoque un redimensionnement qui, d’une part, ralentit le rendu de l’image à l’écran et d’autre part provoque une interpolation par le navigateur. L’image apparaît alors pixellisée, voire déformée si ses proportions n’ont pas été respectées. Il est donc préférable de traiter une image au préalable pour lui donner les dimensions voulues plutôt que de forcer un affichage redimensionné dans le navigateur. Éventuellement, les attributs height et/ou width peuvent être utilisés par sécurité, dans le cas où les dimensions d’une image sont critiques dans la présentation d’une page.

Il est facile de combiner des éléments a et img pour créer une image cliquable, c’est-à-dire un lien hypergraphique et non hypertexte. Il suffit de placer une image comme contenu d’un lien. Exemple :

<p>

<img src="images/plants_en_pots.jpg" alt="pots de terre et jeunes plantes"

title="Accéder à la rubrique horticulture" /> </a>

</p>

Un clic de souris en n’importe quel point de l’image entraînera le chargement de la page désignée par le lien. L’emploi de l’attribut title de l’élément img est recommandé dans ce cas. Il permet d’afficher des

(24)

plupart des navigateurs afficheront par défaut les images cliquables entourées d’une bordure bleue, comme on peut le constater dans cette page.

Note

Il est également possible d’associer plusieurs liens à une même image. Pour cela, on définit d’abord différentes zones dans l’image à l’aide de l’élément map. Ensuite, on fait référence à cette carte à l’aide de l’attribut usemap de img. Sans même utiliser d’élément a, chaque zone de l’image devient alors cliquable et peut conduire vers une page différente.

Cette technique est assez lourde à mettre en oeuvre, mais elle est très utile dans certains cas. Son emploi le plus courant est de rendre interactive la carte d’une région ou d’un pays, où l’on pourra cliquer directement sur certaines zones (ex : noms de villes) afin d’obtenir des renseignements sur l’endroit désigné. Pour en savoir plus, voir par exemple : Graphiques composés de liens ou cartes cliquables (image maps) (http://www.validome.org/doc/HTML_fr/html/graphiques/compose_liens.htm). Attention toutefois au code proposé : il est écrit en HTML et non en XHTML.

5.7. Tableaux

En matière de création web, les tableaux possèdent une réputation sulfureuse. En effet, ils ont longtemps été détournés de leur emploi normal pour servir à agencer les pages. Ainsi, un document était souvent découpé en une multitude de cellules de tableaux imbriqués, chacune d’elles permettant de positionner précisément un élément de la page. Bien qu’efficace sur le plan visuel, cette technique de mise en page bafouait le rôle sémantique des tableaux et produisait un code excessivement lourd et difficile à maintenir. Très populaire dans la seconde moitié des années 90, elle a été rendue obsolète par la généralisation des feuilles de style. Pour en savoir plus, consultez par exemple cet excellent article : En quoi la mise en page par tableaux est-elle stupide ? (http://www.cybercodeur.net/weblog/presentations/seybold/everything.html)

Cela étant précisé, les tableaux restent utiles pour présenter des données naturellement tabulaires, que ce soit dans un document bureautique ou une page web. En XHTML, on insère un tableau à l’aide de l’élément table. Ensuite, on définit les lignes du tableau à l’aide d’éléments tr (table row). Enfin, on définit les cellules de chaque ligne à l’aide d’éléments td (table data). Un tableau doit comporter au moins une ligne (élément enfant tr) et une ligne doit compter au moins une cellule (élément enfant td). Exemple :

<table> <tr> <td>Allemagne</td> <td>82</td> </tr> <tr> <td>Danemark</td> <td>5</td> </tr> <tr> <td>Pays-Bas</td> <td>16</td> </tr> </table>

Consultez cet exemple

La représentation par défaut est minimaliste : l’affichage des données occupe la place strictement nécessaire et le contour (ou bordure) des cellules n’est pas dessiné par la plupart des navigateurs. On pourra facilement modifier cela grâce aux feuilles de styles. Alternativement, on peut aussi utiliser les attributs border (largeur de la bordure) et width (largeur du tableau) de l’élément table.

(25)

Il est souvent utile d’ajouter un entête au tableau décrivant la nature des données qu’il contient. Cela peut être effectué en insérant en première position une ligne (élément tr) qui contiendra des cellules particulières définies à l’aide d’éléments th (table header) et non td. On peut également donner un titre au tableau grâce à l’élément caption, qui, s’il est employé, doit être le premier élément enfant de l’élément table.

La présentation de données numériques en colonnes impose de pouvoir spécifier l’alignement des nombres. Pour cela, les éléments table, tr, th et td possèdent un attribut align. Les valeurs les plus courantes qu’il peut prendre sont left, center et right, spécifiant respectivement un alignement du contenu à gauche, au centre et à droite. Si des valeurs d’alignement différentes sont définies dans divers éléments du tableau, la valeur d’alignement d’un élément l’emporte sur celle de ses ancêtres. Exemple :

<caption>Peuplement de trois pays d’Europe</caption> <tr>

<th>Population (en millions)</th> </tr> <tr> <td>Allemagne</td> <td align="right">82</td> </tr> <tr> <td>Danemark</td> <td align="right">5</td> </tr> <tr> <td>Pays-Bas</td> <td align="right">16</td> </tr> </table>

Comme dans les logiciels tableurs, XHTML permet de créer des tableaux dont certaines cellules sont fusionnées, c’est-à-dire réunies en une seule. Pour fusionner plusieurs cellules d’une même ligne, on utilise l’attribut colspan d’un élément td (ou th). La valeur de cet attribut est le nombre de cellules situées à droite de la cellule courante à réunir avec celle-ci. Exemple :

<caption>Notes du second trimestre</caption> <tr> <th>Prénom</th> <th>Maths</th> <th>Français</th> </tr> <tr> <td>Bianca</td> <td align="right">15</td> <td align="right">12</td> </tr> <tr> <td>Mamadou</td> <td align="right">11</td> <td align="right">18</td> </tr> <tr> <td>Jules</td> <td colspan="2" align="center">absent</td> </tr> </table>

(26)

De manière similaire, il est possible de fusionner des cellules appartenant à une même colonne grâce à l’attribut rowspan de l’élément tr :

<caption>Notes du second trimestre</caption> <tr> <th>Prénom</th> <td>Bianca</td> <td>Mamadou</td> <td>Jules</td> </tr> <tr> <th>Maths</th> <td align="right">15</td> <td align="right">11</td> <td rowspan="2">absent</td> </tr> <tr> <th>Français</th> <td align="right">12</td> <td align="right">18</td> </tr> </table>

Tous les exemples précédents sont regroupés dans cette page.

5.8. Formulaires

Les formulaires permettent de saisir des données dans une page web. Celles-ci sont ensuite envoyées au serveur HTTP pour être traitées. Effectuer une recherche par mots-clés, s’inscrire à un site ou encore envoyer un courrier électronique depuis une page sont quelques utilisations des formulaires parmi les plus courantes. On introduit un formulaire dans un document XHTML grâce à l’élément bloc form. Il possède un attribut obligatoire, action, dont la valeur est l’adresse du programme qui traitera le formulaire sur le serveur. Dans les premières années du web, ces programmes étaient appelés scripts CGI et réalisés le plus souvent en langage C, en langages shell ou en Perl. De nos jours, le traitement des données issues d’un formulaire est presque toujours confié à un script PHP.

Il est recommandé de spécifier un autre attribut de l’élément form. Il s’agit de method, qui définit la méthode d’envoi des données vers le serveur. Deux valeurs sont possibles : get ou post. La méthode get est sélectionnée par défaut mais elle ne permet pas de transmettre plus de 255 caractères de données. La méthode post, qui ne souffre pas de cette limitation, est généralement la mieux adaptée aux formulaires. La balise ouvrante d’un formulaire s’écrira donc par exemple :

Un formulaire est composé d’une ou plusieurs zones de saisie. Chacune d’elle est formée d’un champ de saisie et d’un texte indiquant le rôle de ce champ. L’élément en ligne label définit ce texte. Quant au champ de saisie, il sera la plupart du temps introduit grâce à l’élément en ligne input. L’ensemble est contenu dans un élément bloc quelconque, comme un paragraphe. Exemple d’un formulaire de recherche comportant une seule zone de saisie :