HTML & CSS

Support de cours élaboré par : Youssef CHAFAI

Date : 18 mai 2025 | Version : 1.0

Exercices HTML – Section 3 : Textes

Exercice 1 – Titres de page

Crée une page HTML avec des titres de niveau 1 à 6.

<h1>Rapport de projet</h1>
<h2>Introduction</h2>
<h3>Contexte</h3>
<h4>Hypothèses</h4>
<h5>Données utilisées</h5>
<h6>Notes complémentaires</h6>

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titres de page</title>
</head>
<body>
  <h1>Rapport de projet</h1>
  <h2>Introduction</h2>
  <h3>Contexte</h3>
  <h4>Hypothèses</h4>
  <h5>Données utilisées</h5>
  <h6>Notes complémentaires</h6>
</body>
</html>

Exercice 2 – Paragraphe avec emphase

Écris un paragraphe décrivant ta journée avec des balises de mise en forme.

<p>
  Ce matin, j’ai assisté à un <strong>cours très intéressant</strong> sur le HTML.<br>
  J’étais <em>motivé</em> et <em>curieux</em>.<br><br>
  Cet après-midi, j’ai travaillé sur un projet avec mes collègues.
</p>

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Paragraphe avec emphase</title>
</head>
<body>
  <p>
    Ce matin, j’ai assisté à un <strong>cours très intéressant</strong> sur le HTML.<br>
    J’étais <em>motivé</em> et <em>curieux</em>.<br><br>
    Cet après-midi, j’ai travaillé sur un projet avec mes collègues.
  </p>
</body>
</html>

Exercice 3 – Listes

Créer une liste de tâches (non ordonnée) et une liste de procédure (ordonnée).

<ul>
  <li>Lire le chapitre 1</li>
  <li>Faire l’exercice sur les balises</li>
  <li>Préparer le mini-projet</li>
</ul>

<ol>
  <li>Choisir un sujet</li>
  <li>Rechercher des sources</li>
  <li>Écrire un plan</li>
  <li>Faire un diaporama</li>
</ol>

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Listes</title>
</head>
<body>
  <ul>
    <li>Lire le chapitre 1</li>
    <li>Faire l’exercice sur les balises</li>
    <li>Préparer le mini-projet</li>
  </ul>

  <ol>
    <li>Choisir un sujet</li>
    <li>Rechercher des sources</li>
    <li>Écrire un plan</li>
    <li>Faire un diaporama</li>
  </ol>
</body>
</html>

Exercice 4 – Lien externe

Ajoute un lien vers la documentation MDN qui s’ouvre dans un nouvel onglet.

<p>
  Pour en savoir plus sur HTML, consultez
  <a href="https://developer.mozilla.org/fr/" target="_blank">la documentation MDN</a>.
</p>

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lien externe</title>
</head>
<body>
  <p>
    Pour en savoir plus sur HTML, consultez
    <a href="https://developer.mozilla.org/fr/" target="_blank">la documentation MDN</a>.
  </p>
</body>
</html>

Exercice 5 – Mini article

Rédige une petite structure d'article avec titre, paragraphes, lien et liste.

<h1>Mon expérience avec HTML</h1>

<h2>Premiers pas</h2>
<p>
  J’ai découvert HTML lors d’un cours à l’université.
  J’ai appris à créer des titres et des paragraphes.
</p>

<h2>Mes prochaines étapes</h2>
<p>
  Je vais approfondir mes connaissances en suivant des tutoriels sur
  <a href="https://developer.mozilla.org/fr/" target="_blank">MDN</a>.
</p>

<ul>
  <li>Créer des formulaires</li>
  <li>Utiliser des images</li>
  <li>Découvrir CSS</li>
</ul>

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mini article</title>
</head>
<body>
  <h1>Mon expérience avec HTML</h1>

  <h2>Premiers pas</h2>
  <p>
    J’ai découvert HTML lors d’un cours à l’université.
    J’ai appris à créer des titres et des paragraphes.
  </p>

  <h2>Mes prochaines étapes</h2>
  <p>
    Je vais approfondir mes connaissances en suivant des tutoriels sur
    <a href="https://developer.mozilla.org/fr/" target="_blank">MDN</a>.
  </p>

  <ul>
    <li>Créer des formulaires</li>
    <li>Utiliser des images</li>
    <li>Découvrir CSS</li>
  </ul>
</body>
</html>
↑ Sommaire