📖 Wat is HTML?

HTML (HyperText Markup Language) is de standaardtaal voor het maken van webpagina's. Het gebruikt tags om inhoud te labelen en de browser te vertellen hoe het moet weergeven.

🔑 Belangrijk Concept

HTML-tags staan tussen hoekhaken zoals <tagnaam>. De meeste tags komen in paren: een opentag en een sluittag.

HTML

<p>Dit is een paragraaf.</p>
 <↑>       <↑>
 Open-tag  Sluit-tag

📌 Koppen

HTML biedt 6 niveaus van koppen, van <h1> (grootste) tot <h6> (kleinste).

Kop 1 - Hoofdtitel

Kop 2 - Sectie

Kop 3 - Onderdeel

Kop 4 - Klein

Kop 5 - Kleiner

Kop 6 - Kleinst

⚠️ Belangrijke Regels

Gebruik <h1> voor de hoofdtitel — slechts EEN per pagina!
Sla geen kopniveaus over (ga niet van h1 naar h4)
Koppen moeten de inhoud eronder beschrijven

HTML

<h1>Hoofdtitel</h1>
<h2>Sectietitel</h2>
<h3>Onderdeeltitel</h3>

📝 Paragrafen en Tekst

Paragrafen

Gebruik <p>-tags voor paragrafen. Browsers voegen automatisch ruimte toe voor en na paragrafen.

HTML

<p>Dit is de eerste paragraaf. Browsers voegen ruimte na toe.</p>
<p>Dit is de tweede paragraaf.</p>

Tekst Opmaak

Tag	Doel	Voorbeeld
`<strong>`	Belangrijk/vette tekst	Vet
`<em>`	Nadruk/scheef	Cursief
`<u>`	Onderstrepen	Onderstreept
`<s>`	Doorhalen	~~Doorhalen~~
`<mark>`	Markeren	Gemarkeerd

📦 Vooraf Opgemaakte Tekst

Gebruik <pre> om witruimte en regelafbrekingen te behouden. Perfect voor code!

HTML

<pre>
function hallo() {
    console.log("Hallo!");
    if (true) {
        return x;
    }
}
</pre>

⚠️ Let Op

De browser toont <pre> in een lettertype met vaste breedte.

💬 Citaten

Blokcitaat

Gebruik <blockquote> voor langere citaten die los staan van de hoofdtekst.

HTML

<blockquote cite="https://example.com">
    <p>De enige manier om geweldig werk te leveren is te houden wat je doet.</p>
</blockquote>

Inline Citaat

Gebruik <q> voor korte citaten binnen een zin.

HTML

<p>Zoals Einstein zei, <q>Verbeelding is belangrijker dan kennis.</q></p>

📝 Afkortingen

Gebruik <abbr> met het title attribuut om de volledige betekenis te tonen bij hover.

HTML

<p>De <abbr title="HyperText Markup Language">HTML</abbr> standaard wordt veel gebruikt.</p>

📍 Contactinformatie

Gebruik <address> om contactinformatie te geven voor de auteur.

HTML

<address>
    Geschreven door <a href="mailto:jan@example.com">Jan Jansen</a><br>
    Bezoek ons op:<br>
    Webstraat 123<br>
    Internet, World Wide Web
</address>

↩️ Bidirectionele Tekst

Gebruik <bdo> (Bidirectional Override) om tekstrichting te veranderen.

HTML

<p>Normaal: Hallo Wereld</p>
<p><bdo dir="rtl">Hallo Wereld</bdo></p>

💡 Gebruik

dir="rtl" - Rechts naar links (Arabisch, Hebreeuws)
dir="ltr" - Links naar rechts (Nederlands, Engels)

🔤 Speciale Tekens

HTML gebruikt speciale codes, entities genaamd, voor speciale tekens:

Teken	Entity Naam	Entity Nummer
<	<	<
>	>	>
&	&	&
"	"	"
'	'	'
©	©	©
®	®	®
™	™	™

⚠️ Belangrijk

Gebruik altijd & voor het en-teken in HTML code!

📋 Lijsten Vergelijking

Ongesorteerd vs Gesorteerd

Type	Tag	Beschrijving
Puntjes	<ul>	Ongesorteerd - Gebruikt opsommingstekens
Nummers	<ol>	Gesorteerd - Gebruikt nummers/letters

Type Attributen

Gebruik type om het opsommingsteken te veranderen:

type="disc" - Gevulde cirkel (standaard)
type="circle" - Lege cirkel
type="square" - Vierkant
type="1" - Cijfers (standaard)
type="A" - Hoofdletters
type="a" - Kleine letters
type="I" - Romeinse cijfers (hoofdletters)
type="i" - Romeinse cijfers (klein)

Extra OL Attributen

start="n" - Begin tellen vanaf n
reversed - Achteruit tellen

HTML

<ol type="A" start="3">
    <li>Derde item</li>
    <li>Vierde item</li>
</ol>

Geneste Lijsten

Je kunt een lijst in een andere lijst zetten om sub-items te maken!

HTML

<ul>
    <li>Eerste item
        <ul>
            <li>Sub-item A</li>
            <li>Sub-item B</li>
        </ul>
    </li>
    <li>Tweede item</li>
</ul>

🏷️ Attributen Uitgebreid

We hebben basis attributen behandeld. Nu meer!

Globale Attributen (werken op ALLE elementen)

Attribuut	Beschrijving	Voorbeeld
`id`	Unieke identificatie	id="header"
`class`	CSS klasse naam	class="highlight"
`title`	Tooltip bij hover	title="Meer info"
`style`	Inline CSS	style="color:red"
`lang`	Taal	lang="nl"
`dir`	Tekstrichting	dir="rtl"

✅ Beste Praktijk

Gebruik id voor unieke elementen en class voor herbruikbare stijl.

Attribuut	Doel	Voorbeeld
`id`	Unieke identifier	`<div id="header">`
`class`	Voor styling (herbrukbaar)	`<p class="intro">`
`title`	Knopinfo bij hover	`<p title="Hallo">`

✏️ Probeer Het Zelf

🎮 Bouw Je Eigen Pagina

Creëer een pagina over je favoriete film of hobby!

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Mijn Hobby</title>
    <style>
        body { font-family: Arial; padding: 20px; max-width: 600px; margin: 0 auto; }
        h1 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
        h2 { color: #3498db; margin-top: 30px; }
        .highlight { background: #fff3cd; padding: 10px; border-radius: 5px; }
    </style>
</head>
<body>
    <h1>Mijn Favorite Hobby: Gamen</h1>
    
    <p>Ik game al sinds ik klein was. Het is mijn favorite manier om te <strong>ontspannen</strong> en <em>plezier te hebben</em>!</p>
    
    <h2>Waarom Ik Het Leuk Vind</h2>
    <ul>
        <li>Goeie manier om te <mark>ontspannen</mark></li>
        <li>Kan online met vrienden spelen</li>
        <li>Zoveel verschillende genres om te ontdekken!</li>
    </ul>
    
    <h2>Mijn Top 3 Games</h2>
    <ol>
        <li>Minecraft - Creatieve vrijheid</li>
        <li>Fortnite - Battle royale actie</li>
        <li>Zelda - Geweldige avonturen</li>
    </ol>
    
    <div class="highlight">
        <p><strong>Leuk Feit:</strong> Het eerste videospel werd gemaakt in 1958!</p>
    </div>
    
</body>
</html>

Uitdagingen

Verander de titel naar iets anders
Voeg nog een lijstitem toe
Verander de hoofdkop naar een andere hobby
Voeg een nieuw onderdeel toe met <h2>

🏋️ Oefeningen

Test je kennis! Probeer deze uitdagingen:

Oefening 1: Receptenpagina

Maak een HTML-pagina voor je favoriete recept. Inclusief:

Een h1 voor de receptnaam
Twee h2 secties: "Ingrediënten" en "Bereidingswijze"
Een ongesorteerde lijst voor ingrediënten
Een gesorteerde lijst voor instructies
Gebruik <strong> voor belangrijke woorden

Oefening 2: Over Mij

Schrijf een pagina over jezelf met:

Je naam als h1
Minstens 3 alinea's met <p>
Gebruik <mark> om je favoriete dingen te markeren

Oefening 3: Vrienden Bio

Maak een pagina over een fictieve vriend met:

Een h1 met hun naam
Een blockquote met iets dat ze zeiden
Een ongesorteerde lijst van hun hobby's
Een gesorteerde lijst van dingen die ze vandaag deden
Gebruik <em> voor nadruk op één woord

Oefening 4: Boodschappenlijst

Maak een wekelijkse boodschappenlijst met:

h1: "Wekelijkse Boodschappenlijst"
4 verschillende categorieën (elk met h2)
Minstens 3 items per categorie
Gebruik <mark> voor de belangrijkste items

Oefening 5: Code Cheatsheet

Maak een cheatsheet met:

h1: "HTML Tags Cheatsheet"
Gebruik <pre> om code voorbeelden te tonen
Inclusief: h1-h6, p, ul, ol, li, strong, em, mark, blockquote
Voeg een notitie toe over wanneer je elk gebruikt

Ga Verder met Leren

← Vorige Volgende: HTML Gevorderd →

🎯 Klaar voor een Uitdaging?

Je hebt Hoofdstuk 2 voltooid - tijd om te oefenen!

Start Project 1: Mijn Eerste Webpagina →

Bouw je eerste webpagina met alleen HTML (geen CSS nodig!)

HTML Basis

📖 Wat is HTML?

📌 Koppen

Kop 1 - Hoofdtitel

Kop 2 - Sectie

Kop 3 - Onderdeel

Kop 4 - Klein

Kop 5 - Kleiner

Kop 6 - Kleinst

📝 Paragrafen en Tekst

Paragrafen

Tekst Opmaak

📦 Vooraf Opgemaakte Tekst

💬 Citaten

Blokcitaat

Inline Citaat

📝 Afkortingen

📍 Contactinformatie

↩️ Bidirectionele Tekst

🔤 Speciale Tekens

📋 Lijsten Vergelijking

Ongesorteerd vs Gesorteerd

Type Attributen

Extra OL Attributen

Geneste Lijsten

🏷️ Attributen Uitgebreid

Globale Attributen (werken op ALLE elementen)

Veelvoorkomende Attributen

✏️ Probeer Het Zelf

🎮 Bouw Je Eigen Pagina

Uitdagingen

🏋️ Oefeningen

Oefening 1: Receptenpagina

Oefening 2: Over Mij

Oefening 3: Vrienden Bio

Oefening 4: Boodschappenlijst

Oefening 5: Code Cheatsheet

Ga Verder met Leren

🎯 Klaar voor een Uitdaging?