|
Nous voici à la partie que je préfère : la validation en XHTML ! C'est ici, que nous allons reparler du W3C.
Le XHTML (eXtensible HyperText Markup Language) est, lui aussi un langage de balise, et son utilisation ne diffère pas beaucoup de l'HTML sauf que celui-ci est plus structuré car il est également basé sur le XML (eXtensible Markup Language, le langage utilisé pour structurer n'importe quel document).
Comme je l'ai expliqué dans l'introduction, notamment au niveau de l'imbrication des balises, un document bien structuré est le critère le plus important lors de la création d'un site.
Le HTML autorise peut-être certaines libertés cependant le XHTML ne le fait pas. Il est tout à fait possible de valider du HTML mais cela ne rime pas à grand-chose car trop de libertés sont accordées.
La validation en XHTML, elle, obéit à des règles bien définies qui sont contenues dans des documents disponibles en ligne mais dont la lecture est assez fastidieuse pour un novice.
Ainsi la validation passe par plusieurs étapes.
- La définition correcte de l'en-tête
- La fermeture de chaque balise ouverte
- Le code exclusivement en minuscule
- L'encadrement des attributs par des guillemets
- La mise en place de l'attribut ALT pour les images
- La syntaxe à utiliser lors de l'utilisation de javascript
L'en tête :
La première chose à savoir est que chaque document doit avoir un type appelé DOCTYPE. Celui-ci doit être placé avant la balise de début de document html (voir Structure du document).
Il existe 4 DOCTYPE selon la rigidité des règles à respecter :
- XHTML 1.0 Frameset : La plus souple et la seule autorisant les frames,
- XHTML 1.0 Transitional : Plus rigide car n'autorisant pas les frames et le code reste encore souple bien que plus exigeant.
- XHTML 1.0 Strict : Stricte, le code doit être formaté au caractère près,
- XHTML 1.1 : Viens encore compliquer la tâche.
Pour commencer je vous conseille d'utiliser la variante transitional car les frames sont très déconseillées et la variante strict est assez complexe à respecter.
Voici la déclaration des différents doctypes :
| Déclaration des doctypes |
| Type |
Déclaration |
| XHTML 1.0 Frameset |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd "> |
| XHTML 1.0 Transitional |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> |
| XHTML 1.0 Strict |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> |
| XHTML 1.1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd "> |
Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head><title>Comment créer son propre site - Le HTML - Passer au XHTML</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
...
</head>
<body>...</body>
</html>
Fermeture des balises :
Si vous avez tenu compte de mon conseil consistant à toujours refermer, dans l'ordre, chaque balise ouverte, cette partie ne devrait pas vous poser de problème.
Exemple incorrect :
<b><i>Texte</b></i>
Exemple correct :
<b><i>Texte</i></b>
J'ai insisté sur ce fait mais j'ai également laissé de coté les cas spéciaux dont il est temps de parler. Ces cas spéciaux sont en réalité les balises ouvrantes qui n'ont pas leurs balises fermantes. C'est le cas de la balise <br> par exemple.
La plupart de ces balises sont fermées avec un "/" à la fin.
| Fermeture des balises "spéciales" |
| Balise HTML |
Balise XHTML |
| <br> |
<br/> |
| <frame...> |
<frame.../> |
| <hr> |
<hr/> |
| <input...> |
<input/> |
| <img...> |
<img.../> |
| <meta...> |
<meta.../> |
Il y a également des cas spéciaux dans les cas spéciaux ! C'est le cas des balises <li> et <option> qui ne sont pas refermées par "/". En effet le XHTML rejoute les balises </li> et </option>
Exemple incorrect :
<img src="monimage.gif" alt="Une Image">
Exemple correct :
<img src="monimage.gif" alt="Une Image"/>
La mise en minuscule :
La mise minuscule du code peut-être une tâche très longue. C'est d'ailleurs la raison pour laquelle je vous ai conseillé de coder en minuscule dès l'introduction de ce chapitre (si, si ! vérifiez).
Exemple incorrect :
<img SRC="monimage.gif" ALT="Une Image"/>
Exemple correct :
<img src="monimage.gif" alt="Une Image"/>
L'encadrement des attributs :
La norme XHTML nécessite l'encadrement de la valeur des attributs par des doubles quotes ("). De plus chaque attributs doit avoir une valeur ce qui n'est pas forcément le cas en HTML (attribut "noresize" des frames par exemple). Dans ce cas là, on répète le nom de l'attribut à l'intérieur de celui-ci.
Exemple incorrect :
<option selected value=1>Option 1</option>
Exemple correct :
<option selected="selected" value="1">Option 1</option>
L'attribut ALT des images :
Comme je l'ai dit l'attribut ALT d'une image sert à donner une information sur celle-ci. Il est donc très utile et surtout très pratique. Avec la norme XHTML, il devient obligatoire.
Exemple incorrect :
<img src="monimage.gif"/>
Exemple correct :
<img src="monimage.gif" alt="Une Image"/>
Syntaxe pour le javascript :
Pour le moment je n'ai pas prévu de parler du javascript car son utilisation ne garantit pas que le site fonctionne de partout. En effet le javascript agit sur l'affichage immédiat du navigateur utilisé. Autrement dit, il dépend du navigateur utilisé. Pire, il est possible que l'internaute ai désactivé le javascript de son navigateur, auquel cas, il ne sert à rien ! La preuve, si votre javascript est activé, essayez le clic droit sur Internet Explorer et sur Firefox. Vous voyez la différence !
Cela ne vous empêchera pas de ne pas l'étudier, et cela ne m'empêchera pas non plus d'en parler un petit peu si tel est votre désir.
Voici comment est déclaré un script javascript :
<script type="text/javascript">
<!--
// <![CDATA[
........Votre javascript......
// ]]>
-->
</script>
Vous pouvez faire valider chaque page de votre site à l'adresse suivante:
http://validator.w3.org/
Lorsque qu'une page de votre site est validée, vous pouvez y ajouter l'image de confirmation de validité que le W3C vous fournit. Pour ce site, elle placée sous le menu (W3C XHTML 1.0). Celui d'à coté sert pour le CSS (voir cours)
|
![[Valid RSS]](images/valid-rss.png "Validate my RSS feed")
