Correction WEB01 - Interface Domotique

Exercice 1 : Analyse de code et vocabulaire

Exercice 2 : Représentation du DOM

Le document est structuré de manière hiérarchique (Arbre) :

section (id: meteo)
├── h3 (Texte: "Previsions locales")
├── p
│ ├── Texte: "Le ciel est "
│ ├── a (Texte: "nuageux")
│ └── Texte: "."
└── img (Attributs: src, alt)

Exercice 3 & 4 : Structure et Missions

Code HTML complet du Dashboard (Missions A, B et C incluses) :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Dashboard</title>
</head>
<body>
    <header>
        <h1>Gestionnaire de Maison</h1>
        <a href="https://meteofrance.com">Voir la météo</a>
    </header>

    <main>
        <!-- Mission A : Le Salon -->
        <section>
            <h2>Ambiance du Salon</h2>
            <ul>
                <li>Luminosité : 300 lux</li>
                <li>Température : 19°C</li>
            </ul>
            <img src="salon.jpg" alt="Photo du salon">
        </section>

        <!-- Mission B : Le Garage -->
        <section>
            <h2>Sécurité Garage</h2>
            <button>Ouvrir le portail</button>
            <input type="password" placeholder="Entrez le code">
        </section>
    </main>

    <footer>
        <p>[Nom de l'élève] - Interface Domotique 2026</p>
    </footer>
</body>
</html>

Exercice 5 : Débogage "Cuisine"

Erreurs identifiées :

  1. La balise <h2> n'est pas fermée.
  2. Mauvaise imbrication : <strong> doit être fermé avant </p>.
  3. Erreur de syntaxe : <p> utilisé au lieu de </p> pour fermer le texte.
  4. Élément de liste <li> non fermé (Cafetière).
  5. Attribut alt manquant sur la balise image.

Code Corrigé :

<section>
    <h2>Controle de la Cuisine</h2>
    <p>Le four est actuellement : <strong>allumé</strong></p>
    <ul>
        <li>Lumiere : On</li>
        <li>Cafetiere : Off</li>
    </ul>
    <img src="cuisine.jpg" alt="Aperçu de la cuisine"> 
</section>