Les bases du XHTML

1. Le XHTML

Pour bien commencer notre étude du XHTML nous allons voir les règles dont il faut tenir compte pour réaliser un site dans le respect des normes du W3C.
Et comme rien ne vaut la pratique, nous en profiterons pour créer notre première page web en XHTML.

2. Les balises

Les balises sont toute une série de "mots-clef" fournis par le langage XHTML.
Par exemple on y retrouve les mots-clef "html", "head", "title", "body", etc...

Mais ce n'est pas tout car l'écriture d'une balise s'accompagne de symboles spécifiques :
- le chevron ouvrant : " < "
- le chevron fermant : " > "
- le slash : " / "

Vous devez aussi savoir qu'il existe 2 types de balises :
- les balises ponctuelles : <balise />
- les balises d'encadrement : <balise> ... </balise>

Prenons par exemple le cas ou nous souhaitons passer une ligne.
Cette balise est ponctuelle puisque nous souhaitons passer à la ligne à l'endroit où nous insérons la balise.
Il faut alors placer la balise <br /> en fni de ligne.
Une balise ponctuelle ne possède donc qu'un seul élément.

Prenons maintenant le cas ou nous souhaitons mettre du texte en gras.
En toute logique il nous faudra ici encadrer le texte que nous souhaitons mettre en gras !
Noter : "texte en <strong>gras</strong> " permet d'obtenir " texte en gras "
Une balise d'encadrement est constitué d'un élément d'ouverture et d'un élément de fermeture.

Vous remarquerez que dans le cas d'une balise ponctuelle le slash se trouve juste avant le chevron de fermeture : Alors que dans la cas d'une balise d'encadrement le slash se trouve juste après le chevron d'ouverture (mais dans la balise de fermeture) : Faites attention à ne pas oublier de fermer vos balises !!
Cela peut provoquer toutes sortes d'erreurs d'affichage qu'il n'est ensuite pas forcément évident de corriger.

Dans le même ordre d'idée vous devez être vigilant lorsque vous imbriquez les balises entre-elles : vous devez toujours fermer les balises dans l'ordre inverse où elles ont été ouvertes.
Par exemple si vous souhaitez mettre un texte en italique et en gras : Vous devez aussi faire attention à écrire les balises uniquement en minuscules.
Votre page s'affichera même si vous ne suivez pas ce conseil mais celle-ci ne sera alors pas en accord avec les recommandations du W3C concernant le XHTML 1.0 Strict.

3. Les attributs

Les attributs sont des paramètres que l'on place après le nom de la balise.

Par exemple pour tracer un séparateur horizontal de 400 pixels de longueur nous allons utiliser la balise "<hr/>" qui permet de tracer un séparateur horizontal et nous allons lui ajouter l'attribut "width" avec une valeur de "400px" : Cela fonctionne de la même façon pour les balises d'encadrement.
Par exemple pour centrer un texte (paragraphe) : Chaque balise possède toute une panoplie d'attributs permettant d'indiquer différents paramètres.
Tout comme pour les balises, les attributs s'écrivent uniquement en minuscules afin de respecter les recommandations du W3C, par contre vous pouvez utiliser des majuscules comme vous le souhaitez pour les valeurs de ces attributs.

4. Les règles à retenir

Maintenant que vous avez une première idée de ce à quoi ressemble le XHTML nous allons en énoncer ici les points essentiels :
- toutes les balises sont ouvrantes, elles doivent donc être fermées (grâce au slash)
- les attributs se placent après le nom de la balise
- les nom des balises et leurs attributs doivent être en minuscules
- les balises doivent-être correctement imbriquées

Le site du W3C met à votre disposition une liste de référence des balises et des attributs utilisés en HTML :
cliquez-ici pour consulter la liste des balises HTML
cliquez-ici pour consulter la liste des attributs HTML

Attention toutefois car ces listes correspondent à la dernière norme HTML (c-à-d 4.01) !!
Il vous faudra donc l'utiliser en ayant en tête que vous faites du XHTML...
En d'autres termes vous utiliserez sans doute très peu d'attributs en XHTML car ceux-ci correspondent souvent à des indications sur la mise en page du document (qui étaient utilisés jusque HTML 4.01).
Et dans le cas du XHTML toutes ces informations sont gérées par une feuille de style CSS, ils n'apparaissent donc plus dans les balises du document XHTML.

5. La déclaration du DTD (doctype)

Doctypes est l'abréviation de "Document Type Declaration".
La déclaration du doctype est obligatoire à la construction de tout document web dit "bien formé".
Cette déclaration doit toujours se faire dès la première ligne (ou deuxième ligne si vous ajoutez une déclaration XML) de chaque document.

Cliquez sur le lien suivant pour consulter la liste des DTD recommandés par le W3C

6. Le respect des recommandations du W3C

Comme vous l'avez sans doute déjà remarqué le W3C est ici très fréquemment cité mais en fait, qu'est-ce que c'est ?

W3C signifie "World Wide Web Consortium".
Celui-ci a pour but de promouvoir la compatibilité des technologies du Web telles que HTML, XHTML, XML, CSS, PNG, SVG et SOAP.
Le W3C n'émet pas des normes, mais des recommandations...
En d'autres termes les propos émis par le W3C ne sont pas obligatoire mais s'y conformer apporte son lot d'avantages :
- meilleure accessibilité avec les logiciels (faciliter l'accès aux informations vous donnera une meilleure position dans les moteurs de recherches)
- meilleure compatibilité de votre site avec les navigateurs du Web
- pérennité de vos pages (ces standards sont conçus dans un souci de compatibilité ascendante et descendante)

Si je peux vous donner un bon conseil c'est donc de suivre ces recommandations !!
Pour vous aider dans cette tâche, le W3C met à votre disposition un outil de validation de vos pages :
Cliquez-ici pour accéder à l'outil de validation des pages Web du W3C

7. Votre première page en XHTML

Bon, je pense qu'arrivé là vous devez avoir eu votre dose de théorie pour aujourd'hui non ?
Passons dans ce cas à un peu de pratique !!

Dans un premier temps ouvrez votre dossier "mes documents" et créez un dossier de travail nommé "mes pages web" (ou n'importe quel autre nom plus parlant pour vous ).
Entrez ensuite dans ce nouveau dossier, ouvrez le menu contextuel de la fenêtre (clic-droit) puis cliquez sur "Nouveau" puis "document texte".
Maintenant renommez ce document texte en "premiere-page-web.html" et validez.
Ce document est maintenant prêt à recevoir du code XHTML !!

Nous allons réaliser un document en XHTML 1.0 Strict.
Il faut savoir qu'un document XHTML est un document XML qui, dans le cas d'un site Web, sera traité en tant que document HTML.
Notre première ligne de code commencera donc par le DTD (ou doctype) de notre document.
Notre objectif étant ici de réaliser un document en XHTML 1.0 Strict nous devons utiliser le DTD suivant : Nous allons maintenant placer la première balise du document : ...
Celle-ci permet d'indiquer au navigateur web que tout ce qui est encadré par cette balise fait partie du document XHTML.
Voici ce que nous avons écrit pour le moment : Tout document XHTML est constitué de 2 parties bien distinctes : l'en-tête et le corps.
L'en-tête contient les informations que vous souhaitez transmettre au serveur et au navigateur au chargement de votre page.

C'est informations ne sont donc pas affichées dans la page web : elles ne sont pas visible pour le visiteur.

Le corps de la page lui contient toutes informations que vous souhaitez afficher dans le navigateur.

Complétons donc notre code source avec les balises d'en-tête et de corps de page : Voyons maintenant cette fameuse en-tête d'un peu plus près.
Celle-ci permet de déclarer l'utilisation d'autres langages dans votre page web <em>(comme le CSS ou encore le Javascript)</em>.
Mais ce n'est pas tout : celle-ci permet aussi d'accueillir ce que l'on appelle les balises meta (ou metatag's).
Ce sont des balises qui permettent de donner des informations sur votre page (notamment utiles pour le référencement).
D'ailleurs nous allons ici utiliser une première balise meta permettant de déclarer le codage de caractères utilisé par votre page : Mais la plus importante de toute pour le moment est la balise &<title>...</title>
Vous l'aurez deviné celle-ci permet d'indiquer le titre de votre page.
Ne négligez pas les titres de vos pages : ceux-ci ont une grande importance pour le référencement de votre site !!

Je sais que nous sommes encore bien loin de la phase de référencement mais il faut prendre de bonnes habitudes dès le début, ne négligez donc pas votre titre !!
Voilà où en est notre code source : Passons maintenant au corps de la page.
Tout ce que vous souhaitez voir affiché sur votre page web doit faire partie du corps de la page.
En d'autres termes votre contenu doit obligatoirement apparaitre entre les balises ...de votre code source.
Pour le moment nous ne possédons pas de contenu à afficher nous nous contenterons donc de faire preuve d'une grande originalité en utilisant le texte : "hello world !!".

Voici ce que donne notre première page web : Bravo vous venez de réaliser votre première page web !!
Ouvrez la dans un navigateur Web (Firefox ou Opéra par exemple) pour voir le résultat de votre travail.