★ Aan de slag 29

1. Met behulp van de webontwikkelaar-hulpmiddelen van de browser kun je de DOM als “horizontale boomstructuur” te zien krijgen.
Deze vind je in Firefox via het menu ExtraWebontwikkelaarInspector.
Vergelijk voor een eenvoudige webpagina deze structuur met de HTML-broncode (ExtraWebontwikkelaarPaginabron).
Pas via de inspector een tekstelement in de DOM aan, voor een bekende website (bijvoorbeeld van je school), met een onwaarschijnlijke tekst, en maak een schermafdruk van het resultaat.

2. Maak van de volgende HTML code van een nieuwssite een boomstructuur zoals beschreven in de tekst van deze paragraaf:
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Krant</title>
</head>
<body>
    <header>
        <h1>Dagelijkse Krant</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="politiek.html">Politiek</a></li>
                <li><a href="sport.html">Sport</a></li>
                <li><a href="cultuur.html">Cultuur</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Welkom bij de Dagelijkse Krant</h2>
            <p>Lees het laatste nieuws hier.</p>
        </section>
        <section id="politiek">
            <h2>Politiek Nieuws</h2>
            <p>Blijf op de hoogte van de laatste politieke ontwikkelingen.</p>
        </section>
        <section id="sport">
            <h2>Sport Nieuws</h2>
            <p>Het laatste sportnieuws en resultaten.</p>
        </section>
        <section id="cultuur">
            <h2>Cultuur Nieuws</h2>
            <p>Nieuws over kunst en cultuur.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Dagelijkse Krant</p>
    </footer>
</body>
</html>