ATTENTION: Ce guide n'a pas été mis à jour depuis 1996! Les technologies Web ont évolué et beaucoup de choses sont à prendre avec des pincettes...

Les bases de HTML

Pour commencer, rien ne vaut un exemple. Jetez donc un oeil sur le texte source suivant:

<HTML>
 <HEAD>
  <TITLE>Page d'exemple très simple</TITLE>
 </HEAD>
 <BODY>
  <HR>
  <H1>Gros Titre</H1>
   <P>Premier paragraphe...
      Fin.</P>
   <P>Deuxième paragraphe...
      Fin.</P>
  <HR>
   <H2>Moins Gros Titre</H2>
    <P>Du texte...
    La suite...
    <BR>A la ligne.</P>

  <HR>
 </BODY>
</HTML>

Cliquez ici pour voir le résultat à l'écran.

Vous constaterez que le texte source de cette page contient déjà un certain nombre de marqueurs, ces marqueurs devant être insérés entre crochets angulaires <...>. Vous pouvez également constater les marqueurs vont généralement par deux: un marqueur d'ouverture, par exemple <H1> et un marqueur de fermeture, par exemple </H1>. Les marqueurs portent sur la partie de texte entre l'ouverture et la fermeture. Voyons rapidement la signification de ces quelques marqueurs très simples:

<HTML>...</HTML>: englobe l'ensemble de la page au format HTML.

<HEAD>...</HEAD>: englobe certaines informations concernant le document, par exemple le titre qui sera indiqué par <TITLE>. Notez que ce titre apparaît séparé du reste du document à l'affichage, c'est pour çà que vous ne le voyez pas dans le rendu de page ci-dessus. Le titre peut par exemple être affiché dans le titre de la fenêtre du client. Il est également utilisé lorsque l'utilisateur insère votre page dans ses favoris.

<BODY>...</BODY> délimitent le corps de votre document. C'est entre ces marqueurs que vous placerez l'information elle-même.

<HR> est une exception à la règle, il n'y a pas de marqueur de fermeture. [Note: vous pouvez toutefois fermer cette balse de la manière suivante <HR></HR> ou mieux: "à la XHTML" c'est à dire en une seule balise qui ouvre et qui ferme en même temps: <HR />] Ce marqueur signifiant Horizontal Rule, trace un trait de séparation sur toute la largeur de la fenêtre client.

<H1> à <H6> permettent de donner des titres de section de différents niveaux, comme dans le cas des sommaires hiérarchiques que l'on trouve dans la plupart des publications scientifiques. Notez que la norme recommande de ne pas sauter de niveaux dans la hiérarchie, c'est-à-dire qu'il faut éviter d'avoir un <H1>...</H1> suivi par un <H3>...</H3> sans avoir mis de <H2>...</H2> entre eux.

<P>...</P> délimitent un paragraphe. Il est cependant parfaitement correct d'omettre le </P> final puisque le début du prochain paragraphe dénotera forcément la fin du premier. De même, il n'est pas nécessaire d'avoir un <P> juste après un titre. En pratique, on a donc coutume d'utiliser <P> uniquement pour signaler un changement de paragraphe... à vous de voir ce que vous préférez. [Note: tout ceci est effectivement valide en HTML, mais ce sont des mauvaises habitudes qui vous empêcheront d'évoluer facilement vers des langages plus évolués tels que XHTML. Prenez donc l'habitude d'ouvrir et de fermer systématiquement tous vos paragraphes!]

Finalement, <BR> signale un retour à la ligne (Break) sans changement de paragraphe. [Note: là encore, prenez l'habitude d'écrire directement <br />]

Dernier détail à connaître: quel que soit le nombre d'espaces ou de retours à la ligne que vous mettez entre deux mots dans votre code HTML, le client n'interprètera qu'un seul espace. Les retours à la ligne sont générés automatiquement lorsque le texte arrive à droite de l'écran à moins que vous n'ayez inséré un marqueur spécifique.

fplanque: Publier sur le Web

Les bases de HTML