TP1 : Découverte du HTML - Premiers pas

Cours HTML/CSS 2026 – Durée : 3h30 – Enseignant : Quentin Fait

Objectifs du TP

  • Créer sa première page web en HTML

  • Utiliser les balises fondamentales (titres, paragraphes, listes, liens, images)

  • Comprendre la hiérarchie des titres

Consignes générales

Configuration : Créez un dossier tp1-html sur votre ordinateur et ouvrez-le dans votre éditeur de code.

Organisation : Pour chaque exercice, créez un fichier HTML séparé : exercice1.html, exercice2.html.

Structure de base : Tous vos fichiers HTML doivent commencer par cette structure vue en cours :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Titre de la page</title>
</head>
<body>
    
</body>
</html>

Bonnes pratiques :

  • Indentez correctement votre code (utilisez la touche Tab)

  • Fermez toujours vos balises

  • Utilisez des noms de fichiers en minuscules, sans espaces ni accents

Exercice 1 : Ma première page web

Fichier : exercice1.html

Créez une page web de présentation personnelle contenant les éléments suivants :

1. Titre principal et présentation

  • Un titre principal de niveau 1 : « Bienvenue - [Votre prénom et nom] »

  • Un paragraphe de présentation de vous-même (4-5 lignes minimum) avec au moins un mot en gras (<strong>) et un mot en italique (<em>)

2. Section « Mes centres d’intérêt »

  • Un titre de niveau 2 : « Mes centres d’intérêt »

  • Une liste non ordonnée avec au moins 3 centres d’intérêt

  • Mettez en gras vos 2 centres d’intérêt principaux

3. Section « Mon parcours »

  • Un titre de niveau 2 : « Mon parcours »

  • Un paragraphe introductif (2-3 lignes)

  • Une liste ordonnée présentant votre parcours de formation (au moins 3 étapes, de la plus ancienne à la plus récente)

4. Section « Mes compétences »

  • Un titre de niveau 2 : « Mes compétences »

  • Un titre de niveau 3 : « Compétences informatiques »

  • Une liste non ordonnée de 2 compétences informatiques minimum

  • Un titre de niveau 3 : « Langues »

  • Une liste non ordonnée avec au moins 2 langues et leur niveau (ex. : « Français - Langue maternelle »)

5. Section « Objectifs professionnels »

  • Un titre de niveau 2 (h2) : « Mes objectifs professionnels »

  • Deux paragraphes décrivant vos objectifs (utilisez des mots en italique pour les points importants)

6. Note de bas de page

  • Un paragraphe en italique : « Dernière mise à jour : [date du jour] »

Exercice 2 : Page recette de cuisine

Fichier : exercice2.html

Créez une page web présentant une recette de cuisine (ou une autre procédure de votre choix : recette de cocktail, tutoriel de bricolage, mode d’emploi, etc.).

Structure attendue :

1. En-tête de la recette

  • Un titre principal pour le nom de votre recette

  • Un paragraphe de présentation (3-4 lignes) décrivant le plat

  • Mettez en italique les mots d’origine étrangère ou les termes culinaires spécifiques

2. Section « Informations pratiques »

  • Un titre de niveau 2 : « Informations pratiques »

  • Une liste non ordonnée contenant :

    • Temps de préparation : [X] minutes

    • Temps de cuisson : [X] minutes

    • Difficulté : Facile / Moyen / Difficile (au choix)

    • Nombre de personnes : [X] personnes

    • Coût : € / €€ / €€€

3. Section « Ingrédients »

  • Un titre de niveau 2 : « Ingrédients »

  • Une liste non ordonnée des ingrédients (au moins 10 éléments)

  • Mettez en gras les ingrédients principaux (2 ou 3)

4. Section « Préparation »

  • Un titre de niveau 2 : « Préparation »

  • Une liste ordonnée des étapes de préparation

  • Dans vos étapes, mettez en gras les verbes d’action importants (mélanger, cuire, préchauffer, etc.)

5. Section « Ressources et inspiration »

  • Un titre de niveau 2 : « Pour aller plus loin »

  • Un paragraphe introductif : « Si cette recette vous a plu, voici quelques ressources utiles : »

  • Une liste non ordonnée contenant au moins 2 liens externes :

    • 2 liens vers des sites d’autres recettes”

  • Tous les liens doivent s’ouvrir dans un nouvel onglet (target="_blank")

Exemple de structure pour les liens :

<li>
    <a href="https://www.exemple.fr" target="_blank">Nom du site</a>
</li>

Rendu du TP

Livrables attendus

Un dossier tp1-html contenant :

  • exercice1.html

  • exercice2.html

Modalités de rendu

  • Format : Archive ZIP nommée TP1_NOM_Prenom.zip

  • Date limite : 22/02/2026

Ressources utiles

  • Validateur W3C : https://validator.w3.org/

  • Inspiration recettes (si besoin) :

    • Marmiton : https://www.marmiton.org

    • 750g : https://www.750g.com