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.
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é.
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 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.
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.
Plusieurs solutions existent pour apprendre à écrire une page Web, et vous pouvez les mélanger. Dans l'ordre d'apprentissage, nous vous conseillons de :
Ctrl-U. C'est le plus souvent par
l'imitation d'autres pages qu'on apprend.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.
fr.comp.infosystemes.www.auteurs, très utile notamment si
vous pataugez un peu avec les feuilles de style.