ExosDev – Exercices du module HTML&CSS

Un article de blog

Débutant

balises body citation head html paragraphe titre

Créer une petite partie d’un article de blog, comme si vous étiez un passionné qui partage quelque chose qu’il aime (voyage, cuisine, sport, musique, etc.).
Créez une page HTML qui contient :
- Un titre principal (avec une balise adaptée) qui donne le sujet de votre article, par exemple : "Mon aventure à Paris".
- Deux paragraphes : le premier présente votre sujet, le deuxième partage une anecdote ou une réflexion personnelle.
- Dans un des paragraphes, mettez un mot ou une expression en gras, pour insister dessus.
- Et dans l’autre paragraphe, mettez une partie du texte en italique, pour créer une nuance ou souligner une émotion.
- Terminez par une citation (réelle ou inventée) avec la balise qu’il faut, pour apporter une touche finale à votre article.

Voir la solution

Racontez une journée spéciale

Débutant

balises body citation head html paragraphe titre

Voir la solution

Je vous propose de raconter une journée qui vous a marqué (ça peut être un bon souvenir, une fête, un voyage, une réussite, etc.).
L’idée, c’est de structurer un petit texte en HTML en utilisant les balises de texte.
Voici ce que je vous demande :
1. Créez un fichier journee.html.
2. Mettez la structure HTML complète (<!DOCTYPE html>, <html>, <head>, <body>, etc.).
3. Dans le <body>, racontez votre journée en respectant les points suivants :
- Donnez un titre principal avec <h1> → par exemple « Ma journée inoubliable »
- Ajoutez un sous-titre avec <h2> pour préciser le lieu ou la date
- Écrivez un ou deux paragraphes (<p>) pour raconter ce qui s’est passé
- Mettez un ou deux mots en italique avec <em> pour montrer une émotion
- Soulignez une partie importante avec du gras (<strong>)
- Ajoutez une citation que vous avez entendue ou dite ce jour-là avec <q>
- Si vous mentionnez une date précise, affichez-la avec <small>
Quand c’est prêt, ouvrez le fichier dans votre navigateur pour vérifier que tout s’affiche comme prévu.

Voir la solution

Présentez votre film préféré

Débutant

body citation head html paragraphe titre

Voir la solution

Créer une page HTML pour parler d’un film que vous aimez. Le but est de vous entraîner à utiliser les balises de texte : titres, gras, italique, citation, petit texte…
Voici ce que vous devez faire :
1. Créez un fichier appelé monfilm.html.
2. Mettez la structure HTML complète habituelle (<!DOCTYPE html>, <html>, <head>, <body>, etc.).
3. Dans la partie <body>, écrivez une courte présentation de votre film préféré, en respectant les consignes suivantes :
- Le titre du film doit être dans une balise <h1>.
- Le nom du réalisateur ou de l’acteur principal doit être en gras avec <strong>.
- Ajoutez une citation du film avec la balise <q>.
- Si vous mentionnez une année de sortie, utilisez la balise <small>.
- Choisissez un mot ou une phrase à mettre en italique avec <em>, par exemple pour montrer une émotion ou une opinion personnelle.
- Vous pouvez aussi ajouter un sous-titre avec <h2>, par exemple « Pourquoi j’aime ce film », suivi d’un paragraphe avec <p>.
Quand c’est prêt, ouvrez le fichier dans votre navigateur pour vérifier que tout s’affiche comme prévu.

Voir la solution

Fiche d’information HTML

Débutant

body head html

Voir la solution

Dans cet exercice, vous allez créer une fiche d’information simple en HTML, comme si vous présentiez une personne (réelle ou inventée).
1. Créez un fichier que vous appellez fiche.html.
2. Commencez avec le doctype <!DOCTYPE html> et la structure complète (<html>, <head>, <body>).
3. Dans la balise <head> :
- Ajoutez l’encodage UTF-8
- Donnez un titre à votre page, par exemple : "Fiche personnage"
4. Dans la balise <body> :
- Écrivez un titre principal (<h1>) contenant le nom du personnage
- Ajoutez un sous-titre (<h2>) avec son métier, rôle ou fonction
- Rédigez un paragraphe (<p>) de 2 à 3 phrases pour le présenter (âge, lieu, ce qu’il aime faire…)
Lorsque vous ouvrez le fichier dans le navigateur, vous devez voir le nom en gros titre, son rôle juste en dessous, puis le petit texte de présentation.

Voir la solution

Premiers pas en HTML

Débutant

body head html

Voir la solution

Créer votre première page HTML complète. L’idée, c’est de vous familiariser avec les balises essentielles et la façon dont elles s’emboîtent.
1. Créez un fichier bonjour.html.
2. Commencez votre document par la déclaration de type (<!DOCTYPE html>).
3. Ajoutez les balises <html>, <head> et <body>.
4. Dans le <head> :
- Définissez le jeu de caractères en UTF‑8.
- Mettez un titre court, par exemple « Ma première page ».
5. Dans le <body> :
- Inscrivez un titre de niveau 1 avec votre prénom.
- Ajoutez un paragraphe de deux phrases pour vous présenter (ce que vous aimez faire, votre matière préférée…).
Quand c’est prêt, ouvrez bonjour.html dans Chrome (ou Firefox)

Voir la solution