Introduction au HTML

Prérequis

Introduction

Le HTML est le langage fondamental du web. Derrière chaque page que vous consultez — qu’il s’agisse d’un réseau social, d’un site d’actualité ou d’une boutique en ligne — il y a du HTML qui structure tout ce que vous voyez.
Imaginez-le comme le squelette d’un site : il organise les textes, les images, les boutons, … Sans lui, rien ne tiendrait debout. C’est le point de départ de toute création web.

Premiers pas

Créez un dossier pour travailler dedans. Y créer un fichier .vscode/settings.json et y écrire :

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Créez un fichier index.html, commencez à écrire html:5 et en tapant sur votre touche ENTER, VSCode devrait écrire pour vous :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>

  </body>
</html>

Dans du code source HTML, lorsqu’on écrit entre <body> et </body>, le texte se retrouve affiché sur la page. La paire de balise body fait allusion au corps du document que l’on est entrain d’écrire. Dans le fichier source, tout ce que l’on écrit entre la balise ouvrante <body> et la balise fermante </body> est considéré comme faisant parti du corps du document.

Un corps de document, c’est la partie qui est faite pour être lue par un humain la plupart du temps. Par exemple, le texte que vous lisez actuellement, c’est le corps du document qui fait office de sujet. Il s’oppose aux métadonnées, que l’on étudiera plus tard, qui sont des informations qui portent sur le document comme son titre, son auteur, sa langue, et même sa feuille de style.

Écrivez “Bonjour” entre la paire de balise <body> et </body>.

Vous êtes censé voir apparaître Bonjour. Five Server permet de mettre à jour la page web dès qu’on sauvegarde.

Si on veut que “Bonjour” soit considéré comme un titre de rang 1 (level 1 heading) on peut l’entourer de la paire de balises <h1> et </h1>, ce que je vous invite à faire. Après modification et sauvegarde, vous devriez voir le texte s’afficher en plus gros.

En traitement de texte (sur MS Word par exemple), l’équivalent serait d’appliquer le style “Titre 1” ou “Heading 1” sur une ligne. Dans un corps de document (entre les balises du body) on peut avoir plusieurs éléments. Après la balise fermante </h1>, écrivez “Comment ça va ?”. Après sauvegarde, vous devriez vous “Comment ça va ?” écrit en plus petit que le titre “Bonjour”.

<h1>Bonjour</h1>
Comment ça va ?

En général, on ne laisse pas du texte à l’air libre dans le corps du document, on va utiliser une balise qui permet de signifier que l’on est dans un paragraphe, la balise <p>.

<h1>Bonjour</h1>
<p>Comment ça va ?</p>

En traitement de texte, c’est l’équivalent d’appliquer le style “normal” sur MS Word ou “corps du texte” sur LibreOffice Writer.

Ainsi, chaque élément du corps est entouré d’un jeu de balise qui permet de donner au navigateur une information sur la façon dont il faut l’afficher (comme les styles dans word). Les titres sont plus grand que les paragraphes par exemple.

Balises de base

Les titres (du plus grand au plus petit) :

<h1>1er titre</h1>
<h2>2ème titre</h2>
<h3>3ème titre</h3>
...
<h6>6ème titre</h6>

Les paragraphes :

<p>Mon long paragraphe avec pleins de mots</p>

Les listes :

  • ordonnées, numérotées :
<ol>
  <li>first element</li>
  <li>second element</li>
  <li>last element</li>
</ol>
  • non ordonnées, pointillés :
<ul>
  <li>first element</li>
  <li>second element</li>
  <li>last element</li>
</ul>

Les liens :

<a href="https://youtube.com">youtube link 1</a>
<a href="https://youtube.com" target="_blank">youtube link 2</a>

Le href contient le lien de redirection, le target="_blank" créé un nouvel onglet quand on clique sur le lien.

Les images :

<img src="./image.webp" alt="apple">
<img src="http://my_site/public/image.webp" alt="apple">
  • src : la source de l’image, elle peut être un chemin vers le fichier, ou un lien sur internet
  • alt : une description de l’image (une alternative), le texte apparaît s’il n’arrive pas à charger l’image mais aussi pour l’accessibilité (malvoyants, …)

Exercice 1 - La pomme

Vous devez reproduire le code html d’une page à partir d’une image de celle-ci : Pasted image 20260424170401.png

Annexe :

  • lien Wikipedia : https://fr.wikipedia.org/wiki/Pomme
  • lien de l’image : https://www.domaine-darmandieu.com/wp-content/uploads/2018/07/Domaine-darmandieu-variete-pomme-Braeburn.png
  • l’image doit avoir comme description/alternative : pomme

Les tableaux

<table>
  <thead>
    <th>Prénom</th>
    <th>Email</th>
  </thead>
  <tbody>
    <tr>
      <td>Thomas</td>
      <td>thomas@mail.com</td>
    </tr>
    <tr>
      <td>Dimitri</td>
      <td>dimitri@mail.com</td>
    </tr>
  </tbody>
</table>
  • <table> : tableau
  • <thead> : entête (noms des colonnes)
  • <th> : nom d’une colonne (autant de colonne que de <th>)
  • <tbody> : contenu du tableau
  • <tr> : une ligne du tableau
  • <td> : une cellule

Les formulaires

Un formulaire, c’est une zone sur le site où l’utilisateur peut remplir des champs, cocher des cases, sélectionner, … Tout formulaire doit être contenu dans cette balise : <form> ... </form>

Il existe différentes entrées :

<form>
  <input type="text">
  <input type="email">
  <input type="password">
  <input type="checkbox">
  <textarea></textarea>

  <select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
  </select>

  <label for="email">Email :</label>
  <input id="email" type="email">

  <button>Valider</button>
</form>
  • <input> : un champ, la partie intéressante, c’est le type :
    • "text" : juste une zone de texte
    • "email" : un email, certain téléphone vont proposer un clavier adapté pour écrire un email
    • "password" : chaque caractère est remplacé par un point
    • "checkbox" : une case à cocher
  • <textarea> : grande zone de texte
  • <select> : une liste où l’on peut sélectionner une option
  • <option> : une option dans un <select>
  • <label> : permet d’associé du texte à un champ en les reliant avec for et id, en cliquant sur le <label>, on interagie directement avec le champ associé :
    • for="email" : ce <label> est associé à l’entrée qui à l’attribut id="email"
    • id="email" : définir l’identifiant unique d’une balise
  • <button> : un bouton

Exercice 2 - Le formulaire

Vous devez reproduire le code html d’une page à partir d’une image de celle-ci : Pasted image 20260515171622.png Annexe :

  • Chaque intitulé d’une entrée doit, lorsqu’on clique dessus, interagir avec l’entrée associée
  • Chaque entrée doit avoir le type adaptée
  • Le tableau Tableau des inscrits n’as pas besoin de se mettre à jour lorsqu’on valide le formulaire
  • Le tableau Tableau des inscrits doit avoir certaines cellules vides

La sémantique

En théorie, on pourrait faire l’entièreté d’un site web avec uniquement des balises <p> (pas tout mais presque).

Mais il est fortement conseillé d’utiliser les balises adaptées au contexte pour plusieurs raisons :

  • l’accessibilité : les lecteurs d’écran s’appuient sur la structure pour permettre de naviguer rapidement dans la page
  • SEO (référencement, indexation) : les moteurs de recherche comprennent mieux la hiérarchie et le rôle du contenu, améliorant le référencement de votre site web
  • navigation au clavier : la structure aide les parcours clavier et les technologies d’assistance
  • lisibilité : le nom d’une balise permet de mieux comprendre son contenu

Utiliser des balises adaptées améliorent la sémantique de votre site web.

Les balises structurantes/sémantiques

Il existe également des balises structurantes, elles ont pour objectif de regrouper des balises par groupe. Cela peut améliorer la sémantique et facilité la lecture du code.

Vous en connaissez déjà une : <form> mais il en existe d’autres :

  • <div> : aucune valeur sémantique
  • <section> : plus de valeur sémantique même si léger
  • <header> : entête
  • <footer> : pied de page
  • <main> : contenu principal
  • <nav> : zone de navigation
  • <article> : post, article, carte, …
  • <figure> : contenu illustratif (image, schéma, …) avec <figcaption> pour la légende
  • <address> : coordonnées

Et Il en existe pleins d’autres.

Plusieurs pages

Vous avez vu les balises <a>, sachez qu’elles peuvent aussi rediriger sur une autre page de votre site web, exemple :

<!-- dans index.html -->
<a href="contact.html">Contact</a>

<!-- dans contact.html -->
<a href="index.html">Contact</a>

Métadonnées

Jetez un œil sur le contenu produit par html:5 :

<html lang="en">
...
  <title>Document</title>
</html>

Nous avons une balise html avec l’attribut lang ayant comme valeur en (pour english). Si vous écrivez une page html en français, cet attribut devrait avoir la valeur fr (pour français). Quand votre navigateur vous propose de traduire cette page, c’est très souvent car la langue de votre navigateur est différente de celle de la page.

le <title> permet de définir le nom de l’onglet, vous pouvez parfaitement le changer.