Dag 1
Dag 2
Dag 3
Dag 4

Meest Gebruikte HTML Elementen

ElementBeschrijving
<h1>Primary heading</h1>
<h2>Secondary heading</h2>
<h3>Tertiary heading</h3>
<h4>Quaternary heading</h4>
Titeling
<p>This is some text</p>Paragraaf
<a href=“www.spacex.com”>Click me to go to SpaceX</a>Hyperlink (a afkorting van anchor), met href specifieer je een url
<ul>
   <li>Earth</li>
   <li>Mars</li>
   <li>Jupiter</li>
</ul>
Ongeordende lijst (ul afkorting van unordered list) met list item elementen (li afkorting van list item)
<img src=“mars.jpg” alt=“The planet Mars”>
<img src=“https://i.imgur.com/KgZqRaa.jpeg” alt=“The planet Mars”>
Afbeelding embederen volgens een URL (kan extern of zelf-gehost zijn) die je in de src attribuut specifieert
<div></div>Non-semantische tag om meerdere zaken samen te groeperen op een manier die geen specifieke betekenis heeft voor de webbrowser

Meer informatie op W3Schools – HTML Tutorial!


👩‍💻 Hands-on Demo: Pizzeria

Als oefening gaan we aan de slag met samen de website voor een Pizzeria op te bowen.

Opstart

  1. Maak en nieuwe map aan genaamd pizzeria
  2. Open deze map via Visual Studio Code

Homepagina

  1. Via het projectpaneel, maak hierin een nieuw bestand aan genaamd index.html
  2. Maak een homepagina zoals je ziet in het voorbeeld (navigatiebalk met een logo/naam + lijst met hyperlinks naar onze andere pagina’s, koptitel, paragraaf en een footer)
  3. Gebruik Live Server om jouw webpagina te openen en live te kunnen updaten.
  4. (Extra) Voeg een afbeelding toe die meteen een sfeer geeft van wat de klant mag verwachten van Onze Pizzeria.

About Us (Over Ons)

  1. Via het projectpaneel, maak een nieuw bestand aan genaamd about.html
  2. Maak een Over Ons zoals je ziet in het voorbeeld (navigatiebalk met een logo/naam + lijst met hyperlinks naar onze andere pagina’s, koptitel, paragraaf en een footer)

Contact

  1. Via het projectpaneel, maak een nieuw bestand aan genaamd contact.html
  2. Maak een contact pagina met contactsgegevens zoals je ziet in het voorbeeld (navigatiebalk met een logo/naam + lijst met hyperlinks naar onze andere pagina’s, koptitel, paragrafen en een footer)
  1. Via het projectpaneel, maak een nieuw bestand aan genaamd menu.html
  2. Maak een Op het Menu pagina met menu items opgelijst zoals je ziet in het voorbeeld (navigatiebalk met een logo/naam + lijst met hyperlinks naar onze andere pagina’s, koptitel, lijst, en een footer)
  3. (Extra) Gebruik een tabel in plaats van een lijst
  4. (Extra) Voeg per menu item een afbeelding

Oplossingen

🕵️‍♂️ Klik hier om de oplossingen te tonen

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pizzeria</title>
</head>
<body>
    <header>
        <h1>🍕 Pizzeria</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">Over Ons</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="menu.html">Menu</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Welkom bij Onze Pizzeria</h1>
        <p>Welkom bij onze pizzeria! Wij bieden heerlijke pizza's gemaakt met verse ingrediënten.</p>
        <!-- Add more content here as needed -->
    </main>
    <footer>
        <p>&copy; 2024 Onze Pizzeria. Alle rechten voorbehouden.</p>
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Over Ons - Pizzeria</title>
</head>
<body>
    <header>
        <h1>🍕 Pizzeria</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">Over Ons</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="menu.html">Menu</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Over Ons</h1>
        <p>Wij zijn een familiebedrijf dat zich toelegt op het serveren van heerlijke pizza's aan onze gemeenschap.</p>
        <!-- Add more content here as needed -->
    </main>
    <footer>
        <p>&copy; 2024 Onze Pizzeria. Alle rechten voorbehouden.</p>
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact - Pizzeria</title>
</head>
<body>
    <header>
        <h1>🍕 Pizzeria</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">Over Ons</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="menu.html">Menu</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Contact</h1>
        <p>Neem contact met ons op via:</p>
        <p>123 Pizzastraat</p>
        <p>Stad, Postcode</p>
        <p>Telefoon: 123-456-7890</p>
        <p>E-mail: info@onzepizzeria.com</p>
        <!-- Add more content here as needed -->
    </main>
    <footer>
        <p>&copy; 2024 Onze Pizzeria. Alle rechten voorbehouden.</p>
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu - Pizzeria</title>
</head>
<body>
    <header>
        <h1>🍕 Pizzeria</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">Over Ons</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="menu.html">Menu</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Op het Menu</h1>
        <ul>
            <li>Margherita Pizza - €10</li>
            <li>Pepperoni Pizza - €12</li>
            <li>Veggie Supreme Pizza - €12</li>
            <!-- Add more menu items here -->
        </ul>
        <!-- Add more content here as needed -->
    </main>
    <footer>
        <p>&copy; 2024 Onze Pizzeria. Alle rechten voorbehouden.</p>
    </footer>
</body>
</html>