# XHTML

# Écrire une page Web

Vous trouverez ici une introduction aux différents langages servant à écrire une page Web : le XHTML, bien sûr, mais aussi les feuilles de style (CSS).

Si vous êtes pressé, vous pouvez aller directement lire notre Tutoriel XHTML. Pour des questions plus avancées, vous pouvez poser vos questions sur Forum, dans le groupe `informatique.html`.

## Au commencement était le XHTML

Le XHTML (eXtended HyperText Mark-up Language) est le langage des pages Web. Il succède au HTML, créé en 1992, et est conforme aux normes du XML (eXtensible Mark-up Language). Son développement actuel est l'œuvre du W3C, un consortium regroupant les principaux acteurs du Web (Microsoft, AOL, Opera, IBM, Apple ou encore MacroMedia). À l'heure actuelle, nous en sommes à XHTML 1.0.

La structure de base du XHTML, ce sont les balises (tags en anglais) qui définissent les éléments de la page Web qu'ils entourent. Voici un exemple de balise :

    <title>Les chevaliers-paysans du lac de Paladru</title>

<title> est la balise qui définit le titre d'une la page Web. Notez que les balises vont par paire, avec une ouvrante (<title>) et une fermante, différenciée par un / (</title>). Autre exemple :

    <strong>Important</strong> : votre tiers provisionnel est dû pour le <em>15 mai</em>.

La balise <strong> indique que l'élément qu'elle renferme doit être renforcé. La plupart des navigateurs rendent ceci en mettant le(s) mot(s) en gras. La balise <em> (pour emphasize) indique que l'élément doit être mis en valeur, ce qui est généralement traduit par des italiques.

Vous pouvez écrire du XHTML avec un simple éditeur de texte comme NEdit, ou avec un éditeur WYSIWYG (ce que vous voyez à l'écran est ce qui sera affiché sur le Web) comme Composer, l'éditeur Web de Mozilla. C'est un langage facile à apprendre, qui ne nécessite aucune connaissance préalable en programmation. Évidemment, plus vous voulez faire des choses tape-à-l'œil, plus c'est compliqué.

## Fond & forme

### Principes : interopérabilité et accessibilité

L'un des grands problèmes de la création Web est que vous n'avez aucun contrôle sur les outils qu'utiliseront vos visiteurs. Ils peuvent utiliser Internet Explorer comme Mozilla ou Opera ; Windows comme Mac OS, Unix/Linux ou BeOS ; une bête de course comme un vieux PC asthmatique avec écran pourri ; une connexion par modem 56Ko comme une connexion ADSL 1 Go. C'est ce qu'on appelle l'interopérabilité : on doit pouvoir lire votre page dans des conditions correctes indépendamment de son matériel et de ses logiciels.

Et n'oubliez pas aussi que vos utilisateurs peuvent être handicapés (incapables d'utiliser une souris ou un clavier par exemple), malvoyants ou aveugles, ou même simplement daltoniens (un peu moins de 10% de la population masculine). C'est l'accessibilité : un handicapé doit pouvoir utiliser votre site comme tout le monde.

Enfin, méditez cette phrase de Tim Berners-Lee, l'inventeur du Web, parue dans Technology Review en 1996 :

> Quiconque appose sur une page du web un logo du type : « Cette page est optimisée pour le navigateur X » est quelqu'un qui semble souhaiter revenir à l'époque préhistorique d'avant le web, lorsque l'on avait très peu de chances de pouvoir lire un document écrit sur un autre ordinateur, un autre traitement de texte ou un autre réseau.

### Le fond : le XHTML

Le principe de base du XHTML est qu'il se préoccupe du contenu et non du rendu visuel. Si vous avez fait un peu de LaTeX, cette manière de travailler devrait vous être familière. Les « styles » de Word s'en approchent également. Vous définissez des titres, des éléments importants, des citations, des liens. Tout le côté décoratif (savoir si la police de caractères fera telle ou telle taille, si votre texte sera en rouge ou bleu, etc.) est dévolu aux feuilles de style.

### La forme : les feuilles de style

CSS est le langage des feuilles de style. Ciel, un autre langage à apprendre ! Rassurez-vous, CSS est complémentaire du XHTML. CSS1 est apparu en 1996. CSS2, qui prend le relais, est lui apparu en 1998. À l'heure actuelle, c'est CSS2.1 (septembre 2003) qui fait autorité.

Les feuilles de style sont une manière simple de prendre en charge le côté esthétique d'une page Web. Tandis que le XHTML ne s'occupe que de la structure syntaxique de la page, CSS ajoute à votre gré couleurs, fontes exotiques, effets de texte. Cette dissociation des rôles permet de ne pas pénaliser les vieux navigateurs, ou les navigateurs en mode texte (comme Lynx ou W3M), ou encore ceux qui utilisent des médias différents (assistant personnel, téléphone portable, ordinateur avec synthétiseur vocal). Elle vous permet aussi de changer radicalement l'esthétique de votre page en modifiant un seul fichier. Consultez par exemple le CSS Zen Garden pour voir ce qu'on peut faire.

## Comment apprendre ?

Plusieurs solutions existent pour apprendre à écrire une page Web, et vous pouvez les mélanger. Dans l'ordre d'apprentissage, nous vous conseillons de :

- lire notre tutoriel XHTML. Il vous permettra de faire des pages simples et sobres. Même si vous voulez vous lancer dans quelque chose de compliqué, ou si vous avez décidé d'utiliser un éditeur WYSIWYG, lisez-le. Mieux vaut savoir un minimum ce qu'on fait, non ?
- lire notre tutoriel CSS. Attention : il est encore en cours de rédaction.
- regarder le code source d'autres pages, en commençant par des pages simples. Avec Mozilla, vous avez accès au code source en tapant `Ctrl-U`. C'est le plus souvent par l'imitation d'autres pages qu'on apprend.
- lire les spécifications du W3C. À lire, celle du XHTML 1.0, puis celle de CSS2.1. Elles sont bien plus lisibles qu'il n'y paraît, mais c'est vrai que ce n'est pas le meilleur moyen pour débuter.

Si vous n'avez pas le temps ou l'envie, essayez nos Thèmes : un kit comprenant un fichier-type en HTML et des feuilles de style déjà toutes faites. Vous pouvez ainsi avoir un joli site en 2 coups de cuiller à pot.

## Ressources sur le Web

### Documents normatifs

- le site Web du W3C
- la spécification de XHTML 1.0, la version actuelle du XHTML : en anglais (seule version normative), ou la traduction française
- la spécification de CSS 2.1, le langage des feuilles de style : en anglais (seule version existante), ou la traduction française.
- les directives pour l'accessibilité des données sur le Web : comment faire des sites accessibles aux handicapés ; en anglais (version officielle) ou en français
- le Standard Unicode, dont le but est de représenter tous les langages de la Terre, de l'anglais aux kanjis en passant par le devanagari, le viêtnamien ou l'arabe

### Outils

- le validateur de (X)HTML du W3C
- un validateur CSS du W3C
- un vérificateur de liens du W3C

### Aller plus loin

- l'OpenWeb Group, un groupe de professionnels attachés aux standards du Web : articles de fond, tutoriels et études de cas.
- CSS Zen Garden : une démonstration magistrale de la puissance et de l'intérêt des feuilles de style. En un seul clic, vous pouvez changer de feuille de style et voir le site prendre une toute autre tête. [anglais]
- Position Is Everything : site qui répertorie les bugs dans l'implémentation CSS des navigateurs actuels (surtout Internet Explorer) et explique comment se passer des tableaux dans la mise en page [anglais]
- des tables de test pour Unicode
- Browser News : les dernières nouveautés concernant les différents navigateurs, et d'intéressantes ressources, en particulier un tableau des principales fontes disponibles pour Windows, Mac OS et Unix/Linux.
- Pescadoo.Lab : manipuler les couleurs pour le Web, choisir les bonnes couleurs et les bonnes palettes graphiques. Dans le même genre, il y a aussi ChromoWeb.
- enfin, ce n'est pas un site Web mais un groupe de Usenet-fr : `fr.comp.infosystemes.www.auteurs`, très utile notamment si vous pataugez un peu avec les feuilles de style.

Auteur : Marie-Lan Nguyen. Dernière modification le