Le document XHTML

Un document XHTML est un fichier texte comportant un code et une syntaxe qui lui est propre. On parle d'un document XHTML, d'une page XHTML, ou d'une page Web. Les fichiers ont généralement les extensions: .xhtml, .html, .xht ou .xml (le moins recommandé).

Le document XHTML est divisé en deux sections importantes: l'entête et le corps du document.

Tout d'abord, l'entête du document (HEAD en anglais) contient des informations souvent invisibles aux visiteurs. Ces informations permettent de:

  • classifier le document;
  • modifier la présentation (balises style ou link);
  • d'ajouter des mécanismes dynamiques ou des scripts (balise script).

C'est dans la balise HEAD que l'on définit le titre du document, le nom de l'auteur, la description, les mots-clés et l'encodage du texte [le choix des caractères]. On y place aussi des références vers les langages CSS et Javascript. L'entête est relativement courte comparativement au corps du document.

Ensuite, le corps du document (BODY en anglais) contient l'essentiel du document XHTML. On y place:

  • du texte;
  • des images;
  • des objets multimédias;
  • des tableaux;
  • des listes;
  • des formulaires;
  • etc.

Le corps du document correspond donc à l'espace visible de votre navigateur. La majorité des balises XHTML doivent être placée dans cette section.

Enfin, le code XHTML est composé de balises, d'attributs de balises et d'entités. Le tout est assemblé selon des règles d'imbrication de balises. Ces règles sont définies dans un Définition du Type de Document (DTD). On pourrait comparer ces définitions aux règles de grammaires du français. Chaque page possède une adresse (URL) unique et est reliée à d'autres documents à l'aide de liens hypertextes.

Les balises

Le code XHTML est constitué principalement de balises qui délimitent du texte.

Par exemple voici un fragment d'un document texte:

1. Tutoriel sur le XHTML
2. 
3. Introduction
4. Le XHTML est un langage ...
5. 
6. Conclusion
7. Pour terminer, ...

Comment indiquer que la première ligne constitue le titre principal, les lignes 3 et 4 des sous-titres et les lignes 4 et 7 de simples paragraphes? Lorsqu'on veut publier ce document, on peut utiliser le format XHTML pour délimiter avec des balises des portions du texte. Il existe la balise de début et de fin, la balise seule et les balises spéciales. Toutes les balises XHTML sont en minuscules, sauf une: le DOCTYPE.

La balise de début

La balise de début est constituée du caractère plus petit < suivi d'un nom de balise et du caractère plus grand >. Elle doit obligatoirement se terminer par une balise de fin. Voici des exemples de balises de début: 

<p>   la balise qui se nomme p   (paragraphe)
<h1>  la balise qui se nomme h1  (header 1 - titre de niveau 1)
<div> la balise qui se nomme div (division d'un texte)
<a>   la balise qui se nomme a   (ancre ou hyperlien ayant une adresse Web ou URL)

La balise de fin

La balise de fin est constituée du caractère plus petit < suivi d'une barre oblique /, du nom de balise et du caractère plus grand >. Elle doit obligatoirement être précédée de la balise de début correspondante. Voici des exemples de balises de fin: 

</p>     balise p   (paragraphe)
</h1>   balise h1  (titre de niveau 1)
</div> balise div (division d'un texte)
</a>     balise a   (ancre)

Rappel: on doit toujours utiliser la balise de début avec la balise de fin. <p> ... </p>

La balise seule

La balise seule est une balise qui ne donne pas de signification au texte. Elle a une signification en elle même. Elle est constituée du caractère plus petit <, du nom de balise, d'une barre oblique / et du caractère plus grand >. Souvent on ajoute une espace juste avant la barre oblique /, pour la clarté. En fait, l'espace devant la barre oblique / est nécessaire pour être compatible avec HTML. En XML, toutefois, les deux méthodes sont interchangeables. Voici des exemples de balises seules.

<br />     balise br (break line) changement de ligne (retour de chariot)
<hr />     balise hr (horizontal rule) barre horizontale pour séparer le contenu.
<hr/>      balise hr (horizontal rule) même chose sans espace avant la barre oblique

Remarque: les développeurs respectent habituellement les règles du HTML pour savoir si la balise doit avoir une fin et un début ou si la balise est seule. On n'écrit presque jamais <img></img> (on écrit seulement <img />) et on n'écrit presque jamais <div /> (on utilise <div></div>) par convention.

Balises spéciales

Parmis les formes standards de balises, il existe 4 types de balises spéciales qui n'obéissent pas aux règles des balises simples.

  1. Les instructions XML, par exemple, la première balise qui définit la syntaxe XML et l'encodage du document: 
    <?xml version="1.0" encoding="iso-8859-1"?>
  2. Les types de document (DOCTYPE). En XHTML version 1.0, il en existe 3. La balise DOCTYPE doit être en majuscule. Voici la balise du DOCTYPE strict: 
    <!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. Les commentaires XHTML. Les commentaires doivent comporter un espace après les tirets de départ, et avant les tirets de fin. Il ne faut pas utiliser des tirets (-- ou --- ou plus) à l'intérieur de nos commentaires. 
    <!-- Ceci est un commentaire XHTML -->
  4. Et le dernier (très peu utilisé en XHTML), l'échappement XML de caractères spéciaux. Les blocs <![CDATA[ ]]> devraient être utilisés uniquement dans les documents en mode XML et donc avec les navigateurs supportant le XML. 
    <![CDATA[  
Ce texte peut contenir des caractères spéciaux comme le >, le < ou le & sans problème.
]]>

Exemple du haut avec des balises

1. <h1>Tutoriel sur le XHTML</h1>
2. <!-- L'introduction doit est relativement courte, 10% du texte environ. -->

3. <h2>Introduction</h2>
4. <p>Le XHTML est un langage ...</p>

5. <hr /><!-- On sépare l'introduction et la conclusion avec une barre horizontale -->

6. <h2>Conclusion</h2>
7. <p>Pour terminer, ...</p>

Les attributs

Les attributs servent à qualifier et à donner des informations supplémentaires à une balise. Certains attributs sont obligatoires dans quelques balises. Les attributs sont placés dans les balises de début ou les balises seules. Il ne faut jamais placer d'attribut dans les balises de fin. Chaque attribut possède cette forme: nomattribut="valeurattribut". Le signe égal (=) et les guillemets doivent toujours être présents. On doit utiliser des doubles guillemets " " ou des simples guillemets ' ' par paire. Dans une balise, les attributs sont séparés entre eux par des espaces. On ne peut pas répéter plusieurs fois le même attribut dans la même balise. Voici quelques exemples:

<img src='nomImage.gif' alt="Description de l'image" />
  Le fichier 'nomImage.gif' est affichée dans le document HTML. 
  Si l'image ne peut pas être affichée, un texte alternatif est affiché.
  Remarquer que l'on peut utiliser des simples ou des doubles guillemets dans la même balise.
  On ne peut pas, par contre, commencer à l'aide d'un simple guillemet et terminer par un double guillemet ou vice-versa.

<a href="page2.htm">Page Suivante</a>
  Lorsque l'usager clique sur le texte Page suivante, le navigateur ouvre et affiche le fichier "page2.htm".

<p id="important">Vous devez absolument lire ceci!</p>
  Le paragraphe utilise un identifiant unique permettant d'appliquer un style CSS, 
  de former une adresse URL, de former un lien interne ou encore d'être utilisé dans un script.

L'imbrication de balises

Les balises sont comme les poupés russes (matriochka), elles s'emboîtent les unes dans les autres. Elles s'imbriquent dans un ordre précis en formant une hiérarchie. On dit donc que le code est structuré. Par exemple, la balise principale d'une page XHTML est la balise <html></html>. Toutes les autres balises simples seront imbriquées (indirectement) à l'intérieur de la balise html. Il faut respecter l'ordre de chaque balise en regardant leur définition respective dans un fichier DTD ou dans un tableau de référence. En XHTML, l'imbrication est stricte. On ne peut pas commencer une balise X, commencer une balise Y, fermer la balise X, et fermer la balise Y. 

Ce chevauchement n'est pas toléré: <X><Y></X></Y>.

Voici un exemple d'imbrication de balise:

<!-- Cet exemple n'est pas complet, un document xhtml comporte une instruction xml et un DOCTYPE -->
<html lang="fr">
	<head>
		<title>Titre du document (barre de titre du fureteur, moteur de recherche)</title>
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
	</head>

	<body>
		<h1>Titre affiché à l'écran</h1>
		<p>Ceci est un paragraphe avec un <a href="lien.htm">lien</a></p>
	</body>
</html>

Note: les développeurs indentent leur code (avec des tabulations ou des espaces) d'après l'ordre d'imbrication des balises.

Les liens hypertextes et les URLs

Les liens hypertextes ou hyperliens permettent de lier un document XHTML à d'autres documents (XHTML, HTML, images, son, animations, etc.). Il en existe une grande variété mais on peut les classés rapidement en 3 catégories. Les liens absolus (sur internet), les liens locaux (adresses locales) et les liens relatifs.

Liens absolus

Les liens absolus (sur internet), qu'on nomme aussi Unique Ressource Location (URL), sont des liens vers une seule ressource, un seul document ou un seul fragment de document peut importe où l'on se trouve. Le lien mènera toujours vers la même destination. Dans un navigateur Web par exemple, lorsqu'une personne veut aller sur le site du W3C, il peut taper: http://www.w3c.org/ dans la barre d'adresse. Sur mon ordinateur, sur l'ordinateur de mes parents, sur l'ordinateur d'un ami en France, l'adresse est liée au même document. Voici des exemples de liens absolus:

Pages Web: Serveur HyperText Transfert Protocol (HTTP)
http://www.google.com/
http:// désigne le protocole utilisé, et www.google.com est le nom de domaine. Cette adresse pointe vers un fichier sur le serveur HTTP de Google.
http://openweb.eu.org/xhtml/
On peut spécifier des répertoires à la suite du nom de domaine.
http://www.perdu.com/index.html
On peut spécifier un nom de fichier.
http://www.google.ca/intl/en_ca/images/logo.gif
Une adresse peut pointer vers tous les fichiers accessibles sur les serveurs Web. Images (.png, .jpg, .gif), sons (.ogg, .wav, .mp3), vidéos (.mov, .avi), animations (.swf, .svgz), exécutables (.exe), archives (.zip), etc.
http://yansanmo.progysm.com:8080/
On peut utiliser un autre port, le 8080 par exemple. Le port par défaut pour les serveurs HTTP est le 80.
http://www.cybercodeur.net/#contentZone
À l'aide du dièse (#) et d'un identifiant, on peut accéder directement à une partie d'une page Web.
Adresse de courriel
mailto:yansanmo.site@gmail.com
Selon la configuration logiciel, cette URL permet d'écrire un courriel à l'adresse indiquée après le protocol mailto:
Serveurs FTP
ftp://ftp.mozilla.org/
Les serveurs FTP permettent l'échange de fichiers et de répertoires entiers.
Serveurs IRC
irc://calvino.freenode.net/
On peut se connecter à des serveurs IRC et même à des canaux en ajoutant leur nom à l'URL.

Liens locaux

Les liens locaux pointent vers des fichiers ou des ressources qui se trouvent sur votre ordinateur. On ne peut pas les utiliser sur Internet.

Beaucoup de débutants font l'erreur d'utiliser des liens sur leur pages Web qui ressemblent à "file:///c:|/windows/monfichier.gif". Ensuite, ils se demandent pourquoi leurs amis ne sont pas capables de voir ses fichiers et ses pages Web correctement. La raison est bien simple, le lien pointe vers l'ordinateur de chaques personnes qui consultent le document. Il n'est pas unique. Le fichier peut être différent sur chaque ordinateur.

Un autre exemple d'adresse locale est celle du serveur HTTP local, http://127.0.0.1/ ou http://localhost/. Il s'agit bien d'une adresse http://, mais le lien pointe vers votre ordinateur à partir de votre ordinateur uniquement. Tous les autres ordinateurs vont pointer vers eux mêmes et non pas vers votre ordinateur.

On pourrait comparer ces liens à la position de votre chambre dans votre maison. Si je dis, ma chambre est la troisième porte à droite, la phrase est vraie lorsque je me situe dans ma maison. Cependant, je ne peux pas le dire dans la maison de quelqu'un d'autre.

Liens relatifs

Les liens relatifs dépendent toujours du répertoire courrant. On peut comparer ces liens en disant qu'un objet se trouve à gauche. À gauche de quoi? Il faut toujours avoir un point de repère pour savoir où est l'objet de façon précise.

Par exemple, à partir du répertoire "http://yansanmo.progysm.com:80/test/xhtml/", voici où je peux aller:

Même répertoire: ./
"./" accède au même répertoire "http://yansanmo.progysm.com/test/xhtml/"
Fichier du même répertoire: fichier.ext
"fichier.ext" accède à "http://yansanmo.progysm.com:80/test/xhtml/fichier.ext"
"sousdossier/fichier.ext" accède à "http://yansanmo.progysm.com/test/xhtml/sousdossier/fichier.ext"
Répertoire parent: ../
"../" accède à "http://yansanmo.progysm.com/test/"
"../css/" accède à "http://yansanmo.progysm.com/test/css/"
Racine du serveur: /
Accède directement à la racine du serveur.
"/" accède à "http://yansanmo.progysm.com/" et
"/educatio/" accède à "http://yansanmo.progysm.com/educatio/.

Caractères spéciaux : les entités

Les entités permettent d'écrire des caractères spéciaux ( le signe pour le copyright par exemple ) dans un document XHTML. Il débute par un & (esperluette) et finissent par un ; (point-virgule). On utilise généralement des chartes sur Internet ou des fonctionnalités de conversion dans des logiciels d'éditions pour les insérer. Voici quelques caractères spéciaux:

  • &amp; : & : esperluette (pour les hyperliens entre autres)
  • &gt; : > : plus grand que (greater than)
  • &lt; : < : plus petit que (lower than)
  • &quot; : " : double guillemets
  • &copy; : © : signe du copyright
  • ...

Accents français

Il est assez simple de convertir les accents français en entités.

  • Accent aigu: & + lettre (minuscule ou majuscule) + acute + ;
  • Accent grave: & + lettre + grave + ;
  • Accent circonflexe: & + lettre + circ + ;
  • Tréma: & + lettre + uml + ;
  • Cédille: & + lettre + cedil + ;

Exemples

  • Accent aigu: &Aacute; ( Á ), &eacute; ( é )
  • Accent grave: &agrave; ( à ), &Egrave; ( È )
  • Accent circonflexe: &ocirc; ( ô )
  • Tréma: &iuml; ( ï )
  • Cédille: & + &ccedil; ( ç )

Précédent | Suivant

Lire les commentaires | Laisser un commentaire