Généralités sur le document HTML.

• Le codage HTML
• La norme HTML fixée par le W3C
• La protection de votre document HTML contre la copie
• La structure d'un document HTML
• Renseignement de paramètres d'une balise
• Référencement : Les balises META d'en-têtes
• Référencement : Le fichier robots.txt
• Propriétés du BODY
• Le code Hexadécimal

Le codage HTML

L'HTML permet de disposer de manière précise des éléments dans ce que l'on appelle une page Web. Vous avez actuellement sous vos yeux, le résultat d'une mise en page HTML. Il faut coder cette mise en page de 2 dimensions de façon linéaire, c'est à dire en ligne de code HTML de dimension 1. Le code HTML contient des balises qui ne seront pas affichés dans le résultat final, mais qui fournissent des indications précieuses quant à la disposition finale des éléments contenus entres ces balises. Imaginez le code source HTML comme une longue chaîne composée de maillons. Des maillons particuliers seront appelés balises. Il existe une balise de début, et une balise de fin. Tous les maillons contenus entre la balise de début et la balise de fin reçoivent des propriétés particulières de la part des balises les encadrant. Toute balise ouverte doit être fermée.

 texte normal <i> texte en italique seulement  <b> Texte en gras et italique </b></i> texte normal.

Nous avons ici en présence la balise B du mot anglais Big pour la mise en gras et la balise I pour la mise en italique. Les effets produits par ces balises s'appliquent non seulement sur la zone délimitée par ces balises de début et de fin, mais ces effets s'additionnent. Lorsque vous visionnez la source HTML, aucune mise en forme ne s'applique bien évidemment. Il faut ouvrir ce fichier sous le navigateur Web pour voir le résultat. Vous pouvez accéder à la source HTML d'une page Web en faisant un clic droit, puis en sélectionnant afficher la source dans le menu contextuel ; ou encore en cliquant sur le menu Affichage sous MS Internet Explorer, puis en cliquant sur source dans le menu contextuel.

 texte normal  texte en italique seulement   Texte en gras et italique  texte normal.

L'emboîtement des balises est théoriquement infini.

La norme HTML fixée par le W3C

Vous devez être conscient que les navigateurs Web sont très tolérants pour rendre l'HTML accessible à tous. Il existe bien sur des règles de codages précises et strictes, mais les navigateurs Web font tout leur possible pour passer outre les erreurs et afficher une page Web dans les meilleurs conditions possibles. Une erreur affectera sans doute l'affichage final d'une page Web, mais en aucun cas, le navigateur vous refusera d'afficher un résultat.

Il faut savoir qu'il existe un codage HTML de référence, fixé par le W3C. Nous sommes actuellement sous HTML 4. La version HTML 5 ne sortira jamais, nous nous dirigeons actuellement vers le XML. La gueguerre entre MS Internet Explorer et NetScape, sans oublier tous les autres navigateurs Web gratuits qui tentent de faire une percée, dans le but d'acquérir un maximum d'utilisateurs s'éloignent du standard HTML pour adopter des balises qui leurs sont propres, permettant d'obtenir des effets que seul ce navigateur Web peut produire. La balise BLINK par exemple, permet de faire clignoter du texte sous NetScape, alors que cette même balise est incomprise par MS Internet Explorer. Le problème de l'incompatibilité est posé, et sera votre préoccupation majeure lors vos réalisations. En effet, vous ne voulez pas restreindre l'accès à votre site uniquement pour une catégorie de personnes utilisant un navigateur précis ? Il ne vous viendrait jamais à l'idée d'écrire en début de livre qu'il doit être lu avec telle paire de lunettes !

De plus, des incompatibilités peuvent jaillir entres des versions différentes d'un même navigateur. Ce problème se pose pour tous les langages clients en général. Un langage est dit client lorsque le code source s'exécute chez l'internaute, ce qui implique que l'intégralité du code source est envoyé au client pour y être exécuté dans un second temps, sur le navigateur client. Votre codage HTML doit être compatible avec un maximum de navigateurs Web.

Dans l'optique de contenir cette dérive du codage HTML qui tend à le faire devenir de plus en plus souple, le XML fait son apparition en tant que successeur de HTML 4. Le XML, outre ses diverses avantages apportés comme la définition de votre propre DTD, est un langage beaucoup plus stricte que l'HTML. Le passage d'HTML4 à XML, implique obligatoirement de nombreuses modifications dans le codage source. C'est aussi un nombre astronomique de pages Web à modifier, et l'acquisition d'un nouveau navigateur Web compatible XML pour tous.

Ainsi, pour effectuer ce passage en douceur, une transition a été mise au point par le W3C. Il s'agit du XHTML1, version hybride entre HTML4 et XML, qui tentera de mener en douceur les sites Web et internautes vers le XML. Vous l'avez compris, vous serez tôt ou tard amené à adopter ce nouveau langage stricte. Mieux vaut prendre les bonnes habitudes le plus tôt possible, et écrire un langage HTML respectant au mieux la norme du W3C, même si les navigateurs sont très tolérants envers les erreurs HTML.

La protection de votre document HTML contre la copie

Il faut noter qu'il est impossible de protéger un codage client contre la copie. Les internautes ont tous accès à la source HTML de votre site, et peuvent le copier dans son intégralité, y compris les images, sons, JavaScript, etc. Le dépôt d'un Copyright (c) apparaît comme le seul moyen à porté légale de garantir, ou du moins de décourager les Internautes contre la copie de vos documents publiés sur Internet.

Vous avez sans doute entendu parlé de script permettant de rendre inaccessible la source HTML à votre page, en interdisant le clic droit, mais il suffit de consulter le dossier des fichiers temporaires hors connexion de votre ordinateur pour vous rendre à l'évidence. Images, textes, JavaScript, animations FLASH, VBscript, etc.. sont stockés, enregistrés, et accessibles comme n'importe quel fichier de votre ordinateur. Il s'agit donc de fausse sécurité. Le cryptage est par ailleurs inutile, puisque le document HTML sera obligatoirement décrypté pour être lu par le navigateur Web. Un script de décryptage sera donc incorporé dans le document Web. Toute personne ayant un minimum de connaissances peut facilement retrouver la source HTML.

La structure d'un document HTML

Pour éditer votre code source HTML, utilisez le Bloc Notes de Windows ou un éditeur texte ASCII, pour une sauvegarde en mode non formaté. Si vous utilisez un éditeur de page Web, un mode source HTML est généralement proposé. Un bon éditeur de page Web dispose normalement d'un système de coloration syntaxique de votre codage pour une meilleur lisibilité. Ne vous en privez pas, préférez le à Bloc Notes de Windows !

Dans le cas où vous utilisez le Bloc Note, enregistrez votre fichier portant l'extension .htm et non .txt. Ouvrez ensuite ce fichier à l'aide de votre navigateur Web.

Voici la structure d'une page HTML, fichier d'extension .htm ou .html.

Coloration syntaxique des balises en bleu sous MS Front Page.
Notez la présence des trois modes : Normal, HTML, Aperçu.

Un document HTML est composé d'une entête (<HEAD> </HEAD>) et d'un corps (<BODY> </BODY>). L'entête fournie des indications de propriétés sur le document. Le corps représente le contenu de votre document : textes, images, etc..

Renseignement de paramètres d'une balise

Certaines balises nécessitent des paramètres visant à appliquer un effet recherché. Le schéma est identique pour toutes les balises. Ce sont des couples attributs/valeurs qui définissent ces paramètres. L'attribut est fixe, la valeur associée est variable. C'est donc à vous de définir cette valeur. Une valeur est toujours encadrée par des guillemets pour indiquer qu'il s'agit d'une chaîne renseignant un attribut et non d'instructions HTML. Si la valeur associée ne contient pas d'espaces, les guillemets peuvent être omis.

<BALISE ATTRIBUT="valeur du parametre" >

<BALISE ATTRIBUT=valeur_du_parametre >

Référencement : Les balises META d'en-têtes

Les balises META servent au référencement. Ces balises donnent des indications sur les informations de votre documents pour les robots des moteurs de recherches. Il faut donc les éditer avec soin si vous voulez être référencé par les moteurs de recherches. Le texte en gras est variable.

<meta name='title' content='Titre de votre document'>
<meta name='description' content='description'>
<meta name='keywords' content='mot, clé, séparé, par, des, virgules'>
<meta name='author' content='Votre_Nom'>
<meta name='reply-to' content='Votre@email.com'>
<meta http-equiv='content-language' content='fr'>
<meta name='copyright' content='Copyright_depot'>
<meta name='revisit-after' content='7 days'>
<meta name='identifier-url' content='http://www.votre_site.net'>
<meta name=robots' content='all'>

Référencement : Le fichier robots.txt

Une démarche explicite de votre part auprès d'un moteur de recherche n'est pas obligatoire pour voir apparaître votre site dans les résultats d'une recherche sur Internet. En effet, des robots scrutent continuellement la toile pour mettre à jour les bases de données des moteurs de recherche. Ce travail visant a consulter le nombre astronomique de pages Web serait trop long et trop fastidieux pour un humain. Les balises META sont précisément destinées aux robots, elles fournissent divers renseignement, comme le nom d'une page Web, les mots clés, etc..

En revanche, tous les robots ne lisent pas forcement vos balises META. Un fichier nommé robots.txt contenu dans le répertoire racine de votre site Web a l'allure suivante :

robots.txt

User-agent: * signifie que tous les moteurs de recherche sont concernés, et donc que tous les robots passant sur votre site sont susceptibles de référencer votre site. Toutes vos pages Web peuvent être référencées. Or ceci n'est pas toujours votre souhait. Vous pouvez demander au robot d'exclure certaines pages ou répertoires de votre site lors de son référencement. Utilisez alors les instructions suivantes.

Disallow : /rep/ pour un répertoire
Disallow: /rep/page.htm pour une page Web précise.

User-agent: google permet d'identifier un moteur particulier. Google sera ici le seul robot concerné.
 

Propriétés du BODY

Le corps du document peut recevoir des propriétés qui s'appliqueront à l'ensemble de votre page Web.

Exemple :

<body  BGCOLOR="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" TEXT="#000000" onLoad="fonction_1();" onUnload="fonction_2();" >

Le code Hexadécimal

L'affichage des couleurs sur un document Web est codé sur une base 16 ou codage hexadécimal. Utilisez votre logiciel de traitement d'images pour trouver le codage hexadécimale d'une couleur. Si votre logiciel ne le permet pas :

Consultez notre générateur de couleur Hexa !