Dave Raggett Débuter en HTML

Dave Raggett, revu le 13 février 2002.

[Le document original Getting started with HTML a été traduit par Patrick Blanchenay le 14 juillet 2004.]

Cet article est une brève initiation à l'écriture du HTML. Beaucoup de gens éditent encore le HTML à la main, en utilisant par exemple le Bloc-Notes sous Windows, ou SimpleText sous Mac. Ce guide est là pour vous apprendre les rudiments, afin que vous puissiez voler de vos propres ailes. Même si vous ne comptez pas éditer directement le code HTML, et utiliserez plutôt un éditeur HTML (comme Netscape Composer ou l'éditeur Arya du W3C) ce guide vous permettra de mieux comprendre le HTML, vous permettant de faire meilleur usage de ces outils et de rendre vos documents HTML accessibles au plus grand nombre de navigateurs. Une fois que vous serez à l'aise avec les bases de l'édition HTML, vous souhaiterez sans doute ajouter une pincée de style grâce aux CSS, et essayer d'autres fonctionnalités mentionnées sur ma page HTML avancé.

L'utilitaire HTML Tidy est un moyen pratique de réparer automatiquement les erreurs de balises dans vos documents. En plus, il nettoie le balisage, rendant ainsi le code plus facile à lire et à éditer. Je vous recommande d'utiliser Tidy régulièrement sur les balises que vous éditez. Il nettoie efficacement le code créé par des logiciels d'édition, qui ont parfois de mauvaises habitudes.

P-S : une excellente façon d'apprendre est de regarder comment les autres codent leurs pages HTML. Pour cela, cliquez sur le menu Affichage, puis sur Source. Essayez sur cette page pour comprendre comment j'applique les idées que j'explique plus bas. Vous développerez un regard critique car, comme vous le constaterez, nombreuses sont les pages qui, sous la surface, sont un véritable désordre !

Sur cette page, vous apprendez à :

Si vous cherchez plus, essayez la page HTML avancé.

Commencer par un titre

Tout document HTML commence par un titre. Voici ce que vous devez taper :

<title>Mon premier document HTML</title>

Adaptez le texte «Mon premier document HTML» à vos besoins. Le texte du titre est encadré par la balise ouvrante <title> et la balise fermante correspondante </title>. Le titre doit être placé au début de votre document.

Pour essayer, tapez le code ci-dessus dans un éditeur de texte et sauvegarder le fichier sous le nom «test.html», puis regardez-le dans un navigateur Web. Si l'extension du fichier est «.html» ou «.htm», le navigateur le reconnaîtra comme étant du HTML. La plupart des navigateurs affichent le titre dans la barre de titre de la fenêtre.

Ajouter des titres de rubrique et des paragraphes.

Si vous avez utilisé Microsoft Word, vous êtes habitués aux styles prédéfinis pour les titres de partie d'importances différentes. Le langage HTML propose six niveaux de titres de rubrique. H1 est le plus important, H2 est légèrement moins important, et ainsi de suite jusqu'à H6, le moins important.

Voilà comment ajouter un titre de rubrique important :

<h1>Titre de rubrique important</h1>

et voici un titre de rubrique légèrement moins important :

<h2>Titre de rubrique moins important</h2>

Chaque paragraphe doit commencer par une balise <p>. La balise fermante </p> est facultative, contrairement aux balises fermantes des titres de rubrique. Par exemple :

<p>Ceci est le premier paragraphe.</p>

<p>Ceci est le second paragraphe.</p>

Insister sur certaines parties du texte

Vous pouvez insister sur un ou plusieurs mots avec la balise <em>. Par exemple :

C'est un sujet vraiment <em>intéressant</em> !

Ajouter de la vie grâce aux images

Les images peuvent servir à rendre vos pages Web uniques et à faire passer votre message. Pour insérer simplement une image, utilisez la balise <img>. Imaginons que vous ayiez un fichier image «peter.jpg» dans le même répertoire que votre fichier HTML. L'image fait 200 pixels de large et 150 de haut.

<img src="peter.jpg" width="200" height="150">

L'attribut src indique le nom du fichier image. Les attributs width (largeur) et height (hauteur) ne sont pas nécessaires mais accélèrent l'affichage de la page Web. Il y a encore quelque chose qui manque ! Les gens qui ne peuvent pas voir l'image ont besoin d'une description qui puisse la remplacer. Vous pouvez ajouter une courte description comme suit :

<img src="peter.jpg" width="200" height="150"
alt="Mon ami Peter">

L'attribut alt sert à donner une courte description, dans notre cas : «Mon ami Peter». Pour des images complexes, vous pouvez également donner une longue description. En supposant que ceci a été écrit dans le fichier «peter.html», vous pouvez en ajouter une en utilisant l'attribut longdesc :

<img src="peter.jpg" width="200" height="150"
alt="Mon ami Peter" longdesc="peter.html">

Il existe de nombreuses manières de créer des images : avec un appareil numérique, en scannant une image ou en utilisant un logiciel de dessin par exemple. La plupart des navigateurs comprennent les formats d'image GIF et JPEG ; les navigateurs plus récents comprennent également le format PNG. Pour éviter les longs délais de téléchargement, vous devez éviter d'utiliser des images lourdes.

De manière générale, le JPG est mieux pour les photographies et les images aux palettes nuancées, tandis que le GIF et le PNG conviennent aux images utilisant des grandes plages de couleurs unies, des lignes et du texte. Ces trois formats d'image supportent le rendu progressif : une version ébauchée de l'image est d'abord envoyée, puis affinée petit à petit jusqu'à obtenir l'image originale.

Insérer des liens vers d'autres pages

Ce qui rend le Web si efficace, c'est la possibilité de définir des liens d'une page à une autre, et de suivre ces liens grâce à un simple clic. En un clic, on traverse le monde !

Les liens se définissent grâce à la balise <a>. Insérons un lien vers la page contenue dans le fichier «peter.html» :

Ceci est un lien vers la <a href="peter.html">page de Peter</a>.

Le texte entre les balises <a> et </a> est utilisé comme légende du lien. La légende est fréquemment affichée en bleu et soulignée.

Pour faire un lien vers une page d'un autre site, vous devez spécifier l'adresse Web complète (communément appelée URL ou URI). Par exemple, pour un lien vers www.w3.org, vous devez écrire :

Ceci est un lien vers le <a href="http://www.w3.org/">W3C</a>.

Vous pouvez transformer une image en lien. L'exemple suivant vous permet de cliquer sur le logo de la société X pour arriver à son site :

<a href="/"><img src="logo.gif" alt="Site de la société X"></a>

Trois types de liste

Le HTML supporte trois types de liste. Le premier type est la liste à puces, souvent appelée liste non ordonnée. Ce type utilise les balises <ul> (pour unordered list) et <li> (pour list item), par exemple :

<ul>
  <li>Premier élément de la liste ;</li>

  <li>deuxième élément de la liste :</li>

  <li>troisième élément de la liste.</li>
</ul>

Note : vous devez toujours terminer la liste par une balise fermante </ul> alors que la balise </li> est facultative et peut être omise. Le deuxième type de liste est la liste numérotée, souvent appelée liste ordonnée. Elle s'utilise avec les balises <ol> (pour ordered list) et <li>. Par exemple :

<ol>
  <li>Premier élément de la liste ;</li>

  <li>deuxième élément de la liste :</li>

  <li>troisième élément de la liste.</li>
</ol>

Comme pour les listes à puces, vous devez toujours terminer par la balise fermante </ol> mais la balise </li> peut être omise.

Le troisième et dernier type de liste est la liste de définition. Il vous permet de lister des termes et leur définition. Ce type de liste commence par une balise<dl> et se termine par la balise correspondante </dl>. Chaque terme commence avec la balise <dt> et chaque définition avec la balise <dd>. Par exemple :

<dl>
  <dt>Premier élément :</dt>
  <dd>sa définition.</dd>

  <dt>Deuxième élément :</dt>
  <dd>sa définition.</dd>

  <dt>Troisième élément :</dt>
  <dd>sa définition.</dd>
</dl>

Les balises fermantes </dt> et</dd> sont facultatives et peuvent être omises. Remarquez que les listes peuvent être imbriquées les unes dans les autres :

<ol>
  <li>Premier élément</li>

  <li>
    Deuxième élément<ul>
      <li>premier élément imbriqué</li>
      <li>second élément imbriqué</li>
    </ul>
  </li>

  <li>Troisième élément</li>
</ol>

Pour les éléments de liste plus longs, vous pouvez également utiliser des paragraphes et des titres de rubriques.

Pour plus d'information

Si vous désirez en savoir plus, j'ai préparé des accompagnements sur le HTML avancé et Ajouter une pincée de style [NdT : ces deux pages ne sont pas encore traduites en français au 14/07/2004].

La recommandation du W3C pour le HTML 4.0 est le standard de référence de la création HTML. Cependant cette spécification est technique. Pour des informations moins techniques, vous pouvez vous procurer l'un des nombreux livres sur le HTML, comme par exemple "Raggett on HTML 4", publié en 1998 chez Addison Wesley. Le XHTML 1.0 est désormais une recommandation du W3C.

Bonne chance et à vos plumes !

Dave Raggett <dsr@w3.org>

Droit de copie © 1994-2003 W3C® (MIT, ERCIM, Keio), tous droits réservés. Les règles du W3C de responsabilité,de marque déposée, d'utilisation du document et de licences sur les logiciels s'appliquent.

[Le document original Getting started with HTML a été traduit par Patrick Blanchenay le 14 juillet 2004. Ce dernier propose d'autres leçons similaires.]