📘 Chapitre 2 – Balises de texte, images, médias, tableaux et listes

1. 🎯 Objectif pédagogique

Savoir utiliser les balises HTML de base pour afficher du texte, insérer des images et des médias, structurer des informations dans des listes et des tableaux.

2. 📚 Concepts abordés

Balises de texte : <h1> à <h6>, <p>, <strong>, <em>, <br>, <span>
Balises d’images : <img> et attributs src, alt
Médias intégrés : <audio>, <video>
Listes : <ul>, <ol>, <li>
Tableaux : <table>, <tr>, <th>, <td>
Bonnes pratiques pour un code lisible et sémantique

3. 🧠 Explication théorique

Les balises de texte permettent de hiérarchiser et styliser le contenu :

<h1> est le titre principal, suivi de <h2> à <h6> pour les sous-titres.
<p> représente un paragraphe.
<strong> met en évidence un texte important (gras) et <em> l’italique.

Les images s’ajoutent avec <img src="..." alt="...">. L’attribut alt est important pour l’accessibilité et le SEO.

Pour organiser des informations, on utilise :

Listes non ordonnées : <ul><li>…</li></ul>
Listes ordonnées : <ol><li>…</li></ol>

Les tableaux affichent des données tabulaires avec <table>, chaque ligne <tr> contenant des cellules <td> ou des en-têtes <th>.

Exemple – Texte et image

<h1>Titre principal</h1>
<p>Voici un <strong>texte en gras</strong> et un <em>texte en italique</em>.</p>
<img src="assets/photo.jpg" alt="Photo descriptive">

Exemple – Liste et tableau

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<table border="1">
  <tr>
    <th>Nom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>Amina</td>
    <td>22</td>
  </tr>
</table>

4. 🛠 Tutoriel pratique

Résumé du travail : Créer une page HTML présentant :

Un titre et un paragraphe avec texte en gras et italique.
Une image d’illustration.
Une liste de trois éléments.
Un tableau avec deux colonnes et trois lignes.

Arborescence du projet :

mon_projet/
└── index.html
└── assets/
    └── photo.jpg

Étape 1 : Ajouter du texte formaté

Dans <body>, insérez :

<h1>Présentation</h1>
<p>Bienvenue sur ma page. <strong>HTML</strong> est le <em>langage de base</em> du web.</p>

Étape 2 : Insérer une image

<img src="assets/photo.jpg" alt="Image d’illustration">

Étape 3 : Créer une liste et un tableau

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<table border="1">
  <tr>
    <th>Nom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Samira</td>
    <td>23</td>
  </tr>
</table>

5. 🧾 Résumé et points-clés

Hiérarchiser le texte avec <h1> à <h6> et <p>.
Utiliser <strong> et <em> pour la mise en forme sémantique.
Les listes <ul> et <ol> organisent des éléments.
Les tableaux affichent des données structurées.