Création de la page HTML

La création d'une page HTML est la première étape pour construire une interface utilisateur pour votre application web. Voici comment structurer une page HTML de base, ajouter des éléments pour afficher une liste d'aliments, et inclure un formulaire pour ajouter de nouveaux aliments.

Structure de base de la page

La structure de base d'une page HTML comprend les éléments essentiels comme <!DOCTYPE html>, <html>, <head>, et <body>. Voici un exemple de structure de base pour votre page :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Food API Frontend</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <h1>Food API</h1>
        <!-- La liste des aliments sera ajoutée ici -->
        <div id="foods-list"></div>

        <!-- Le formulaire pour ajouter des aliments sera ajouté ici -->
        <form id="food-form">
            <!-- Les champs du formulaire seront ajoutés ici -->
        </form>
    </div>
    <script src="js/script.js"></script>
</body>
</html>

  • <!DOCTYPE html> : Cette déclaration indique que le document est écrit en HTML5.

  • <html> : L'élément racine de la page HTML.

  • <head> : Contient des métadonnées sur le document, comme le jeu de caractères, le titre de la page, et un lien vers une feuille de style externe.

  • <body> : Contient le contenu visible de la page, y compris un conteneur principal pour la liste des aliments et le formulaire.

Ajout des éléments pour afficher la liste des aliments

Pour afficher une liste d'aliments, vous pouvez utiliser un élément <div> avec un identifiant unique. Cet élément servira de conteneur pour les aliments que vous récupérerez de l'API.

<div id="foods-list">
    <!-- Les aliments seront ajoutés ici dynamiquement avec JavaScript -->
</div>

Ajout d'un formulaire pour ajouter de nouveaux aliments

Pour permettre aux utilisateurs d'ajouter de nouveaux aliments, vous pouvez inclure un formulaire avec des champs pour le nom, le type et l'emoji de l'aliment. Voici comment vous pouvez structurer ce formulaire :

<form id="food-form">
    <input type="text" id="food-name" placeholder="Nom de l'aliment" required>
    <input type="text" id="food-type" placeholder="Type de l'aliment" required>
    <input type="text" id="food-emoji" placeholder="Emoji de l'aliment" required>
    <button type="submit">Ajouter Aliment</button>
</form>

  • <form> : L'élément qui englobe tous les champs du formulaire. L'attribut id est utilisé pour identifier le formulaire dans le JavaScript.

  • <input> : Utilisé pour créer des champs de saisie où les utilisateurs peuvent entrer des informations. Chaque champ a un id unique pour le sélectionner facilement avec JavaScript, un placeholder pour indiquer à l'utilisateur ce qu'il doit entrer, et l'attribut required pour s'assurer que le champ est rempli avant la soumission du formulaire.

  • <button> : Un bouton de soumission pour envoyer les données du formulaire. Le type submit indique que ce bouton soumet le formulaire.

En combinant ces éléments, vous créez une page HTML qui permet aux utilisateurs de voir une liste d'aliments et d'ajouter de nouveaux aliments via un formulaire. Cette structure de base peut être étendue et stylisée avec CSS pour améliorer l'apparence et l'expérience utilisateur.

Modifié le: samedi 7 juin 2025, 11:16