Exercice Recette - Consignes

Page Principale (index.html)

Structure de Base
- Utilisez une structure HTML5 de base avec les balises <!DOCTYPE html>, <html>, <head>, et <body>.
Title Unique
- Ajoutez une balise <title> dans la section <head> pour définir un titre unique pour la page.
Liste des Recettes
- Créez une section principale <main> pour contenir la liste des recettes.
- Utilisez la balise <nav> pour regrouper les liens vers les pages individuelles des recettes.
- Chaque recette doit être un lien <a> pointant vers sa propre page dédiée.

Pages de Recettes (entree.html, plat.html, dessert.html)

Structure de Base
- Reproduisez la structure de base sur chaque page de recette.
Titre de la Recette (h1)
- Utilisez une balise <h1> pour définir le titre de la recette.
Texte descriptif (p)
- Ajoutez des balises <p> pour fournir des descriptions détaillées de la recette.
Liste d'Ingrédients (ul/a)
- Utilisez une balise <ul> ou <ol> pour créer une liste d'ingrédients.
- Chaque ingrédient doit être un lien <a> vers une source d'achat en ligne.
Images (img)
- Intégrez une ou plusieurs images représentant les ingrédients et l'image finale de la recette.
Lien de Retour
- Incluez un lien de retour vers la page principale (index.html).

Exemple en HTML5

Exemples avec les balises <title> ajoutées :

<!-- index.html -->
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Recettes Délicieuses</title>
    </head>
    <body>
        <main>
            <nav>
                <a href="entree.html" title="Recette d'Entrée">Entrée</a>
                <a href="plat.html" title="Recette de Plat Principal">Plat Principal</a>
                <a href="dessert.html" title="Recette de Dessert">Dessert</a>
            </nav>
        </main>
    </body>
</html>
 
<!-- entree.html -->
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Recette d'Entrée</title>
    </head>
    <body>
        <main>
            <h1>Entrée Élégante</h1>
            <p>Une délicieuse entrée pour impressionner vos convives...</p>
            <ul>
                <li><a href="#" title="Ingrédient 1">Ingrédient 1</a></li>
                <li><a href="#" title="Ingrédient 2">Ingrédient 2</a></li>
                <li><a href="#" title="Ingrédient 3">Ingrédient 3</a></li>
            </ul>
            <img src="entree.jpg" alt="Entrée Élégante" />
            <a href="index.html" title="Retour à la page principale">Retour à la page principale</a>
        </main>
    </body>
</html>

Les attributs title ont été ajoutés aux balises <a> pour fournir des informations contextuelles supplémentaires lorsqu'un utilisateur survole ces liens avec la souris.

Conclusion

En utilisant ces balises HTML5 de manière appropriée, vous pouvez créer des pages web bien structurées, sémantiques et interconnectées pour partager vos recettes. Cet exercice met en lumière l'importance de la sémantique dans la création de pages web avancées.

9.3 Optimisation des performances et du référencement Introduction