HTML

Contenu

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>`#

Tous documents qui décrivent une page Web doivent 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é.

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Balise `<body>`#

Dans la balise <body>, nous allons structurer le contenu de la page. Nous allons voir les balises les plus simples qui permettent de définir des titres, sous-titres et paragraphes:

<h1> ... </h1>: permet de définir un titre principal
<h2> ... </h2>: permet de définir un sous-titre
<h3> ... </h3>: permet de définir un sous-sous-titre
<h...> ... </h...>: permet de définir un sous-...-sous-titre
<p> ... </p>: permet de définir un paragraphe

<!DOCTYPE html>
<html>
  <head> ... </head>
  <body>
    <h1>Titre principal</h1>
    <p>Vous êtes dans le corps de la page HTML.</p>
  </body>
</html>

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

Exercice 1#

Notez la balise qui indique:

... le début d'un document HTML?
... la fin d'un titre principal?
... la début de l'entête du document?
... la fin du contenu (corps) de la page?
... le début d'un titre de niveau 2?
... la fin d'un paragraphe?
... le début du titre de la page indiqué dans l'onglet?
... que l'encodage utilisé est l'utf-8?

Exercice 2#

Dans quelle partie les balises suivantes se trouvent-elles?

<p>...</p>
<meta charset="utf-8">
<head>...</head>
<h2>...</h2>
<body>...</body>
<h1>...</h1>
<title>...</title>
<h4>...</h4>

Hyperliens#

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>

Tuto élément <a>.

Listes#

Il existe deux types de listes:

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

<ol>
  <li>Mettre 1L d'eau dans un casserole</li>
  <li>Porter à ébullition</li>
  ...
</ol>

Listes à puces (unordered) <ul>

<ul>
  <li>Tomates</li>
  <li>Courgettes</li>
  ...
</ul>

Tuto listes.

Images#

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= "images/mon_image.png" width="300" height="200">

Tuto images.

Sauts de ligne#

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

À la fin de cette ligne, il y aura un saut de ligne. <br>

Tables ou tableaux#

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

Tuto tables et tableaux

HTML

Contenu

HTML#

Balise <!DOCTYPE html>#

Balise <html>#

Balise <body>#

Balise <head>#

Balise <title>#

Balise <meta>#