Document type XHTML
Mon premier document XHTML
Un document XHTML doit comporter 2 grandes parties :
- L'entête
- Le corps
Ces deux grandes parties contiennent elles-mêmes, chacune, différentes parties.
L'entête DOCTYPE
Le DOCTYPE ou Document Type est le premier élément de l'entête. Il déclare au navigateur la norme utilisée. Il doit être placé en tout début de la page avant la balise :
Code XHTML :
<html>. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Certains éditeurs génèrent automatiquement ce code sinon, il suffit de faire un copier coller puisque ça reste le même pour toutes les pages.
Néanmoins, c'est bon de savoir à titre d'information qu'il y a différents normes XHTML 1.0 :
- Transitional : permet d'utiliser des balises "décoratives" comme <font>, qui ne sont pas trop appréciées en XHTML Strict
- Frameset : utilisé quand la page contient une ou plusieurs frames
- Strict : est la norme recommandée
Les balises head
Les balises head contiennent les différents éléments, notamment le titre du document.
Le titre
Le titre s'affiche tout en haut dans le navigateur. Il permet, aux visiteurs de pouvoir de reconnaître facilement chaque fenêtre quand ils naviguent. Le titre doit évoquer le contenu du document en donnant une description court et rapide. Il est contenu dans la balise <title> :
Code XHTML :
<title> Tutoriel XHTML</title>
Les références externes
Les références indiquent les liens entre le document et un fichier ou script extérieur, tel une feuille de styles par exemple. Pour faire référence à un script, il faut utiliser la balise <script>.On peut inclure des scripts javascript contenus dans un fichier à part (monscript.js) dans le document.
Code XHTML :
<script type="text/javascript" src="javascript/monscript.js"></script>
Si vous voulez inclure d'autres éléments, autres que le script, comme les feuilles de style par exemple, la balise <link> permet de faire référence à d'autres types de documents. Les plus utilisés sont les feuilles de style et le 'favicon'.
La syntaxe pour inclure une feuille de style à l'entête du document XHTML est :
Code XHTML :
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
Pour afficher une petite icone pour les favoris du navigateur :
Code XHTML :
<link rel="icon" type="image/png" href="images/favicon.png" />
Le corps du document XHTML
Le corps du document est en général le contenu principal de la page. Le corps d'un document XHTML peut être subdivisé en quatre parties différentes. Une entête, un menu, un contenu et un pied de page.
- L'entête : L'entête est commune à toutes les pages du site. Elle peut être une bannière, un logo, ou autre chose qui représente généralement le propriétaire du site
- Le menu : Si on compare un site Internet à une maison, les pages XHTML sont comme des chambres accessibles via des portes. C'est le menu qui est la porte d'accès aux différentes pages du site
- Le contenu : Le contenu constitue le point central du document. Sa conception mérite une attention particulière parce que c'est la base du site lui-même
- Le pied de page : Le pied de page joue un rôle similaire à l'entête. Il contient souvent les informations d'ordre général comme le copyright, les liens vers les pages d'informations, etc
Mon premier document XHTML
Donc, voici notre premier document XHTML :
Code XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="fr"> <head> <title>Première page XHTML </title> </head> <body> <p>Bonjour tout le monde!Je vous présente ma première page valide</p> </body> </html>
Validation W3C
Le W3C ou World Wide Web Consortium, est un organisme qui travaille sur la standardisation des applications Web. Ils ont un système de validation de code source qui permet de valider votre page.
En gros, cela consiste à vérifier si votre code est conforme aux règles établies par la norme W3C, le but étant d'avoir un code standard compatible avec les différents navigateurs. Vous pouvez vous rendre à cette adresse : http://validator.w3.org.
