Ecrire du XHTML

Ce texte à pour but de vous permettre d'écrire rapidement une page en XHTML.

Il est structuré de la manière suivante : dans un premier temps, il replace cette technologie dans un contexte historique, puis il fournit quelques rudiments techniques et enfin il apporte un exemple.

Contexte historique

XHTML est la fusion de XML et HTML. Cette fusion à été d'autant plus facile qu'ils ont un ancêtre commun (SGML).

  • 1970 GML (Generalized Markup Language)
  • 1986 SGML (Standard GML) norme ISO 8879
  • 1989 HTML (Hyper Text Markup Language) inventé par le CERN
  • 1991 HTML devient une application de SGML
  • 1994 W3C (World Wide Web Consortium) gère HTML
  • 1998 XML (eXtensible Markup Language)
  • 1999 XHTML (eXtensible HyperText Markup Language)

SGML défini un groupe de langage s'appuyant sur des balises. HTML permet d'introduire des liens hypertextes dans ceux-ci. Alors que XML apporte de la rigueur dans l'écriture en bornant le début et la fin que chaque élément de structure.

En toute logique XHTML permet d'écrire de façon rigoureuse et structurée des documents hypertextes.

Les principes ''XML''

La rigueur de XML vient du fait que sa syntaxe impose la détermination du début et de la fin de chaque élément. La syntaxe du langage ne permet donc pas l'écriture d'un graphe de données, mais uniquement d'un arbre.

Les concepts fondateurs sont les suivants :

  • <BALISE> début un noeud d'une structure de donnée
  • </BALISE> termine le noeud de la structure ouverte pécédement
  • <BALISE>données</BALISE> données attachées à la structure
  • <BALISE/> feuille dans la structure de données
  • <BALISE attr1=“val1”> liste d'attributs qualifiant l'élément de structure (noeud ou feuille)

Les différences entre HTML et XHTML

HTML et XHTML différent, bien entendu, dans les premières lignes des documents qu'ils décrivent, puisque c'est le moyen d'indiquer aux navigateurs la nature du document (HTML ou XHTML).

Les différences imposées par la rigueur de XML se trouvent dans :

  • L'ajout de balises fermantes (les paragraphes </p>, les éléments de listes </li>, etc.). Cela supprime des ambiguïtés d'interprétation (le paragraphe se trouve-t-il dans la liste ou après la liste ?)
  • L'identification des structures isolées (<br />, <hr />, etc.)
  • L'ajout systématique des guillemets ou simples quotes pour les valeurs d'attributs (<td nowrap=“true”>, <img src='logo1.png' alt='logo 1' />, etc.)

Le minimum XHTML

Tous les documents devront commencer par

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
 <head>
  <title>un titre</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>

et se terminer par

 </body>
</html>

Evidemment, les attributs d'encodage et de langue peuvent être adaptés et d'autres éléments peuvent être ajoutés dans la section <head>.

Une page XHTML complète

Votre première page :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
 <head>
  <title>un titre</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
  <h1>Un titre</h1>
   <p> un paragraphe</p>
   <p> un autre</p>
 </body>
</html>

Quelques balises pour commencer

FIXME à continuer. Le Tutorial HTML-4 fait par un ancien élève du DUT-APPC donne une description complète de l'usage des balises utilisables dans le langage XHTML et fournit également une introduction à la gestion des styles avec CSS.

web-base-xhtml.txt · Dernière modification: 2010/09/06 09:38 par deveaux.daniel

Informations sur la pratique du Wiki -- Mention légale
Copyright © 2005-07 UBS - IUT de Vannes - Dept Informatique
Creative Commons License Valid XHTML 1.0 Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed