HTML

HTML#

Le format HTML (HyperText Markup Language) est un format qui permet de décrire le contenu et la structure d'une page Web. HTML n'est pas un langage de programmation, il ne contient ni fonction, ni boucle, ni instruction conditionnelle, mais c'est un ensemble de balises qui permettent de mettre un document en page, afin que le navigateur puisse l'afficher correctement.

Les balises ont la forme suivante:

<h1>Bienvenue sur notre site Web</h1>

<h1> est une balise ouvrante et </h1> est une balise fermante. À chaque balise ouvrante correspond une balise fermante à l'exception des balises qui n'ont pas de contenu.

Balise <!DOCTYPE html>#

Tout document qui décrit une page Web doit débuter par:

<!DOCTYPE html>

Ce n'est pas une balise HTML, mais une information qui permet au navigateur de savoir le type de document.

Balise <html>#

Tout le code HTML doit être inséré dans une balise nommée html: <html> ... </html>. La balise html contient en général deux autres balises:

  • <head> ... </head>: entête du document, elle contient différentes informations concernant le document (titre de la page, type d'encodage, lien vers le fichier CSS, etc.). Ces informations ne seront pas affichées à l'écran à l'exception du titre affiché sur l'onglet de la page.

  • <body> ... </body>: contient le contenu (corps) de la page. Tout ce qui sera dans cette partie sera affiché.

1<!DOCTYPE html>
2<html>
3  <head>
4    ...
5  </head>
6  <body>
7    ...
8  </body>
9</html>

Balise <body>#

La balise <body> contient tout le contenu visible de la page. C'est dans cette partie que nous allons structurer le contenu à l'aide de différentes balises.

1<!DOCTYPE html>
2<html>
3  <head> ... </head>
4  <body>
5    <h1>Titre principal</h1>
6    <p>Vous êtes dans le corps de la page HTML.</p>
7  </body>
8</html>

Balises <h1> à <h6>#

Les balises <h1> à <h6> permettent de définir des titres de différents niveaux. <h1> est le titre le plus important (le plus grand) et <h6> le moins important (le plus petit). Ces balises servent à organiser le contenu de manière hiérarchique, comme les chapitres et sous-chapitres d'un livre.

  • <h1> ... </h1>: titre principal (un seul par page en général)

  • <h2> ... </h2>: sous-titre

  • <h3> ... </h3>: sous-sous-titre

  • <h4> ... </h4> à <h6> ... </h6>: niveaux de titres supplémentaires

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<h4>Niveau 4</h4>
<h5>Niveau 5</h5>
<h6>Niveau 6</h6>

Il est important de respecter la hiérarchie des titres : ne pas passer directement d'un <h1> à un <h4> sans utiliser <h2> et <h3> entre les deux.

Balise <p>#

La balise <p> permet de définir un paragraphe de texte. Le navigateur ajoute automatiquement un espace avant et après chaque paragraphe pour aérer le contenu.

<p>Ceci est un premier paragraphe. Le navigateur va
automatiquement ajouter un espace après ce paragraphe.</p>
<p>Ceci est un deuxième paragraphe.</p>

Attention : les retours à la ligne dans le code HTML ne créent pas de retours à la ligne à l'affichage. Le texte d'un paragraphe s'affiche en continu. Pour forcer un saut de ligne, il faut utiliser la balise <br>.

Balise <head>#

La balise <head> contient différentes informations sur le document, notamment le titre de la page et le type d'encodage.

Balise <title>#

La balise <title> permet de définir le titre de la page qui s'affichera sur l'onglet du navigateur web.

<title>Ma page</title>

titre

Balise <meta>#

La balise <meta> permet d'indiquer le type d'encodage (ASCII, UTF-8). Nous souhaitons que les accents s'écrivent correctement sur notre page, nous allons donc utiliser de l'UTF-8 que nous allons indiquer dans l'attribut charset:

<meta charset="utf-8">

Comme cette balise ne contient pas de contenu, c'est une balise unique (pas de balise ouvrante et fermante).

Balise <a>#

La balise <a> permet de créer un hyperlien, c'est-à-dire un texte sur lequel il faut cliquer pour accéder à une autre page. Il faut indiquer le lien dans l'attribut href: <a href="lien">Texte</a>

<p>
  Pour accéder au site du collège,
  cliquez <a href="https://www.cscfr.ch/index.php/fr/">ici</a>
</p>

Pour ouvrir la nouvelle page dans un nouvel onglet, il faut ajouter l'attribut target avec la valeur _blank:

<a href="lien" target="_blank">Texte</a>

Balises <ul> <ol> <li>#

Il existe deux types de listes:

  1. Listes numérotées (ordered) <ol>

    <ol>
  <li>Mettre 1L d'eau dans une casserole</li>
  <li>Porter à ébullition</li>
  <li>Ajouter les pâtes</li>
</ol>

  2. Listes à puces (unordered) <ul>

    <ul>
  <li>Tomates</li>
  <li>Courgettes</li>
  <li>Aubergines</li>
</ul>

Balise <img>#

La balise <img> permet d'insérer une image sur une page Web. Dans l'attribut src (abréviation pour source), il faut indiquer le lien vers l'image, soit une URL, soit le chemin local.

  • <img src="mon_image.png"> (dans le même répertoire)

  • <img src="images/mon_image.png"> (dans un sous-répertoire)

Cette balise peut contenir aussi les attributs height ou width qui permettent de déterminer la hauteur et/ou la largeur de l'image en pixels.

<img src="https://picsum.photos/id/237/300/200" width="300">

Balise <br>#

La balise <br> permet de faire un saut de ligne (break). Comme cette balise ne contient pas de contenu, c'est une balise unique (pas de balise ouvrante et fermante).

Avant le saut de ligne. <br>
Après le saut de ligne.

Balise <table>#

La balise <table> permet de représenter des tableaux de données (tableaux en deux dimensions). Les tableaux peuvent aussi être utilisés pour la mise en page, par exemple mettre du texte à côté d'une image ou mettre plusieurs images l'une à côté de l'autre.

<table border="1">
  <tr>                        <!-- Première ligne -->
    <th>Ingrédients</th>      <!-- entête première colonne -->
    <th>Quantité</th>         <!-- entête deuxième colonne -->
  </tr>
  <tr>                        <!-- Deuxième ligne -->
    <td>Pommes de terre</td>  <!-- Première colonne -->
    <td>1 kg</td>             <!-- Deuxième colonne -->
  </tr>
  <tr>
    <td>lait</td>
    <td>0.5l</td>
  </tr>
</table>

Exercice 1#

Notez la balise qui indique:

  1. ... le début de la partie HTML?

  2. ... la fin d'un titre principal?

  3. ... le début de l'entête du document?

  4. ... la fin du contenu (corps) de la page?

  5. ... le début d'un titre de niveau 2?

  6. ... la fin d'un paragraphe?

  7. ... le début du titre de la page indiqué dans l'onglet?

Exercice 2#

Dans quelle partie les balises suivantes se trouvent-elles?

  1. <p>...</p>

  2. <meta charset="utf-8">

  3. <head>...</head>

  4. <h2>...</h2>

  5. <body>...</body>

  6. <h1>...</h1>

  7. <title>...</title>

  8. <h4>...</h4>

Exercice 3#

En utilisant l'éditeur ci-dessous, complétez le <body> pour créer une page HTML contenant :

  1. Un titre principal <h1> avec le texte "Ma page"

  2. Un paragraphe <p> avec une phrase de votre choix

  3. Un sous-titre <h2> avec le texte "Section 1"

  4. Un deuxième paragraphe <p>

  5. Un sous-sous-titre <h3> avec le texte "Détails"

  6. Un troisième paragraphe <p>

Observez la différence de taille entre les niveaux de titres.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Ma page</title>
 6  </head>
 7  <body>
 8    <h1>Titre</h1>
 9  </body>
10</html>

Solution

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Ma page</title>
 6  </head>
 7  <body>
 8    <h1>Ma page</h1>
 9    <p>Bienvenue sur ma première page HTML.</p>
10    <h2>Section 1</h2>
11    <p>Voici le contenu de la première section.</p>
12    <h3>Détails</h3>
13    <p>Voici quelques détails supplémentaires.</p>
14  </body>
15</html>

Exercice 4#

Chacune des pages ci-dessous contient une erreur qui fait que le résultat affiché n'est pas celui attendu. Exécutez chaque code pour observer le problème, puis corrigez-le.

  1. Le titre et le paragraphe devraient avoir des tailles différentes, mais tout s'affiche en énorme.

     1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Ma passion</title>
 6  </head>
 7  <body>
 8    <h1>Ma passion : le vélo
 9    <p>J'adore faire du vélo le week-end.</p>
10  </body>
11</html>

  2. « Ingrédients » devrait être un sous-titre plus petit que le titre principal, mais il s'affiche à la même taille.

     1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Recette</title>
 6  </head>
 7  <body>
 8    <h1>Recette de crêpes</h1>
 9    <h1>Ingrédients</h1>
10    <p>Farine, lait, oeufs.</p>
11  </body>
12</html>

  3. Cette page devrait afficher un titre et un paragraphe, mais rien ne s'affiche.

     1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Mon site
 6  </head>
 7  <body>
 8    <h1>Bienvenue</h1>
 9    <p>Voici ma première page.</p>
10  </body>
11</html>

Solution

  1. Il manque la balise fermante </h1>. Sans elle, le navigateur considère que le paragraphe fait encore partie du titre, et l'affiche donc en très grand.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ma passion</title>
  </head>
  <body>
    <h1>Ma passion : le vélo</h1>
    <p>J'adore faire du vélo le week-end.</p>
  </body>
</html>

  2. Un sous-titre doit utiliser un niveau de titre inférieur. Ici les deux lignes sont des <h1> : il faut transformer le second en <h2> pour qu'il devienne un sous-titre plus petit.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Recette</title>
  </head>
  <body>
    <h1>Recette de crêpes</h1>
    <h2>Ingrédients</h2>
    <p>Farine, lait, oeufs.</p>
  </body>
</html>

  3. Il manque la balise fermante </title>. Sans elle, tout le reste de la page est considéré comme faisant partie du titre de l'onglet, et le contenu ne s'affiche donc pas.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon site</title>
  </head>
  <body>
    <h1>Bienvenue</h1>
    <p>Voici ma première page.</p>
  </body>
</html>

Exercice 5#

En utilisant l'éditeur ci-dessous, complétez le <body> pour présenter votre animal préféré. Ajoutez :

  1. Un sous-titre <h2> avec le texte "Description"

  2. Un paragraphe <p> qui décrit l'animal

  3. Un sous-titre <h2> avec le texte "Pourquoi je l'aime"

  4. Un paragraphe <p>

  5. Un sous-sous-titre <h3> avec le texte "Anecdote"

  6. Un dernier paragraphe <p>

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Mon animal préféré</title>
 6  </head>
 7  <body>
 8    <h1>Mon animal préféré</h1>
 9  </body>
10</html>

Solution

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Mon animal préféré</title>
 6  </head>
 7  <body>
 8    <h1>Mon animal préféré</h1>
 9    <h2>Description</h2>
10    <p>Le chat est un petit animal domestique au pelage doux.</p>
11    <h2>Pourquoi je l'aime</h2>
12    <p>Il est affectueux et très indépendant.</p>
13    <h3>Anecdote</h3>
14    <p>Mon chat dort plus de seize heures par jour.</p>
15  </body>
16</html>

Exercice 6#

Chacune des pages ci-dessous contient une erreur. Exécutez chaque code pour observer le problème, puis corrigez-le.

  1. Le mot « Wikipédia » devrait être un lien cliquable, mais ce n'est que du texte.

     1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Lien</title>
 6  </head>
 7  <body>
 8    <p>Pour en savoir plus, consultez <a>Wikipédia</a>.</p>
 9  </body>
10</html>

  2. Ces trois fruits devraient apparaître comme une liste à puces, mais ils se suivent sur une seule ligne.

     1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Fruits</title>
 6  </head>
 7  <body>
 8    <h2>Mes fruits préférés</h2>
 9    <ul>
10      Pomme
11      Poire
12      Cerise
13    </ul>
14  </body>
15</html>

  3. Au lieu d'afficher l'image, la page affiche le lien sous forme de texte.

     1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Image</title>
 6  </head>
 7  <body>
 8    <p>Photo de l'ENIAC</p>
 9    <img width="200">
10    https://upload.wikimedia.org/wikipedia/commons/0/0c/ENIAC-changing_a_tube_%28cropped%29.jpg
11  </body>
12</html>

Solution

  1. Un lien a besoin de l'attribut href pour indiquer vers où il pointe. Sans lui, la balise <a> n'est pas cliquable.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lien</title>
  </head>
  <body>
    <p>Pour en savoir plus, consultez <a href="https://fr.wikipedia.org">Wikipédia</a>.</p>
  </body>
</html>

  2. Dans une liste, chaque élément doit être entouré d'une balise <li> ... </li>. Le texte placé directement dans le <ul> n'est pas traité comme des éléments de liste.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fruits</title>
  </head>
  <body>
    <h2>Mes fruits préférés</h2>
    <ul>
      <li>Pomme</li>
      <li>Poire</li>
      <li>Cerise</li>
    </ul>
  </body>
</html>

  3. Une image a besoin de l'attribut src pour indiquer quel fichier afficher. Le lien doit être placé dans cet attribut, et non écrit comme du texte à côté de la balise. La balise <img> est une balise unique : elle n'a pas de balise fermante.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Image</title>
  </head>
  <body>
    <p>Photo de l'ENIAC</p>
    <img width="200" src="https://upload.wikimedia.org/wikipedia/commons/0/0c/ENIAC-changing_a_tube_%28cropped%29.jpg">
  </body>
</html>

Exercice 7#

En utilisant l'éditeur ci-dessous, ajoutez dans le <body> :

  1. Un paragraphe contenant un lien vers https://fr.wikipedia.org avec le texte "Wikipédia"

  2. Un deuxième lien, cette fois qui s'ouvre dans un nouvel onglet (attribut target), vers un site de votre choix

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Liens</title>
 6  </head>
 7  <body>
 8    <p>Visitez <a href="">...</a></p>
 9  </body>
10</html>

Solution

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Liens</title>
 6  </head>
 7  <body>
 8    <p>Visitez <a href="https://fr.wikipedia.org">Wikipédia</a></p>
 9    <p>Découvrez <a href="https://www.youtube.com" target="_blank">YouTube</a> (s'ouvre dans un nouvel onglet)</p>
10  </body>
11</html>

Exercice 8#

En utilisant l'éditeur ci-dessous, ajoutez dans le <body> :

  1. Une liste à puces <ul> de vos 3 plats préférés

  2. En dessous, une liste numérotée <ol> des étapes pour préparer un de ces plats (au moins 3 étapes)

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Listes</title>
 6  </head>
 7  <body>
 8    <h2>Mes plats préférés</h2>
 9  </body>
10</html>

Solution

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Listes</title>
 6  </head>
 7  <body>
 8    <h2>Mes plats préférés</h2>
 9    <ul>
10      <li>Pizza</li>
11      <li>Lasagnes</li>
12      <li>Fondue</li>
13    </ul>
14    <h2>Recette de la pizza</h2>
15    <ol>
16      <li>Préparer la pâte</li>
17      <li>Étaler la sauce tomate</li>
18      <li>Ajouter la mozzarella</li>
19      <li>Cuire au four à 220°C pendant 12 minutes</li>
20    </ol>
21  </body>
22</html>

Exercice 9#

En utilisant l'éditeur ci-dessous, ajoutez dans le <body> :

  1. Une image en utilisant l'URL suivante dans l'attribut src : https://picsum.photos/300/200

  2. Ajustez sa largeur à 200 pixels avec l'attribut width

  3. Ajoutez un paragraphe en dessous de l'image avec la légende "Une image aléatoire"

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Images</title>
 6  </head>
 7  <body>
 8    <img>
 9  </body>
10</html>

Solution

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Images</title>
 6  </head>
 7  <body>
 8    <img src="https://picsum.photos/300/200" width="200">
 9    <p>Une image aléatoire</p>
10  </body>
11</html>

Exercice 10#

En utilisant l'éditeur ci-dessous, complétez le tableau pour représenter votre horaire du lundi et mardi matin (3 heures de cours). Ajoutez :

  • Trois lignes de données (<td>) avec les heures et les cours

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Tableaux</title>
 6  </head>
 7  <body>
 8    <table border="1">
 9      <tr>
10        <th>Heures</th>
11        <th>Lundi</th>
12        <th>Mardi</th>
13      </tr>
14    </table>
15  </body>
16</html>

Solution

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Tableaux</title>
 6  </head>
 7  <body>
 8    <table border="1">
 9      <tr>
10        <th>Heures</th>
11        <th>Lundi</th>
12        <th>Mardi</th>
13      </tr>
14      <tr>
15        <td>08:05-08:50</td>
16        <td>Français</td>
17        <td>Maths</td>
18      </tr>
19      <tr>
20        <td>08:55-09:40</td>
21        <td>Allemand</td>
22        <td>Informatique</td>
23      </tr>
24      <tr>
25        <td>09:45-10:30</td>
26        <td>Anglais</td>
27        <td>Histoire</td>
28      </tr>
29    </table>
30  </body>
31</html>