lundi 4 mai 2009

HTML begins : templates & validation

A chaque nouveau démarrage d'un projet Web, se pose la question d'utiliser une forme standard du HTM. Le copier-coller étant à la base de l'informatique, voici une référence de 2 templates, l'un avec la syntaxe avec des CSS et JS déportés, l'autre avec ces mêmes CSS & JS en local.

1ère version (avec style et script déportés)

<?xml version="1.0" encoding="UTF-8"?>
<!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></title>
<link href="nn4.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>
</head>

<body>
<h1>Coucou</h1>

</body>

</html>

Exemple 2 (avec style et script dans la page) :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<style type="text/css">
<!-- mettre css ici -->
</style>
<script type="text/javascript">
<!-- mettre js ici -->
</script>
</head>


</head>

<body>
<h1>Coucou</h1>

</body>

</html>


Pour valider son HTML : http://validator.w3.org/check

L'image à afficher pour démontrer son passage de validation.

<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>


Pour valider son CSS : http://jigsaw.w3.org/css-validator/


L'image à afficher pour démontrer son passage de validation.

<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border: 0pt none ; width: 88px; height: 31px;" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS Valide !" />
</a>
</p>

Edit : un module de Alsacreation génère ce prologue très bien. Le seul truc manquant, c'est la ligne XML donnant l'encodage utilisé pour le reste du document.

2 commentaires:

Unknown a dit…
Ce commentaire a été supprimé par un administrateur du blog.
Julien R a dit…

Bonjour,

Le prologue XML est inutile pour un document servi en tant que text/html. Il est même dangereux puisqu'il fait passer IE6 en mode Quirks.