les bases et fondements du XHTML

Fondement du XHTML

Avant toute chose, quel sont les buts recherchés par une personne qui met en ligne un document ?

  • que le document soit interprété par n'importe quelle navigateur.
  • que cette interprétation soit identique, quelque soit le navigateur et la plateforme utilisée pour la consulter.

Pour répondre à ces 2 prérequis le XHTML possède un certain nombre de règles strictes. Ces règles découlent de la double origine du XHTML ( le HTML et le XML ).

Le Doctype Document ou DTD

D'après la liste du chapitre précédent, il existe 6 évolutions de HTML...il faut donc un mécanisme pour dire à votre navigateur quelle langage utilisé mais surtout comment interprété votre document. Le mécanisme utilisé par le XHTML est celui du Doctype Document ou DTD. Le DTD est indispensable, sans lui, votre navigateur est obligé de recourir à un système interne de rendu qui diffère selon son constructeur et même parfois pour le même constructeur selon la plateforme que vous utilisée.

Si jusqu'à présent la mention du DTD fait défaut dans plus de 80% des pages que vous rencontrez sur le Web, sachez qu'elle est très importante, car contrairement à une idée reçue, seule la DTD informe réellement votre navigateur sur le langage que vous utilisez sur votre page. Le DTD est un document non XHTML qui définit avec précision toutes les balises utilisables par le XHTML et la manière dont celles-ci seront rendues dans la fenêtre de votre navigateur.

Comment invoquer le DTD de XHTML 1.1 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Les balises

Le XHTML comme le SGML est un langage de description utilisant des balises. Ces balises permettent au navigateur de présenter votre page selon leurs définitions qui se trouvent dans le DTD.

En XHTML, 2 règles de base sont appliquées :

  • chaque balise ouverte doit être fermée;
  • tous les noms de balises doivent être écrits en miniscule;

Si ce n'est pas le cas, votre navigateur aura recours à son système interne et le rendu de votre page sera aléatoire. Voici la structure générale d'une balise :

<nomdelabalise>...contenu...</nomdelabalise>

Il existe des cas où la balise n'a pas besoin d'une balise de fermeture. Dans ce cas de figure, la structure est la suivante :

<nomdelabalise />

l'espace et le / avant le signe > sont important pour que votre balise soit interprétée dans les anciens navigateurs!!!

Les attributs

Une balise peut comporter des attributs pour spécifier leur description. Les attributs sont définis de la manière suivante :

nomattribut="valeur1 valeur2"

Si un attribut est défini alors il doit comporter au moins une valeur. En général on associe une valeur par attribut, mais cela n'est pas une règle.

donc 2 exemples complets d'une balise serait :

<nomdelabalise nomattribut="valeur1 valeur2">...contenu...</nomdelabalise>
<nomdelabalise nomattribut="valeur" />

Enfin, une balise peut contenir autant d'attribut qu'elle désire ainsi les exemples vu ci-dessus peuvent encore se complexifier comme suit :

<nomdelabalise attribut1="valeur1" attribut2="valeur2">...contenu...</nomdelabalise>
<nomdelabalise attribut1="valeur" attribut2="valeur1 valeur2" />

Types de balises

En XHTML il existe 2 types de balises :

  1. les balises de type bloc ;
  2. les balises de type ligne ;

Cette distinction est très importante car une balise de type bloc peut aussi bien contenir d'autres balises de type bloc que des balises de type ligne mais les balises de type ligne ne peuvent contenir que des balises de type ligne. Pour connaître le type d'une balise, le navigateur se réfère à son DTD.

Découpage d'une page XHTML

Une page XHTML est toujours découpée en 2 partie, séparées par des balises. La première partie est l'entête, elle n'est pas entièrement visible sur l'écran mais est indispensable, car elle est interprétée en premier par votre navigateur et peut contenir des informations complémentaires utiles pour un meilleur rendu de votre page. cette partie est définie par la balise <head>.

Il est a noté que c'est dans la partie <head> qu'est défini le titre de votre page web, titre qui apparait dans la barre supérieur de votre navigateur. Le titre est défini dans la balise <title>.

La deuxième partie du document , son corps est défini par la balise <body>. Tous ce qui se trouvent dans la partie body sera rendu directement sur l'écran de votre navigateur.

C'est 2 parties sont incluses dans une balise supérieure, qui définit l'entièreté d'une page web, la balise <html>.

L'ensemble de ces balises et leur ordre est indispensable pour définir une page XHTML.

Enfin, pour être totalement exhaustif, il ne faut pas oublier que l'on est souvent amener à commenter son XHTML, pour plus de clareté et surtout pour se souvenir, de ce que l'on a fait 1 an plus tard, pour cela le XHTML mais à vote disposition une balise spéciale <!-- --> qui sert à commenter le code source de votre document.

Une page XHTML de base doit être composée comme suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>titre de la page</title>
</head>
<body>
<!-- ici viendra le contenu de ma page -->
</body>
</html>

Remarque : les balises par défaut (<html>,<head>,<title>,<body>) sont toutes des balises de type blocs. bien que cela n'est pas beaucoup d'importance pour les balises <head> et <title>.

Catérogies : Tutoriels