HTML Basis Builder

Laden...

Selecteer een opdracht om te beginnen.

HTML Code Wijzig de code hieronder
Preview Zo ziet je pagina eruit
×

HTML Begrippen

Tag

Een HTML-aanduiding tussen haakjes, zoals <p> of <h1>.

Element

Een complete HTML-constructie met openingstag, inhoud en sluitingstag: <p>tekst</p>

Attribuut

Extra informatie in een tag, zoals href in <a href="...">

<html>

Het hoofdelement dat alle HTML-code omvat.

<head>

Bevat metadata zoals de titel van de pagina.

<body>

Bevat de zichtbare inhoud van de webpagina.

<h1> t/m <h6>

Kopjes van groot (h1) naar klein (h6).

<p>

Alinea (paragraph) voor tekst.

<a href="...">

Link naar een andere pagina. href bevat de URL.

<img src="..." alt="...">

Afbeelding. src is de bron, alt is alternatieve tekst.

<ul> en <ol>

Lijsten: unordered (opsommingstekens) en ordered (genummerd).

<li>

List item: een punt in een lijst.

<strong> en <em>

Tekst opmaken: vetgedrukt en cursief.

`, tasks: [ { text: 'Voeg een

kop toe met je naam', check: (html) => /

.*\S+.*<\/h1>/i.test(html) }, { text: 'Voeg een

alinea toe met tekst over jezelf', check: (html) => /

.*\S{10,}.*<\/p>/i.test(html) }, ], hints: [ 'Typ

Je Naam

tussen de body tags', 'Typ

Hier schrijf je iets over jezelf.

onder de h1' ] }, { title: "Tekst opmaken", description: "Leer tekst opmaken met vetgedrukt, cursief en kopjes.", starterCode: ` Tekst opmaken

Mijn hobby's

Ik heb veel hobby's. Mijn favoriete hobby is gamen.

`, tasks: [ { text: 'Maak een woord vetgedrukt met ', check: (html) => /.*\S+.*<\/strong>/i.test(html) }, { text: 'Maak een woord cursief met ', check: (html) => /.*\S+.*<\/em>/i.test(html) }, { text: 'Voeg een

subkopje toe', check: (html) => /

.*\S+.*<\/h2>/i.test(html) }, ], hints: [ 'Omring een woord met woord om het vetgedrukt te maken', 'Gebruik woord voor cursief', 'Voeg

Een subkopje

toe' ] }, { title: "Afbeelding toevoegen", description: "Voeg een afbeelding toe aan je webpagina met de img tag.", starterCode: ` Mijn foto pagina

Mooie natuur

Hieronder zie je een mooie foto:

`, tasks: [ { text: 'Voeg een tag toe', check: (html) => / /src\s*=\s*["'][^"']+["']/i.test(html) }, { text: 'Voeg een alt attribuut toe met beschrijving', check: (html) => /alt\s*=\s*["'][^"']+["']/i.test(html) }, ], hints: [ 'De basis van een img tag is: ', 'Bij src vul je de URL van de afbeelding in', 'Bij alt beschrijf je wat er op de afbeelding staat' ] }, { title: "Links maken", description: "Maak links naar andere websites met de a tag.", starterCode: ` Mijn favoriete websites

Handige websites

Hier zijn mijn favoriete websites:

`, tasks: [ { text: 'Maak een link met de tag', check: (html) => / /href\s*=\s*["']https?:\/\/[^"']+["']/i.test(html) }, { text: 'Voeg minstens 2 verschillende links toe', check: (html) => (html.match(/]*href/gi) || []).length >= 2 }, ], hints: [ 'Een link ziet er zo uit: Google', 'De tekst tussen en is wat je ziet op de pagina', 'Voeg nog een link toe naar een andere website' ] }, { title: "Lijsten maken", description: "Maak lijsten met opsommingstekens en nummers.", starterCode: ` Mijn lijstjes

Boodschappenlijst

Mijn top 3 films

`, tasks: [ { text: 'Maak een ongeordende lijst met
    ', check: (html) => /
      [\s\S]*<\/ul>/i.test(html) }, { text: 'Maak een geordende lijst met
        ', check: (html) => /
          [\s\S]*<\/ol>/i.test(html) }, { text: 'Voeg minstens 3
        1. items toe per lijst', check: (html) => { const ulMatch = html.match(/
            ([\s\S]*?)<\/ul>/i); const olMatch = html.match(/
              ([\s\S]*?)<\/ol>/i); const ulItems = ulMatch ? (ulMatch[1].match(/
            1. /gi) || []).length : 0; const olItems = olMatch ? (olMatch[1].match(/
            2. /gi) || []).length : 0; return ulItems >= 3 && olItems >= 3; }}, ], hints: [ 'Een ongeordende lijst:
              • item
              ', 'Een geordende lijst:
              1. item
              ', 'Voeg meer
            3. elementen toe binnen de lijst' ] }, { title: "Complete webpagina", description: "Maak een complete webpagina met alle elementen die je hebt geleerd!", starterCode: ` Mijn Portfolio `, tasks: [ { text: 'Voeg een hoofdtitel

              toe', check: (html) => /

              .*\S+.*<\/h1>/i.test(html) }, { text: 'Voeg minstens 2 alinea\'s

              toe', check: (html) => (html.match(/

              .*\S+.*<\/p>/gi) || []).length >= 2 }, { text: 'Gebruik of voor opmaak', check: (html) => /.*<\/strong>/i.test(html) || /.*<\/em>/i.test(html) }, { text: 'Voeg een werkende link toe', check: (html) => /href\s*=\s*["']https?:\/\//i.test(html) }, { text: 'Voeg een afbeelding toe met alt tekst', check: (html) => /]*src\s*=\s*["'][^"']+["'][^>]*alt\s*=\s*["'][^"']+["']/i.test(html) || /]*alt\s*=\s*["'][^"']+["'][^>]*src\s*=\s*["'][^"']+["']/i.test(html) }, { text: 'Maak een lijst met minstens 3 items', check: (html) => { const listMatch = html.match(/<[uo]l>([\s\S]*?)<\/[uo]l>/i); return listMatch && (listMatch[1].match(/

            4. /gi) || []).length >= 3; }}, ], hints: [ 'Begin met een

              voor je naam of onderwerp', 'Schrijf iets over jezelf in

              tags', 'Voeg een link toe naar je favoriete website', 'Zoek een afbeelding URL online en voeg die toe', 'Maak een lijst met je hobby\'s of favoriete dingen' ] } ]; // State let currentExercise = 0; let currentHint = 0; // DOM Elements const codeInput = document.getElementById('codeInput'); const lineNumbers = document.getElementById('lineNumbers'); const previewFrame = document.getElementById('previewFrame'); const taskDescription = document.getElementById('taskDescription'); const taskChecklist = document.getElementById('taskChecklist'); const feedbackContainer = document.getElementById('feedbackContainer'); // Initialize function init() { loadExercise(0); setupEventListeners(); } function loadExercise(index) { currentExercise = index; currentHint = 0; const exercise = exercises[index]; // Load saved code or starter code const savedCode = localStorage.getItem(`html_exercise_${index}`); codeInput.value = savedCode || exercise.starterCode; taskDescription.innerHTML = `

              Opdracht ${index + 1}: ${exercise.title}

              ${exercise.description}

              `; updateTasks(); updatePreview(); updateLineNumbers(); feedbackContainer.innerHTML = ''; } function updateTasks() { const exercise = exercises[currentExercise]; const html = codeInput.value; taskChecklist.innerHTML = exercise.tasks.map((task, i) => { const completed = task.check(html); return `
            5. ${completed ? 'V' : ''} ${task.text}
              6. `; }).join(''); // Check all complete if (exercise.tasks.every(t => t.check(html))) { if (!feedbackContainer.querySelector('.all-done')) { showFeedback('Alle taken voltooid! Ga door naar de volgende opdracht.', 'success', 'all-done'); } } } function updatePreview() { const doc = previewFrame.contentDocument || previewFrame.contentWindow.document; doc.open(); doc.write(codeInput.value); doc.close(); } function updateLineNumbers() { const lines = codeInput.value.split('\n').length; lineNumbers.innerHTML = Array.from({length: lines}, (_, i) => `
              ${i + 1}
              `).join(''); } function setupEventListeners() { // Code input codeInput.addEventListener('input', () => { updatePreview(); updateTasks(); updateLineNumbers(); localStorage.setItem(`html_exercise_${currentExercise}`, codeInput.value); }); codeInput.addEventListener('keydown', (e) => { if (e.key === 'Tab') { e.preventDefault(); const start = codeInput.selectionStart; const end = codeInput.selectionEnd; codeInput.value = codeInput.value.substring(0, start) + ' ' + codeInput.value.substring(end); codeInput.selectionStart = codeInput.selectionEnd = start + 2; updatePreview(); updateLineNumbers(); } }); // Exercise selector document.getElementById('exerciseSelect').addEventListener('change', (e) => { loadExercise(parseInt(e.target.value)); }); // Buttons document.getElementById('checkBtn').addEventListener('click', checkSolution); document.getElementById('resetBtn').addEventListener('click', resetCode); document.getElementById('hintBtn').addEventListener('click', showHint); // Element palette document.querySelectorAll('.element-btn').forEach(btn => { btn.addEventListener('click', () => { const insert = btn.dataset.insert.replace(/\\n/g, '\n'); const start = codeInput.selectionStart; codeInput.value = codeInput.value.substring(0, start) + insert + codeInput.value.substring(codeInput.selectionEnd); codeInput.focus(); codeInput.selectionStart = codeInput.selectionEnd = start + insert.indexOf('><') + 1; updatePreview(); updateTasks(); updateLineNumbers(); }); }); // Begrippen modal document.getElementById('begrippenBtn').addEventListener('click', () => { document.getElementById('begrippenModal').classList.add('active'); }); document.getElementById('closeModal').addEventListener('click', () => { document.getElementById('begrippenModal').classList.remove('active'); }); document.getElementById('begrippenModal').addEventListener('click', (e) => { if (e.target === document.getElementById('begrippenModal')) { document.getElementById('begrippenModal').classList.remove('active'); } }); } function checkSolution() { feedbackContainer.innerHTML = ''; const exercise = exercises[currentExercise]; const html = codeInput.value; let allCorrect = true; exercise.tasks.forEach((task, i) => { if (task.check(html)) { showFeedback(`Taak ${i + 1}: Correct!`, 'success'); } else { showFeedback(`Taak ${i + 1}: Nog niet goed - ${task.text}`, 'error'); allCorrect = false; } }); if (allCorrect) { showFeedback('Gefeliciteerd! Je hebt alle taken voltooid!', 'success'); // Move to next exercise if not last if (currentExercise < exercises.length - 1) { showFeedback('Klik op de dropdown om naar de volgende opdracht te gaan.', 'info'); } } } function resetCode() { if (confirm('Weet je zeker dat je de code wilt resetten?')) { codeInput.value = exercises[currentExercise].starterCode; localStorage.removeItem(`html_exercise_${currentExercise}`); updatePreview(); updateTasks(); updateLineNumbers(); currentHint = 0; feedbackContainer.innerHTML = ''; } } function showHint() { const exercise = exercises[currentExercise]; if (currentHint < exercise.hints.length) { showFeedback(`Hint ${currentHint + 1}: ${exercise.hints[currentHint]}`, 'info'); currentHint++; } else { showFeedback('Je hebt alle hints gezien voor deze opdracht.', 'info'); } } function showFeedback(message, type, className = '') { const item = document.createElement('div'); item.className = `feedback-item ${type} ${className}`; item.textContent = message; feedbackContainer.appendChild(item); } // Start init();