IDREZO

Technologies informatiques


5. Votre premier fichier valide

Objectifs

Ce chapitre est déterminant car il va vous permettre de créer votre premier véritable fichier HTML. À la fin, vous connaîtrez les éléments constituants d'un fichier HTML complet et vous aurez appris la procédure à suivre pour vérifier la validité syntaxique d'un fichier.

5.1 Vérifier la validité d'un fichier

Nous allons commencer par vérifier si notre fichier exemple est correct en rapport aux standards du langage HTML. Activez le lien suivant pour vous rendre sur le site du Validateur HTML du W3C. Allez dans la section « Validate by File Upload » et activez le bouton Parcourir…. Sélectionnez le fichier test.html, appuyez sur Ouvrir et, finalement, sur le bouton Check.

La sanction du validateur ne tardera pas à se manifester : This page is not Valid! J'expliquerai bientôt pourquoi. En attendant, remplacez le contenu du fichier test.html par le code suivant :

<!doctype html>
  <head>
    <meta charset=utf-8" />
    <title></title>
  </head>
  <body>
  </body>
</html>

Enregistrez les modifications et vérifiez de nouveau la validité du fichier. Cette fois, vous aurez droit à des félicitations : Document checking completed. No errors or warnings to show.

5.2 Le minimum requis

Le nouveau contenu du fichier test.html est celui à partir duquel je vous ferai désormais travailler. Il est valide et constitue un exemple de ce à quoi peut ressembler le contenu minimal d'un document HTML complet.

Observez le code ci-haut et notez la manière dont les balises sont contenues les unes dans les autres. Schématiquement, la structure de ce code ressemble à ceci :

<!DOCTYPE>
<html lang="fr">
<html>
  <head>
    <meta />
    <title></title>
  </head>
  <body>
  </body>
</html>

Tous ces éléments sont requis à la validité d'un document HTML. Notez les syntaxes particulières du DOCTYPE, il définit le type de document crée, HTML, XHTML.

Ces observations faites, on peut procéder à une analyse ligne par ligne. Il ne s'agira pas de tout expliquer, mais d'en dire assez pour faire comprendre l'essentiel.

5.3 Analyse et explications

5.3.1 Le DOCTYPE

Il existe plusieurs versions de HTML. Le DOCTYPE sert à spécifier celle qu'on utilise et c'est pourquoi il doit être placé avant l'élément html.

Pour insérer la version de HTML, le DOCTYPE doit être déclarée comme suit : pour la version 4.01 (à ne plus utiliser)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Pour html 5.0, c'est plus simple, c'est uniquement :

<!DOCTYPE>

Je m'expliquerai plus tard sur les raisons de ce choix.

En HTML, on peut écrire les balises en majuscules ou miniscules, HTML ne respecte pas la casse..

5.3.2 L'élément html

L'élément html contient tous les autres et c'est ce qui lui vaut l'appellation d'« élément racine ». On distinguera la balise d'ouverture <html> et sa balise de fermeture </html>.

5.3.3 Les éléments head et body

L'élément body est celui dans lequel il faut mettre tout ce que vous voulez que votre page Web contienne. Il vaut pour « corps de document ».

Quant à l'élément head, dont le nom signifie « tête », il contiendra surtout des informations utiles aux navigateurs, aux moteurs de recherche et aux autres agents utilisateurs. Il peut contenir des scripts, des règles de style, des mots-clés, les coordonnées de l'auteur, la date de création du document, etc.

À l'exception du titre — qui est obligatoire —, le contenu de l'élément head est facultatif et ne sera pas directement visible à vos visiteurs.

5.3.4 L'élément title

L'élément title est indispensable et son contenu mérite d'être soigné. Ce qui s'y trouve aura une influence sur le classement de votre page et sur les résultats d'une requête dans un moteur de recherche.

C'est aussi la toute première chose qui sera portée à la connaissance des handicapés visuels qui consulteront la page depuis un afficheur braille ou un logiciel de synthèse vocale.

Pour consulter le Web, les personnes avec des limitations fonctionnelles ont souvent besoin d'outils spéciaux. Si votre code est correct et valide, leurs outils pourront donner leur plein rendement.

Si quelqu'un décide de créer un signet (appelé aussi « marque-page » ou « favori ») vers votre page ou s'il décide d'y revenir depuis l'historique de son navigateur, c'est à votre titre qu'il aura à se fier pour s'y retrouver.

Les navigateurs graphiques affichent le contenu de l'élément title dans la barre de titre. Celui de la présente page se lit comme suit : « 5. IDREZO, le site de Stéphane FAVREAU - ». Il se trouve au coin supérieur gauche de votre écran. Aviez-vous remarqué ?

Bref, un titre inadéquat ou absent et c'est le contenu de la page au complet qui risque de tomber dans l'oubli le plus total. D'où les quelques conseils qui suivent :

  • formulez un titre qui reflète fidèlement le contenu de la page
  • tenez vous-en à la longueur recommandée, qui est de 6 à 10 mots
  • n'hésitez pas à recourir aux lettres accentuées, elles sont permises
  • évitez les mots rares, difficiles ou obscurs
  • commencez autant que possible par un nom plutôt qu'un article

5.3.5 L'élément meta

Reste l'élément meta, qui vaut pour « generic metainformation ». L'élément head peut contenir une multitude d'éléments meta. Le seul qui nous sera vraiment nécessaire ressemble désormais à ceci :

<meta charset=utf-8" />

Cette ligne sert à spécifier le type d'encodage utilisé par votre éditeur de texte au moment d'enregistrer votre fichier. Comme je vous ai fait encoder votre fichier en UTF-8, je vous fais mettre utf-8.

Bloc-notes donne aussi la possibilité d'encoder en ANSI, mais il n'y a pas de charset=ansi et cela pourrait causer des problèmes dans certaines circonstances. C'est pourquoi j'ai opté pour UTF-8.

Conclusion

Les éléments constituants d'un document HTML complet sont les suivants : DOCTYPE, html, head, title et body. L'absence d'un seul compromet la validité de l'ensemble.

Pour rendre votre projet valide, copiez-collez l'exemple de code qui se trouve à la section 5.1 et insérez ce que vous aviez préalablement fait à l'intérieur des balises <body> et </body>. Validez ensuite votre fichier. S'il s'y trouve des erreurs, le validateur vous indiquera lesquelles. Commencez toujours par corriger les premières avant de vous attaquer aux suivantes.