Wanneer je snelle prototypes maakt, opdrachten test of kleine webcomponenten bouwt, gebruik je vaak een online code-editor zoals CodePen, JSFiddle of JSBin.
Om te zorgen dat je code goed werkt én dat je lesmateriaal op ons platform correct getoond wordt, is het belangrijk om te begrijpen hoe deze editors én Markdown-lezers omgaan met HTML-tags.
Als je in normale tekst of in een Markdown-platform (zoals lezer.php) HTML-tags opschrijft zonder ze te 'ontsnappen' (escapen), gebeurt er iets vreemds:
<button> in een gewone zin, dan tekent de browser op die plek een échte klikbare knop in plaats van het woord op te nemen.<html> of <body> los in de tekst, dan denkt de browser dat de huidige pagina opnieuw begint. Hierdoor raakt de CSS van de lezer in de war en ontstaat er een gigantische verschuiving (offset) in de pagina.backticks)Wil je in de lopende tekst een tag tonen als tekst? Plaats er dan altijd enkele backticks ( ) rond!
<ul class="my-3 ps-4"><li class="mb-1">Fout (wordt een echte knop): Typ een <button> tag.</li>
<li class="mb-1">Goed (wordt nette code-tekst): Typ een
<hr class="my-4">
<h2>2. HTML Structuur in CodePen vs. Normale Bestanden</h2>
Bij het bouwen van een volledige website in Visual Studio Code schrijf je altijd de complete HTML5-basisstructuur. In een online playground zoals CodePen werkt dit anders.
<h3>A. Een Normaal HTML-bestand (index.html)</h3>
Hier moet je altijd de documentstructuur opzetten:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mijn Pagina</title>
</head>
<body>
<h1>Welkom op mijn website</h1>
<p>Dit is een normale HTML-pagina.</p>
<button>Klik hier</button>
</body>
</html>
<h3>B. Het HTML-venster in CodePen</h3>
CodePen voegt de achtergrondstructuur (, ,
, en ) automatisch achter de schermen toe.
<blockquote class="blockquote border-start border-4 border-primary rounded my-3 ps-3 py-1 bg-light">Belangrijke regel voor het HTML-paneel! </blockquote>
<blockquote class="blockquote border-start border-4 border-primary rounded my-3 ps-3 py-1 bg-light">In CodePen hoef je in het HTML-venster geen
, , of tags te typen! CodePen regelt de achtergrondstructuur automatisch. Je typt direct de elementen die binnen de horen te staan, zoals , of
In het HTML-venster van CodePen schrijf je dus alleen dit:
<h1>Welkom op mijn website</h1>
<p>Dit is een normale HTML-pagina.</p>
<button class="btn-primary">Klik hier</button>
<hr class="my-4">
<h2>3. Hoe koppel je CSS en JavaScript in CodePen?</h2>
Een ander groot voordeel van online editors is dat je geen - of