IV. Exercice pratique : créer un mini-site de recettes de cuisine

Dans cet exercice, vous allez créer un livre de recettes de cuisine composé de plusieurs pages HTML. Vous devrez mettre en pratique les notions vues en cours en utilisant les balises appropriées, intégrer des listes à puces, des images, des liens entre les pages, ainsi que des balises Open Graph et des données structurées.

Pour aller + vite dans votre travail, voici 2 pages qui synthétisent ce que vous avez vu précédemment :

Instructions :

  1. Créez un dossier principal pour votre projet de livre de recettes et organisez les fichiers et dossiers comme vu en cours (dossiers pour les fichiers HTML, CSS, images, etc.)
  2. Créez une page d’accueil index.html contenant la liste des recettes disponibles. Utilisez une liste à puces pour présenter les recettes, avec des liens vers les pages correspondantes.
  3. Créez 3 recettes au minimum, en reprenant celles que vous voulez sur le web (si possible des bonnes !). Pour chaque recette, créez une nouvelle page HTML (par exemple, tarte-aux-pommes.html, gratin-dauphinois.html, etc.) contenant les éléments suivants :
  • Un titre principal avec la balise <h1> pour le nom de la recette.
  • Une description courte qui présente la recette.
  • Une liste à puces avec les ingrédients nécessaires.
  • Une liste numérotée avec les étapes de préparation de la recette.
  • Une image représentant le plat final (utilisez la balise <img> et un lien relatif vers le fichier image).
  • Un lien de retour vers la page d’accueil pour faciliter la navigation entre les recettes.
  1. Pour chaque page de recette, ajoutez des balises Open Graph pour optimiser la visibilité de la page lorsqu’elle est partagée sur les réseaux sociaux. Incluez au minimum les balises suivantes :
    • og:title pour le titre de la recette
    • og:description pour une courte description de la recette
    • og:image pour l’image du plat

  2. Intégrez des données structurées au format JSON-LD dans chaque page de recette pour faciliter l’interprétation des informations par les moteurs de recherche. Utilisez le type Recipe de Schema.org et renseignez au minimum les propriétés suivantes :
    • @context
    • @type
    • name
    • image
    • description
    • recipeIngredient
    • recipeInstructions

  3. Assurez-vous que toutes les pages respectent les bonnes pratiques d’utilisation des balises sémantiques, de structuration et d’organisation du contenu.

Une fois votre livre de recettes terminé, vous devriez avoir un ensemble de pages HTML interconnectées présentant différentes recettes, optimisées pour les moteurs de recherche et les réseaux sociaux grâce à l’utilisation des balises Open Graph et des données structurées.

Une fois le travail terminé, créez une archive .zip du dossier contenant votre site, et envoyez-le sur Google Classroom !

N’hésitez pas à me solliciter si vous avez des questions ou besoin de conseils pour mener à bien cet exercice.

Bon courage !