Tutoriel HTML & CSS

Par Sébastien Laoût
Version 0.3

Nous allons commencer notre apprentissage de la création de sites WEB par le plus important : le contenu !
Pour cela nous utiliserons le HTML Strict et ne nous occuperons dans un premier temps que de l'information, sa hiérarchie et sa signification. Les pages créées ne seront pas très agréables à voir mais elles seront lisibles par tous : autant par les navigateurs graphiques ou textes / oraux / brailles, que des moteurs de recherches et autre robots d'indexation...

Structure en balises

HTML signifie HyperText Markup Language. En clair, c'est un langage (format de fichier) qui permet d'écrire des pages internet, et cela au moyen de balises (Markup, en anglais).

Qu'est-ce qu'une balise ? C'est une façon de hiérarchiser ses données en les entourant par une balise ouvrante et une balise fermante. Ce balisage sert à donner une signification au texte ainsi entouré, comme nous l'avons vu dans l'introduction.
Exemple : pour indiquer un titre, on utilise la balise H1. On dit que ce texte est contenu dans la balise H1. En pratique, il est entouré par deux morceaux de textes : <h1>Mon titre</h1>. On dit que <h1> est la balise ouvrante, et </h1> la balise fermante qui correspond à la première.
Tout au long de cette page, nous verrons toutes les balises existantes en HTML, et quand les utiliser. Il existe des balises pour entourer les titres, les paragraphes, les liens, les listes, les tableaux, les cellules de tableaux, les images, etc.

Les balises peuvent s'imbriquer les unes dans les autres pour former une hiérarchie. Exemple courant : une liste est décrite par une balise UL, et chaque ligne est délimitée par une balise LI, qui est comprise à l'intérieur de la balise de liste, comme nous le verrons plus bas.

En HTML il existe deux sortes de balises :

Voici un schéma récapitulatif de la différenciation des balises dites "bloc" et "en ligne". Les balises de titre, de paragraphe, de liste et de ligne de liste sont des balises "bloc" : elles occupent 100 % de la largeur de la page, et le contenu débute toujours une nouvelle ligne. Il est aussi à noter que les balises peuvent être imbriquées, comme c'est le cas de la balise de liste et des balises de "ligne de liste". Les balises en ligne, quant à elles, se fondent dans le texte et n'ont pas forcément une forme rectangulaire fixe, comme c'est le cas du lien de la figure suivante : la balise est découpée en deux morceaux à cause du retour à la ligne. Les balises en ligne sont par exemple des liens, des balises permettant d'insister sur une partie du texte (mise en gras, italique...) ou même des images. Par défaut, les images se fondent dans le texte, à la manière des émoticônes dans une discussion en ligne.

Exemples de différentes balises bloc et en ligne

La distinction entre ces deux types de balises est primordiale : il est impossible d'imbriquer une balise de type bloc à l'intérieur d'une balise en ligne, alors que l'inverse est possible. Il est aussi à noter que le type de balise pourra être changé plus tard grâce au CSS. Nous verrons pourquoi et comment en temps voulu. Retenez juste qu'une balise est de type bloc ou en ligne juste par défaut.

Une autre règle essentielle en HTML est que le nombre d'espacements consécutifs (espaces, tabulations, ou même retours à la ligne) que vous mettez dans votre fichier source importe peu. Le navigateur remplacera tous ceux qui se suivent par un et un seul espace (sauf en début de ligne : là il n'en mettra aucun).

Voyons maintenant les balises HTML existantes. Nous allons voir un choix exhaustif de balises, mais rassurez-vous, il suffit de peu de balises pour faire la plupart des pages Web. Nous ne verrons pas toutes les balises du HTML, uniquement celles disponibles en mode Strict. Les balises que nous n'allons pas voir sont désuètes, elles ne devraient pas être utilisées. Il s'agit par exemple des balises pour mettre en gras ou en italique du texte. Ces fonctions sont désormais remplies par le CSS et ces balises ne sont encore présentes que pour des raisons de compatibilité avec les anciens sites internet.

Avant de commencer la lecture, et pour vous donner l'envie d'apprendre,
Découvrez Snaky 360, le jeu de serpent addictif réalisé par l'auteur de ce tutoriel...

Créé entièrement en HTML, CSS et JavaScript, sans Flash
(sauf pour les musiques et effets sonores, en attendant HTML 5)
Bientôt, vous pourrez en faire de même !

Ou alors, jouez à sa version Android :
Disponible sur le Play Store

Styler la page

La page

Un fichier HTML débute toujours par indiquer au navigateur que notre page est faite en HTML (le navigateur pouvant tout aussi bien recevoir et afficher des images ou des fichiers PDF, par exemple), et indique aussi quelle version de ce format est utilisée. Cela indique également aux validateurs contre quelle version du standard HTML nous souhaitons valider nos pages.
C'est ce qu'on appel le DOCTYPE. Pas de panique : il sera toujours le même et vous pouvez vous contenter de le copier / coller dans toutes vos pages sans le comprendre (il n'y a d'ailleurs pas grand chose à comprendre). Pour le HTML 4.01 Strict que nous allons utiliser, voici le DOCTYPE à inclure :

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

Maintenant que le navigateur sait cela, nous rentrons dans la structures balisée du HTML : on commence par ouvrir une balise <html>, et on la referme à la fin du fichier avec </html> : après cette balise de fin, plus rien ne doit apparaître.
À l'intérieur (entre la balise ouvrant et fermante), on trouve :

Dans notre entête, se trouvent des métadonnées. Pour commencer on ne verra que la plus importante : la balise title pour indiquer au navigateur le titre à afficher dans la barre de titre de la fenêtre, et pour indiquer aux moteurs de recherche le titre à afficher lorsque votre page sera retournée dans les résultats d'une recherche.

Pour le moment, rien n'est encore affiché dans la fenêtre du navigateur. Il faut ensuite remplir le corps (balise <body>, positionnée juste après la balise fermante </head>) avec du contenu.
Globalement, notre contenu est composé de plusieurs types de données : des titres plus ou moins importants, des paragraphes, des listes, des liens, des images ou des tableaux...
On récapitule donc, voici le squelette (mince, pour l'instant) de toute page HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Insérer ici le titre de la page</title>
  </head>
  <body>
    C'est ici que nous allons mettre le contenu de la page !
  </body>
</html>

Note :
Dans la suite des exemples, je ne donnerai plus tout le fichier HTML. Je tiendrais pour acquis que tout fichier HTML doit contenir les balises <html>, <head> et <body>. Les exemples viendront alors s'intercaler entre les balises <body> et </body>. Vous pouvez copier / coller la structure ci-dessus pour créer toutes vos nouvelles pages HTML.

Les extensions de fichiers sont cachées sous Windows :
Problème : vous avez créé un fichier "test.html". Lorsque vous l'ouvrez, il s'ouvre dans le Bloc notes au lieu du navigateur Web. Si vous l'ouvre avec Firefox ou Internet Explorer, vous voyez le code source et l'adresse de la page est transformée en quelque chose comme "file:///C:/Users/moi/Bureau/test.html.txt".

Le problème est assez classique. En fait Windows cache l'extension des fichiers. Vous avez créé un fichier texte (se terminant par .txt). Vous avez bien rajouté l'extension .html, mais Windows cache la vraie extension, et le .txt est rajouté.
Dans ce cas, il faut demander à Windows d'afficher les extensions des fichiers. Ainsi, vous pourrez voir le .txt qui a été rajouté par Windows, et remplacer cette extension par .html.
Pour cela, dans l'explorateur de fichiers de Windows, choisir « Outils » puis « Options des dossiers » :

Menu Outils de l'explorateur Windows

Dans l'onglet « Affichage », faites défiler la liste d'à peu près 8 lignes pour faire apparaitre la case à cocher « Masquer les extensions des fichiers dont le type est connu ». Cocher cette case, valider avec « OK » et voilà :

Fenêtre d'options d'affichage des dossiers sous Windows

Le fichier test.html devrait maintenant apparaitre comme test.html.txt. Supprimez l'extension .txt superflue. Windows vous demandera si vous êtes certains, répondez Oui, car vous renommez l'extension en toute connaissance de cause. Le fichier est maintenant vu comme une page HTML par les navigateurs, et pas comme un vulgaire fichier texte.

Styler les paragraphes

Les paragraphes

L'élément fondamental des pages internet est bien entendu le texte, hormis pour les sites de jeux Flash et autres divertissements, bien sûr ! Tout texte dans une page HTML doit toujours être contenu dans une balise bloc : un paragraphe, une liste (nous verrons cela bientôt), etc. Et jamais directement dans le <body> ! Voyons donc les balises principales :

Attention :
Il n'est pas recommandé d'utiliser deux <br> à la suite. En faisant cela, vous voulez très certainement créer un nouveau paragraphe. Dans ce cas, fermez le paragraphe courant et ouvrez-en un autre.

Voyons donc un petit exemple, en regardant le code HTML et le résultat produit :

<p>Ceci est un paragraphe        normal...<br>... de deux lignes :
remarquez que les retours à la ligne s'effectuent avec la balise br
et que tous les autres espacements et retours à la ligne


sont remplacés par un seul espace par le navigateur.</p>
<p>Les paragraphes sont espacés l'un de l'autre par les navigateurs de manière à les distinguer.</p>
<pre>Voici maintenant un paragraphe pré-formaté.
        Dans celui-ci, les espaces      supplémentaires, tabulations et retours
à la ligne sont pris en compte par le navigateur.
Veuillez l'utiliser avec parcimonie, lorsque cela est vraiment nécessaire,
comme les exemples de code source (que nous verrons plus tard).</pre>

Et voici ce que cela donne dans un navigateur :

Ceci est un paragraphe normal...
... de deux lignes : remarquez que les retours à la ligne s'effectuent avec la balise br et que tous les autres espacements et retours à la ligne sont remplacés par un seul espace par le navigateur.

Les paragraphes sont espacés l'un de l'autre par les navigateurs de manière à les distinguer.

Voici maintenant un paragraphe pré-formaté.
        Dans celui-ci, les espaces      supplémentaires, tabulations et retours
à la ligne sont pris en compte par le navigateur.
Veuillez l'utiliser avec parcimonie, lorsque cela est vraiment nécessaire,
comme les exemples de code source (que nous verrons plus tard).

Styler les titres

Les titres

C'est bien beau d'avoir des pages avec pleins de gros paragraphes, mais ce n'est pas très lisible. Pour les séparer et les identifier, on utilise généralement ce qu'on appel dans le jargon informatique, des titres. Oui, ça se complexifie, mais restez avec nous, on va y arriver !

Voici donc les balises à utiliser :

Quelques précisions : chacune de vos pages ne doit contenir qu'un seul titre de niveau 1, chaque paragraphe sera introduit par un titre de niveau 2 lorsque nécessaire, et les sous-titres seront des titres de niveaux 3 jusque 6. Ainsi de suite...

Bien. Nous allons créer votre première page !
Vous avez sûrement un but en lisant ce tutoriel : vous avez un projet de site et y avez certainement déjà réfléchi. Je vous propose de le réaliser ensemble.
Prenez donc une page typique de votre projet, qui contienne suffisamment de texte. Une page d'information, de préférence, autre que la page d'accueil : elle contient plus de liens que de contenu et nous n'avons pas encore vu comment faire des liens : nous nous concentrons pour l'instant sur le contenu.
Repérez le titre principal de votre page (de quoi parle-t-elle) et les différents paragraphes, avec leur titres s'ils en ont (c'est une bonne idée d'en avoir).

Appliquons donc ce que l'on a appris :

Et voilà ! Vous venez de créer votre première page internet ; voici à quoi votre code devrait ressembler :

<html>
  <head>
    <title>Tutoriel HTML et CSS</title>
  </head>
  <body>
    <h1>Tutoriel HTML et CSS</h1>

    <h2>Utilité</h2>
    <p>Ces langages sont les standards du WEB et sont reconnus par tous les navigateurs<br>
    Apprenons-les donc !</p>

    <h2>Apprentissage</h2>

    <h3>Le HTML</h3>
    <p>Vous ne le connaissez pas déjà ? Et bien vous ne l'apprendrez pas dans cet exemple !</p>

    <h3>Le CSS</h3>
    <p>C'est tellement simple que je ne vois pas pourquoi je devrais vous apprendre le CSS.</p>
  </body>
</html>

Et voici ce que cela donne dans un navigateur :

Tutoriel HTML et CSS

Utilité

Ces langages sont les standards du WEB et sont reconnus par tous les navigateurs
Apprenons-les donc !

Apprentissage

Le HTML

Vous ne le connaissez pas déjà ? Et bien vous ne l'apprendrez pas dans cet exemple !

Le CSS

C'est tellement simple que je ne vois pas pourquoi je devrais vous apprendre le CSS.

Oui, ce n'est pas très beau ! Mais ne vous inquiétez-pas : nous verrons comment allécher le visiteur lorsque nous verrons le CSS. Le HTML ne fait qu'indiquer les titres, on ne leur donne pas de couleur, de taille de texte... Tout ceci sera fait en CSS. Ce que vous voyez là est le style par défaut des titres, qui peut légèrement différer d'un navigateur à l'autre. Comme vous le voyez le HTML est très simple et on arrive déjà à quelque chose de potable et d'utilisable. Si vous n'avez qu'une seule page à mettre en ligne et sans liens ou images (juste pour expliquer un sujet) c'est déjà efficace (sauf s'il vous faut des listes).

Les titres dans un logiciel de traitement de texte :
Il est intéressant de savoir qu'il est possible d'avoir la même séparation contenu / forme dans un logiciel de traitement de texte (Microsoft Word, par exemple).
En effet, dans Word aussi, vous pouvez définir des styles "Titre 1", "Titre 2", etc. Cela permet de pouvoir changer la présentation de tous les titres en une seule place : couleur, police, mais aussi numérotation automatique (1, 2.3, petit a...). Mais c'est aussi très utile pour la génération du sommaire du document (appelé index dans ces logiciels). C'est un gain de temps énorme pour générer et modifier un rapport.

Palette des styles dans Microsoft Word 2007

En ce qui concerne la numérotation des titres, nous verront qu'il est possible de faire cela en CSS.
Enfin, avec un langage de programmation (PHP, Java ou même JavaScript), il serait aisé de générer un index automatiquement, à la manière des logiciels de traitement de texte. Vous voyez ainsi l'un des avantages de donner de la sémantique à vos pages. Sous Word, si vous mettez tous vos titres en gras et bleu, le logiciel ne serait pas capable de générer l'index car il ne saurait pas du tout que ce que vous mettez en bleu sont en fait des titres. C'est pareil en HTML.

Styler les listes

Les listes

Le HTML met à votre disposition trois sortes de listes : les listes non ordonnées (listes à puces), les listes ordonnées (numérotées), et les listes de définitions (un peu particulières, nous les verrons un peu plus bas).

Pour commencer, voici les deux premiers styles de listes : on les délimite par ul ou ol selon leur nature, et chaque ligne est entourée par li :

Note :
La balise ol peut prendre un argument start : <ol start="3">...</ol>, afin de déterminer le numéro de la première ligne. Cet attribut est déprécié par le standard HTML, bien qu'il n'existe pas de substitue. Or, il peut parfois être intéressant pour continuer une liste plus bas dans la page. Veuillez ne pas en abuser afin de rester conforme aux standards, en plaçant par exemple tout ce que vous voulez insérer entre les deux morceaux de liste plutôt à l'intérieur même d'une ligne de la liste.

Voici un exemple des listes qui, en plus, vous montre comment imbriquer les listes les unes dans les autres, en ouvrant une seconde liste <ul> ou <ol> à l'intérieur d'une ligne de la liste parente :

<ul>
  <li>Première ligne de la liste non ordonnée (puces)</li>
  <li>Seconde ligne de la liste non ordonnée (puces)</li>
  <li>Troisième ligne, mais on ne referme pas la balise : on ouvre une autre balise ul ou ol :
    <ul>
      <li>Première ligne de la sous-liste, qui est imbriquée dans la première liste</li>
      <li>Ensuite, ne pas oublier de refermer la ligne de la première liste après avoir fermée la seconde liste</li>
    </ul>
  </li>
  <li>Si vous suivez mon raisonnement... :-)</li>
</ul>

<p>Et voici une liste ordonnée :</p>

<ol>
  <li>Commencez par porter l'eau à ébullition</li>
  <li>Puis, placez les œufs dans la casserole</li>
  <li>Et là, veuillez faire ces étapes dans l'ordre :
    <ol>
      <li>Prenez une petite assiette</li>
      <li>Placez-y la bave de crapaud (bon d'accord, je manque d'imagination pour cet exemple)</li>
      <li>Et puis débrouillez-vous...</li>
    </ol>
  </li>
  <li>Bon appétit, bien sûr !</li>
</ol>

Et vous obtiendrez cela :

  • Première ligne de la liste non ordonnée (puces)
  • Seconde ligne de la liste non ordonnée (puces)
  • Troisième ligne, mais on ne referme pas la balise : on ouvre une autre balise ul ou ol :
    • Première ligne de la sous-liste, qui est imbriquée dans la première liste
    • Ensuite, ne pas oublier de refermer la ligne de la première liste après avoir fermée la seconde liste
  • Si vous suivez mon raisonnement... :-)

Et voici une liste ordonnée :

  1. Commencez par porter l'eau à ébullition
  2. Puis, placez les œufs dans la casserole
  3. Et là, veuillez faire ces étapes dans l'ordre :
    1. Prenez une petite assiette
    2. Placez-y la bave de crapaud (bon d'accord, je manque d'imagination pour cet exemple)
    3. Et puis débrouillez-vous...
  4. Bon appétit, bien sûr !

Comment choisir entre une liste ordonnée et non ordonnée ? Comme son nom l'indique, une liste ordonnée (ol) est à utiliser si chaque ligne de la liste a une place bien précise. Comme les étapes de la recette de l'exemple, qui doivent être effectuées dans l'ordre. Une liste non-ordonnée (ul) est à utiliser dans le cas contraire, quand chaque élément peut être changé monté ou descendu dans la liste sans en changer la signification (comme une liste de course).

Styler les listes de définitions

Les listes de définitions

Parfois, vous aurez à définir une liste de termes ou, plus généralement, à avoir une liste dont chaque ligne est formée d'un objet suivit d'une description.
Ces listes étant peu utilisées, vous pouvez passer ce paragraphe, mais il est intéressant d'en connaître l'existence !

Voici donc les balises utilisées pour cette troisième forme de liste :

Vous pouvez très bien définir un terme (dt) sans lui associer de définition (dd).
Vous pouvez aussi associer plusieurs définitions (dd) à un seul terme (dt).

Je vais être sympa : cet exemple de liste de définitions sera un exemple deux-en-un, car il vous permettra de réviser la différence entre une balise bloc et une balise en ligne :

<dl>
  <dt>Éléments de niveau bloc</dt>
  <dd>
    Éléments qui peuvent généralement contenir des blocs à leur tour, ou du contenu en ligne.
  </dd>
  <dt>Éléments de niveau texte</dt>
  <dt>Éléments en ligne</dt>
  <dd>
    Éléments qui ne peuvent contenir que des éléments en ligne.
  </dd>
</dl>
Éléments de niveau bloc
Éléments qui peuvent généralement contenir des blocs à leur tour, ou du contenu en ligne.
Éléments de niveau texte
Éléments en ligne
Éléments qui ne peuvent contenir que des éléments en ligne.

Comme pour les autres balises, nous verrons dans la partie CSS comment rendre plus agréable ces éléments : comment différencier mieux les termes des définitions, comment les placer sous forme de tableau (les termes à gauche, les définitions à droite)...

Enfin, ce genre de liste, comme dit précédemment, peut être utilisée pour autre chose que de simples définitions.
Ainsi, un calendrier peut utiliser cette structure : c'est une liste d'éléments, composés d'un court en-tête (la date), et d'un texte qui en dépend (le ou les événements). Comme nous le verrons plus tard, il est alors judicieux d'attribuer une classe différente à ces différentes utilisations de la liste de définitions afin de pouvoir les styler en conséquence.
Une pièce de théâtre peut aussi être rendue à l'aide d'une liste de définition : les termes sont alors les personnages, et les "définitions" sont les répliques !
Voici un exemple de calendrier créé à l'aide d'une liste de définition :

<dl class="calendrier">
  <dt>18 février</dt>
  <dd>
    Journée du libre à Springfield.
  </dd>
  <dt>1 mars</dt>
  <dd>
    Anniversaire d'une grande personnalité.
    Je vous laisse trouver laquelle.
  </dd>
</dl>

Ah... Et pour ceux qui se posent la question : je n'ai aucune idée de qui cela peut bien être l'anniversaire, mais il y a tellement de personnes célèbres que je ne doit pas me tromper avec cette phrase dans l'exemple.

Les adresses

Avant de voir les liens et les images, il est nécessaire de s'arrêter quelques instants sur la façon de désigner ces fichiers qui sont externes à la page.

Insertion d'images :
Dans les logiciels de traitement de texte habituels, les images sont sauvegardées dans le document en lui même. Si vous écrivez un rapport avec une dizaine d'images, vous n'avez qu'à transporter un seul fichier (pour l'envoyer par e-mail, par exemple) : les images sont contenues dans le fichier.
Il en va autrement avec les pages Web. Les pages étant écrites dans un simple éditeur de texte, il n'est pas possible d'importer les images dans le fichier HTML. Pour en insérer une, il est donc nécessaire de donner l'adresse de celle-ci, et c'est le navigateur qui téléchargera toutes les images en plus du fichier HTML. Ce système a l'avantage de ne pas dupliquer les images dans chaque fichier où elles sont utilisées. Il en résulte un gain de place sur le serveur, et un gain de temps pour le visiteur, qui n'a à télécharger les fichiers qu'une seule fois.

Il existe deux façons de décrire une adresse (un chemin d'accès au fichier, que ce soit une autre page ou une image) :

Les liens absolus sont assez simples à comprendre : ce sont des adresses complètes, comme http://www.google.fr/.
Les liens relatifs étant plus complexes à comprendre, voici des exemples de liens à partir de deux pages :

Exemples de liens relatifs à partir de deux pages, à travers une hiérarchie de site complexe

Ce schéma montre la seconde hiérarchie de fichiers évoquée dans l'introduction : seule la page d'accueil du site est dans le dossier racine. Les autres rubriques étant composées de plusieurs pages (deux page pour la rubrique de téléchargements dans cet exemple), ces pages sont regroupées dans un dossier ("telechargements" dans l'exemple).
Le schéma montre donc que pour faire un lien vers une page ou une image à partir de la page d'accueil Site/index.html, il suffit de nommer le ou les dossiers contenant le fichier, séparés par des slashs (/), puis d'indiquer le nom du fichier. Par contre, pour faire un lien à partir de la page Site/telechargements/index.html, il est parfois nécessaire de remonter d'un dossier avant de donner l'adresse relative d'un fichier, ce qui est fait avec "..". Pour faire un lien vers l'image fond.png, il est nécessaire de remonter dans le dossier racine (donc ".."), puis de descendre dans le dossier images, et enfin trouver le fichier fond.png. Le fichier liste.html étant dans le même dossier que index.html, il n'y a aucun dossier à mentionner dans l'adresse relative.

Styler les liens

Les liens

Évidemment, tout site qui se respecte contient des liens, que ce soit vers d'autres pages du site, vers d'autres sites ou vers des fichiers variés que le visiteur pourra télécharger.

Les liens sont réalisés grâce à la balise a. Cette balise est assez spéciale car elle est utile pour deux concepts un peu différents :

Il faut juste remarquer que l'attribut href est utilisé pour un lien, et que l'attribut name pour une ancre.

Petites explications sur les ancres, tout de même : si vous avez une page assez conséquente, il est assez judicieux d'afficher un sommaire en début de page, avec des liens qui mèneront aux paragraphes les plus importants. Un bon exemple est cette page du tutoriel : comme elle est assez grande, il y a une liste de liens vers les paragraphes en début de page. Chaque titre de paragraphe contient une ancre. En cliquant sur l'un des liens en haut de cette page, le navigateur va rechercher l'ancre dans la page et déplacera la barre de défilement pour que l'ancre soit visible.

Attention :
Les ancres doivent être placées à l'intérieur d'un paragraphe, d'un titre, d'une ligne, etc. Mais pas directement dans le corps de la page HTML.
Exemple de bon code : <h2><a name="finalite"></a>Finalité</h2>

Quand on veut utiliser une ancre pour faire un lien vers elle, on a recours au caractère '#' derrière l'adresse de la page, suivit du nom de l'ancre :

Voici maintenant un court exemple qui résume tout ce que nous venons de voir :

<ul>
  <li><a href="#premier_paragraphe">Aller au premier paragraphe</a></li>
  <li><a href="#second_paragraphe">Aller au second paragraphe</a></li>
</ul>

<p>Voici un texte contenant un <a href="une_page.html">lien vers une autre page du site</a>,
puis un autre <a href="http://www.kde.org/">lien vers un site externe</a>,
ainsi qu'un lien pour télécharger <a href="monprog3000_pro.zip">MonProgramme3000 Pro Edition</a>.</p>

<h2><a name="premier_paragraphe"></a>Premier paragraphe</h2>
<p>Avec de l'imagination, on voit ici un paragraphe très long mais très intéressant.</p>

<h2><a name="second_paragraphe"></a>Second paragraphe</h2>
<p>Encore un peu d'imagination...</p>

Voici un texte contenant un lien vers une autre page du site, puis un autre lien vers un site externe, ainsi qu'un lien pour télécharger MonProgramme3000 Pro Edition.

Premier paragraphe

Avec de l'imagination, on voit ici un paragraphe très long mais très intéressant.

Second paragraphe

Encore un peu d'imagination...

Styler les images

Les images

Afin de rendre les pages plus attractives, l'insertion d'images est un moyen simple et efficace. Attention cependant à ne pas abuser des GIFs animés, vite fatigants et pouvant être assimilés à de la publicité.

Images de contenu et de présentation :
Il est important de noter que nous parlons ici de HTML, donc de contenu (oui, je radote !). Il n'est donc pas question ici de parler d'images de fond, ou de bordures et autre objets faisant partie du design du site : ces aspects seront traités par les feuilles de style CSS. Nous parlons ici d'images illustrant un article, des schémas, des photos de vacances ou d'un produit, le logo du site, etc.

C'est ici assez simple, il n'y a qu'une seule balise à connaitre :

Pourquoi indiquer la taille des images ?
La taille est bien sûr un élément se trouvant dans le fichier d'image. Alors, vous me direz : pourquoi spécifier cette information à priori redondante ?
La hauteur et largeur dans height et width sont là pour aider le navigateur à mettre en page le fichier HTML alors que les images ne sont pas encore chargées. Cela évite des pages qui "sautent" à chaque fois que le navigateur a chargé une image car il n'avait pas fait assez de place pour celle-ci. C'est facultatif, mais je suis sûr que vous avez déjà visité une page avec un long texte entrecoupé d'images : vous commencez à lire et le texte se retrouve dix lignes plus bas d'un seul coup à cause d'une image qui vient d'être chargée au dessus. Les auteurs de ce genre de sites n'ont pas pensé à indiquer la taille des images, le navigateur doit donc toutes les charger afin de donner au fichier HTML sa mise en page finale, ce qui donne une mauvaise impression.
Vous pouvez également afficher l'image en plus grand ou plus petit, voir même déformer son ratio en précisant une taille différente de sa taille réelle.

Quelle utilité pour le texte alternatif ?
Le texte alternatif est obligatoire. Il sera affiché pendant le chargement de l'image, ou si elle n'a pas été trouvée (problème de connexion ou de serveur). Mais aussi pour les navigateurs textuels ou brailles, afin que vos visiteurs non-voyants puissent suivre le texte jusqu'au bout sans rater d'information importante qui aurait uniquement été visible sur les images. S'il s'agit d'une icône, d'un logo ou d'une image qui n'a pas d'intérêt à être "lu" plutôt que "vu", spécifiez un texte alternatif vide, comme ceci : <img src="ico32-telecharger.png" alt="">. Internet Explorer affiche aussi, à tords, ce texte dans une info-bulle (tooltip). Si vous souhaitez qu'un texte apparaisse en info-bulle dans tous les navigateurs, utilisez l'attribut title (en plus de l'attribut alt).

Empressons-nous donc de donner un peu de rêve à nos visiteurs en affichant cette belle photo de vacances photographiée par Enro :

<p>Une photo du lac Moraine, visité cet été en vacances :<br>
<img src="images/exemples/vacances-lac.jpg" width="500" height="375" alt="Le lac est d'un très beau bleu,
dommage que trois sapins se soient glissés inopinément au premier plan"></p>

Une photo du lac Moraine, visité cet été en vacances :
Le lac est d'un très beau bleu, dommage que trois sapins se soient glissés inopinément au premier plan

Styler les balises abbr et acronym ; em et strong ; ins et del

Les balises de sémantique en ligne

Après avoir vu les balises basiques pour tout document (titres et paragraphes), en voici quelques autres qui permettent de donner une signification au texte ! Elles doivent être utilisées au lieu de balises pour mettre en gras, italique, etc.

Attention :
Ce n'est pas parce que, par défaut, le strong produit un effet gras et que le em produit un texte en italique que vous pouvez les utiliser simplement pour mettre un texte en gras ou en italique : rappelez-vous que vous devez choisir ces balises pour leur signification et non pour son aspect visuel. Rappelez-vous qu'un lecteur en braille, par exemple, ne possède pas la notion de gras ou d'italique.
Je ne vous donne volontairement pas les balises pour changer la police ou le formatage des caractères : ce n'est pas conseillé (même si ces balises existent) et cela sera fait en CSS : vous évitez ainsi d'apprendre comment faire des choses avec deux systèmes différents sachant que le CSS permet des mises en pages plus avancées. C'est aussi pour cela que vous n'avez pas beaucoup de balises HTML à connaître...

Allez, soyons fou et donnons un texte d'exemple de tout cela, même si le résultat n'a aucun sens :

<ul>
  <li>Nous somme le 1<sup>er</sup> du mois, et 2<sup>4</sup> = 16</li>
  <li>L'emphase sert à accentuer sur un mot <em>précis</em> dans un texte</li>
  <li>Tandis que l'emphase forte <strong>insiste</strong> plus lourdement sur un passage</li>
  <li>On peut aussi imaginer un texte parlant du <abbr title="Baccalauréat">BAC</abbr>
    et des études que l'on peut faire après comme le
    <acronym title="Diplôme Universitaire de Technologie">DUT</acronym></li>
  <li>Voire même donner la définition de <em>mot</em> : <dfn>c'est un ensemble de lettres</dfn>
  <li>Exactement, je l'ai eu dans <cite>Le dictionnaire à moi, édition 2010</cite></li>
  <li>Et comme disait William Shakespeare,
    <q cite="http://fr.wikipedia.org/wiki/William_Shakespeare">Être ou ne pas être, telle est la question</q></li>
  <li>Puis, pour faire ce tutoriel j'ai butté sur quelques
    <del datetime="2004-10-31T21:01:00-02:00" title="'truc' ne se dit pas dans un tutoriel sérieux">trucs</del>
    <ins datetime="2004-02-18T00:00:00-05:00" title="'mot' était précisément ce que je voulais dire">mots</ins>
  </li>
</ul>
  • Nous somme le 1er du mois, et 24 = 16
  • L'emphase sert à accentuer sur un mot précis dans un texte
  • Tandis que l'emphase forte insiste plus lourdement sur un passage
  • On peut aussi imaginer un texte parlant du BAC et des études que l'on peut faire après comme le DUT
  • Voire même donner la définition de mot : c'est un ensemble de lettres
  • Exactement, je l'ai eu dans Le dictionnaire à moi, édition 2010
  • Et comme disait William Shakespeare, Être ou ne pas être, telle est la question
  • Puis, pour faire ce tutoriel j'ai butté sur quelques trucs mots

Styler les balises code, kbd, samp et var

Les balises de code

Il se peut que vous fassiez un site sur les mathématiques, ou sur la programmation informatique : un portail d'aide en PHP, ou tout simplement un tutoriel HTML comme celui-ci (je vous déconseille toutefois fortement d'essayer de concurrencer ce tutoriel !). Il est alors intéressant de marquer certaines parties de texte en tant qu'exemples de code source, de résultat obtenu, etc.
Voyons comment faire cela :

Attention :
Il est à noter que ces balises sont toutes en ligne, c'est à dire qu'elles doivent être intégrées dans un bloc : un paragraphe (pré-formaté ou non), une ligne de liste... Dans le cas des balises code et samp, vous les utiliserez comme balises en ligne si vous avez un court extrait de code, d'exemple, ou d'une équation à l'intérieur d'une phrase. Par contre, si vous voulez les utiliser pour montrer des blocs de code en entier, vous avez tout intérêt à les entourer par des balises pre. Bien sûr, parce que vous devez intégrer les balises code et samp dans une balise bloc, mais aussi et surtout parce que les espaces et retours à la ligne de votre code seront préservés à l'affichage.

Très souvent, les espaces dans un code source doivent être gardés tel quels. Dans ce cas, placez le code dans un paragraphe pré-formaté (bloc <pre>) : les espaces et retours à la ligne seront gardés sans avoir recours à des lourdes balises HTML : c'est l'une des rares exceptions de l'utilisation de <pre> (dans tous les cas, <code> doit être placé dans un paragraphe ou un autre bloc).

Petits exemples, autant pour les mathématiques que pour des codes sources :

<p>En mathématiques, si 2&#183;<var>x</var> = 8, alors <var>x</var> = 4. Fulgurant, non ?</p>
<p>En C++, pour écrire un texte à l'écran, il suffit d'appeler cette fonction : <code>printf("Salut, Monde !");</code>.
Remarquez que vous pouvez stocker le texte dans une variable, nommée <var>texte</var> par exemple !
Et voici un Hello World complet :</p>
<pre><code>int main() {
    char *texte = "Salut, Monde !";
    printf(texte);
    exit(0);
}</code></pre>
<p>Pour compiler, tapez <kbd>gcc exemple.c</kbd> et vous devriez obtenir ceci à l'écran :</p>
<pre><samp>[seb@localhost seb]$ gcc exemple.c
gcc: exemple.c: No such file or directory
gcc: no input files</samp></pre>

En mathématiques, si 2·x = 8, alors x = 4. Fulgurant, non ?

En C++, pour écrire un texte à l'écran, il suffit d'appeler cette fonction : printf("Salut, Monde !");. Remarquez que vous pouvez stocker le texte dans une variable, nommée texte par exemple ! Et voici un Hello World complet :

int main() {
    char *texte = "Salut, Monde !";
    printf(texte);
    exit(0);
}

Pour compiler, tapez gcc exemple.c et vous devriez obtenir ceci à l'écran :

[seb@localhost seb]$ gcc exemple.c
gcc: exemple.c: No such file or directory
gcc: no input files

Bon, je vous accorde que ces exemples manquent d'imagination, mais l'essentiel y est : nous avons utilisé des variables des textes à entrer au clavier ou des petits morceaux de code dans des paragraphes, ou affiché des paragraphes entiers de code ou de sortie écran.

Styler les filets de séparation horizontaux ; citations

Les balises de sémantique bloc

Voici maintenant de nouvelles balises bloc pour structurer et donner une signification du contenu de vos pages. Certaines balises sont les pendants blocs de celles que nous venons de voir :

La différence entre <cite> et <blockquote> :
La balise <cite> est conçue pour des citations courtes en ligne, comme le nom d'un livre. Par contre, <blockquote> est conçue pour des... blocs, comme son nom l'indique, comme des citations lors de réponses dans un forum ou à un e-mail... Ce bloc doit contenir des paragraphes, ou assimilés, et ne peut accueillir du texte directement.

Quelques exemples d'utilisations réelles, surtout pour blockquote et address, qui peuvent paraître étranges :

<blockquote cite="voir.php?message=precedent">
  <p>
    Oui, moi je dis que le noir c'est mieux !<br>
    Et je m'y connais.
  </p>
</blockquote>
<p>Moi, par contre, je suis convaincu que le blanc c'est mieux.</p>

<hr>

<address>
  Si vous avez des questions sur l'enregistrement, contactez-nous à
  <a href="mailto:webmaster@site.org">webmaster@site.org</a>, ou téléphonez-nous au 09 76 34 67 12.
</address>

Oui, moi je dis que le noir c'est mieux !
Et je m'y connais.

Moi, par contre, je suis convaincu que le blanc c'est mieux.


Si vous avez des questions sur l'enregistrement, contactez-nous à webmaster@site.org, ou téléphonez-nous au 09 76 34 67 12.

Styler les tableaux

Les tableaux

Il vous faut parfois afficher une liste de résultats, nombres, et autres données tabulaires... Ceci est généralement fait dans un tableau.

Tableau ou liste ?
Utilisez un tableau si vous avez plusieurs colonnes (et de préférence un titre à mettre à ces colonnes) ou autres données tabulaires. Dans le cas contraire (si vous souhaitez faire un tableau à une colonne, par exemple) des puces feront peut-être mieux l'affaire. De même, pour une liste de couples terme / définition, une liste de définitions est plus appropriée (plutôt que deux colonnes terme / définition).

Attention :
Beaucoup de gens se servent de tableaux pour faire une mise en page. Se sont généralement des tableaux de trois lignes et trois colonnes. Les cellules aux bords et aux coins du tableau accueillent des images décoratives qui forment un cadre, et la cellule du milieu contient le contenu. Les tableaux sont à utiliser pour présenter des données tabulaires, des feuilles de calculs, etc. La présentation de cadres et autres mises en pages est faite en CSS de manière bien plus légère et flexible. Il est conseillé de peser le pour et le contre avant d'utiliser des tableaux : gardez à l'esprit que pour l'instant, nous faisons du HTML et que nous nous intéressons au contenu.

Voici donc la liste des balises nécessaires à la création d'un tableau en HTML :

À l'intérieur de la balise table, vous pouvez y mettre quatre autres balises, donc seule tbody est obligatoire :

Une fois la structure du tableau en place, voici comment créer des lignes et des cellules :

Après cette flopée de détails, voici ce que cela donne, c'est long, donc vous pourrez le copier / coller directement :

<table summary="Cette table liste les unités SI (Système International),
                en donnant le nom et le symbole de ces unités.">
  <caption>Unités SI (partiel)</caption>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Symbole</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>mètre</td>
      <td>m</td>
    </tr>
    <tr>
      <td>kilogramme</td>
      <td>kg</td>
    </tr>
  </tbody>
</table>

Et maintenant, à l'écran :

Unités SI (partiel)
Nom Symbole
mètre m
kilogramme kg

Parfois, il peut être intéressant de regrouper des cellules. Il faut alors utiliser l'attribut colspan, pour répandre une cellule sur plusieurs colonnes, ou rowspan, pour étendre une cellule sur plusieurs lignes.
Un exemple valant mieux qu'un long discours :

<table summary="Exemple de colspan et rowspan" border="1">
  <caption>Exemple de colspan et rowspan</caption>
  <thead>
    <tr>
      <th colspan="2">Nom</th>
    </tr>
    <tr>
      <th>Bidule</th>
      <th>Machin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Cellule sur deux lignes</td>
      <td>Voilà...</td>
    </tr>
    <tr>
      <td>Et la dernière ligne</td>
    </tr>
  </tbody>
</table>

Attention :
J'ai ici utilisé l'attribut border de la balise table, qui est désuet en HTML 4. C'est juste pour montrer que les cellules s'étendent bien sur plusieurs colonnes ou lignes. Il s'agit ici d'un élan de fainéantise de ma part. La bordure d'un tableau doit être définie en CSS. Elle peut y être beaucoup plus belle en CSS, ce que nous allons voir très bientôt.

Voici donc le résultat :

Exemple de colspan et rowspan
Nom
Bidule Machin
Cellule sur deux lignes Voilà...
Et la dernière ligne

Cet exemple montre aussi en quoi il est parfois utile d'avoir deux lignes dans un thead.
Notez également que le dernier td est visuellement placé sur la seconde colonne, car la première est utilisée par la première cellule de la ligne précédente, celle qui s'étend sur deux lignes.

Structurer des pages complexes

Dans les sites plus complexes qu'un enchaînement de titres et de paragraphes, il est intéressant de séparer les éléments du site en plusieurs blocs.
C'est là qu'interviennent les balises génériques sans signification particulière, mais qui pourra avoir un style différent plus tard :

Pour l'instant, vous ne devez pas trop en voir l'intérêt. Nous en reparlerons dans la prochaine partie, car ces balises sont souvent utilisées afin de structurer les pages (elles ajoutent de la sémantique) et de donner un style à cette structure grâce au CSS.

Attributs title... link->image
COMMENTAIRES : Comments in HTML have a complicated syntax that can be simplified by following this rule: Begin a comment with "", and do not use "--" within the comment.

Les formulaires

Les formulaires sont des éléments avancés du HTML, dans la mesure où ils demandent des connaissances en programmation du côté du serveur (PHP, Java ou .Net) ou du client (JavaScript). Je vais les laisser de côté pour le moment afin de pouvoir terminer ce tutoriel toujours en cours d'écriture, et me consacrer plus particulièrement à la partie CSS. Les personnes intéressées par les formulaires trouveront une documentation abondante sur d'autres sites internet.

Les entités

Les entités servent à définir des caractères qui seraient autrement interprétés comme du code HTML, ou des caractères difficilement tapés au clavier.

Par exemple, si vous avez besoin du signe "inférieur à" dans une page Web utilisant des formules mathématiques. Vous ne pouvez pas utiliser le signe tel quel car il sera interprété comme un début de balise HTML. Il faut alors utiliser "&lt;" dans le code source HTML pour afficher le signe "<" à l'écran du navigateur. Voici un moyen mnémotechnique pour se souvenir du nom de l'entité : c'est le signe "inférieur à". En anglais cela se traduit par "less than", ce qui une fois abrégé, donne "lt". Le signe "plus grand que", s'écrit lui &gt; pour "greater than".

Les plus perspicaces d'entre vous demanderons alors : "Mais comment utiliser le 'et commercial' alors ?". Le caractère & doit être codé avec "&amp;".

Une troisième entité utile est le guillemet anglais. Ce caractère peut être utilisé dans du code HTML, mais pose problème pour l'utiliser à l'intérieur d'un attribut, tel que le titre d'une balise img. Il faut alors utiliser &quot; (quotation mark, en anglais) pour produire le signe ".

Voici un exemple pratique utilisant ces caractères spéciaux, ainsi que certains donnés dans le tableau qui va suivre. N'hésitez pas à passer la souris sur le paragraphe résultant afin de lire une info-bulle démontrant l'intérêt de l'entité &quot; à l'intérieur des attributs :

<p title="Extrait du livre &quot;Les mathématiques à la crèche&quot;, &copy; 2007">
  Le Tutoriel HTML &amp; CSS vous propose un cours de mathématiques express en tant que bonus :<br>
  Si &laquo;&nbsp;x &lt; y&nbsp;&raquo;, alors &laquo;&nbsp;y > x&nbsp;&raquo;.<br>
  &Agrave; partir de cette constatation assez complexe, de nombreux théorèmes peuvent apparaître.<br>
  &Ccedil;a commence à être assez complexe, alors nous allons nous arrêter ici.
</p>

Le Tutoriel HTML & CSS vous propose un cours de mathématiques express en tant que bonus :
Si « x < y », alors « y > x ».
À partir de cette constatation assez complexe, de nombreux théorèmes peuvent apparaître.
Ça commence à être assez complexe, alors nous allons nous arrêter ici.

Ce sont les quatre principales entités. Il peut être nécessaire d'en utiliser d'autres pour des symboles mathématiques, lettres grecques, ou tout simplement pour les caractères accentués français, si l'encodage de votre éditeur de texte est différent du codage du serveur.
Concernant les encodages, je vous conseil cet excellent article de Joël Spolsky : Le minimum absolu que tout développeur doit absolument, positivement savoir sur Unicode et les jeux de caractères (aucune excuse !).

Voici un tableau des entités les plus utilisées, des lettres françaises difficilement tapées avec un clavier, et quelques signes légaux pouvant être utiles pour un site internet :

Entité Code HTML
< &lt;
> &gt;
& &amp;
" &quot;
« &laquo;
» &raquo;
&hellip;
À &Agrave;
Ç &Ccedil;
É &Eacute;
È &Egrave;
Ù &Ugrave;
æ &aelig;
Æ &OAElig;
œ &oelig;
Π&OElig;
© &copy;
® &reg;
&trade;
Espace insécable &nbsp;

L'espace insécable est un espace entre deux mots ou caractères qui ne peuvent pas être séparés par un retour à la ligne. Par exemple, en français, le caractère deux-points doit être séparé du mot précédent par un espace insécable. S'il n'y a pas assez de place pour afficher le mot suivit des deux points, le navigateur mettra le mot à la ligne.

Pour une liste plus exhaustive, veuillez vous reporter à la page Caractères spéciaux et entités HTML, par Alexandre Alapetite (caractères monétaires, lettres grecques, caractères mathématiques...).

Faites une pause, vous l'avez bien mérité :
Découvrez Snaky 360, le jeu de serpent addictif réalisé par l'auteur de ce tutoriel...

Créé entièrement en HTML, CSS et JavaScript, sans Flash
(sauf pour les musiques et effets sonores, en attendant HTML 5)
Bientôt, vous pourrez en faire de même !

Ou alors, jouez à sa version Android :
Disponible sur le Play Store