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

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

1<!DOCTYPE html>
2<html>
3  <head>
4    ...
5  </head>
6  <body>
7    ...
8  </body>
9</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

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>

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#

But: Comprendre la structure principale d'un document HTML.

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>

1<p>
2  Pour accéder au site du collège,
3  cliquez <a href="https://www.cscfr.ch/index.php/fr/">ici</a>
4</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:

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

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

  2. Listes à puces (unordered) <ul>

    1<ul>
2  <li>Tomates</li>
3  <li>Courgettes</li>
4  ...
5</ul>

Tuto listes.

Images#

La balise <img> permet d'insérer une image sur une page Web. Dans l'attribut src, 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.

 1<table>
 2  <tr>                        <!-- Première ligne -->
 3    <th>Ingrédients</th>      <!-- entête première colonne -->
 4    <th>Quantité</th>         <!-- entête deuxième colonne -->
 5  </tr>
 6  <tr>                        <!-- Deuxième ligne -->
 7    <td>Pommes de terre</td>  <!-- Première colonne -->
 8    <td>1 kg</td>             <!-- Deuxième colonne -->
 9  </tr>
10  <tr>
11    <td>lait</td>
12    <td>0.5l</td>
13  </tr>
14</table>

Tuto tables et tableaux

Exercice 2#

But: Ouvrir un document HTML sur Visual Studio Code.

Installation de Visual Studio Code

  1. Sur OneDrive, dans le dossier Informatique/HTML-CSS, créer un dossier exercices.

  2. Télécharger le fichier index.html et le sauvegarder sur OneDrive dans le dossier créé en 1.

  3. Ouvrir VSCode.

  4. Dans VSCode choisir "Ouvrir le dossier..."" et sélectionner le dossier Informatique/HTML-CSS/exercices de votre OneDrive.

    Ouvrir le dossier

  5. Sélectionner le fichier index.html et le code HTML s'affiche.

  6. Pour voir le rendu, double-cliquer sur le fichier index.html de votre OneDrive, le fichier s'ouvrira dans le navigateur.

Exercice 3#

But: Comprendre un document HTML simple et le modifier.
Vous voyez maintenant le code HTML et ce que la page affiche.

  1. Qu'est-ce que vous comprenez de cette page?

  2. Vous allez maintenant modifier cette page. Pour valider une modification:

    • Sauvegarder le document dans VSCode (ctrl + s ou command + s).

    • Actualiser la page du navigateur (appuyer sur F5).

      Actualiser la page

  3. Modifier le titre et le premier paragraphe pour remplacer "Collège du Sud" par "Collège Sainte-Croix".

  4. Modifier la partie présentation pour avoir les informations qui correspondent au Collège Sainte-Croix. Changer aussi le lien vers le site de l'école. (cf. Hyperliens)

  5. Compléter la liste de vos cours avec: Économie et droit, Biologie, ...

  6. Changer la liste de vos cours par une liste numérotée. (cf. Listes)

  7. Ajouter un sous-titre "Ma classe" et un paragraphe avec quelques informations.

  8. Ajouter une image du Collège Sainte-Croix:

    • Créer un dossier images en cliquant sur l'icone "Nouveau dossier".

      Nouveau dossier

    • Télécharger l'image que vous avez choisie et la sauvegarder dans le dossier images.

    • Noter le code HTML nécessaire. (cf. Images)

    • Ne pas oublier d'indiquer la source.

  9. Faire un tableau de votre horaire.