Apprendre le XHTML

Écrit par : L'équipe de WebSimple

Définition

Le XHTML (eXtensible Hypertext Markup Language) est un langage de balisage servant à l'écriture de pages Web. L'une des premières versions du XHTML (1.0) est une reformulation du HTML. La différence est seulement un changement de syntaxe. Le but de du XHTML est d'afficher du contenu sur une page Web. Le XHTML se préoccupe principalement du contenu et non de la présentation.

Les premiers pas

Voici un exemple de code XHTML standard

<html>
   <head>
      <title>Le XHTML</title>
   </head>

   <body>
      <h1>Apprendre le XHTML</h1>

      <p>
         Vous apprendrez ici les rudiments du XHTML.
      </p>

   </body>
</html>

Balise et attribut ?

Balise
Forme concrète d'un élément. On parlera aussi de balise d'ouverture et de fermeture. Par exemple <html> est la balise d'ouverture de l'élément html, et </html> est la balise de fermeture de ce même élément.

Attribut
Un attribut est une propriété d'un élément. Il permet de préciser le rôle ou certaines propriétés d'une balise dans le document.

Les balises et les attributs suivent quelques règles simples :

  • le nom des balises doit être écrit en minuscules ;
  • toute balise ouverte doit être fermée (par exemple <html>...</html>) ;
  • le nom des attributs doit être écrit en minuscules ;
  • la valeur des attributs doit être entre guillemets doubles.
ex : <img src= “chien.jpg” alt= “Chien” />

Voici la schématisation du code précédant. L'élément racine est « html » qui contient les enfants « head » et « body ». « head », par exemple a pour enfant « title » donc on peut dire que « title » a pour parent « head » et pour ancêtre « html ». On pourra donc parler d'éléments descendants et ascendants.

Schématisation

Conception d'un fichier XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
      <title>Le XHTML</title>
   </head>

   <body>
      <h1>Apprendre le XHTML</h1>

      <p>
         Vous apprendrez ici les rudiments du XHTML.
      </p>

   </body>
</html>

1. L'élément DOCTYPE provient de l'ancêtre du HTML : SGML. Cet élément indique le type du langage qui le suit en plus de l'endroit où l'on peut trouver la feuille de déclaration de ce langage. Le DOCTYPE se trouve toujours à la première ligne d'un document XHTML. Pour plus d'informations sur les différents types de DOCTYPE vous pouvez visiter le site suivant : http://www.w3schools.com/xhtml/xhtml_dtd.asp.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. L'élément « html » est l'élément racine le plus important d'une page XHTML. C'est celui-ci qui contiendra tout le contenu de la page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
</html>

3. L'élément « head » est un élément obligatoire du XHTML tout comme « html » et « body ». C'est dans celui-ci que l'on peut inclure certains éléments (qui ne seront pas visible à l'écran de l'internaute) comme les descriptions des pages. C'est entre ces balises que l'on pourra inclure les feuilles de style externes, les feuilles de script, le titre de la page ainsi que les métadonnées.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
      <title>Le XHTML</title>
   </head>
</html>

4. L'élément « body » est la seconde partie obligatoire du XHTML. C'est lui qui contient l'information destinée à l'internaute (textes, images, animations, etc.). Tout le contenu devra être inclus dans les éléments descendants de « body ».

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
      <title>Le XHTML</title>
   </head>

   <body>
      <h1>Apprendre le XHTML</h1>

      <p>
         Vous apprendrez ici les rudiments du XHTML.
      </p>

   </body>
</html>

Tutoriel

Voici le code de base à utiliser. Celui-ci ne contient rien de visible pour l'internaute. Ceux-ci sont les éléments obligatoires au bon fonctionnement d'une page Web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
      <title></title>
   </head>

   <body>
   </body>
</html>

Il faut maintenant ajouter un titre à la page Internet (celui-ci sera apparent dans la barre de titre du navigateur).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
      <title>Le XHTML</title>
   </head>

   <body>
   </body>
</html>

Faisons maintenant voir à l'utilisateur ce que l'on peut faire. Nous allons ajouter un titre visible sur la page écran à l'aide des balises « h1 ».

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
      <title>Le XHTML</title>
   </head>

   <body>
      <h1>Apprendre le XHTML</h1>
   </body>
</html>

Résultat:

Résultat

Il faut maintenant ajouter un peu de texte à cette page presque vide. Ajoutons alors un paragraphe à l'aide de la balise <p>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
      <title>Le XHTML</title>
   </head>

   <body>
      <h1>Apprendre le XHTML</h1>
      <p>Vous apprendrez ici les rudiments du XHTML.</p>
   </body>
</html>

Résultat:

Résultat

Vous désirez ajouter une image afin d'embellir le tout ? Facile!! Cependant, il faut bien placer l'image au bon endroit. Dans le cas suivant, l'image est dans le même emplacement que le fichier XHTML. Il est important pour des raisons d'accessibilité surtout, de ne pas oublier l'attribut « alt ». Cet attribut sert à afficher une description textuelle de l'image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
      <title>Le XHTML</title>
   </head>

   <body>
      <h1>Apprendre le XHTML</h1>
      <p>Vous apprendrez ici les rudiments du XHTML.</p>

      <img src="chien.jpg" alt="Chien" />
   </body>
</html>
Résultat

Vous désirez inclure un lien vers une page externe? Par exemple faire connaître un article sur Wikipédia? Vous pouvez inclure un lien donnant directement accès à ce site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
      <title>Le XHTML</title>
   </head>

   <body>
      <h1>Apprendre le XHTML</h1>
      <p>Vous apprendrez ici les rudiments du XHTML.</p>

      <img src="chien.jpg" alt="Chien" />

      <a href="http://fr.wikipedia.org/wiki/xhtml" title="Wikipedia">Wikipedia - XHTML</a>

   </body>
</html>

Le résultat final?

Résultat

Si vous voulez embellir cette page, vous êtes invité à aller visiter la section CSS. Maintenant que vous connaissez les principes de bases du XHTML, vous pouvez à présent poursuivre vos apprentissages directement à partir des divers tutoriaux proposés sur le site.

Références

http://w3schools.com/tags/default.asp
http://openweb.eu.org/xhtml/
http://www.la-grange.net/w3c/xhtml1/
http://fr.wikipedia.org/wiki/XHTML
http://ptaff.ca/xhtml/
http://www.pompage.net/pompe/declarations/