Home / Tutoriel HTML et CSS / Le HTML

Nous allons commencer notre aprentissage de la création de sites WEB par le plus important : le contenu !
Pour cela nous utliserons le HTML Strict et ne nous occuperons dans un premier temps que de l'information, sa hierarchie 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 / auraux / brailles, que des moteurs de recherches et autre robots indexateurs...

Structure en balises

HTML signifie HyperText Markup Language. En clair, c'est un language (format de fichier) qui permet d'écrire des pages internet, et cela au moyen de balises (Markup, en anglais).
Qu'est-ce que des balises ? C'est une façon de hierarchiser ses données. Exemple : pour indiquer un titre, on utilise la balise H1 ; on dit que ce texte est contenu dans la balise. En fait, il est entouré par deux morceaux de textes : <h1>Mon titre</h1>.
Les balises peuvent s'embriquer les unes dans les autres pour former une hierarchie. Exemple courrant : une liste est décrite par une balise UL, et chaque ligne est délimitée par une autre balise, qui est comprise à l'interieur de la balise de liste.

Ensuite, peu impotrte le nombre d'espaces (espaces, ou tabulations, ou même retour à la ligne)que vous mettez dans votre source (le fichier que vous éditez), le navigateur remplacera tous ceu qui se suivent par un et un seul espace (sauf en début de ligne : là il n'en mettra aucun).

Nous avons maintenant dit au navigateur que nous avons bien créé une page HTML et lui avons donné son titre à afficher dans la barre des tâches.
Mais rien n'y est encore affiché. Nous allons donc remplir le corps (<body>) 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 : il n'y a pas grand chose d'autre, si ce n'est que certains passages ont besoin d'être insistés, d'autres sont plus importants...
Notez que je n'ai pas parlé de passages en gras ou soulignés : le HTML s'interesse à la signification du texte, pas à son rendu à l'écran ou au papier, car une page HTML peut aussi être lue par un logiciel de synthèse vocale, ou de bien d'autres façons : dans ces cas il est abérant de parler de texte en rouge, par exemple (dans ce cas, il faut s'intéroger sur le pourquoi de ce rouge : est-ce important, est-ce dangeureux... les balises HTML seront là pour donner la signification, la forme sera fonction du style CSS pour les écrans où de l'intonnation pour les synthétiseurs vocaux).

En HTML il existe deux sortes de balises :

La page

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 donnerais plus tout le fichier HTML. Je tiendrait pour acquis que tout fichier HTML doit contenir les balises <html>, <head> et <body>. Les exemples viendront alors s'intercaller entre les balises <blody> et </body>.

Styler la page »

Les paragraphes

L'élement fondamental dans les pages internet c'est le texte (hormis les sites de jeux flashs 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... mais jamais directement dans le <body> ! Voyons donc les balises principales :

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>Deux paragraphes sont espacés 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.

Deux paragraphes sont espacés 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 paragraphes »

Les titres

C'est bien beau d'avoir des pages avec du texte, mais ce n'est pas très lisible. Pour les séparer et les identifier, on utilise généralement des titres (bon, je ne vous apprends rien).

Voici donc les balises à utiliser :

Quelques précisions : chacunes de vos pages ne doit contenir qu'un et 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, intéressante cette fois !
Vous avez surement un but pour lire 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 une page typique, qui contient du texte (une page d'information... mais pas 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 faire 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 languages 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>Et vous ne le connaissez pas déjà ? Tant pis, ce n'est qu'un exemple !</p>
    <h3>Le CSS</h3>
    <p>Pareil : nous le verrons plus tard</p>
  </body>
</html>

Et voici ce que cela donne dans un navigateur :

Tutoriel HTML et CSS

Utilité

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

Apprentissage

Le HTML

Et vous ne le connaissez pas déjà ? Tant pis, ce n'est qu'un exemple !

Le CSS

Pareil : nous le verrons plus tard

OK : 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 : ce sont deux choses différentes et nous nous concentrons pour l'instant sur le contenu. Comme vous le voyez c'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).

Styler les titres »

Les listes

Vous avez trois sortes de listes : les listes non ordonnées (ou "à puces"), les liens ordonnées (numérotées), et les listes de définitions (c'est un peu particulier et on n'en a pas souvent besoin).

Voici pour commencer 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="1"></ol>, afin de déterminer le numéro du premier item. C'est attribue désigné 'dépreciated' par le standard HTML mais il n'existe pas de substitue ; or il peut parfois être intéressant (mais ne pas en abuser).

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'interieur 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 liste ordonnée, 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>Commencer par porter l'eau à ébulition</li>
  <li>Puis, placez les œux dans la caserolle</li>
  <li>Et là, veuillez faire ces étapes dans l'ordre :
    <ol>
      <li>Prennez une petite assiète</li>
      <li>Placez-y la bave de crapeau (bon d'accord, je manque d'imagination pour cet exemple)</li>
      <li>Et puis débrouillez-vous...</li>
    </ol>
  </li>
  <li>Bon appéti, bien sûr !</li>
</ol>

Et vous obtiendrez celà :

Et voici une liste ordonnée :

  1. Commencer par porter l'eau à ébulition
  2. Puis, placez les œux dans la caserolle
  3. Et là, veuillez faire ces étapes dans l'ordre :
    1. Prennez une petite assiète
    2. Placez-y la bave de crapeau (bon d'accord, je manque d'imagination pour cet exemple)
    3. Et puis débrouillez-vous...
  4. Bon appéti, bien sûr !

Styler les listes »

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 intererssant de connaître leur existance !

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 plusieures définitions (dd) à un seul terme (dt).

Voici donc quelques exemples :

<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 sur une ligne...

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'items, compsés d'un court en-tête, la date, et d'un texte qui en dépent, le ou les évennements. Comme nous le verssons plus tard, il est alors judicieux d'attribuer une classe différente à ces différentes utilisations de la liste de définitons afin de pouvoir les styler en conséquence.
Une pièce de théatre est 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 à Trifouilli les Oies.
  </dd>
  <dt>1 mars</dt>
  <dd>
    Anniversaire d'une grande personnalité.
  </dd>
</dl>

Styler les listes de définitions »

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.
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

É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.

C'est un peu spécial, car il n'y a qu'une seule balise pour deux concepts un peu différents :

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énreont aux paragraphes les plus importants. Un bon exemple est cette page du tutoriel : elle est assez grande et en début de page il y a une liste des paragraphes. Chaque paragraphe contient une ancre.

Attention : votre ancre doit être placée à l'intérieur d'un paragraphe, d'un titre, d'une ligne, etc... Mais pas directement dans le corp de la page HTML. Exemple de bon code : <h2><a name="finalite"></a>Finalité</h2>
Il faut juste remarquer que l'attribue href est utilisé pour un lien, et que l'attribue name pour une ancre.
Et quand on veut l'utiliser pour faire un lien vers elle on a recours au caractère '#' :

Allez : un court exemple qui résume tout ça :

<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 liens »

Les images

Afin de rendre les pages plus attractives, l'insertion d'images est un bon moyen simple et efficace (attention cependant à ne pas abuser des GIFs animés, vite fatigant et pouvant être assimilés à de la publicité).
Note importante : 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, les photo de vacances, celles d'un produit, le logo du site, etc...

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

Note : La hauteur et largeur dans height et width sont là pour aider le navigateur à mettre en page alors que les images ne sont pas encore chargées (ça évite des pages qui "sautent" à chaque fois que le navigateur a chargé une image car il n'a 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 et des images entre deux : vous commencez à lire et le texte se retrouve dix lignes plus bas d'un seul coup à cause d'une image qui s'est chargée au dessus.

Note 2 : le texte alternatif est obligatoire. Il sera affiché pendant le chargement de l'image, ou si elle n'a pas été trouvée. Mais aussi pour les navigateurs textuels ou brailles, histoire que vos visiteurs non-voyants puissent profiter des images aussi. S'il s'agit d'une icônes, 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="">. Certains navigateurs affichent aussi ce texte dans une info-bulle (tooltip). Si vous souhaitez que le texte apparaisse en info-bulle dans tous les navigateurs, utilisez l'attribue title.

Note 3 : les images doivent toujours être positionnées dans un bloc, généralement un paragraphe.

Comme si c'était la peine d'ajouter un exemple ;-) :

<p>Une photo du bambin :<br>
<img src="files/mon_bebe.jpg" alt="le petit pinguin que j'ai adopté, il porte
toujours des couches et a toujours sa tétine et son hochet" width="148" height="168"></p>

Une photo du bambin :
le petit pinguin que j'ai adopté, il porte toujours des couches et a toujours sa tétine et son hochet

Styler les images »

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 parceque 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 italique ou en gras : rappelez-vous que vous devez choisir ces balises pour sa signification et non pour son aspect visuel. Rappelez-vous qu'un lecteur en brail, par exemple, ne possède pas la nottion de gras ou d'italique.
C'est volontairement que je ne vous donne pas les balises pour changer la fonte 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 sachants que le CSS est meilleur (à mon point de vue). C'est aussi pour cela que vous n'avez pas beacoup 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'amphase sert à accentuer sur un mot <em>précis</em> dans un texte</li>
  <li>Tandis que l'amphase forte <strong>insiste</strong> 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 une ensemble de lettres</dfn>
  <li>Ben oui, je l'ai eu dans <cite>Le dictionnaire à moi, édition 2000</cite></li>
  <li>TODO: Et comme disait Machin, <q cite="machin">Ê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>

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

Les balises de code

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

Il est à noter que ces balises sont toutes en ligne, c'est à dire qu'elle doivent être intégrée dans un bloc : un paragraphe (préformaté ou non), une ligne de liste...

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 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, c'est très simple : <code>printf("Salut, Monde !");</code>.
Remarquez que vous pouvez stoquer 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, tappez <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, c'est très simple : printf("Salut, Monde !");. Remarquez que vous pouvez stoquer 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, tappez 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 dimagination, 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 balises code, kbd, samp et var »

Les balises de sémantique bloc

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

Notez bien que <cite> est conçu pour des citations courtes, comme le nom d'un livre, et <blockquote> pour des... blocs, comme son nom l'indique, comme des citations lors de réponses dans un forum ou d'un e-mail...

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

<blockquote cite="voir.php?message=precedent">
  Oui, moi je dit que le noir c'est mieux<br>
  Et je m'y connais.
</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 dit 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 filets de séparation horizontaux »
Styler les citations »

Les tableaux

Il vous faut parfois afficher un eliste de résultats, nombre, et autres données tabulaires... Ceci est généralement fait dans un tableau.
Attention : utilisez un tableau si vous avez plusieures colonnes (et de préférence un titre à mettre à ces colonnes) ou autres >>données tabulaires>>. Dans le cas contraire des puces feront peut-être mieux l'affaire.
Attention : je n'est pas dit que les tableaux c'est mal : mais beacoup de gens s'en servent pour faire une mise en page (les cellules en bord de tableau acceuillent des images décoratives qui forment un cadre...) ou en ayant juste en tête une idée de présentation et la réalisent avec de lourds tableaux. Il est conseillé de peser le pour et le contre avant d'utiliser des tableaux : gardez à l'espris que pour l'instant nous faisont du HTML et que nous nous intéressons au contenu (donc, ne pas raisonner avec "Je veux les mots à gauche et la définition alignée à droite : j'utilise un tableau de deux colonnes").

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

Après cette floppé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 Internationnal),
                en donnant le nom et le symbol de ces unités.">
  <caption>Unitées 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>kilograme</td>
      <td>kg</td>
    </tr>
  </tbody>
</table>

Et maintenant, à l'écran :

Unitées SI (partiel)
Nom Symbole
mètre m
kilograme kg

Parfois, il peut être interressant de regrouper des celulles. Il faut alors utiliser l'attribue colspan, pour répandre une cellule sur plusieures colonnes, ou rowspan, pour étendre une cellule sur plusieures lignes.
Un exemple valant mieux qu'un long dicours :

<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'attribue border de la balise table, mais c'est juste pour montrer que les cellules s'étendent bien sur plusieures colonnes ou lignes. Il s'agit ici d'un élan de fénéantisme de ma part : la bordure d'un tableau peut être beaucoup plus belle en CSS, ce que nous allons voir dans 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

Styler les tableaux »

Structurer des pages complexes

Dans les sites plus complexes qu'un enchainement 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 et de donner un style à cette structure grâce au CSS.

Attribues title... link->image Quelques rudiments en PHP

Formulaires

TODO !

Entités

TODO: Caractères spéciaux, etc...

Voilà : c'est tout ce qu'il y a à comprendre sur le HTML (c'est faux : il existe d'autres balises mais elles ne devraient pas être utilisées) !
Avec ces simples balises on fait quasiment tout.

Page précédente : Qu'est-ce que le HTML (Strict) et le CSS, et pourquoi les utiliser ?
Page suivante : Les bases en CSS