Meest Gebruikte HTML Elementen
| Element | Beschrijving |
<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
- Maak en nieuwe map aan genaamd
pizzeria - Open deze map via Visual Studio Code
Homepagina
- Via het projectpaneel, maak hierin een nieuw bestand aan genaamd
index.html - 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)
- Gebruik Live Server om jouw webpagina te openen en live te kunnen updaten.
- (Extra) Voeg een afbeelding toe die meteen een sfeer geeft van wat de klant mag verwachten van Onze Pizzeria.
About Us (Over Ons)
- Via het projectpaneel, maak een nieuw bestand aan genaamd
about.html - 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
- Via het projectpaneel, maak een nieuw bestand aan genaamd
contact.html - 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)
- Via het projectpaneel, maak een nieuw bestand aan genaamd
menu.html - 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)
- (Extra) Gebruik een tabel in plaats van een lijst
- (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>© 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>© 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>© 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>© 2024 Onze Pizzeria. Alle rechten voorbehouden.</p>
</footer>
</body>
</html>