(X)HTML

Mais le XHTML c’est quoi ?

Le XHTML c’est du HTML tout simplement

Mais alors pourquoi le X ?

Le X symbolise « l’extension » du langage HTML, c’est une évolution comme on pourrait parler de Patch pour les jeux vidéos ou des MAJ pour des programmes comme Windows ou autre programmes graphique comme Photoshop etc….

Le HTML est à la base du XHTML, à vrai dire peut de choses change.

Mais alors qu’elle est la réelle différence ?

La vrai différence se trouve premièrement dans la déclaration W3C, la deuxième dans les balises qui jadis en HTML n’étaient jamais fermées, la troisième concerne les majuscules et la quatrième le symbole « = ».

1 - W3C qu’est-ce donc cela ?

Le W3C, c’est une façon de déclarer que sont site se tien au norme d’une programmation bien précise ici le « XHTML », il existe également une déclaration en W3C pour le XML. Cela est un peut la façon d’authentifier sont document, comme on irait faire mettre un cachet sur un papier pour qu’il soit en règle, cela n’empêche pas que le papier administratif soit correctement remplis mais seulement après avoir apposé le cachet votre papier prendra sa réelle valeur, ici cette déclaration en W3C permet d’authentifier sont site, cette authentification permet un langage totalement uniformisé qui pourra tourner sur tout les navigateurs sans problème. Le W3C possède aussi ces validateurs comme www.validome.org/ qui est une version francophone. Un validateur, c’est un peut comme un logiciel qui permet la programmation. Quand vous créez une page XHTML ou CSS sous un logiciel comme « Bloc-notes » vous n’avez aucun moyen de voir vos erreurs d’encodage. Par contre quand vous passez par un logiciel comme « Dreamwaver, Context, Notepad++ » vous pouvez voir des couleurs propres à chaque code qui quand une erreur est commise vous permet de voir que quelque par dans cette phrase un code cloche.

Les validateurs sont là pour vous informer de vos erreurs en XHMTL, il vous suffi soit de pointer l’URL de votre page via le site, ou d’uploader votre création, pour que le validateur vérifie votre code.

Je pense que nous avons fait le tour du W3C maintenant voyons un peu les deux autres différences qui font concrètement que XHTML est différent de HTML.

2 – Les balises qui ne se ferment pas :

Jadis dans l’HTML certaines balises ne se fermaient pas, et comme un bon exemple vaut mieux qu’une grande explication parlons avec la pratique.

Le Forum CMS à l’envie de créer un site et donc comme dans tout site il y a un titre. Alors comme nous somme très poli nous allons accueillir les gens avec une jolie phrase comme « Bonjour, soyez les bienvenus sur le site de « Créator of MySpace », et comme cette phrase doit être mise en titre, nous allons utiliser de grands caractères. Pour cela nous allons chercher les balises

Code:

<h2></h2>

Donc notre code serra le suivant :

Code:


//J’ouvre la balise qui dit d’écrire ce texte en plus grand

<h2> Bonjour, soyez les bienvenus sur le site de « réator of MySpace » </h2>

//Je ferme la balise, ce qui veut dire, maintenant revient à la taille d’écriture normal.


Vous voyez donc ici une balise qui s’ouvre et qui se ferme quand on a mis ce que l’on voulait dedans.

Maintenant si toujours pour notre site nous voulons mettre l’image de Créator of Myspace juste en dessous du titre nous allons devoir utiliser la balise pour afficher une image. Cette balise s’appelle

Code:

<img>

Nous allons donc écrire :

Code:

<img src=" http://servimg.com/u/10/00/95/19/logocm11.png ">

où qu’il est passé…

Code:

</img>

Et bien justement

Code:

</img>

…
n’existe pas ! Il n’existe qu’une balise pour insérer l’image et ses

Code:

<img>

Ce sont des balises qui ne se ferment jamais comme

Code:

<br>  <input>  <option>  <hr>  <wbr> etc…

Hors ses balises sont parfois problématique, ma fois je n’ai jamais eu de problème avec mais quelque choses qui s’ouvre et ne se ferme pas peut toujours poser certain problème dans la syntaxe. Alors le XHTML a réglé ce problème en fermant toutes ses balises.

Alors maintenant il existe

Code:

<img>…</img>

Et non, il n’existe toujours pas 2 balises pour insérer l’image. Cette balise ferme elle-même a la fin ! C’est ti pas magnifique ?

Démonstration :

Vous vous souvenez de la balise image que j’ai écris en haut pour décorer notre site CMS :

La voici :

Code:

<img src=" http://servimg.com/u/10/00/95/19/logocm11.png ">

Maintenant voici la même balise mais mise au norme du XHTML

Code:

<img src=" http://servimg.com/u/10/00/95/19/logocm11.png ">

Qu’elle est la différence ?

Et bien ma fois presque invisible pour celui qui ne fait pas attention ! Regardez bien

La différence se trouve à la fin de la balise !

Avant la balise s’écrivait

Code:

<img>

Maintenant la balise s’écrit :

Code:

<img>

Nous pouvons voir que la fin de cette balise se trouve « un espace » TRES important, et un slash qui est TOUT aussi important ! Cela permet de dire que cette balise est fermée à partir de là.

La différence ?

En soit elle est minime on aurait pu laisser le code comme il était mais pour un plus beau travaille, pour que tout ce qui s’ouvre se ferme logiquement, et bien on utilise ce genre de balise maintenant !

Ainsi donc les autres balises qui jadis étaient ouvertes ont toutes droit au même sort…

Code:

<br> devient <br>    <input> deviens <input>    <option> devient <option> etc.. etc…

Nous avons fini la partie des balises qui ne se fermaient pas, maintenant à l’assaut du troisième point.

3 – Les Majuscules :

Ce point est relativement simple et se résume en une seule phrase.

« Arrêtez d’écrire en majuscule dans les BALISES ».

Voila, je pense que ses tout simple non ?

Mais comme j’aime faire des exemples je vous montre cela en détail.

Jadis les gens écrivaient les balises en majuscule, du moins pour les balises importantes comme

Code:


<HTML>
<HEAD>
 ............
</HEAD>
<BODY>
 ............
</BODY>
</HTML>


Ca c’était avant ! Et maintenant tout le monde devrait faire ainsi :

Code:


<html>
<head>
 ............
</head>
<body>
 ............
</body>
</html>


C’est quand même plus beau non ? Enfin moi je trouve. Bien entendu c’est moins visible et chacun est libre de faire comme il veut, mais sachez que en XHTML les majuscules dans les balises ne sont pas tolérées.

Zouu quatrième et dernier point important du XHTML puis je vous laisse tranquille !

4 – Le symbole égale (=) :

Alors nous voici au 4ème et dernier point sur le XHTML. Ici aussi c’est assez simple enfin, pour ceux qui maîtrisent un peut ça devrait l’être.

Nous pourrions également concentrer toute l’explication en une phrase :

« Quand vous mettez un lien vers une autre page, une image ou quoi que ce soit, mettez un = aussi non XHTML frapper toi »

Démonstration :

On reprend encor le bon vieil exemple de l’image CMS :

Code:

<img src=" http://servimg.com/u/10/00/95/19/logocm11.png ">

Maintenant on va le décomposer pour que vous compreniez bien.

img : comme vous vous en doutez sûrement img est le diminutif du mots image. img dit au navigateur « tu vas afficher une image ». Mais qu’elle image demande le navigateur ?

Voila qu’arrive src : src ça veut dire « source », en somme le navigateur reçoit l’information suivante « tu vas afficher une image dont la source » mais il manque encor quelque chose.

Ce quelque chose c’est le =. Alors je pense que tout le monde sait ce qu’est un « égal » ! Maintenant nous récapitulons la phrase « tu vas afficher une image dont la source égale ».

C’est déjà plus clair comme phrase non ?

Après il reste les guillemets "" : les guillemets permettent de délimiter ce qui doit être chargé, ici c’est l’URL de l’image, ou alors sont emplacement dans vos fichiers quand vous créez un site perso !

Et pour finir on prend la bonne habitude de fermer la balise comme on la appris deux points plus haut en faisant un « espace suivi d’un slash ».

En faite on pourrait dire que

Code:

<img src="">

se traduit en français de cette manière :

Code:

Tu vas afficher une image dont la source est égale à ce qui se trouve entre les guillemets et ensuite fermes la balise.

Voila

Alors cette histoire d’égale ?

Et bien, jadis encor, quand on programmait en HTML, on ne mettait pas forcément un « égal ». Bien entendu maintenant la majorité des gens le font parce que l’on a corrigé l’erreur, mais cela peut encor arriver que vous trouviez un code qui soit écrit sans « = ». il faut dire que cela marche aussi avec ou sens égal mais que cela soit dans la langue informatique ou en français il manque quelque chose bien que ce soit compréhensible ce n’est pas très beau. Alors XHTML lui ne veut plus de langage approximatif et donc il est obligatoire de mettre un « égal » quand on veut appeler une «image » ou un « lien ».

Voila, si vous connaissiez le HTML vous connaissez maintenant le XHTML, vous voyez c’était pas compliqué en faite

Allez à la prochaine et d’ici la bon codage.

Axandro

Bonjour mon Ami,

Je te félicite et te remercie pour ton post...

Je ne connais pas l'impact qu'il aura sur les différents membres, mais je sais déjà qu'il m'est très utile et qu'il me permet d'y voir légèrement plus clair dans le monde fantastique mais périlleux des langages du net !

Par contre, je n'avais pas du tout conaissance de ce type de programme : Validateurs !!!

Cela doit fort bien nous simplifier la vie tout de même... NON ?

Bien à toi,

PS : je n'hésiterai pas à te solliciter si besoin est