Webdevelopment

2.2 - Hoe ziet een HTML-bestand eruit

Mon, 07 Jul 2025 10:41:26 GMT

Voordat we beginnen met het maken van webpagina’s, moeten we begrijpen hoe een HTML-bestand is opgebouwd. HTML-documenten volgen een gestructureerd format, dat ervoor zorgt dat een browser correct interpreteert hoe een website eruit moet zien.✅ Wat bevat een HTML-bestand? ✔ Een documenttype () → Dit vertelt de browser welke HTML-versie wordt gebruikt. ✔ Een -element → Hiermee wordt het hele document gedefinieerd. ✔ Een -sectie → Bevat metadata, titels en links naar stijlen of scripts. ✔ Een -sectie → Bevat alle zichtbare content van de webpagina.🚀 Een HTML-bestand zorgt ervoor dat een browser begrijpt hoe een webpagina wordt weergegeven!Hier is een voorbeeld van een eenvoudig HTML-bestand: Mijn eerste HTML-pagina

Welkom op mijn website!

Dit is mijn eerste HTML-pagina.

🚀 Stap voor stap uitleg van de tags: → Vertelt de browser dat het document HTML5 gebruikt. → Begint het HTML-document en stelt de taal in op Nederlands. → Bevat informatie over de webpagina, zoals de titel en metadata. → Zorgt ervoor dat alle tekens correct worden weergegeven. → Geeft de pagina een titel (zichtbaar in de browser-tab). <body> → Bevat alle zichtbare inhoud van de webpagina. <h1> → Een koptekst, meestal gebruikt als hoofdtitel van een pagina. <p> → Een paragraaf, gebruikt om tekst te structureren. 🚀 Door deze structuur zal de browser de pagina correct weergeven!✅ Stappen om een HTML-bestand te maken en op te slaan: ✔ Open PHPStorm, Notepad, VS Code of een andere teksteditor. ✔ Typ de HTML-code en klik op Opslaan als…. ✔ Kies een bestandsnaam en zorg ervoor dat de extensie .html is. ✔ Open het bestand in een webbrowser om de pagina te bekijken.🚀 Een HTML-bestand moet altijd een .html-extensie hebben om correct te functioneren!✅ Een HTML-bestand heeft een duidelijke structuur met een <head> en <body>-sectie. ✅ De <!DOCTYPE html>-tag vertelt de browser dat HTML5 wordt gebruikt. ✅ HTML-bestanden moeten worden opgeslagen met de .html-extensie om correct te werken. </article> <article> <h1>Webdevelopment</h1> <p>Mon, 07 Jul 2025 10:39:54 GMT</p> <figure></figure> </article> <article> <h1>8.13 - Contactformulier</h1> <p>Sun, 22 Jun 2025 06:36:10 GMT</p> Een contactpagina laat bezoekers toe om je rechtstreeks te contacteren via je website. In deze paragraaf bouwen we een professioneel uitziend contactformulier met HTML en Bootstrap. We verwerken de gegevens met PHP, en gebruiken eventueel JavaScript voor extra gebruiksgemak (zoals foutmeldingen tonen zonder opnieuw te laden).contact.php:<!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <title>Contacteer ons

Contactformulier

📌 Met novalidate schakel je de standaard HTML-validatie uit als je liever JavaScript of PHP gebruikt om foutmeldingen te tonen.verwerk_contact.php:Bedankt voor je bericht, $naam!"; } else { foreach ($fouten as $fout) { echo "

$fout

"; } echo "← Terug"; } } ?> Wil je realtime waarschuwingen tonen zonder de pagina te herladen? Voeg dan een beetje JavaScript toe onderaan je contactpagina: 💡 Dit voorkomt niet dat je alsnog server-side controle nodig hebt — JavaScript is een extra hulpmiddel, geen beveiliging.Met mail() in PHP kun je gegevens laten verzenden naar een e-mailadres:$to = "jouw@email.be"; $subject = "Contactformulier van $naam"; $body = "Naam: $naam\nEmail: $email\n\nBericht:\n$bericht"; mail($to, $subject, $body); ⚠️ Houd er rekening mee dat mail() lokaal via XAMPP niet standaard werkt. Op een echte webserver of met een SMTP-plugin lukt het wel.✅ Maak een formulier met Bootstrap voor een strakke look ✅ Gebruik POST om gegevens naar een PHP-bestand te sturen ✅ Valideer invoer met PHP én eventueel JavaScript ✅ Toon foutmeldingen of bevestigingen met alerts ✅ Optioneel: sla gegevens op of verstuur ze per mail

8.11 - Loginformulier

Sun, 22 Jun 2025 06:34:59 GMT

Na het registreren van een gebruiker willen we die ook de mogelijkheid geven om in te loggen. In deze paragraaf bouwen we een eenvoudige, veilige loginpagina waarbij de gebruiker zich aanmeldt met zijn of haar e-mailadres en wachtwoord.In login.php: Inloggen

Inloggen

In login_verwerk.php:connect_error) { die("Verbinding mislukt: " . $conn->connect_error); } if ($_SERVER["REQUEST_METHOD"] === "POST") { $email = trim($_POST["email"]); $wachtwoord = $_POST["wachtwoord"]; $stmt = $conn->prepare("SELECT id, wachtwoord FROM gebruikers WHERE email = ?"); $stmt->bind_param("s", $email); $stmt->execute(); $resultaat = $stmt->get_result(); if ($resultaat->num_rows === 1) { $gebruiker = $resultaat->fetch_assoc(); if (password_verify($wachtwoord, $gebruiker["wachtwoord"])) { $_SESSION["gebruiker_id"] = $gebruiker["id"]; header("Location: dashboard.php"); exit(); } else { echo "❌ Fout wachtwoord."; } } else { echo "❌ Geen gebruiker gevonden met dit e-mailadres."; } $stmt->close(); } $conn->close(); ?> PHP zoekt naar een gebruiker met het opgegeven e-mailadres Indien gevonden, vergelijkt password_verify() het ingevoerde wachtwoord met de versleutelde versie uit de database Als het klopt, wordt er een sessie gestart en doorverwezen naar dashboard.php Bij een mismatch of onbekende gebruiker toon je een foutmelding In elke pagina die enkel toegankelijk mag zijn voor ingelogde gebruikers (zoals dashboard.php) plaats je bovenaan: 💡 Daarmee voorkom je dat niet-ingelogde gebruikers zomaar op je pagina kunnen komen.✅ Het loginformulier stuurt gegevens via POST naar login_verwerk.php ✅ Met password_verify() controleer je het wachtwoord ✅ Een succesvolle login start een sessie via $_SESSION ✅ Je beveiligt pagina's met een controle aan het begin ✅ Sessiegegevens blijven behouden totdat de gebruiker uitlogt

8.10 - Registratieformulier

Sun, 22 Jun 2025 06:33:55 GMT

In deze paragraaf bouwen we een registratiesysteem waarin een bezoeker een account kan aanmaken met een gebruikersnaam (e-mailadres) en wachtwoord. Zodra de gebruiker zich registreert, worden die gegevens opgeslagen in een MySQL-tabel. 💡 De loginpagina komt in de volgende paragraaf. Hier focussen we enkel op de registratie en opslag van gegevens. ### 8.10.1 – Database voorbereidenMaak in phpMyAdmin een nieuwe tabel aan binnen je database, bijvoorbeeld gebruikers, met deze kolommen:👉 Let op: het wachtwoord moet lang genoeg kunnen zijn, want we gaan het versleutelen (hashen) voor extra veiligheid.SQL-versie:CREATE TABLE gebruikers ( id INT AUTO_INCREMENT PRIMARY KEY, email VARCHAR(150) UNIQUE, wachtwoord VARCHAR(255) NOT NULL ); In registreer.php: Registreren

Registratieformulier

In registreer_verwerk.php:connect_error) { die("Verbinding mislukt: " . $conn->connect_error); } if ($_SERVER["REQUEST_METHOD"] === "POST") { $email = trim($_POST["email"]); $wachtwoord = trim($_POST["wachtwoord"]); // Eenvoudige validatie if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { die("Ongeldig e-mailadres."); } if (strlen($wachtwoord) < 6) { die("Wachtwoord moet minstens 6 tekens lang zijn."); } // Wachtwoord veilig versleutelen $hashedPassword = password_hash($wachtwoord, PASSWORD_DEFAULT); // Gebruiker opslaan $stmt = $conn->prepare("INSERT INTO gebruikers (email, wachtwoord) VALUES (?, ?)"); $stmt->bind_param("ss", $email, $hashedPassword); if ($stmt->execute()) { echo "✅ Registratie gelukt. Je kunt nu inloggen."; } else { if ($conn->errno === 1062) { echo "⚠️ Dit e-mailadres is al geregistreerd."; } else { echo "❌ Fout bij registratie: " . $conn->error; } } $stmt->close(); } $conn->close(); ?> De gegevens worden uit het formulier gehaald via $_POST trim() verwijdert spaties voor en na de invoer Het e-mailadres wordt gevalideerd Het wachtwoord wordt gehasht met password_hash() zodat het niet leesbaar wordt opgeslagen Met een prepared statement wordt het account ingevoerd in de database Dubbele registraties (zelfde e-mail) worden netjes opgevangen via foutcode 1062 ✅ Je maakt een formulier met email en password ✅ In PHP vang je de gegevens op en valideer je ze ✅ Wachtwoorden worden veilig versleuteld ✅ De gegevens worden opgeslagen in een MySQL-tabel via prepare() ✅ Je geeft feedback als het gelukt is (of niet)

8.8 - Data bewerken en verwijderen

Sat, 21 Jun 2025 17:45:25 GMT

Tot nu toe hebben we gegevens kunnen toevoegen en bekijken, maar wat als je per ongeluk iets fout hebt ingevoerd, of een record wil verwijderen? In deze paragraaf leer je hoe je: Een specifieke rij uit de database verwijdert Een rij bewerkt en bijwerkt Dit doet op een veilige en overzichtelijke manier Een eenvoudige manier om gegevens te verwijderen is door op een link te klikken die het id van het record meegeeft:echo 'Verwijder'; connect_error) { die("Verbinding mislukt: " . $conn->connect_error); } $stmt = $conn->prepare("DELETE FROM leerlingen WHERE id = ?"); $stmt->bind_param("i", $id); if ($stmt->execute()) { echo "Leerling verwijderd."; } else { echo "Fout bij verwijderen."; } $conn->close(); } ?> We splitsen dit op in twee pagina's:prepare("SELECT naam, email FROM leerlingen WHERE id = ?"); $stmt->bind_param("i", $id); $stmt->execute(); $result = $stmt->get_result(); $data = $result->fetch_assoc(); } ?> prepare("UPDATE leerlingen SET naam=?, email=? WHERE id=?"); $stmt->bind_param("ssi", $naam, $email, $id); if ($stmt->execute()) { echo "Gegevens bijgewerkt."; } else { echo "Fout bij bewerken."; } $conn->close(); ?> ✅ Werk met prepare() en bind_param() om SQL-injectie te voorkomen ✅ Controleer of $_GET["id"] of $_POST["id"] bestaat en geldig is ✅ Toon altijd bevestiging of foutmeldingen aan de gebruiker ✅ Voeg een bevestigingsvraag toe bij verwijderingen (optioneel)✅ Je kunt gegevens verwijderen via DELETE FROM ... WHERE id = ? ✅ Je kunt gegevens bewerken met een formulier + UPDATE-query ✅ Gebruik prepare() en bind_param() om veilig te werken ✅ PHP vangt de id op via $_GET of $_POST ✅ Combineer dit met Bootstrap voor knoppen zoals “Bewerk” en “Verwijder”

8.7 - Invoer valideren en feedback geven

Sat, 21 Jun 2025 17:44:03 GMT

Wanneer gebruikers gegevens invoeren via een formulier, wil je er zeker van zijn dat die invoer klopt, volledig en veilig is. In deze paragraaf leer je hoe je met PHP: Invoer controleert (validatie) Fouten opvangt (feedback) Gebruikers op een duidelijke manier informeert Stel je voor: Een gebruiker laat een veld leeg Er wordt een e-mailadres ingevuld zonder @ Iemand probeert met opzet kwaadaardige code te sturen Zonder validatie komen die gegevens alsnog in je database terecht... en dat wil je vermijden.Validatie zorgt ervoor dat alleen geldige en veilige gegevens worden verwerkt. ✅ HTML-validatie (client-side): snel en handig, zoals required of type="email", maar kan omzeild worden ✅ PHP-validatie (server-side): veilig en verplicht, want PHP controleert alles aan de serverkant 💡 Je gebruikt ze dus samen: HTML voor gebruikersgemak, PHP voor echte veiligheidWe passen toevoegen.php aan met controles:prepare("INSERT INTO leerlingen (naam, email) VALUES (?, ?)"); $stmt->bind_param("ss", $naam, $email); if ($stmt->execute()) { echo "✅ Leerling succesvol toegevoegd."; } else { echo "❌ Fout bij toevoegen: " . $conn->error; } } else { // Toon fouten foreach ($errors as $fout) { echo "

$fout

"; } } } $conn->close(); ?> empty() controleert of een veld leeg is filter_var(..., FILTER_VALIDATE_EMAIL) controleert of het e-mailadres geldig is Alle fouten worden verzameld in een array $errors[] Pas als $errors leeg is, gaat de code verder met de invoer Wil je foutmeldingen terugsturen naar het formulier, dan kun je het formulier en de PHP-logica samen in één bestand zetten (bijv. toevoegen.php). Zo kun je: Eerdere invoer behouden Foutmeldingen netjes boven het formulier tonen ✅ Gebruik HTML én PHP-validatie ✅ Check op lege velden, verkeerde types en logische fouten ✅ Toon duidelijke foutmeldingen aan de gebruiker ✅ Voeg alleen gegevens toe als alles klopt ✅ Wees vriendelijk, helder en veilig 💡

8.6 - Van forms naar database

Sat, 21 Jun 2025 17:42:38 GMT

Tot nu toe haalden we enkel gegevens uit de database. Maar nu gaan we zelf data toevoegen via een HTML-formulier. Denk aan gebruikstoepassingen zoals inschrijvingsformulieren, contactpagina’s of blogposts. Door de input van de gebruiker op te vangen en door te sturen naar PHP, kun je deze gegevens opslaan in je database.We maken een eenvoudig formulier om een nieuwe leerling in te voeren: Leerling toevoegen

Leerling toevoegen

📌 Dit formulier stuurt de ingevulde gegevens door naar toevoegen.php via de POST-methode.In toevoegen.php zorgen we ervoor dat: De invoer wordt opgevangen Gevalideerd wordt of alle velden zijn ingevuld De gegevens veilig in de database worden gestoken connect_error) { die("Verbinding mislukt: " . $conn->connect_error); } if ($_SERVER["REQUEST_METHOD"] == "POST") { $naam = $_POST["naam"]; $email = $_POST["email"]; // Voor veiligheid: HTML-tekens omzetten om XSS te voorkomen $naam = htmlspecialchars($naam); $email = htmlspecialchars($email); $sql = "INSERT INTO leerlingen (naam, email) VALUES ('$naam', '$email')"; if ($conn->query($sql) === TRUE) { echo "Leerling succesvol toegevoegd."; } else { echo "Fout bij toevoegen: " . $conn->error; } } $conn->close(); ?> De bovenstaande code werkt prima, maar is gevoelig voor SQL-injectie. Een veiligere versie gebruikt prepared statements:$stmt = $conn->prepare("INSERT INTO leerlingen (naam, email) VALUES (?, ?)"); $stmt->bind_param("ss", $naam, $email); $stmt->execute(); Het formulier stuurt POST-data naar toevoegen.php In dat bestand verbinden we met de database De ingevulde gegevens worden gecontroleerd en ingevoegd via een SQL-opdracht De gebruiker krijgt bevestiging als het gelukt is ✅ Je maakt een HTML-formulier met action="toevoegen.php" en method="POST" ✅ In PHP gebruik je $_POST["veldnaam"] om de input op te halen ✅ Met INSERT INTO voeg je de data toe aan je tabel ✅ Sluit af met conn->close() ✅ Gebruik eventueel prepare() voor extra veiligheid

8.5 - Data dynamisch tonen in HTML

Sat, 21 Jun 2025 17:39:13 GMT

Tot nu toe heb je geleerd hoe je een database aanmaakt, hoe je er verbinding mee maakt en hoe je gegevens kunt opvragen. Maar hoe toon je die gegevens op een mooie, overzichtelijke manier op je website? In deze paragraaf leer je hoe je PHP en HTML combineert om data uit de database in een nette tabel te presenteren.Stel dat we een MySQL-tabel hebben met leerlingen (leerlingen) met daarin de velden id, naam en email. Dan ziet de basis van je PHP-code er zo uit:connect_error) { die("Verbinding mislukt: " . $conn->connect_error); } $sql = "SELECT id, naam, email FROM leerlingen"; $result = $conn->query($sql); ?> 👉 Deze code voert de query uit, maar toont de resultaten nog niet. Dat gaan we nu combineren met HTML! Leerlingenoverzicht

Leerlingen in de database

num_rows > 0) { while($rij = $result->fetch_assoc()) { echo ""; echo ""; echo ""; echo ""; echo ""; } } else { echo ""; } $conn->close(); ?>

ID	Naam	Email
" . $rij["id"] . "	" . $rij["naam"] . "	" . $rij["email"] . "
Geen resultaten gevonden.

PHP haalt de gegevens op uit de MySQL-tabel. Met een while-lus gaat het script elke rij af. Voor elke rij wordt er een nieuwe -tabelrij toegevoegd met daarin de waarden voor id, naam en email. Als er geen resultaten zijn, tonen we één rij met de boodschap “Geen resultaten gevonden.” Wil je het nog netter maken? Voeg Bootstrap toe aan je : (of gebruik het Bootstrap-CSS-bestand dat je al gebruikt in PHPStorm!)En vervang de door:

💡 Zo ziet je tabel er meteen professioneel uit!In plaats van een

, kunnen we de rijen uit de database ook omzetten naar afzonderlijke Bootstrap cards. Dit is ideaal voor bijvoorbeeld gebruikersprofielen, producten, blogs of leerlingenfiches.Hieronder vind je een voorbeeld waarin gegevens uit de tabel leerlingen worden weergegeven als responsive cards:connect_error) { die("Verbinding mislukt: " . $conn->connect_error); } $sql = "SELECT id, naam, email FROM leerlingen"; $result = $conn->query($sql); ?> Leerlingen Cards

Overzicht leerlingen

num_rows > 0) { while ($row = $result->fetch_assoc()) { echo '

'; echo '

' . htmlspecialchars($row["naam"]) . '

'; echo '

ID: ' . $row["id"] . '

'; echo '

Email:
' . htmlspecialchars($row["email"]) . '

'; echo '

'; } } else { echo '

Geen resultaten gevonden.

'; } $conn->close(); ?>

Elke leerling wordt weergegeven in een Bootstrap card Cards zijn geplaatst in een row g-4 grid en passen zich aan per schermgrootte aan (mobile responsive!) We gebruiken htmlspecialchars() voor extra veiligheid bij weergave van gebruikersdata Voeg een avatar toe met een icoon of standaardafbeelding bovenin de card Kleur de cards op basis van een bepaalde eigenschap (bijv. geslaagd/niet geslaagd) Voeg knoppen toe: “Meer info”, “Bewerk”, “Verwijder” ✅ Haal gegevens op met een SELECT-query ✅ Gebruik een while-lus om rijen dynamisch toe te voegen aan je HTML ✅ Combineer PHP en HTML om data netjes te presenteren ✅ Gebruik conditionele weergave voor lege resultaten ✅ Voeg styling toe (bijv. met CSS of Bootstrap) voor een strakke look

8.4 - Configuratiebestand gebruiken

Sat, 21 Jun 2025 16:58:28 GMT

Wanneer je op meerdere pagina’s met dezelfde database werkt, is het niet efficiënt (en ook niet veilig) om overal je databasegegevens opnieuw in te typen. Daarom gebruiken we een configuratiebestand: één bestand waarin je alle gegevens zet om verbinding te maken met de database.➡️ Zo hoef je maar op één plek iets te wijzigen als er iets verandert ➡️ Je code blijft overzichtelijker ➡️ Je voorkomt kopieer-plak-fouten én verhoogt de veiligheidMaak een nieuw PHP-bestand aan met de naam config.php. Zet daarin je database-instellingen: 📌 Je hoeft hier alleen de gegevens in te vullen. Er wordt nog geen verbinding gelegd.In bijvoorbeeld je index.php-bestand kun je dan als volgt verbinding maken:connect_error) { die("Verbinding mislukt: " . $conn->connect_error); } ?> 💡 include 'config.php'; zorgt ervoor dat de variabelen uit je config-bestand beschikbaar zijn in het huidige bestand.Je kunt ook require_once 'config.php'; gebruiken. Dat werkt net zoals include, maar: Het stopt meteen met uitvoeren als het bestand niet wordt gevonden (veiliger) once zorgt ervoor dat het bestand maar één keer wordt ingeladen ✅ Overzicht: Je hoeft je databasegegevens niet op elke pagina opnieuw te schrijven ✅ Snel onderhoud: Verandert je databasenaam? Je past enkel config.php aan ✅ Beveiliging: Je vermijdt onbedoelde publicatie van gevoelige info in meerdere bestanden ✅ Herbruikbaarheid: Meerdere scripts kunnen tegelijk gebruikmaken van één centrale set instellingenZorg dat je config.php nooit deelt met anderen tenzij je de gevoelige informatie eruit haalt. Op een echte webserver is het gebruikelijk om dit bestand buiten de publieke map te bewaren.✅ config.php bevat je database-instellingen ✅ Je voegt dit bestand in met include of require_once ✅ Daarna gebruik je $conn = new mysqli(...) zoals gewoonlijk ✅ Één plek voor instellingen = overzichtelijk en veilig

8.3 - Verbinding maken met PHP

Sat, 21 Jun 2025 16:57:56 GMT

Nu je een database en tabel hebt aangemaakt in phpMyAdmin, is het tijd om vanuit PHP verbinding te maken met die database. Zo kun je straks gegevens opvragen, opslaan, bewerken of verwijderen — allemaal vanuit je eigen webpagina.Om verbinding te maken met je MySQL-database heb je vier gegevens nodig:Let op: op een echte webserver kunnen deze gegevens verschillen (en is er meestal wél een wachtwoord ingesteld).Je maakt verbinding met mysqli, een ingebouwde PHP-klasse:connect_error) { die("Verbinding mislukt: " . $conn->connect_error); } echo "Verbinding gelukt!"; ?> ✅ Als alles klopt, krijg je als resultaat: Verbinding gelukt! ✅ Als er iets misloopt, krijg je een duidelijke foutmelding❌ Vergeten om Apache én MySQL te starten in XAMPP ❌ Typfouten in je databanknaam of tabelnaam ❌ Bestand opgeslagen als .html in plaats van .php ❌ Het pad naar je project is niet juist: Gebruik steeds:http://localhost/jouw-project/ Je kunt in plaats van echo "Verbinding gelukt!" ook een echte query proberen uit te voeren:$sql = "SELECT * FROM leerlingen"; $result = $conn->query($sql); if ($result->num_rows > 0) { echo "Er zijn " . $result->num_rows . " leerlingen gevonden."; } else { echo "Geen leerlingen in de database."; } Als je gegevens krijgt, weet je dat de verbinding goed zit.✅ Gebruik new mysqli(...) om verbinding te maken met je database ✅ Controleer altijd met $conn->connect_error of er iets misloopt ✅ Op je lokale server zijn de gebruikersgegevens meestal: "root" (zonder wachtwoord) ✅ Je .php-bestand moet zich bevinden in de htdocs-map van XAMPP ✅ Gebruik http://localhost/ om je project te bekijken in je browser

8.2 - Database en tabellen aanmaken

Sat, 21 Jun 2025 16:50:06 GMT

Nu je weet wat een database is en waarvoor je MySQL gebruikt, is het tijd om er zelf een te maken. Daarvoor gebruiken we phpMyAdmin, een webinterface die bij XAMPP inbegrepen zit. Hiermee kun je visueel en eenvoudig databases aanmaken, tabellen structureren en gegevens beheren — zonder één lijn SQL te hoeven typen (tenzij je dat wil 😉). Zorg dat Apache en MySQL zijn gestart in je XAMPP Control Panel Open je browser en surf naar: http://localhost/phpmyadmin Of klik op de knop “Admin” achter MySQL in XAMPP Klik in phpMyAdmin bovenaan op het tabblad “Databases” Vul bij “Database name” een naam in, bijvoorbeeld: school Laat de collatie staan op utf8mb4_general_ci (standaard) Klik op “Create” ➡️ Je database “school” is nu aangemaakt en staat in de zijbalk! Klik in de linkerzijbalk op je database “school” In het midden zie je “Create table” Geef je tabel een naam, zoals: leerlingen Kies het aantal kolommen (bijv. 3) Klik op “Go” ✅ Klik vervolgens op “Save”Je eerste tabel is aangemaakt! 🎉 INT (A_I) → een geheel getal dat automatisch oploopt (bijv. 1, 2, 3…). We moeten daar verder niks voor ingeven, de database zal dit automatisch voor ons regelen! VARCHAR(100) → een tekstveld met max. 100 tekens Primary Key → een unieke identifier per rij (in dit geval het id) Je kunt dit ook doen met SQL-opdrachten. Klik op het tabblad SQL in phpMyAdmin en voer het volgende in:CREATE DATABASE school; USE school; CREATE TABLE leerlingen ( id INT AUTO_INCREMENT PRIMARY KEY, naam VARCHAR(100) NOT NULL, email VARCHAR(100) NOT NULL ); Handig om te onthouden als je later met code-gestuurde databases werkt!✅ Je opent phpMyAdmin via localhost/phpmyadmin ✅ Je maakt een nieuwe database aan via het tabblad “Databases” ✅ Elke database bevat één of meer tabellen ✅ Tabellen bestaan uit kolommen met een datatype zoals INT of VARCHAR ✅ Je kunt werken via het visuele menu of met SQL-queries

8.1 - Inleiding

Sat, 21 Jun 2025 16:47:24 GMT

Bij het bouwen van dynamische websites wil je vaak gegevens opslaan: bijvoorbeeld gebruikersnamen, bestellingen, e-mailadressen of blogberichten. Om dit op een gestructureerde en efficiënte manier te doen, gebruik je een database.Een database is als een digitale archiefkast: een georganiseerde verzameling van gegevens, opgeslagen in tabellen met rijen en kolommen — net als in een Excel-bestand, maar dan krachtiger en gekoppeld aan je website.MySQL is een van de populairste systemen om met databases te werken. Het is: ✅ Gratis en open source ✅ Zeer krachtig en betrouwbaar ✅ De standaardkeuze bij het werken met PHPElke database in MySQL bestaat uit één of meer tabellen, en elke tabel bestaat uit velden (zoals 'naam' of 'email') en records (de rijen met echte gegevens).PHP is gemaakt om samen te werken met MySQL. PHP kan: Gegevens uit formulieren opslaan in je database Gegevens uit een tabel opvragen en tonen Gegevens bewerken of verwijderen Zoekopdrachten uitvoeren Bijvoorbeeld: een pagina die alle producten uit je database toont, of een formulier dat een nieuwe leerling toevoegt.Wanneer je lokaal aan je site werkt, gebruik je XAMPP als lokale server. Hierin zit MySQL al standaard inbegrepen, en via phpMyAdmin kun je databases beheren via een grafische webinterface.📌 Vergeet niet: je moet Apache én MySQL starten in het XAMPP Control Panel, anders werkt phpMyAdmin niet.Je opent phpMyAdmin eenvoudig via:http://localhost/phpmyadmin ✔ Hoe je een database en tabel aanmaakt in phpMyAdmin ✔ Hoe je vanuit PHP verbinding maakt met je database ✔ Hoe je gegevens ophaalt en op het scherm toont ✔ Hoe je een extern configuratiebestand gebruikt (veiligheid en herbruikbaarheid) ✔ Hoe je dynamisch een HTML-tabel bouwt op basis van gegevens uit MySQL

7.9 - Functies

Sat, 21 Jun 2025 16:46:25 GMT

Een functie is een herbruikbaar blokje code dat een specifieke taak uitvoert, net als een methode in C#. In plaats van dezelfde code telkens opnieuw te schrijven, kun je die in een functie stoppen en aanroepen wanneer je ze nodig hebt. Dit maakt je code overzichtelijker, korter en makkelijker te onderhouden.Je maakt een functie met het sleutelwoord function, gevolgd door een naam, ronde haakjes (eventueel met parameters) en een blok code tussen accolades: ✅ De functie wordt pas uitgevoerd als je ze aanroept:begroet(); // toont: Hallo, bezoeker! Je kunt een functie gegevens meegeven via parameters: Je kunt meerdere parameters gebruiken, gescheiden door komma’s:function vermenigvuldig($a, $b) { echo $a * $b; } vermenigvuldig(4, 5); // toont: 20 Soms wil je dat een functie een waarde teruggeeft in plaats van die meteen te tonen. Gebruik dan return: 📌 Alles na return wordt teruggegeven aan de plek waar de functie werd aangeroepen.Je kunt een standaardwaarde instellen voor een parameter:function begroeting($naam = "gast") { echo "Welkom, $naam!"; } begroeting(); // Welkom, gast! begroeting("Sofie"); // Welkom, Sofie! $tekst"; } maakTitel("Welkom op mijn site"); ?> ✅ Zo kun je dynamisch HTML genereren met PHP-functies.✅ Een functie is een blok code dat je kunt hergebruiken ✅ Je maakt een functie met function naam() ✅ Je kunt parameters meegeven en een waarde teruggeven met return ✅ Functies maken je code korter, overzichtelijker en makkelijker te onderhouden ✅ Je kunt standaardwaarden instellen voor parameters

7.8 - Arrays

Sat, 21 Jun 2025 16:41:24 GMT

Een array is een speciale variabele waarin je meerdere waarden tegelijk kunt opslaan. In plaats van tien losse variabelen te maken, kun je één array gebruiken om bijvoorbeeld een lijst met namen, prijzen of kleuren te bewaren. Arrays zijn onmisbaar in elke PHP-toepassing — van simpele lijsten tot complexe databewerkingen.Er zijn twee manieren om een array te maken:// Klassieke manier $kleuren = array("rood", "groen", "blauw"); // Korte syntax (aanbevolen sinds PHP 5.4) $kleuren = ["rood", "groen", "blauw"]; Je kunt nu elk item aanspreken via een indexnummer (beginnend bij 0):echo $kleuren[0]; // toont: rood In plaats van nummers kun je ook namen (keys) gebruiken:$persoon = [ "naam" => "Lotte", "leeftijd" => 22, "stad" => "Antwerpen" ]; echo $persoon["naam"]; // toont: Lotte ✅ Dit is handig als je gegevens met betekenisvolle labels wilt opslaan.Een array kan ook andere arrays bevatten:$studenten = [ "Emma" => ["leeftijd" => 20, "score" => 85], "Noah" => ["leeftijd" => 21, "score" => 92] ]; echo $studenten["Noah"]["score"]; // toont: 92 💡 Dit gebruik je bijvoorbeeld voor tabellen, gebruikerslijsten of producten met eigenschappen.$kleuren[] = "geel"; // voegt geel toe aan het einde $persoon["email"] = "lotte@example.com"; // voegt nieuwe key toe $persoon["stad"] = "Gent"; // overschrijft bestaande waarde foreach ($kleuren as $kleur) { echo "Kleur: $kleur
"; } foreach ($persoon as $key => $waarde) { echo "$key: $waarde
"; } ✅ Voorbeeld:$kleuren = ["rood", "groen", "blauw"]; echo count($kleuren); // 3 ✅ Arrays slaan meerdere waarden op in één variabele ✅ Je hebt indexarrays, associatieve arrays en multidimensionale arrays ✅ Gebruik [] om toe te voegen, foreach om te doorlopen ✅ PHP biedt tientallen handige functies om arrays te beheren

7.7 - Loops

Sat, 21 Jun 2025 16:40:25 GMT

Met een loop kun je dezelfde code meerdere keren uitvoeren zonder die telkens opnieuw te schrijven. Dit is handig wanneer je bijvoorbeeld een lijst van producten toont, een teller opbouwt, of steeds iets wilt controleren tot een bepaalde conditie niet meer klopt.PHP kent verschillende soorten lussen:Gebruik je als je precies weet hoe vaak iets moet worden herhaald.✅ Voorbeeld:"; } ?> Uitleg: $i = 1 → startwaarde $i <= 5 → herhalen zolang deze voorwaarde waar is $i++ → verhoogt $i met 1 bij elke herhaling Gebruik je als je wilt blijven herhalen zolang een voorwaarde waar is, maar je niet altijd weet hoe vaak.✅ Voorbeeld:"; $teller++; } ?> Let op: als je de teller niet verhoogt, krijg je een oneindige lus.Deze lijkt op de while, maar voert de code minstens één keer uit, ook als de voorwaarde direct onwaar is.✅ Voorbeeld:"; $getal++; } while ($getal < 5); ?> Hier wordt het bericht één keer weergegeven, ondanks dat getal < 5 meteen al onwaar is.Speciaal bedoeld voor het doorlopen van arrays. Elke waarde in de lijst wordt één voor één opgehaald.✅ Voorbeeld:"; } ?> Je kunt ook zowel de key als de waarde ophalen: 0.5, 'banaan' => 0.3]; foreach ($prijzen as $fruit => $prijs) { echo "$fruit kost €$prijs
"; } ?> ✅ Lussen besparen herhaling in je code ✅ Vergeet niet je tellers of voorwaarden aan te passen — anders krijg je een eindeloze loop

7.6 - Conditionals

Sat, 21 Jun 2025 16:39:54 GMT

Met een if-statement kun je je code laten reageren op bepaalde situaties. Je stelt een voorwaarde op, en als die waar is, wordt een stuk code uitgevoerd. Zo kun je bijvoorbeeld controleren of iemand oud genoeg is, of een formulier correct is ingevuld, of een korting moet worden toegepast, enzovoort.= 18) { echo "Je bent volwassen."; } ?> ✅ Als de voorwaarde tussen haakjes waar is (true), wordt de code tussen de accolades uitgevoerd.Wil je ook iets doen als de voorwaarde niet waar is? Gebruik dan else: Voor meerdere keuzes gebruik je elseif: 📌 PHP voert alleen het eerste kloppende blok uit.Als je een variabele met vaste waarden wilt vergelijken, is switch overzichtelijker dan veel if-statements: ✅ Vergeet break; niet, anders loopt PHP door naar de volgende case.Je kunt meerdere voorwaarden combineren met logische operatoren:= 16 && $ingeschreven) { echo "Je mag deelnemen."; } ?> && = EN → beide voorwaarden moeten waar zijn || = OF → minstens één moet waar zijn ! = NIET → keert de waarde om ✅ Gebruik if om code uit te voeren bij een bepaalde voorwaarde ✅ Voeg else of elseif toe voor alternatieven ✅ Gebruik switch bij vaste keuzemogelijkheden ✅ Combineer voorwaarden met &&, || en ! ✅ Denk logisch: wat moet er gebeuren als iets wel of niet klopt?

7.5 - Operatoren

Sat, 21 Jun 2025 16:36:47 GMT

In deze paragraaf leer je hoe je met operatoren kunt rekenen, vergelijken en logische beslissingen kunt nemen in PHP. Dit is essentieel voor het bouwen van slimme scripts die reageren op invoer, keuzes maken of berekeningen uitvoeren.Deze gebruik je om te rekenen met getallen:✅ Voorbeeld: Deze gebruik je om twee waarden te vergelijken. Ze geven true of false terug.✅ Voorbeeld: Deze gebruik je om meerdere voorwaarden te combineren:✅ Voorbeeld:= 18 && $ingelogd) { echo "Toegang toegestaan"; } ?> Deze gebruik je om waarden toe te wijzen of te wijzigen:✅ Gebruik rekenkundige operatoren om te rekenen met variabelen ✅ Vergelijk waarden met ==, ===, <, >=, enz. ✅ Combineer voorwaarden met &&, || en ! ✅ Wijzig variabelen met +=, *=, ++, enz. ✅ Gebruik === als je ook het datatype wilt controleren

7.4 - Variabelen

Sat, 21 Jun 2025 16:36:10 GMT

In PHP gebruik je variabelen om tijdelijk gegevens op te slaan. Die gegevens kunnen allerlei soorten zijn: getallen (integers of floats), tekst (strings), waar/niet waar (booleans), of zelfs volledige lijsten (arrays).Je maakt een variabele door een dollarteken ($) te gebruiken, gevolgd door een zelfgekozen naam. Daarna ken je een waarde toe met = en sluit je de regel af met een puntkomma: ✅ Dit toont: Hello World! Let op: variabelen zijn hoofdlettergevoelig in PHP!Een variabele kan allerlei typen gegevens bevatten. PHP herkent het datatype automatisch: 📌 Strings staan tussen aanhalingstekens, de rest niet.Commentaar maakt je code leesbaar voor jezelf en anderen. PHP ondersteunt drie vormen: Je kunt commentaar ook gebruiken om tijdelijk code 'uit te schakelen'.Goede variabelennamen zeggen iets over wat erin zit. Je kunt optioneel beginnen met een prefix die het datatype aanduidt (niet verplicht, maar handig bij grotere projecten): ✔ Zo weet je meteen: $s = string, $i = integer, $f = float, $b = booleanGebruik géén variabelen binnen enkele aanhalingstekens:$naam = 'Joren'; echo 'Welkom, $naam!'; // FOUT: toont letterlijk $naam echo 'Welkom, '.$naam.'!'; // GOED: toont "Welkom, Joren!" 💡 Je kunt variabelen samenvoegen (concatenatie) met de punt . operator.✅ Voorbeeld met meerdere variabelen:$voornaam = 'Joren'; $achternaam = 'de Wit'; $volledigeNaam = $voornaam . ' ' . $achternaam; echo $volledigeNaam; // Resultaat: Joren de Wit PHP kan prima rekenen. Gebruik standaard operatoren zoals +, -, *, /:'; echo 'Totaal: €'.$fTotaal; ?> 🧠 Resultaat:Subtotaal: €99.5 Totaal: €120.395 ✅ Je maakt een variabele met $naam = waarde; ✅ Strings gebruik je met quotes (' of ") ✅ Je kunt rekensommen maken en strings samenvoegen met . ✅ Geef je variabelen logische namen — het helpt je bij grotere projecten ✅ Gebruik commentaar om je code begrijpelijk en overzichtelijk te houden

7.3 - Je eerste PHP-bestand

Sat, 21 Jun 2025 16:35:40 GMT

Open PHPStorm Ga naar File → New Project Selecteer PHP → Empty Project Geef je project een naam (bijvoorbeeld php_intro) Zorg dat de projectmap zich bevindt in: C:\xampp\htdocs\ zodat XAMPP het kan vinden Klik op Create 📌 Je kunt nu rechts in de projectstructuur rechtsklikken op de map en kiezen voor: New → PHP File → geef bijvoorbeeld index opOpen het bestand index.php en schrijf: ✅ zijn de start- en eindtags van PHP-code ✅ echo is een PHP-opdracht die tekst toont (vergelijkbaar met Console.WriteLine() in C#) ✅ Vergeet de puntkomma ; niet!Het gemakkelijkste is om via PHPStorm je pagina te openen in een browser naar keuze. Maar je kunt ook rechtstreeks naar je localhost surfen in de browser: Zorg dat Apache gestart is in XAMPP Open je browser Typ in de adresbalk: http://localhost/php_intro Je zou nu “Hallo, wereld!” moeten zien verschijnen op je scherm — rechtstreeks gegenereerd door de server via je PHP-code! Opmerking: in plaats van /php_intro, moet je natuurlijk wel de naam van je project typen!Je kunt PHP mengen met HTML: PHP Welkom

Vandaag is het .

📌 PHP wordt alleen uitgevoerd binnen de -tags — de rest is gewoon HTML.✅ Maak een .php bestand aan in je XAMPP-projectmap ✅ Gebruik om PHP-code te schrijven ✅ Toon uitvoer met echo ✅ Gebruik http://localhost/mapnaam/ om je pagina te bekijken ✅ Combineer PHP makkelijk met HTML voor dynamische inhoud

7.2 - XAMPP

Sat, 21 Jun 2025 16:25:49 GMT

Nu we met PHP aan de slag gaan, hebben we een lokale server nodig. Hiervoor gebruiken we XAMPP, een gratis tool waarmee je een serveromgeving kunt draaien op je eigen computer — zonder dat je online moet gaan. Superhandig!XAMPP is een bundel van software die speciaal bedoeld is om lokaal te ontwikkelen. Het bevat: Apache → de eigenlijke webserver MySQL → de database (nu vaak MariaDB genoemd) PHP → de programmeertaal waar dit hoofdstuk om draait phpMyAdmin → een visuele tool om je databases te beheren 💡 De naam XAMPP is een afkorting: X = Cross-platform (werkt op Windows, macOS, Linux) A = Apache M = MySQL P = PHP P = Perl (die laatste gebruiken we hier niet) Wanneer je XAMPP hebt geïnstalleerd, open je het XAMPP Control Panel. Dat ziet er ongeveer zo uit:+-------------------------------+ | Apache [Start] | | MySQL [Start] | | ... | +-------------------------------+ ✅ Wat moet je hier doen? Alleen dit: Klik op Start bij Apache Klik op Start bij MySQL 📌 Zodra beide groen oplichten, draait je server én database!Open de map waar je XAMPP hebt geïnstalleerd. Ga naar:C:\xampp\htdocs\ 👉 Hier plaats je de mappen van je projecten. Bijvoorbeeld:C:\xampp\htdocs\mijn-portfolio\ Je roept dit op via je browser met:http://localhost/mijn-portfolio/ phpMyAdmin is een webgebaseerde tool waarmee je grafisch databases kunt maken, bekijken en beheren. Denk aan: Tabellen aanmaken Gegevens toevoegen of wijzigen Gebruikers beheren SQL-opdrachten uitvoeren ✅ Om naar phpMyAdmin te gaan, zorg dat Apache + MySQL gestart zijn, en ga dan in je browser naar:http://localhost/phpmyadmin 📌 Hier kun je je eerste databank aanmaken — bijvoorbeeld voor een contactformulier, een blog of een webshop.✅ XAMPP laat je werken met PHP op je eigen computer ✅ Start alleen Apache en MySQL via het Control Panel ✅ Je projecten plaats je in htdocs/ ✅ phpMyAdmin = je databasebeheerder in de browser ✅ Je bereikt je projecten en databases via http://localhost/...

7.1 - Inleiding

Sat, 21 Jun 2025 16:24:28 GMT

Welkom in de wereld van PHP! In dit hoofdstuk ontdek je hoe je met PHP dynamische webpagina’s maakt en informatie kunt opslaan, ophalen en tonen met behulp van servers en databases.
Zoals we hebben geleerd in paragraaf 1.1 - Inleiding, zal het volgende gebeuren wanneer je een website bezoekt: Je browser stuurt een verzoek naar de server van de website De server stuurt de HTML en CSS terug Jouw browser leest die code en toont de website visueel 🧠 Maar wanneer je een pagina bezoekt die geschreven is in PHP, gebeurt er iets extra's: De server herkent de PHP-code Hij voert de PHP-code eerst uit Het resultaat daarvan (meestal HTML) wordt naar jouw browser gestuurd ➡️ Jij ziet de uitvoer, maar niet de PHP-code zelf. Daarom noemen we PHP een server-side taal.PHP maakt websites slimmer, interactiever en dynamischer. Je kunt bijvoorbeeld:✅ Gegevens van gebruikers ontvangen en opslaan ✅ Informatie tonen uit een database ✅ Content op verschillende pagina’s automatisch herhalen (zoals footers of menu’s) ✅ Een contactformulier maken dat de gegevens naar je e-mailadres of database stuurt ✅ Een blog bouwen waar bezoekers reacties achterlaten💡 PHP wordt vaak gebruikt in combinatie met MySQL en frameworks zoals WordPress.Omdat PHP op een server draait, heb je méér nodig dan een gewone browser. PHPStorm → om je PHP-code te schrijven XAMPP → een programma dat een lokale server op je eigen computer installeert 📌 Met XAMPP krijg je onder andere: Apache server → om je website te draaien PHP → om scripts uit te voeren MySQL → om met databases te werken ✅ Download XAMPP via: apachefriends.org Kies tijdens installatie de standaardinstellingen.Daarna plaats je je projecten in de map /htdocs van XAMPP. Deze kun je openen via de URL:http://localhost/naam-van-je-map ✅ Client-side talen: HTML, CSS, JavaScript ✅ Server-side talen: PHP, Python, Ruby, ASP.NET, C#, ...💡 Client-side scripts maken de pagina aantrekkelijk 💡 Server-side scripts maken de pagina intelligentStel je bent webdesigner en zoekt werk. Werkgevers zoeken vaak: Een front-end developer → bouwt de visuele kant met HTML, CSS en JavaScript Een back-end developer → bouwt de logica en database-koppeling met bijvoorbeeld PHP 🌐 In kleine teams is het handig als je beide kanten snapt — en dat leer je hier!✅ PHP = programmeertaal die op de server draait ✅ Je ziet het resultaat (HTML), niet de code zelf ✅ PHP maakt websites dynamischer en interactiever ✅ Om met PHP te werken heb je een lokale server nodig, zoals XAMPP ✅ PHP is onderdeel van de back-end van een website

6.8 - Formvalidatie

Sat, 21 Jun 2025 10:34:20 GMT

In deze paragraaf gaan we aan de slag met formulieren en hoe je met JavaScript kunt controleren of de gebruiker correcte en volledige gegevens heeft ingevuld — voordat het formulier daadwerkelijk wordt verzonden.Dit heet validatie, en het helpt je om fouten, lege velden of ongeldige e-mailadressen op te vangen voordat de gegevens worden verwerkt.Een standaard HTML-formulier: Naam:
E-mailadres:
We willen controleren of naam en e-mail zijn ingevuld: ✅ Met e.preventDefault() stoppen we de standaard verzending tot alles klopt. ✅ Met .value lezen we de invoerwaarden uit.Wil je controleren of een ingevoerd e-mailadres geldig is? Gebruik dan een simpele check:if (!email.includes("@") || !email.includes(".")) { alert("Voer een geldig e-mailadres in."); return; } Of gebruik een regex (regular expression) voor meer zekerheid:let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!regex.test(email)) { alert("Geen geldig e-mailadres."); } In plaats van een alert, kun je de fout ook op het scherm tonen:

document.getElementById("foutmelding").textContent = "Vul alle velden in!"; Gebruik required in HTML en combineer dat met JavaScript voor extra controle: Je kunt met JavaScript checken of het formulier valide is:if (!this.checkValidity()) { alert("Niet alle velden zijn correct ingevuld."); } ✅ JavaScript laat je invoer van gebruikers controleren vóór het formulier wordt verzonden ✅ Gebruik .value om gegevens uit velden te halen ✅ Gebruik e.preventDefault() om verzending tijdelijk te stoppen ✅ Toon foutmeldingen met alert() of direct op de pagina ✅ Combineer HTML-required met JS-validatie voor maximale controle

6.7 - DOM-manipulatie

Sat, 21 Jun 2025 10:32:55 GMT

De DOM (Document Object Model) vormt de brug tussen HTML en JavaScript. Je kunt het zien als een boomstructuur van je webpagina: elk HTML-element is een knooppunt (node) dat je met JavaScript kunt selecteren, aanpassen, toevoegen of verwijderen. Dit heet DOM-manipulatie, en het stelt je in staat om je pagina live te veranderen zonder te herladen. DOM-manipulatie is een van de belangrijkste onderdelen van JavaScript!De meest gebruikte methodes om elementen op je pagina op te zoeken:javascriptdocument.getElementById("titel"); // op ID document.getElementsByClassName("knop"); // op class (HTMLCollection) document.getElementsByTagName("p"); // op tagnaam (HTMLCollection) document.querySelector(".knop"); // eerste match met CSS-selector document.querySelectorAll("p.special"); // alle matches (NodeList) 💡 querySelector en querySelectorAll zijn krachtiger omdat je CSS-selectors kunt gebruiken!

Oude tekst

document.getElementById("tekst").innerHTML = "Nieuwe tekst!"; Of voor invoervelden: let waarde = document.getElementById("naamvak").value; Gebruik .value voor formulieren en .innerHTML of .textContent voor gewone elementen.let box = document.getElementById("doos"); box.style.backgroundColor = "lightblue"; box.style.fontSize = "20px"; Je kunt vrijwel alle CSS-eigenschappen toewijzen via .style, maar in camelCase (bijv. fontSize, niet font-size).let nieuweParagraaf = document.createElement("p"); nieuweParagraaf.textContent = "Dit is een nieuw stukje tekst!"; document.body.appendChild(nieuweParagraaf); Of binnen een specifieke container:document.getElementById("container").appendChild(nieuweParagraaf); let knop = document.getElementById("verwijderMij"); knop.remove(); Of via parent-element:let ouder = document.getElementById("lijst"); let kind = document.getElementById("item1"); ouder.removeChild(kind); let knop = document.querySelector(".knop"); knop.classList.add("active"); knop.classList.remove("hidden"); knop.classList.toggle("highlight"); Dit is handig om visuele effecten of animaties aan te roepen met CSS.✅ Met JavaScript kun je elk HTML-element selecteren, aanpassen of verwijderen ✅ Gebruik getElementById, querySelector, enz. om elementen op te zoeken ✅ Pas inhoud aan met .innerHTML of .value, en CSS met .style ✅ Voeg dynamisch nieuwe elementen toe met createElement() en appendChild() ✅ Verwijder elementen met .remove() of .removeChild() ✅ Beheer klassen met .classList.add(), .remove(), .toggle()

6.6 - Events

Sat, 21 Jun 2025 10:30:42 GMT

Tot nu toe hebben we JavaScript gebruikt om dingen te laten gebeuren zodra de pagina wordt geladen. Maar wat als je iets wilt laten gebeuren wanneer de gebruiker ergens op klikt, iets invult of met de muis beweegt? Daarvoor gebruik je events.Een event is een gebeurtenis die plaatsvindt in de browser — zoals een klik, een toetsdruk of het laden van een afbeelding. Met JavaScript kun je daarop reageren en je pagina interactief maken. 📌 Dit is de snelste manier, maar wordt bij grotere projecten minder aangeraden. let knop = document.getElementById("mijnKnop"); knop.addEventListener("click", function() { alert("Klik via addEventListener!"); }); 💡 Voordeel: je kunt meerdere events koppelen aan hetzelfde element én ze later verwijderen.

Klik op de knop om mij te veranderen.

Bij veel events krijg je automatisch een event object mee dat extra informatie bevat:document.addEventListener("keydown", function(e) { console.log("Je drukte op: " + e.key); }); ✅ Events maken je pagina interactief ✅ Gebruik onclick, onchange, onkeydown, enz. om te reageren op acties ✅ Voeg events toe inline, via DOM-eigenschappen of met addEventListener() ✅ Gebruik het event object (e) om extra info te krijgen over het event

6.5 - Functies

Sat, 21 Jun 2025 10:29:57 GMT

Een functie is een herbruikbaar blokje code dat een specifieke taak uitvoert. Je kunt het zien als een methode in C#. Functies helpen je om je code overzichtelijk, herbruikbaar en onderhoudbaar te maken.✅ Herbruikbaarheid – Schrijf code één keer, gebruik het meerdere keren ✅ Leesbaarheid – Je code wordt overzichtelijker en beter gestructureerd ✅ Modulariteit – Je kunt complexe taken opdelen in kleinere stukjes ✅ Flexibiliteit – Je kunt functies parameters meegeven om ze dynamisch te maken✅ Basisstructuur:function naamVanDeFunctie() { // code die uitgevoerd wordt } ✅ Voorbeeld:function begroet() { alert("Hallo daar!"); } begroet(); // roept de functie aan 📌 Let op: de functie wordt pas uitgevoerd als je haar aanroept met begroet();Je kunt een functie gegevens meegeven via parameters:function zegHallo(naam) { alert("Hallo, " + naam + "!"); } zegHallo("Sofie"); // toont: Hallo, Sofie! ✅ Je kunt meerdere parameters gebruiken:function vermenigvuldig(a, b) { return a * b; } let resultaat = vermenigvuldig(4, 5); // 20 Een functie kan een waarde teruggeven met return:function berekenSom(x, y) { return x + y; } let som = berekenSom(10, 15); // som = 25 📌 Alles na return wordt teruggegeven aan de plek waar de functie werd aangeroepen.Je kunt een functie ook opslaan in een variabele:let groet = function() { console.log("Hoi!"); }; groet(); // roept de functie aan Een kortere manier om functies te schrijven (ES6):const kwadraat = (x) => { return x * x; }; console.log(kwadraat(6)); // 36 Of nog korter als het maar één regel is:const dubbel = x => x * 2; ✅ Gebruik function om een functie te definiëren ✅ Roep een functie aan met functieNaam() ✅ Geef parameters mee om functies flexibel te maken ✅ Gebruik return om een waarde terug te geven ✅ Functies kunnen ook als expressie of arrow function worden geschreven

6.4 - Loops

Sat, 21 Jun 2025 10:28:33 GMT

Soms wil je een stuk code meerdere keren uitvoeren — bijvoorbeeld om een lijst af te gaan, een teller op te bouwen, of iets te herhalen tot een bepaalde voorwaarde niet meer klopt. Daarvoor gebruik je loops. JavaScript kent drie veelgebruikte soorten: for, while en do...while.Gebruik je wanneer je precies weet hoe vaak iets moet worden herhaald.✅ Structuur:for (start; voorwaarde; stap) { // code die herhaald wordt } ✅ Voorbeeld:for (let i = 1; i <= 5; i++) { console.log("Herhaling " + i); } 📌 Uitleg: let i = 1 → startwaarde i <= 5 → zolang deze voorwaarde waar is, blijft de loop doorgaan i++ → verhoogt i met 1 na elke herhaling Gebruik je wanneer je niet zeker weet hoe vaak iets moet worden herhaald, maar zolang een voorwaarde waar is.✅ Structuur:while (voorwaarde) { // code die herhaald wordt } ✅ Voorbeeld:let teller = 0; while (teller < 3) { console.log("Teller is: " + teller); teller++; }
⚠️ Zorg dat je de teller aanpast, anders krijg je een oneindige loop!Deze lijkt op de while-loop, maar voert de code minstens één keer uit, zelfs als de voorwaarde meteen onwaar is.✅ Structuur:do { // code die minstens één keer wordt uitgevoerd } while (voorwaarde); ✅ Voorbeeld:let getal = 5; do { console.log("Getal is: " + getal); getal++; } while (getal < 5); 💡 In dit voorbeeld wordt de code onder do sowieso één keer uitgevoerd, ook al is de voorwaarde getal < 5 meteen onwaar.
✅ Loops zijn krachtig in combinatie met arrays, DOM-elementen en gebruikersinteractie. ✅ Vergeet niet je teller of conditie aan te passen om oneindige loops te voorkomen!

6.3 - Conditionals

Sat, 21 Jun 2025 10:17:44 GMT

Een belangrijk aspect van programmeren is het laten reageren op bepaalde situaties. In JavaScript doe je dat met conditionals – structuren waarmee je bepaalt of bepaalde code moet worden uitgevoerd op basis van voorwaarden. Met andere woorden: “Als dit waar is, doe dan dát.”Het if-statement is de meest gebruikte vorm van logica in JavaScript. Je controleert of een voorwaarde waar (true) is, en zo ja, voer je de bijbehorende code uit.✅ Basisstructuur:if (voorwaarde) { // code wordt uitgevoerd als de voorwaarde waar is } ✅ Voorbeeld:let leeftijd = 18; if (leeftijd >= 18) { alert("Je mag stemmen!."); } Wil je ook iets laten gebeuren als de voorwaarde niet waar is? Gebruik dan else:if (leeftijd >= 18) { alert("Welkom!"); } else { alert("Sorry, je bent te jong."); }
Voor meerdere mogelijkheden gebruik je else if:let punt = 8; if (punt >= 9) { alert("Uitmuntend!"); } else if (punt >= 6) { alert("Geslaagd!"); } else { alert("Herkansing nodig."); } 👉 Let op: de code voert enkel het eerste kloppende blok uit.
Je kunt allerlei vergelijkingen doen in een if:if (getal === 10) // gelijk aan if (naam !== "Anna") // ongelijk aan if (a > b && b > 0) // beide waar if (x < 10 || y > 5) // minstens één waar Gebruik altijd === i.p.v. == om ook het datatype te vergelijken!Als je meerdere vaste keuzemogelijkheden hebt voor één variabele, is een switch handiger dan een hele keten van if-statements.✅ Structuur:switch (dag) { case "maandag": console.log("Begin van de week"); break; case "vrijdag": console.log("Bijna weekend!"); break; case "zondag": console.log("Rustdag"); break; default: console.log("Gewone werkdag"); } 📌 Gebruik break om te voorkomen dat de code doorschuift naar de volgende case. 📌 De default wordt uitgevoerd als geen van de cases overeenkomt.
✅ Gebruik if, else if, else om voorwaarden op te stellen ✅ Gebruik logische (&&, ||) en vergelijkingsoperatoren (===, !==) ✅ Gebruik switch bij meerdere vaste keuzes ✅ Gebruik break in je switch om doorspringen te voorkomen ✅ Denk logisch: stel jezelf de vraag “Wat als dit gebeurt…?” en bouw daarop

6.1 - Inleiding

Sat, 21 Jun 2025 09:56:39 GMT

Welkom in de wereld van JavaScript — de derde laag van het web naast HTML (structuur) en CSS (opmaak). Met JavaScript geef je je website leven en interactie: dynamische pop-ups, formuliercontrole, animaties, interactieve knoppen en nog véél meer.Hoewel de naam het anders doet vermoeden, is JavaScript geen afgeleide van Java. De naam was een slimme marketingzet in een tijd waarin Java opkwam. JavaScript heette oorspronkelijk zelfs Mocha!JavaScript is een scripttaal die door de browser wordt uitgevoerd. Het is: Niet gecompileerd, maar direct geïnterpreteerd Dynamisch getypeerd → je hoeft geen datatypes zoals int of String te specificeren Flexibel, met ondersteuning voor functies, objecten, conditionals, loops en meer Overal beschikbaar → draait op vrijwel elk apparaat met een browser 💡 Voorbeelden van wat je met JavaScript kunt doen: Een popup tonen met een waarschuwing Knoppen interactief maken Een formulier valideren Een spel bouwen Een animatie starten zodra je scrollt HTML → structuur CSS → visuele vormgeving JavaScript → gedrag / interactie (PHP en andere server-side talen komen daar nog bij als je werkt met back-end en databases.)We maken een eenvoudige melding op je scherm met: ✅ Wat gebeurt hier? alert() is een standaardfunctie die een melding toont Je plaatst JavaScript tussen 🧠 Externe scripts worden herbruikbaar, overzichtelijk, en sneller dankzij caching! Daarom geven we in de meeste gevallen de voorkeur aan externe bestanden.Plaats ✅ Voordelen: Eerst laadt de inhoud van de pagina Daarna wordt JavaScript geladen Alles wat in je script naar elementen verwijst, bestaat dan al! Eén van de meest gebruikte methodes:let titel = document.getElementById("hoofdtitel"); Zo kun je met JavaScript een HTML-element selecteren en bijvoorbeeld wijzigen, verbergen, manipuleren of verwijderen.✅ JavaScript = dynamiek en interactie op je website ✅ Gebruik inline of externe scripts (voorkeur: extern) ✅ Werk samen met HTML en CSS via het DOM ✅ Gebruik getElementById() om elementen te selecteren ✅ Plaats je scripts onderaan de pagina voor betere prestaties

6.2 - Variabelen, datatypes en operatoren

Sat, 21 Jun 2025 09:55:08 GMT

In deze paragraaf duiken we in een belangrijk fundament van JavaScript: variabelen, datatypes en operatoren. Veel hiervan lijkt op wat je al tijdens het vak programmeren hebt geleerd, maar JavaScript is soepeler qua structuur — en dat maakt het zowel krachtig als toegankelijke taal voor dynamisch programmeren.In JavaScript kun je variabelen aanmaken met de sleutelwoorden let en const:let naam = "Anna"; let leeftijd = 17; 💡 De waarde van een let-variabele kun je later opnieuw toekennen.const PI = 3.14; 💡 De waarde van const kan niet meer aangepast worden. Je móét direct een waarde meegeven!var x = 5; // verouderd en onvoorspelbaar gedrag bij scoping Gebruik altijd let of const i.p.v. var – deze laatste stamt uit de oude tijd vóór ES6.Hoewel je in JavaScript geen datatype hoeft te specificeren, bestaan ze wel degelijk "onder de motorkap":let cijfer = 8; let pi = 3.14159; JavaScript maakt geen onderscheid tussen gehele getallen en kommagetallen — alles is van het type number.let tekst = "Hallo!"; let andereTekst = 'Wereld'; Je mag enkel- of dubbelquotes gebruiken Gebruik \n voor een nieuwe regel Strings werken met dot-notatie zoals in Java: tekst.length // lengte van de string tekst.charAt(1) // karakter op index 1 tekst.toUpperCase() // hoofdletters tekst.indexOf("a") // positie van 'a' let isActief = true; let isLid = false; ✔ Een boolean kent twee waarden: true of false.let ongedefinieerd; // undefined let leeg = null; // bewust leeg ✅ Niet geïnitialiseerde variabelen krijgen automatisch de waarde undefined. 📌 Let op: + wordt ook gebruikt voor String-concatenatie. 5 == "5" // true (type wordt genegeerd) 5 === "5" // false (type strikt vergeleken) let a = true; let b = false; a && b // false a || b // true !b // true ✅ Gebruik let voor variabelen, const voor constante waarden ✅ JavaScript kent number, string, boolean, null en undefined ✅ Operatoren voor rekenen, logica en vergelijking zijn grotendeels zoals in Java of C# ✅ Voorkom het gebruik van var om bugs te vermijden ✅ Maak slim gebruik van === en !== om verwarring te voorkomen

5.4 - Bootstrap Grid

Sat, 21 Jun 2025 09:50:38 GMT

Het Bootstrap Grid-systeem is het kloppende hart van responsive design binnen Bootstrap. Hiermee bouw je razendsnel flexibele lay-outs die zich automatisch aanpassen aan verschillende schermgroottes, zonder dat je zelf complexe media queries hoeft te schrijven.Het grid-systeem in Bootstrap is opgebouwd uit containers, rijen (rows) en kolommen (columns).✅ Structuur in HTML:

Kolom 1

Kolom 2

Kolom 3

🧱 De

groepeert kolommen horizontaal 📦 Elke

is een kolom binnen de rij➡️ De .col-klassen worden automatisch even breed verdeeld over de rij.Bootstrap gebruikt een 12-koloms grid. Je kunt zelf bepalen hoeveel kolommen een element inneemt per rij.✅ Voorbeeld met verschillende kolombreedtes:

50%

33%

17%

🎯 De optelsom per rij mag maximaal 12 zijn.Wil je dat het gedrag per schermgrootte verandert? Gebruik dan breekpunten:✅ Voorbeeld:

Je kunt ook grids nesten binnen kolommen:

Nested kolom

En je kunt elementen centreren of uitlijnen met Bootstrap’s utility classes zoals justify-content-center, align-items-end, enz.

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

✅ Bootstrap’s grid gebruikt een 12-koloms layout ✅ Werk met .container → .row → .col structuur ✅ Gebruik col-, col-sm-, col-md-, enz. voor responsive gedrag ✅ Kolommen kunnen automatisch of handmatig worden verdeeld ✅ Combineer met Flexbox classes voor uitlijning

5.5 - Componenten

Sat, 21 Jun 2025 09:46:58 GMT

Bootstrap 5 bevat een enorme verzameling herbruikbare UI-componenten die je met slechts een paar klassen kunt toevoegen aan je website. Denk aan knoppen, kaarten, navigatiebalken, meldingen, modals, carrousels, badges, formulieren en nog veel meer. Deze componenten zijn volledig gestyled, responsief en consistent — en je kunt ze eenvoudig aanpassen met extra klassen of eigen CSS.✅ Tijdswinst – Je hoeft geen knoppen, kaarten of navigatiebalken zelf te ontwerpen. ✅ Consistentie – Alles volgt dezelfde visuele stijl. ✅ Responsief gedrag – Componenten passen zich automatisch aan aan verschillende schermgroottes. ✅ Interactiviteit – Veel componenten bevatten ingebouwde JavaScript-functionaliteit (zoals dropdowns of modals).Bootstrap biedt verschillende stijlen voor knoppen: Je kunt ook knoppen kleiner of groter maken: Of een knop als link gebruiken:
Een kaart is een visueel blok met afbeelding, titel, tekst en knoppen:

Kaarttitel

Korte beschrijving van de inhoud.

Lees meer

Je kunt kaarten combineren in een grid:

...

Een responsieve navigatiebalk: Deze navbar past zich automatisch aan op mobiele schermen door middel van een zogenaamd hamburgermenu.

Gebruik meldingen om gebruikers te informeren:

Je bent succesvol ingelogd!

Er is een fout opgetreden.

Je kunt meldingen ook afsluitbaar maken:

Let op! Dit is een waarschuwing.

Kleine labels of tellers:

Berichten 4

Bootstrap-componenten zijn ontworpen om samen te werken. Je kunt bijvoorbeeld een kaart in een kolom zetten, met een knop erin die een modal opent. Of een formulier in een modal, met badges in de navigatiebalk. Alles is modulair en uitbreidbaar.Je vindt een volledig overzicht van alle componenten op de officiële documentatie van Bootstrap 5 Components. Of blader door meer dan 300 voorbeelden op BootstrapExamples.com.✅ Bootstrap-componenten zijn snel, stijlvol en responsief ✅ Voeg ze toe met eenvoudige HTML en classnamen ✅ Combineer ze met utility-klassen voor nog meer controle ✅ Veel componenten zijn interactief dankzij ingebouwde JavaScript ✅ Je kunt ze uitbreiden of overschrijven met je eigen CSS

5.3 - Containers

Sat, 21 Jun 2025 09:15:21 GMT

Containers zijn de ruggengraat van elke Bootstrap lay-out. Ze bieden een flexibele, responsieve structuur waarin je andere elementen kunt plaatsen — zoals rijen, kolommen, navigatie, kaarten, buttons, enz. We hebben dit concept al eerder gezien, maar Bootstrap tilt het naar een hoger niveau met slimme ingebouwde breekpunten en schaalopties.✅ Voorbeelden:

🧠 Belangrijk: containers zijn bedoeld om andere onderdelen van je layout in op te bouwen, zoals het grid-systeem. Gebruik ze als eerste stap in je HTML-body of hoofdsectie.✅ Gebruik .container voor lay-outs met vaste breedte en mooie marges ✅ Gebruik .container-fluid voor layouts die 100% schermbreedte nodig hebben ✅ Beide zijn perfect voorbereid op responsive gedrag ✅ Je gebruikt containers als eerste stap vóór je Bootstrap grid opbouwt

5.1 - Inleiding

Sat, 21 Jun 2025 09:13:21 GMT

Tot nu toe heb je alles van de grond af opgebouwd met handgeschreven HTML en CSS. Dat heeft je een stevige basis gegeven — en die heb je ook nodig om nu de sprong te maken naar sneller, slimmer en moderner webdesign. Vanaf dit hoofdstuk introduceren we Bootstrap 5: een van de populairste front-end frameworks ter wereld.Bootstrap is een open-source CSS-framework waarmee je snel moderne, responsieve websites kunt bouwen zonder alles vanaf nul te coderen. Het is ontwikkeld door Twitter en wordt vandaag de dag wereldwijd gebruikt door zowel beginners als professionals.✅ Belangrijkste voordelen: Responsieve layout dankzij het ingebouwde gridsysteem Kant-en-klare componenten zoals knoppen, navigatiebalken, kaarten, badges, enz. Mobielvriendelijk (mobile-first) ontwerp met focus op schaalbaarheid Aanpasbaarheid via eigen CSS of overrides Geweldige documentatie op getbootstrap.com Gratis en zonder licentiebeperkingen – gewoon downloaden en gebruiken Hoewel het waardevol is om HTML en CSS handmatig te schrijven, is dat in de praktijk vaak tijdsintensief en foutgevoelig. Frameworks zoals Bootstrap zorgen voor:✔ Snellere ontwikkeling ✔ Consistente styling ✔ Betere toegankelijkheid ✔ Responsief gedrag out-of-the-boxDaarom gaan we vanaf nu bij nieuwe projecten werken met Bootstrap in PhpStorm.🎯 Zo begin je een nieuw project: Start een nieuw project Kies niet voor “Empty Project”, maar voor Bootstrap 5 project Kies de gewenste versie (tip: gebruik altijd de laatste) Geef je project een passende naam 👀 Aan de linkerkant in je Project View zie je nu dat PhpStorm automatisch Bootstrap-mappen en bestanden heeft toegevoegd.Je ziet een verzameling CSS- en JavaScript-bestanden: bootstrap.css en/of bootstrap.min.css bootstrap.bundle.js of bootstrap.min.js Mogelijk een fonts/ of icons/ map Een HTML-sjabloonbestand met Bootstrap geïmporteerd ✅ Je mag deze bestanden niet wijzigen! Gebruik in plaats daarvan je eigen aangepaste bestanden om extra stijl toe te voegen of Bootstrap-stijlregels te overschrijven.Bootstrap 5 is van nature mobile-first: de standaard-opmaak is voor kleine schermen, en via media queries bouw je op naar grotere schermen.Toch biedt Bootstrap voldoende flexibiliteit om ook desktop-first te werken, afhankelijk van je workflow of project.✅ Bootstrap = snel, responsief en professioneel framework ✅ Inclusief voorgedefinieerde componenten, layout-tools en utilities ✅ Ideaal in combinatie met PhpStorm dankzij integratie van bestanden en templates ✅ Start met je eigen CSS en JS aanvullingen — maar blijf uit de Bootstrap-bestanden zelf! ✅ Mobile-first in de kern, maar desktop-first is ook prima mogelijk

4.5 - Grid

Sat, 21 Jun 2025 09:10:57 GMT

Met CSS Grid beschik je over de meest krachtige en flexibele manier om een volledige lay-out van een webpagina te structureren. Denk aan een raster (grid) waarin je elementen op logische posities plaatst: headers bovenaan, footers onderaan, navigatie aan de zijkant, content in het midden… en dat alles met minimale code.Het lijkt misschien op het werken met een HTML-tabel, maar CSS Grid is veel moderner en dynamischer, geschikt voor elk schermformaat.Een grid bestaat uit rijen en kolommen. Binnen een container kun je aangeven hoeveel kolommen (en eventueel rijen) je wilt, wat hun breedte is, en welke elementen waar moeten komen.✅ Voorbeeldstructuur:

.container { display: grid; grid-template-columns: auto auto auto auto; gap: 10px; } Alle elementen binnen .container worden automatisch grid-items. Je plaatst ze door eigenschappen zoals grid-column of grid-row te gebruiken.✅ Manieren om kolommen te definiëren:grid-template-columns: 200px 250px 250px 200px; /* vaste breedtes */ grid-template-columns: auto auto auto auto; /* flexibele breedtes */ grid-template-columns: 200px auto 250px 200px; /* combinatie */ ✅ Rijen toevoegen en ruimte tussen de vakken:grid-template-rows: 100px auto 150px; gap: 20px; /* ruimte tussen cellen */ ✅ Voorbeeld met positionering:header { grid-column: 1 / span 4; } nav { grid-column: 2 / span 2; } main { grid-column: 1 / span 3; } footer { grid-column: 1 / span 2; } 📌 De volgorde waarin elementen in de HTML staan, bepaalt in welk vakje ze worden geplaatst — tenzij je dat zelf overschrijft met grid-row of grid-area.Een alternatieve en vaak visueel aantrekkelijkere manier om grids op te bouwen is via grid-template-areas.✅ Voorbeeld:.container { display: grid; grid-template-areas: "hdr hdr hdr" "nav nav nav" ". cnt cnt" ". ftr ."; } ✅ Toewijzing in de elementen:.hdr { grid-area: hdr; } .nav { grid-area: nav; } .cnt { grid-area: cnt; } .ftr { grid-area: ftr; } 📌 Regels: Elke rij in grid-template-areas moet tussen dubbele aanhalingstekens staan Gebruik . voor lege vakken Elke naam moet rechthoekig aaneengesloten zijn Area-namen moeten uniek zijn ✍️ Pro tip: gebruik afkortingen zoals .hdr, .nav, .cnt om minder te typen in zowel HTML als CSS.Het is ook mogelijk om grid-template-columns en grid-template-areas te combineren.
Tot slot nog een krachtige troef van Grid: de fr-eenheid (kort voor fractional).✅ Voorbeeld:grid-template-columns: 1fr 2fr 1fr; 💡 Hier krijgt de middelste kolom dubbel zoveel ruimte als de andere twee. De totale breedte wordt verdeeld in vier eenheden (1+2+1), waarvan kolom 1 en 3 elk 1/4 krijgen, en kolom 2 krijgt 1/2. Je laat de browser zelf berekenen hoeveel pixels de kolommen breed moeten zijn, aan de hand van de breedte van het scherm. Je bent dan dus met breuken aan het werken. Het grote voordeel is ook dat grid gaps worden meegenomen in de berekening!🚀 Dit maakt je layout schaalbaar en responsief zonder pixels of percentages te hoeven gebruiken.
✅ CSS Grid is perfect voor het bouwen van complete pagina-layouts ✅ Je maakt een grid-container met display: grid ✅ Gebruik grid-template-columns, grid-column of grid-template-areas om te positioneren ✅ Combineer met fr, auto, px, en gap voor optimale controle ✅ grid-template-areas geeft een visuele weergave van je structuur ✅ Perfect te combineren met Flexbox in componenten binnen je grid

4.4 - Flexbox

Fri, 20 Jun 2025 12:19:54 GMT

Flexbox (voluit CSS Flexible Box Layout) is een moderne manier om HTML-elementen dynamisch en responsief te positioneren, zonder gedoe met floats of vaste afmetingen. Het geeft je volledige controle over uitlijning, richting, verdeling van ruimte en herschikking van elementen, afhankelijk van de schermgrootte.Een flexbox is een container (bijvoorbeeld een

-element) waarin je meerdere elementen — de zogeheten childelementen — plaatst. Dankzij de regel display: flex verandert die container in een flexibele lay-outstructuur.✅ HTML + CSS-basis:

Box 1

Box 2

Box 3

.flex-container { display: flex; } Zodra je display: flex instelt, gaan de elementen naast elkaar staan (horizontaal, row), tenzij je aangeeft dat ze onder elkaar moeten staan (verticaal, column).Met flex-direction bepaal je in welke richting de elementen zich ordenen binnen de flex-container:✅ Voorbeeld:.flex-container { display: flex; flex-direction: row; } Zodra je meerdere elementen in een flexbox hebt, wil je bepalen hoe ze verdeeld en uitgelijnd worden. Hier komen onder andere justify-content en align-items in beeld:✅ Voorbeeld met horizontale spreiding en gecentreerde verticale uitlijning:.flex-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; } Met Flexbox kun je met weinig code automatisch responsive gedrag krijgen, bijvoorbeeld door flex-wrap: wrap toe te voegen bij kleine schermen.✅ Voorbeeld mobile-first layout:.flex-container { display: flex; flex-wrap: wrap; gap: 1rem; } Hoewel flexbox ideaal is voor componentgebaseerde layouts (zoals een knoppenrij, een kaartenrij of een navbalk), is het niet geschikt om hele pagina’s in rijen en kolommen op te bouwen.Daarvoor gebruiken we vaak een combinatie: Grid voor de globale structuur → zoals header, sidebar, main, footer Flexbox binnen elke sectie → zoals het netjes schikken van knoppen, kaarten of tabellen binnen die gebieden Hierover meer in paragraaf 4.5 – Grid.✅ Flexbox is een flexibel model om elementen responsief en efficiënt te ordenen ✅ display: flex maakt van een container een flexbox ✅ Met flex-direction, justify-content en align-items regel je de opmaak en uitlijning ✅ Flexbox = perfect voor componenten, niet voor pagina-layouts ✅ Gebruik flex-wrap en gap om je layout schoon en responsive te houden

4.3 - @Media

Fri, 20 Jun 2025 12:16:27 GMT

Om een website echt responsive te maken, is één hulpmiddel onmisbaar: media queries. Ze maken het mogelijk om CSS-regels toe te passen afhankelijk van het schermformaat, de oriëntatie of zelfs het type device. In feite zeg je met @media: “Voer deze opmaak alleen uit als aan deze voorwaarde is voldaan.”Een media query is een soort if-statement voor CSS. De browser controleert eigenschappen van het scherm (zoals breedte of hoogte), en voert alleen de CSS-code binnen de query uit als de voorwaarde 'true' is.✅ Basisvorm:@media (min-width: 600px) { body { background-color: lightgray; } } 💡 Je kunt min-width, max-width, orientation, en andere eigenschappen gebruiken.✅ Overzicht van voorwaarden:✅ Combineren van queries:@media (min-width: 600px) and (max-width: 800px) { article { width: 100%; margin: auto; } } Hieronder enkele richtlijnen voor verschillende schermgroottes, vaak gebruikt bij responsive ontwerp:/* Smartphones (≤ 480px) */ @media (max-width: 480px) { … } /* Kleine tablets en grote telefoons (≥ 600px) */ @media (min-width: 600px) { … } /* Tablets (≥ 768px) */ @media (min-width: 768px) { … } /* Laptops/desktops (≥ 992px) */ @media (min-width: 992px) { … } /* Grote desktops (≥ 1200px) */ @media (min-width: 1200px) { … } 📌 Let op: deze zijn richtlijnen, geen vaste regels. Je kunt ze aanpassen aan de noden van jouw ontwerp.Bij mobile first design begin je met de CSS-opmaak voor het kleinste schermformaat (vaak smartphones), en bouw je daarna uit met @media queries voor grotere schermen.✅ Structuur voorbeeld (mobile first):/* Basisopmaak voor kleine schermen */ body { font-size: 1rem; } /* Grotere schermen krijgen extra styling */ @media (min-width: 768px) { body { font-size: 1.25rem; } } 🚀 Voordelen: Snellere laadtijd op mobiele apparaten Meer controle over performance Gebaseerd op het toenemende mobiele gebruik Bij desktop first design is het omgekeerd: je begint met een layout voor grote schermen en werkt met @media queries naar kleinere schermformaten toe.✅ Structuur voorbeeld (desktop first):/* Basisopmaak voor desktops */ body { font-size: 1.25rem; } /* Kleinere schermen krijgen aangepaste styling */ @media (max-width: 767px) { body { font-size: 1rem; } } ⚠️ Desktop first is eenvoudiger bij projecten die standaard op grotere schermen draaien, zoals admin dashboards of intranetwebsites.✅ @media queries zijn de sleutel tot responsive design ✅ Je kunt ze gebruiken met min-width, max-width, orientation, enz. ✅ Gebruik mobile first of desktop first afhankelijk van je doelgroep ✅ Combineer meerdere queries voor verfijnde controle over layout en styling

4.2 - Viewport

Fri, 20 Jun 2025 12:14:10 GMT

De viewport is het zichtbare deel van een webpagina binnen het scherm van een gebruiker. Wat een gebruiker ziet, is dus afhankelijk van de grootte van zijn of haar scherm: een desktop heeft een grotere viewport dan een smartphone.🧠 Vroeger waren websites vaak statisch en afgestemd op slechts één schermformaat: de standaard pc-monitor. Tegenwoordig is dat ondenkbaar. Gebruikers surfen op mobiele telefoons, tablets, laptops én televisies. Responsive design moet dus adaptief zijn — en dat begint bij het begrijpen van de viewport.Met de introductie van HTML5 kwam de gamechanger: een specifieke meta-tag die de browser vertelt hoe hij de pagina moet schalen op verschillende schermen.✅ Codevoorbeeld: width=device-width → de breedte van de viewport wordt ingesteld op die van het apparaat. initial-scale=1.0 → zoomniveau is 100%, zonder automatisch in- of uitzoomen. 🚀 Zonder deze meta-tag schalen mobiele browsers je website vaak verkeerd in, waardoor alles er klein of onleesbaar uitziet.✅ Vermijd vaste afmetingen zoals width: 800px;. Werk liever met: percentages → width: 100% flexibele eenheden → em, rem, vw, vh max-width / min-width → voor schaalbare content ✅ Test je site op verschillende devices en schermgroottes → Tools zoals de developer tools in Chrome of Firefox helpen je daarbij enorm.✅ Combineer met @media queries → Die leggen voorwaarden op voor CSS afhankelijk van de schermgrootte. Hier gaan we later dieper op in.Meer handige media breakpoints vind je in dit overzicht: gist.github.com/gokulkrishh✅ De viewport bepaalt het zichtbare deel van je webpagina ✅ HTML5 introduceerde een standaard tag ✅ Gebruik flexibele eenheden i.p.v. vaste pixels ✅ Combineer met @media queries voor echte responsiviteit

4.1 - Inleiding

Fri, 20 Jun 2025 12:12:41 GMT

Responsive design is het streven naar een website die er goed uitziet op elk apparaat, ongeacht het formaat: van grote pc-schermen tot smalle smartphones en zelfs smart-tv’s.De techniek draait niet alleen om het schalen van elementen, maar soms ook om het volledig aanpassen van de layout afhankelijk van het gebruikte scherm. Denk aan menuknoppen die bij mobiel in een uitklapmenu verdwijnen of kolommen die worden gestapeld tot één scrollbare kolom.📱💻🖥️ Een goede responsive site voelt slim aan: hij past zich aan zonder dat de gebruiker zich er zorgen om hoeft te maken.✅ Toegankelijkheid → Iedereen, ongeacht schermgrootte of toestel, kan je site gebruiken. ✅ Gebruikerservaring (UX) → Navigeren zonder in- of uitzoomen. ✅ SEO-vriendelijk → Zoekmachines geven de voorkeur aan mobile-friendly sites. ✅ Efficiënt beheer → Eén website onderhouden i.p.v. aparte mobiele versies.🔧 Responsive design gaat dus verder dan alleen styling—het is ook een bouwfilosofie.Er zijn drie grote technieken om een layout responsive te maken:📌 In deze cursus focussen we op flexbox en grid, dé standaarden van vandaag. 🧠 Float werd al besproken in paragraaf 3.7, en wordt nu vooral voor specifieke toepassingen gebruikt.Wist je dat deze gedachtegang niet alleen bij websites voorkomt? Ook in programmeertalen zoals C# kun je bijvoorbeeld de UI laten aanpassen aan schermgroottes. Bij desktopapps kunnen knoppen meeschalen, componenten herschikken, of menu's worden samengevouwen, net als in HTML/CSS.Kortom, responsive denken is taalonafhankelijk en staat centraal in moderne gebruikersinterfaces.✅ Responsive design = meeschalen & aanpassen aan elk schermformaat ✅ Gebruik geen vaste pixels meer, maar werk met verhoudingen en slimme layouts ✅ Wij focussen op flexbox en grid, niet op de verouderde float-lay-outs ✅ Het principe gaat verder dan alleen web – het geldt ook in softwareontwikkeling

3.8 - Lijsten en tabellen

Fri, 20 Jun 2025 12:08:59 GMT

Hoewel lijsten en tabellen in HTML worden aangemaakt, geeft CSS je de mogelijkheid om deze op visueel aantrekkelijke manieren te stylen. In deze paragraaf behandelen we hoe je lijsten vormgeeft met opsommingstekens, afbeeldingen of posities. Tabellen komen straks in hoofdstuk 4 uitgebreider aan bod bij het onderwerp responsive layout, maar we geven hier alvast de basis mee.HTML-lijsten zoals

) Door list-style-type: none; toe te passen, kun je je eigen opsommingstekens ontwerpen of bijvoorbeeld pictogrammen toevoegen via een achtergrondafbeelding of een pseudo-element.Hiermee kun je een eigen afbeelding als opsommingsteken gebruiken.ul { list-style-image: url("../icons/bullet_circlearrow_red.gif"); } 📌 Let erop dat het pad relatief is ten opzichte van je CSS-bestand (niet je HTML-bestand).🧠 Tip: gebruik kleine, transparante PNG- of SVG-bestanden voor een nette weergave op verschillende schermen.Bepaalt of het opsommingsteken binnen of buiten het lijst-item wordt weergegeven.ul { list-style-position: outside; /* standaard */ } ul { list-style-position: inside; } outside: Bullet staat buiten de tekst, links uitgelijnd inside: Bullet staat inline met de tekst (meeschuivend bij tekstomloop) Je kunt deze eigenschappen ook combineren met de shorthand-eigenschap list-style.ul { list-style: square inside; } Hoewel tabellen worden besproken in hoofdstuk 2.10 (HTML) en geavanceerder in hoofdstuk 4.4 (CSS layout), kun je met CSS wel snel en eenvoudig de visuele weergave verbeteren:table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f4f4f4; } ✅ Handige CSS-tips voor tabellen: Gebruik border-collapse: collapse; om dubbele celranden te vermijden Pas padding toe voor luchtigere weergave Maak kolomkoppen visueel onderscheidend met background-color ✅ Gebruik list-style-type om HTML-lijsten een klassiek of creatief uiterlijk te geven ✅ Met list-style-image kun je eigen bullets instellen (denk aan icoontjes!) ✅ list-style-position beïnvloedt hoe bullets zich gedragen ten opzichte van tekst ✅ Tabellen kun je eenvoudig opfrissen met border, padding en background-color

3.7 - Position

Fri, 20 Jun 2025 12:08:20 GMT

In deze paragraaf duiken we dieper in de manier waarop individuele elementen gepositioneerd worden op een pagina. Waar display vooral iets zegt over de algemene opbouw van de flow (elementen onder of naast elkaar), bepaalt position waar het element op het scherm of binnen zijn container terechtkomt.De position-eigenschap maakt het mogelijk een element nauwkeuriger te plaatsen, met optionele coördinaten als top, right, bottom en left.✅ Overzicht van position-waarden:✅ Voorbeeld: verschil tussen relative en absolute:.relative-box { position: relative; top: 16px; left: 10px; } .absolute-box { position: absolute; top: 16px; left: 10px; } Bij relative wordt het element verplaatst vanaf zijn originele plek, maar blijft binnen de flow van het document. Bij absolute wordt het element uit de flow gehaald en exact op die plek bovenop andere elementen geplaatst. Dat vereist dus nauwkeurige controle. 🧠 Let op: een absolute element zoekt naar een ouder die óók position: relative|absolute|fixed heeft om zich tegen te positioneren. Is die er niet, dan positioneert het zich ten opzichte van .De eigenschap float wordt gebruikt om elementen naast elkaar te plaatsen en andere inhoud eromheen te laten vloeien, zoals tekst om een afbeelding.✅ Voorbeeld:img { float: left; margin-right: 10px; } Je kunt kiezen uit: left → laat het element links zweven right → laat het element rechts zweven none → haalt float weg ⚠️ Belangrijk: float werkt niet met position: absolute en kan onverwachte layout-bugs veroorzaken als je niet goed cleart.Als je wilt dat een element niet naast een gefloated element komt te staan, gebruik je clear.✅ Mogelijke waarden: none (standaard) left right both ✅ Voorbeeld:h1, h2, h3, h4 { clear: both; } Dit zorgt ervoor dat deze koppen altijd onder een zwevend element terechtkomen. Handig als je een nieuwe sectie start na een reeks afbeeldingen.Vroeger werden volledige webpagina’s opgebouwd met float, maar dat is grotendeels vervangen door modernere technieken zoals flexbox (zie volgende paragraaf) en CSS grid. Toch blijft float relevant voor bepaalde situaties, zoals:✔ Tekst laten omlopen rond een afbeelding ✔ Simpele horizontale uitlijning zonder complex grid ✔ Tweecolomsindelingen bij oudere browsers✅ Wrapperdiv aanmaken:

💡 Deze container helpt je om gefloatte elementen netjes af te sluiten binnen een blok.✅ Gebruik position om elementen relatief, absoluut of vast te plaatsen ✅ Gebruik float om elementen te laten zweven, zodat andere inhoud eromheen stroomt ✅ Gebruik clear om te bepalen waar gefloatte elementen mogen stoppen ✅ Wees voorzichtig met position: absolute, want het kan overlapping veroorzaken ✅ Moderne layout gebeurt vooral met flexbox en grid, maar float blijft handig voor detailwerk

3.6 - Display

Fri, 20 Jun 2025 12:07:52 GMT

In de vorige paragraaf hebben we gezien hoe elk HTML-element zich gedraagt als een blok binnen het boxmodel. Maar hoe deze blokken zich gedragen in de flow van de pagina — of ze naast elkaar komen, onder elkaar staan, of helemaal verdwijnen — wordt bepaald door de display-eigenschap.De displaywaarde van een element bepaalt dus hoe het wordt weergegeven in de browser.Standaard zijn HTML-elementen verdeeld in twee grote groepen:✔ Elementen verschijnen naast elkaar ✔ Geen breedte of hoogte instelbaar met CSS ✔ Alleen zo breed als de inhoud ✔ Reageert als onderdeel van de omringende tekst💡 Voorbeelden: , , , , ✔ Elementen breken automatisch naar een nieuwe regel ✔ Wel breedte en hoogte instelbaar ✔ Strekken zich standaard uit over de volledige breedte van de oudercontainer💡 Voorbeelden:
,
,
t/m
,
,
Met display kun je het weergavemodel handmatig aanpassen, ongeacht het standaardgedrag van een element.✅ Overzicht van veelgebruikte display-waarden:📌 Voorbeeld – blok van inline naar block:a { display: block; padding: 10px; background-color: lightblue; } 📌 Voorbeeld – inline-block:button { display: inline-block; width: 120px; height: 40px; } 💡 Handig als je knoppen, afbeeldingen of korte elementen in een rij wilt zetten, maar toch controle nodig hebt over afmetingen.Deze zijn belangrijk bij moderne layout-technieken (zoals responsive design), maar vereisen extra configuratie. display: flex → Richt child-elementen horizontaal of verticaal uit display: grid → Bouwt een raster waarin je child-elementen kunt indelen op rijen en kolommen 📌 Wordt uitgebreid behandeld in hoofdstuk 4!Meer displaywaarden ontdekken? Bekijk de volledige lijst op W3Schools - CSS display property✅ display bepaalt hoe een element zich gedraagt in de layout-flow ✅ Gebruik block voor volledige controle, inline-block voor flexibele combinaties ✅ Gebruik none om elementen te verbergen zonder ze te verwijderen ✅ flex en grid vormen de kern van modern layout design

3.5 - Padding, margin en border

Fri, 20 Jun 2025 12:07:12 GMT
Nu we weten hoe we tekst en achtergronden kunnen stylen, zoomen we in op een cruciaal onderdeel van CSS: het boxmodel. Elk HTML-element wordt weergegeven als een rechthoekig blok, ook al zie je het niet. CSS geeft je controle over hoeveel ruimte dat blok inneemt — van binnenuit tot ver daarbuiten.Een element bestaat in CSS uit vier lagen van binnen naar buiten:[ margin ] [ border ] [ padding ] [ content ] De volledige grootte van een element wordt dus bepaald door:Totale breedte = width + padding + border + margin Totale hoogte = height + padding + border + margin💡 In moderne browsers zoals Edge en Chrome, en in IDE’s zoals PhpStorm kun je het boxmodel live bekijken via de developer tools!Met width en height bepaal je de inhoudsgrootte van een blok (de "content box").✅ Voorbeeld:header { width: 400px; height: 75px; } Je kunt ook werken met minimale of maximale afmetingen:header { min-width: 300px; max-height: 100px; } 💡 Gebruik min- en max- eigenschappen om responsief gedrag te bevorderen.Padding is de ruimte tussen de inhoud en de rand van het element (de border).✅ Voorbeeld:.foto { padding-right: 5px; padding-bottom: 10px; } #album { padding: 12px; /* rondom evenveel ruimte */ } Padding zorgt ervoor dat je content wat ademruimte krijgt. Je kunt per zijde instellen: padding-top, padding-right, padding-bottom, padding-left of shorthand:padding: 10px 20px 30px 40px; /* top, right, bottom, left */ Een border is een zichtbare lijn rond een element. Je kunt de dikte, stijl en kleur instellen:✅ Voorbeeld:.nav { border-width: 5px; border-style: dashed; border-color: aqua; } Of gebruik shorthand:.nav { border: 5px dashed aqua; } 🧠 Tip: om randstijlen in tabellen aan te passen, gebruik border-collapse: collapse;.Margin is de lege ruimte buiten het element, richting de omliggende blokken. Het is standaard transparant en beïnvloedt de afstand tussen elementen.✅ Voorbeeld:.container { margin-top: 25px; margin-bottom: 30%; } #foto { margin: 10px; /* rondom */ } En ja — marges kunnen ook negatief zijn:article p { margin-bottom: -50px; } 🚨 Dit laat elementen overlappen! Handig voor visuele effecten, maar gebruik met voorzichtigheid.✅ width en height – bepalen de inhoudsafmetingen ✅ padding – ruimte tussen inhoud en border ✅ border – zichtbare rand (dikte, stijl, kleur) ✅ margin – ruimte buiten het element, richting de omgevingSamen vormen ze het boxmodel — een essentieel fundament voor layoutcontrole in CSS.

3.4 - Achtergronden

Fri, 20 Jun 2025 12:05:57 GMT
In deze paragraaf leer je hoe je met CSS achtergrondkleuren, kleurverlopen en afbeeldingen toevoegt aan HTML-elementen. Of je nu een eenvoudige effen kleur wilt instellen of een complexe afbeelding op de achtergrond wilt gebruiken—CSS biedt alle tools!Met de eigenschap background-color kun je de achtergrond van een element van een kleur voorzien:✅ Voorbeelden:body { background-color: red; } section { background-color: #ff0000; } h1 { background-color: rgb(0, 128, 255); } Je kunt kleuren op drie manieren specificeren: met een kleurnaam: red, blue, orange met een hexcode: #ff0000 met een RGB-waarde: rgb(255, 255, 255) 💡 Voor meer kleurinspiratie zie CSS3 Color NamesEen gradient is een geleidelijke overgang tussen twee of meer kleuren. Een lineair gradient loopt in een rechte lijn.✅ Voorbeelden:body { background: linear-gradient(to right, black, white); } header { background: linear-gradient(135deg, black, orange, yellow 75%); } section { background: linear-gradient(to right, #B5FFCC 15px, black 15px); } 🎯 Richtingen kun je aangeven in woorden of graden: to right (90deg) to bottom (180deg) to top left (315deg) 45deg, 135deg, etc. Je kunt ook percentages of stops toevoegen om het kleurverloop te beïnvloeden.Een radial gradient straalt uit vanaf een middelpunt zoals een cirkel of ovaal.✅ Voorbeelden:body { background: radial-gradient(circle, white, black); } main { background: radial-gradient(circle at top left, green, orange); } footer { background: radial-gradient(farthest-side circle at right bottom, black, red); } 🔍 Je kunt de vorm (circle of ellipse) aanpassen, evenals de locatie van het middelpunt (at center, at top left, enz.).Voor het instellen van een afbeelding als achtergrond gebruik je o.a. background of background-image.✅ Voorbeeld:body { background: #B5FFCC url(../images/oceaan.png); } 📌 Belangrijk: het pad naar de afbeelding is relatief t.o.v. het CSS-bestand (niet het HTML-bestand!).✅ Voorbeeld met meerdere instellingen:body { background: url(../images/oceaan.png) no-repeat center center fixed; background-size: cover; } ✅ Gebruik background-color voor een effen kleur. ✅ Gebruik linear-gradient of radial-gradient voor kleurverlopen. ✅ Gebruik background-image voor afbeeldingen op de achtergrond. ✅ Combineer met repeat, position, attachment en size voor volledige controle. ✅ Let altijd op het correcte pad t.o.v. je CSS-bestand!

3.3 - Tekst

Fri, 20 Jun 2025 12:05:29 GMT
In deze paragraaf gaan we bekijken hoe je met CSS tekst kunt opmaken en manipuleren. Denk hierbij aan het bepalen van lettertype, grootte, kleur, uitlijning en meer. Je leert hoe je met CSS een unieke typografische stijl geeft aan je website.✅ In CSS kun je tekst targeten op basis van het HTML-element of met klassen en ID’s.✅ Voorbeeld:h1 { font-size: 36px; text-align: center; } .intro { font-style: italic; color: gray; } #hoofdtitel { text-transform: uppercase; letter-spacing: 2px; } Hieronder een overzicht van veelgebruikte CSS-properties voor tekst:✅ Voorbeeld: opmaak voor alinea's in een artikel.article p { font-family: Georgia, serif; font-size: 1.1rem; line-height: 1.7; color: #444; text-align: justify; } ✅ Voorbeeld: titels in hoofdletters, vetgedrukt en gecentreerdh2 { text-transform: uppercase; font-weight: bold; text-align: center; letter-spacing: 1px; } ✅ Met CSS kun je de volledige opmaak van tekst naar jouw hand zetten. ✅ Gebruik selectors om elementen (zoals h1, .class, #id) te targeten. ✅ Teksteigenschappen zoals font-family, font-size, color en text-align geven je volledige controle over de uitstraling. ✅ Maak gebruik van relatieve eenheden (zoals em en rem) voor flexibele schaalbaarheid.

3.1 - Inleiding

Fri, 20 Jun 2025 12:00:08 GMT
In dit hoofdstuk gaan we onze HTML-pagina’s voorzien van opmaak met CSS (Cascading Style Sheets). CSS is dé taal voor het opmaken van websites en vormt samen met HTML en JavaScript de heilige drie-eenheid van webontwikkeling.🚀 Wat leer je in dit hoofdstuk? ✔ De basis en syntaxis van CSS ✔ Verschillende manieren om CSS toe te passen ✔ Waarom CSS essentieel is voor moderne websitesCSS staat voor Cascading Style Sheets. Het is een taal waarmee je de presentatie en opmaak van een HTML-document kunt bepalen. Waar HTML zich richt op de structuur en inhoud, zorgt CSS voor de vormgeving en stijl.✅ CSS wordt gebruikt voor: ✔ Kleuren, achtergronden, lettertypes ✔ Marges, ruimte, lijnen, schaduwen ✔ Layouts, grids, responsiviteit ✔ Dynamische overgangen en animaties🧠 Let op: CSS werkt nooit op zichzelf → Het wordt altijd gebruikt in combinatie met HTML.✔ Scheiding van inhoud en opmaak → HTML voor structuur, CSS voor stijl ✔ Betere prestaties → Kleiner bestand, snellere laadtijden ✔ Toegankelijkheid en vindbaarheid → Beter voor SEO en screenreaders ✔ Flexibiliteit → Eén stylesheet kan meerdere pagina’s aansturen🔥 In modern webdesign is CSS niet optioneel, maar onmisbaar!✅ CSS2.1 → Wordt volledig ondersteund door alle moderne browsers. ✅ CSS3 → Standaard in moderne webontwikkeling. Onderverdeeld in modules zoals flexbox, grid, animations, transitions, enz.💡 Browsers blijven evolueren, en CSS groeit mee. De meeste nieuwe features vallen onder CSS3.Je kunt CSS op drie manieren gebruiken binnen een HTML-document:CSS wordt als attribuut toegevoegd aan een HTML-element.
Deze tekst is rood.
❌ Niet aangeraden → Rommelig, moeilijk onderhoudbaar. Alleen gebruiken voor tests of uitzonderingen.CSS wordt tussen de ✅ Handig bij kleine projecten of prototypes.CSS wordt in een apart .css-bestand geschreven en gekoppeld via in de van je HTML. ✅ Beste en meest gebruikte methode. ✔ Houdt HTML en CSS gescheiden ✔ Maakt hergebruik en onderhoud eenvoudiger✅ CSS = opmaaktaal voor webpagina’s ✅ CSS3 is de moderne standaard ✅ Gebruik bij voorkeur externe stylesheets voor overzicht en herbruikbaarheid ✅ Inline CSS vermijden waar mogelijk

3.2 - Syntaxis

Fri, 20 Jun 2025 11:59:45 GMT
In deze paragraaf leer je hoe CSS-code is opgebouwd: van selectors tot eigenschappen en waarden. CSS volgt altijd een duidelijke en gestructureerde syntaxis, waardoor je code leesbaar, onderhoudbaar én krachtig blijft.CSS-regels bestaan altijd uit drie onderdelen:✅ Algemene syntaxis:selector { eigenschap: waarde; eigenschap: waarde; } ✅ Voorbeeld:h1 { text-align: center; font-size: 24px; color: darkblue; } CSS werkt met eenheden om lengtes, afmetingen en groottes te definiëren. Deze kunnen absoluut of relatief zijn.✅ Voorbeelden:h1 { font-size: 48px; } /* Absoluut */ p { font-size: 150%; } /* Relatief tov parent */ p { font-size: 2em; } /* 2 × font-size van parent */ p { font-size: 1.5rem; } /* 1.5 × root-font-size (meestal 16px) */ 🚀 Wanneer gebruik je wat? px → Snelle, vaste styling em / rem → Voor schaalbare, toegankelijke lay-outs % → Voor flexibele breedtes/hoogtes van elementen Een pseudoklasse beschrijft een specifieke toestand van een element, zoals wanneer je muis over een link zweeft.✅ Syntaxis:selector:pseudoklasse { eigenschap: waarde; } ✅ Veelgebruikte pseudoklassen voor links:a:link { color: green; /* Niet-bezochte link */ } a:visited { color: gray; /* Bezochte link */ } a:hover { color: red; /* Wanneer muis over link gaat */ } a:active { color: orange; /* Op het moment van klikken */ } ✅ Overige nuttige pseudoklassen: :focus – wanneer een element de focus heeft (bijv. een inputveld) :nth-child(n) – stijl het n-de kind van een ouder tr:nth-child(even) { background-color: #f2f2f2; } p:nth-child(2) { font-style: italic; } Meer over pseudoklassen: Pseudoklassen – W3Schools Pseudo-elementen – W3Schools ✅ CSS gebruikt selectors, eigenschappen en waarden voor styling. ✅ Je kunt absolute (px) of relatieve (%, em, rem) eenheden gebruiken. ✅ Pseudoklassen passen stijl toe op specifieke toestanden van een element. ✅ Gebruik een moderne code-editor voor slimme suggesties en minder fouten.

2.12 - Div - basis

Fri, 20 Jun 2025 11:56:55 GMT
Het
-element is een veelzijdig container-element in HTML waarmee je delen van een webpagina kunt groeperen en structureren. Het wordt vaak gebruikt in combinatie met CSS om lay-outs en stijlen te beheren.🚀 Waarom een
gebruiken? ✔ Groeperen van elementen → Maakt het makkelijker om secties te organiseren. ✔ Styling met CSS → Je kunt een class of id toewijzen voor specifieke stijlen. ✔ Handig voor complexe lay-outs →
helpt bij het indelen van webpagina's.Een
werkt als een container voor andere HTML-elementen.✅ Voorbeeld:

Schaatsvereniging "De Sneeuwmannen"

"De Sneeuwmannen is een schaatsclub in Antwerpen die ook skeeler- en skatelessen organiseert."

Gegevens

Naam

De Sneeuwmannen

Sport

Schaatsen

Locatie

Antwerpen

🚀 Hier wordt een sectie met informatie gegroepeerd binnen een
!Door een
een class of id te geven, kun je unieke stijlen toepassen in CSS.✅ Voorbeeld met CSS:

Schaatsvereniging "De Sneeuwmannen"

.sportvereniging { background-color: lightblue; padding: 10px; border: 2px solid darkblue; } 🚀 Voordelen van CSS-styling: ✔ Maakt tekst of secties beter zichtbaar. ✔ Maakt aangepaste lay-outs en kleuren mogelijk. ✔ Maakt het beheer van webpagina's eenvoudiger.
en zijn beide containers, maar hebben verschillende toepassingen:🚀 Gebruik
voor complete secties en voor kleine wijzigingen binnen tekst!✅ Het
-element is een container voor het groeperen van HTML-elementen. ✅ Het kan worden gestyled met een class of id in CSS. ✅ Gebruik
voor secties en voor inline tekstwijzigingen.

2.11 - Forms

Fri, 20 Jun 2025 11:56:18 GMT
Forms (formulieren) maken het mogelijk om gebruikersgegevens te verzamelen op een webpagina. Denk aan een contactformulier, registratieformulier, loginpagina of een zoekbalk.🚀 Waarom forms gebruiken in HTML? ✔ Interactie met gebruikers → Gebruikers kunnen gegevens invoeren en verzenden. ✔ Essentieel voor webapplicaties → Loginsystemen, registraties en zoekbalken. ✔ Kan worden verwerkt met PHP of JavaScript → Data opslaan of verzenden naar een server.Een formulier begint altijd met het
-element, waarin je formulieren en invoervelden plaatst.✅ Basisstructuur: ✔ Alle invoervelden, labels en knoppen komen binnen
te staan.Binnen een formulier zijn labels en inputvelden essentieel voor de gebruikerservaring.✅ Voorbeeld van een eenvoudig formulier: Voornaam
Achternaam 🚀 Waarom labels gebruiken? ✔ Verbetert toegankelijkheid → Gebruikers en screenreaders weten welk veld waarvoor dient. ✔ Moet altijd gekoppeld worden met het for-attribuut → Bijvoorbeeld for="voornaam" gekoppeld aan id="voornaam".Een formulier kan verschillende inputtypes bevatten, afhankelijk van het doel.✅ Veelgebruikte inputtypes:🚀 Gebruik het juiste inputtype om de gebruikservaring te verbeteren!Meer uitleg over inputtypes vind je op W3Schools.✅ Forms verzamelen gebruikersgegevens op een website. ✅ Gebruik
als basis en inputvelden zoals . ✅ Gebruik labels () voor duidelijke beschrijvingen. ✅ Er zijn verschillende inputtypes zoals text, email, password en checkbox.

2.10 - Tabellen

Fri, 20 Jun 2025 11:53:52 GMT
Tabellen maken het mogelijk om gegevens overzichtelijk weer te geven in rijen en kolommen. Net als in Microsoft Word, kun je met HTML tabellen maken om tekst, cijfers, afbeeldingen en andere informatie te structureren.🚀 Waarom tabellen gebruiken in HTML? ✔ Voor gestructureerde gegevens zoals prijzen, agenda’s of statistieken. ✔ Voor een overzichtelijke weergave van complexe informatie. ✔ Niet meer aanbevolen voor lay-outs → Gebruik hiervoor CSS.Een tabel wordt gemaakt met het

-element, waarin je rijen () en cellen (

) plaatst.✅ Basisstructuur:

Kolom 1	Kolom 2	Kolom 3
Rij 1, Cel 1	Rij 1, Cel 2	Rij 1, Cel 3
Rij 2, Cel 1	Rij 2, Cel 2	Rij 2, Cel 3

🚀 Belangrijke tabel-elementen: ✔ → Start en einde van een tabel. ✔ → Een nieuwe rij in de tabel. ✔ ) en cellen (

→ Een datacel (standaard inhoud). ✔

→ Een titelcel (vaak vetgedrukt en gecentreerd).Soms wil je cellen samenvoegen zodat ze meerdere kolommen of rijen beslaan. Hiervoor gebruik je colspan en rowspan.✅ Voorbeeld met colspan (samengevoegde kolommen):

Titel over 2 kolommen		Kolom 3
Cel 1	Cel 2	Cel 3

✅ Voorbeeld met rowspan (samengevoegde rijen):

Categorie	Subcategorie 1	Subcategorie 2
Categorie	Detail 1	Detail 2

🚀 Hierdoor kunnen tabellen complexere informatie weergeven op een overzichtelijke manier!Tabellen kunnen met CSS worden gestyled om een unieke uitstraling te krijgen.✅ Voorbeeld van een CSS-opgemaakte tabel:

Naam	Leeftijd	Land
Maria	25	Nederland
John	30	België

🚀 CSS-opties voor tabellen: ✔ border-collapse: collapse; → Zorgt ervoor dat celranden niet dubbel worden weergegeven. ✔ padding en text-align → Verbeteren de leesbaarheid. ✔ background-color → Kleurt de headercellen.✅ Tabellen bestaan uit rijen (

). ✅ Gebruik colspan en rowspan om cellen samen te voegen. ✅ Gebruik CSS voor een betere opmaak en leesbaarheid van tabellen.

2.9 - Afbeeldingen

Fri, 20 Jun 2025 11:53:13 GMT

Afbeeldingen maken een website visueel aantrekkelijk en helpen bij het overbrengen van informatie. Het toevoegen van een afbeelding in HTML is eenvoudig en gebeurt met het -element.✅ Waarom afbeeldingen gebruiken in HTML? ✔ Verhoogt de visuele aantrekkelijkheid van een website → Websites zonder afbeeldingen voelen kaal aan. ✔ Kan informatie verduidelijken → Grafieken, diagrammen en pictogrammen helpen de gebruiker. ✔ Kan als hyperlink fungeren → Klikbare afbeeldingen voor navigatie.🚀 HTML-afbeeldingen verbeteren de gebruikerservaring!Een afbeelding wordt toegevoegd met het -element, dat geen sluitingstag heeft.✅ Basisstructuur: ✔ src="..." → Staat voor source, het pad naar de afbeelding. ✔ alt="..." → Staat voor alternative text, weergegeven als de afbeelding niet geladen wordt.🚀 Afbeeldingen moeten altijd een alt-attribuut hebben voor toegankelijkheid!Afbeeldingen bestaan in verschillende bestandsformaten, elk met unieke eigenschappen.✅ Bitmap-afbeeldingen → Gebouwd uit pixels, geschikt voor foto’s. ✅ Vector-afbeeldingen → Opgebouwd uit wiskundige berekeningen, goed voor logo’s en iconen.🚀 Vergelijking van veelgebruikte bitmap-formaten:Afbeeldingen kunnen worden gebruikt als klikbare links door ze in een -element te plaatsen.✅ Voorbeeld: 🚀 Hier wordt de afbeelding een klikbaar element!Een favicon is een klein pictogram dat wordt weergegeven in het tabblad van een browser.✅ Favicon toevoegen in HTML: ✔ Meest gebruikte formaten: .ico, .png. ✔ Plaats de -tag in de van de pagina.🚀 Een favicon geeft een website een herkenbaar visueel element in de browser!✅ Gebruik het -element met src en alt om afbeeldingen toe te voegen. ✅ JPG, PNG en GIF zijn de meest gebruikte bitmapformaten. ✅ Afbeeldingen kunnen als hyperlink gebruikt worden met . ✅ Een favicon kan worden toegevoegd aan een webpagina met .

2.8 - Links

Fri, 20 Jun 2025 11:52:45 GMT

Links (hyperlinks) maken een website interactief en verbinden webpagina’s met elkaar. Wanneer een gebruiker op een link klikt, wordt hij doorgestuurd naar een andere pagina, bestand, afbeelding, video of een extern document.🚀 Links kunnen verwijzen naar: ✔ Andere pagina’s binnen dezelfde website ✔ Externe websites ✔ Specifieke inhoud op dezelfde pagina ✔ Documentrelaties zoals een stylesheet of inhoudsopgaveHet gebruik van hyperlinks vereist het -element (anchor) en het href-attribuut.✅ Basisstructuur:Bezoek deze website ✔ → Staat voor anchor (anker), het element dat de link creëert. ✔ href="..." → Staat voor Hypertext Reference, het adres van de link.🚀 Dit zorgt ervoor dat gebruikers met één klik naar een nieuwe pagina gaan!Wanneer je wilt linken naar een andere pagina op je eigen website, gebruik je een relatief pad.✅ Voorbeeld van lokale links:Ga naar Pagina 1 Ga naar Pagina 2 (bovenliggende map) Ga naar Pagina 3 (rootmap) ✔ Plaats een bestand in de juiste map → Bijvoorbeeld /inhoud/pagina3.html. ✔ Gebruik relatieve paden → Dit voorkomt problemen bij het verplaatsen van je website. ✔ Gebruik commentaar in je code () → Dit helpt bij documentatie.Een externe link verwijst naar een pagina buiten je eigen website. Hiervoor moet je een volledig pad (absolute URL) gebruiken.✅ Voorbeeld van een externe link:Bezoek Wikipedia Google Zoekresultaten ✔ Vermeld de volledige URL inclusief https:// of http://. ✔ Voeg een titel toe voor een beschrijving:Wikipedia ✔ Externe links openen vaak in een nieuw tabblad → Gebruik target="_blank" als je dat wilt.Met het id-attribuut kun je snel naar een specifieke sectie op dezelfde pagina navigeren.✅ Voorbeeld van een id-link:

Spring naar de inhoud

Een lange inleiding...

Dit is de inhoud van de pagina.

🚀 Zo werkt het: ✔ id="inhoud" → Markeert een specifiek element. ✔ href="#inhoud" → Verwijst naar dat specifieke element.Naast standaard hyperlinks kun je documentrelaties definiëren met het -element. Dit wordt vaak gebruikt in de -sectie van een pagina.✅ Voorbeeld van documentrelaties: 🚀 Documentrelaties geven structuur aan je website: ✔ rel="stylesheet" → Linkt naar een CSS-bestand voor opmaak. ✔ rel="next" en rel="prev" → Navigatie tussen pagina’s. ✔ rel="alternate" → Alternatieve versies van een pagina (zoals een printversie).✅ Gebruik het -element met href om links te maken. ✅ Gebruik relatieve paden voor lokale links en absolute paden voor externe links. ✅ Gebruik het id-attribuut om naar specifieke secties op een pagina te springen. ✅ Gebruik in de -sectie voor documentrelaties zoals stylesheets en navigatie.

2.7 - Paden

Fri, 20 Jun 2025 11:52:08 GMT

Wanneer je in HTML verwijst naar webpagina’s, bestanden of afbeeldingen, gebruik je een pad. Dit pad is het adres dat bepaalt waar een bestand zich bevindt. Er zijn twee soorten paden:✅ Absolute paden → De volledige URL naar een bestand. ✅ Relatieve paden → De locatie van een bestand ten opzichte van je huidige webpagina.🚀 Relatieve paden zijn vaak de beste keuze voor websites en applicaties!Een absoluut pad bevat het volledige, exacte adres van een bestand op een website.✅ Voorbeeld van een absoluut pad: 🚀 Regels voor absolute paden: ✔ Bevat het volledige domein → Inclusief http:// of https://. ✔ Werkt altijd, ongeacht de pagina waarop het wordt gebruikt. ✔ Niet ideaal voor websites die later worden verplaatst → Als de URL verandert, werken de links niet meer.Een relatief pad verwijst naar een bestand ten opzichte van de huidige webpagina.✅ Voorbeeld van een relatief pad: 🚀 Regels voor relatieve paden: ✔ Veel flexibeler dan absolute paden → Werkt zonder volledige URL. ✔ Ideaal voor websites die later worden verplaatst → Geen URL-wijzigingen nodig. ✔ Gaat uit van de locatie van het HTML-bestand → Je moet weten waar je bestanden zich bevinden.Relatieve paden laten je door mappen navigeren zonder het volledige adres te gebruiken.✅ Voorbeelden van padstructuren:🚀 Met relatieve paden blijft je website flexibel en eenvoudig te beheren!✅ Drie manieren om naar dezelfde bestanden te verwijzen:🚀 Voor de meeste websites zijn relatieve paden de beste keuze!✅ Absolute paden geven de volledige URL van een bestand weer en werken altijd. ✅ Relatieve paden zijn flexibeler en worden meestal gebruikt in webontwikkeling. ✅ Je kunt navigeren door mappen met relatieve paden, zoals ../ en /. ✅ Gebruik relatieve paden om websites beter beheersbaar te houden.

2.6 - Lijsten

Fri, 20 Jun 2025 11:51:05 GMT

Net als in Microsoft Word kun je in HTML lijsten maken om gegevens overzichtelijk weer te geven. Er bestaan geordende lijsten (genummerd) en ongeordende lijsten (met bullets).✅ Waarom lijsten gebruiken in HTML? ✔ Maakt informatie overzichtelijk → Helpt bij gestructureerde content. ✔ Kan met CSS worden gestyled → Vormgeving van opsommingstekens, kleuren en marges. ✔ Wordt gebruikt in menu’s en navigatie → Bijvoorbeeld

) → Elk item binnen een lijst.🚀 Elk lijstitem wordt altijd binnen
geplaatst!Een geordende lijst wordt gebruikt wanneer de volgorde van de items belangrijk is.✅ Voorbeeld van een genummerde lijst:
1. Eerste stap
2. Tweede stap
3. Derde stap
🚀 Standaard markering: ✔ Nummers (1, 2, 3…) → Automatisch toegewezen. ✔ Kan worden aangepast met attributen: reversed → Keert de volgorde om. start="5" → Begint bij nummer 5. type="A" → Hoofdletters (A, B, C…). ✅ Voorbeeld van een geordende lijst met attributen:
1. Item 3
2. Item 2
3. Item 1
Een ongeordende lijst wordt gebruikt wanneer de volgorde niet belangrijk is.✅ Voorbeeld van een lijst met bullets:
- Item A
- Item B
- Item C
🚀 Standaard markering: ✔ Bullets (•) → Standaard voor

2.5 - Tekst structureren

Fri, 20 Jun 2025 11:50:34 GMT

Binnen HTML kun je tekst structureren op een manier die vergelijkbaar is met het verwerken van tekst in Microsoft Word. Je kunt werken met koppen, titels, alinea’s, quotes en verwijzingen, zodat je tekst leesbaar en overzichtelijk blijft.✅ Waarom is tekst structureren belangrijk? ✔ Maakt een webpagina beter leesbaar → Gebruikers kunnen snel informatie vinden. ✔ Optimaliseert zoekmachine-indexering (SEO) → Koppen en gestructureerde tekst helpen zoekmachines. ✔ Maakt webdesign overzichtelijker → CSS kan stijl toepassen op gestructureerde elementen.🚀 Een goed gestructureerde tekst verhoogt de gebruiksvriendelijkheid van je website!Koppen (headings) zorgen ervoor dat een webpagina een duidelijke hiërarchie krijgt.✅ Voorbeeld van koppen:

Hoofdtitel van de pagina

Subtitel of belangrijk hoofdstuk

Een subsectie

Kleinere onderverdeling

Specifieke details

Kleinste kopniveau

🚀 Regels voor koppen: ✔ Gebruik slechts één

per pagina (belangrijk voor SEO). ✔ Spring niet over niveaus → Van

naar

zonder

is niet correct. ✔ Koppen kunnen met CSS worden gestyled (grootte, kleur, lettertype).Een paragraaf maakt tekst overzichtelijk en gestructureerd.✅ Voorbeeld van alinea's:
Dit is een eerste alinea.

Dit is een tweede alinea.

Dit is een derde alinea.
🚀 Regels voor alinea's: ✔ Gebruik
voor langere tekstblokken → Niet voor losse woorden. ✔ Standaard voegt HTML witruimte toe tussen alinea’s → Dit kan met CSS worden aangepast. ✔ Gebruik nooit
voor complete alinea's → Gebruik daarvoor
.Met kun je specifieke stukjes tekst apart markeren.✅ Voorbeeld van gebruik:
"Tot ziens" is in het Duits "Auf Wiedersehen".
🚀 Regels voor : ✔ Gebruik voor inline aanpassingen → Bijvoorbeeld kleurwijzigingen met CSS. ✔ Voeg attributen toe → Bijvoorbeeld lang="de" voor taalinstellingen. ✔ Gebruik niet om hele secties te markeren → Gebruik
voor grotere blokken.De
-tag zorgt voor een harde regelafbreking.✅ Voorbeeld van
gebruik:Dit is een eerste regel.
Dit is een tweede regel. 🚀 Regels voor
: ✔ Gebruik
alleen als een harde enter echt nodig is. ✔ Gebruik geen
voor complete alinea’s → Gebruik daarvoor
. ✔ Niet aanbevolen voor opmaak → CSS kan beter regelafstand beheren.Gebruik om een verwijzing naar een film, boek, website of ander creatief werk te maken.✅ Voorbeeld van gebruik:We hebben de film The Matrix gezien. 🚀 Regels voor : ✔ Gebruik niet voor normale citaten → Gebruik daarvoor of
. ✔ Kan gestyled worden met CSS → Bijvoorbeeld cursief weergeven.Gebruik en
om citaten en quotes correct weer te geven.✅ Voorbeeld van korte quotes ()Dit is een quote van een bekende schrijver. 🚀 Regels voor : ✔ Wordt automatisch weergegeven tussen aanhalingstekens. ✔ Geschikt voor korte citaten → Gebruik
voor langere citaten.✅ Voorbeeld van blokquotes (
)

Hallo Wereld!
Hulk Hogan
🚀 Regels voor
: ✔ Gebruik
voor langere citaten. ✔ Gebruik het cite="..." attribuut om de bron aan te geven. ✔ Voeg een toe om de auteur te markeren.✅ Gebruik koppen (
–
) om tekst te structureren. ✅ Gebruik
voor alinea’s en voor kleine inline wijzigingen. ✅ Gebruik
alleen als een harde enter nodig is. ✅ Gebruik voor verwijzingen naar boeken, films, muziek en andere werken. ✅ Gebruik voor korte quotes en
voor langere citaten.

2.4 - Attributen

Fri, 20 Jun 2025 11:48:26 GMT

In HTML kunnen attributen worden toegevoegd aan tags om extra informatie en functionaliteit aan een element te geven. Attributen beïnvloeden hoe een element werkt en hoe het wordt weergegeven in de browser.✅ Waarom zijn HTML-attributen belangrijk? ✔ Voegen extra eigenschappen toe aan elementen → Bijvoorbeeld kleuren, afmetingen of links. ✔ Bepalen gedrag van een element → Bijvoorbeeld of een formulier verplicht is. ✔ Verbeteren toegankelijkheid en functionaliteit → Bijvoorbeeld door alternatieve tekst voor afbeeldingen.🚀 Attributen maken HTML flexibeler en krachtiger!Een attribuut bestaat altijd uit een naam en een waarde. De waarde wordt tussen dubbele of enkele aanhalingstekens geplaatst.✅ Voorbeeld van een HTML-element met een attribuut:

Dit is een alinea met een attribuut.

✔ class="intro" → Dit attribuut geeft de paragraaf een CSS-klasse, zodat we de stijl kunnen aanpassen.✅ Belangrijke attributen die vaak worden gebruikt:🚀 Door attributen te gebruiken, kunnen we HTML-elementen aanpassen en verbeteren!✅ HTML-attributen voegen eigenschappen en functionaliteit toe aan elementen. ✅ Een attribuut bestaat uit een naam en een waarde tussen aanhalingstekens. ✅ Veelgebruikte attributen zijn id, class, src, href en alt.

2.3 - Elementen en tags

Fri, 20 Jun 2025 11:47:17 GMT

In HTML werken we met elementen en tags om de structuur en inhoud van een webpagina te bepalen. Hoewel de termen vaak door elkaar gebruikt worden, is er een belangrijk verschil. Een tag is een instructie in HTML, terwijl een element de combinatie is van een tag en de inhoud die erbij hoort.✅ Wat is een tag? ✔ Een HTML-tag is een code-onderdeel dat aangeeft wat een stuk inhoud doet op een webpagina. Bijvoorbeeld

,
of . ✔ Tags beginnen altijd met een kleiner-dan teken < en eindigen met een groter-dan teken >. ✔ Sommige tags hebben een openings- en sluitingstag, zoals
...
. Andere tags staan op zichzelf, zoals
.✅ Wat is een element? ✔ Een HTML-element is een tag met inhoud, en soms attributen:
Dit is een paragraaf met een attribuut.
✔ Hier bestaat het element uit: De openingstag:
De inhoud: Dit is een paragraaf met een attribuut. De sluitingstag:
🚀 HTML-elementen vormen de bouwstenen van een webpagina!✅ Een tag is een los HTML-onderdeel dat aangeeft wat er gebeurt. ✅ Een element bevat een tag én de inhoud binnen die tag.🚀 Elementen bevatten meer informatie en structuur dan losse tags!Een element kan bestaan uit: ✔ Een openingstag → Bijvoorbeeld
voor een paragraaf. ✔ Inhoud → De tekst, afbeelding of data die bij het element hoort. ✔ Een sluitingstag → Bijvoorbeeld
.✅ Voorbeeld van een volledig HTML-element:
Dit is een voorbeeld van een HTML-element.
🚀 Hier heeft het
-element een attribuut (class="intro") dat later in CSS kan worden gebruikt.✅ HTML bestaat uit verschillende soorten elementen:🚀 Deze elementen vormen de basis van vrijwel elke webpagina!Meer uitleg over veelgebruikte HTML-elementen vind je op W3Schools.Naast de standaard elementen zijn er speciale elementen die unieke functionaliteiten hebben:✅ Lege elementen (self-closing tags) ✔ Sommige HTML-tags hebben geen inhoud en geen aparte sluitingstag. Bijvoorbeeld:

✅ Semantische elementen ✔ HTML5 introduceerde semantische elementen die de betekenis van content verduidelijken:
Nieuwsbericht

Menu-items

Copyright 2025
🚀 Deze tags maken de structuur van een webpagina logischer en toegankelijker!✅ Een tag is een HTML-label, een element bevat zowel een tag als inhoud. ✅ HTML-elementen vormen de bouwstenen van een webpagina. ✅ Er zijn verschillende soorten HTML-elementen, zoals koppen, alinea's, links en formulieren. ✅ Lege elementen, zoals
en , hebben geen sluitingstag. ✅ Semantische HTML-elementen helpen bij het structureren van webpagina’s.

2.1 - Inleiding

Fri, 20 Jun 2025 11:43:26 GMT

Nu we hebben gekeken naar de geschiedenis en achtergrond van HTML, is het tijd om zelf aan de slag te gaan. In dit hoofdstuk gaan we stap voor stap een website opbouwen:✅ Eerst HTML → De basisstructuur van een webpagina. ✅ Dan CSS → Voor styling en lay-out. ✅ Vervolgens JavaScript → Voor interactie en dynamiek. ✅ Ten slotte PHP → Voor databasekoppelingen en server-side functionaliteit.🚀 Het einddoel: Een website die eerst statisch is en vervolgens interactief en dynamisch wordt!Hoewel moderne websites vaak gebruik maken van frameworks zoals Bootstrap of WordPress, blijft HTML de basis van elke webpagina.✅ Waarom HTML nog steeds belangrijk is? ✔ Fundamenteel voor webontwikkeling → Zonder HTML geen website. ✔ Maakt structuur en inhoud mogelijk → Tekst, afbeeldingen, formulieren en links. ✔ Werkt samen met andere technologieën → CSS voor styling, JavaScript voor dynamiek, PHP voor dataverwerking.🚀 Een goede basis in HTML maakt het makkelijker om complexe webtechnologieën te begrijpen.In dit hoofdstuk behandelen we de fundamentele concepten van HTML, zodat je de structuur van een webpagina kunt begrijpen en opbouwen.✅ Onderwerpen die we gaan behandelen: ✔ De basisstructuur van een HTML-document → Hoe een HTML-bestand eruitziet. ✔ Veelgebruikte HTML-tags → Zoals

,
, en . ✔ Lijsten en tabellen → Hoe je gegevens overzichtelijk weergeeft. ✔ Formulieren en invoervelden → Voor interactie met gebruikers. ✔ Hyperlinks en navigatie → Verbindingen tussen webpagina’s.🚀 We beginnen bij het begin, zodat je een sterke basis krijgt!✅ HTML is nog steeds essentieel, ondanks de opkomst van frameworks zoals Bootstrap en WordPress. ✅ HTML vormt de basis van elke website en werkt samen met CSS, JavaScript en PHP. ✅ In dit hoofdstuk leren we de basisstructuur van HTML en hoe we een webpagina opbouwen.

1.3 - Soorten internetverbindingen

Fri, 20 Jun 2025 11:42:04 GMT

Het internet is toegankelijk via verschillende soorten verbindingen, die variëren in snelheid, technologie en gebruiksgemak. In deze paragraaf kijken we naar hoe we met het internet verbinden en welke technologieën hierachter zitten.✅ Waarom is het belangrijk om de verschillende soorten internetverbindingen te begrijpen? ✔ Helpt bij het kiezen van de juiste verbinding voor je behoeften. ✔ Maakt het makkelijker om internetproblemen te diagnosticeren en oplossen. ✔ Geeft inzicht in de evolutie van netwerktechnologieën.Breedbandinternet is de standaard manier om met het internet te verbinden. Het biedt hoge snelheden en stabiele verbindingen.✅ Soorten breedbandverbindingen: ✔ DSL (Digital Subscriber Line) → Internet via de telefoonlijn, vroeger veel gebruikt. ✔ Kabelinternet → Internet via de kabel-TV aansluiting, zeer gangbaar in stedelijke gebieden. ✔ Glasvezel → Razendsnel internet via lichtsignalen in glasvezelkabels.🚀 Glasvezel is de snelste optie en wordt steeds vaker uitgerold.Naast breedband is mobiel internet essentieel voor toegang tot het web onderweg.✅ Generaties mobiele netwerken: ✔ 3G → Basis mobiel internet, geschikt voor e-mail en lichte browsingtaken. ✔ 4G LTE → Sneller dan 3G, ondersteunt HD-streaming en videobellen. ✔ 5G → Ultieme snelheid en lage vertraging, ideaal voor gaming en IoT.🚀 5G-netwerken bieden extreem hoge snelheden, maar zijn nog niet overal beschikbaar.Wi-Fi is een van de meest gebruikte methoden om internet te gebruiken, vooral binnenshuis.✅ Wi-Fi standaarden: ✔ Wi-Fi 4 (802.11n) → Oudere standaard, tot 600 Mbps snelheid. ✔ Wi-Fi 5 (802.11ac) → Sneller, met verbeterde dekking en minder storing. ✔ Wi-Fi 6 (802.11ax) → Nieuwste standaard, geschikt voor slimme apparaten en drukke netwerken.🚀 Wi-Fi 6 zorgt voor betere prestaties en minder vertraging in netwerken met veel verbonden apparaten.Satellietinternet wordt gebruikt op afgelegen locaties waar geen kabels of mobiele netwerken beschikbaar zijn.✅ Voordelen en nadelen: ✔ Beschikbaar overal ter wereld. ✔ Geen fysieke kabels nodig. ✔ Hogere vertraging (latency), minder geschikt voor gaming en live streaming.🚀 Bedrijven zoals Starlink verbeteren de snelheid en betrouwbaarheid van satellietinternet.✅ Breedband (DSL, kabel, glasvezel) is de standaard voor snelle en stabiele internetverbindingen. ✅ Mobiel internet via 4G en 5G maakt internetgebruik onderweg mogelijk. ✅ Wi-Fi is essentieel voor draadloze toegang, vooral met Wi-Fi 6 voor moderne netwerken. ✅ Satellietinternet is een oplossing voor afgelegen locaties zonder vaste netwerken.

1.2 - Hoe werkt het internet

Fri, 20 Jun 2025 11:39:52 GMT

Het internet lijkt misschien magisch, maar in werkelijkheid is het een complex netwerk van computers, servers en protocollen die samenwerken om informatie wereldwijd toegankelijk te maken.✅ Waarom is het belangrijk om te begrijpen hoe het internet werkt? ✔ Helpt bij het ontwikkelen van websites en webapplicaties. ✔ Maakt het makkelijker om internetproblemen te diagnosticeren en oplossen. ✔ Geeft inzicht in netwerken en data-uitwisseling.Wanneer je een website opent, zoals www.google.com, gebeurt er achter de schermen een reeks processen:✅ Stap 1: Jouw browser stuurt een verzoek ✔ Jij typt een webadres in of klikt op een link. ✔ Jouw computer vraagt via het internet om de pagina te laden.✅ Stap 2: DNS vertaalt het webadres
✔ Een DNS-server zet www.google.com om naar een IP-adres (bijv. 172.217.16.196). ✔ Dit IP-adres vertelt je computer welke server de website host.✅ Stap 3: De server stuurt de webpagina terug ✔ De server die de website beheert verwerkt het verzoek en stuurt de HTML, CSS en JavaScript van de pagina naar jouw browser. ✔ Jouw browser bouwt de webpagina op basis van de ontvangen data.
Elke computer op het internet heeft een uniek IP-adres (Internet Protocol-adres). Dit is vergelijkbaar met een postadres, waarmee computers elkaar kunnen vinden en met elkaar kunnen communiceren. Tijdens de lessen systeem- en netwerkbeheer komt dit nog uitgebreid aan bod!✅ Soorten IP-adressen: ✔ IPv4 → Bestaat uit 4 getallen (bijv. 192.168.1.1). ✔ IPv6 → Langere versie met een grotere adresruimte (bijv. 2001:0db8:85a3::8a2e:0370:7334).
Wanneer je een website bezoekt, wordt informatie verzonden via het HyperText Transfer Protocol (HTTP) of een veilige variant, HTTPS.✅ Verschil tussen HTTP en HTTPS: ✔ HTTP → Gegevens worden openlijk verzonden en kunnen onderschept worden. ✔ HTTPS → Gegevens worden versleuteld, waardoor hackers ze niet kunnen lezen.🚀 Daarom is HTTPS standaard bij banken en webshops voor beveiligde transacties.Meer uitleg over HTTPS en webbeveiliging vind je op SSL.com.Data wordt verzonden in kleine pakketten die via routers en servers door het netwerk bewegen. Dit werkt als volgt:✔ Een bestand (bijv. een webpagina) wordt opgedeeld in datablokken. ✔ Deze blokken reizen via verschillende netwerken naar hun bestemming. ✔ Als alle blokken aankomen, worden ze weer samengevoegd tot het originele bestand.🚀 Vergelijk het met een puzzel: je stuurt de losse stukjes op en de ontvanger zet ze weer in elkaar.✅ Het internet werkt via netwerken, servers en protocollen zoals DNS, IP en HTTP(S). ✅ Websites worden geladen door een DNS-server die een webadres omzet naar een IP-adres. ✅ Data reist via het netwerk in kleine pakketten die weer worden samengevoegd bij de ontvanger. ✅ HTTPS zorgt voor beveiligde verbindingen en beschermt gebruikers tegen hackers.

1.7 - Geschiedenis van PHP

Fri, 20 Jun 2025 11:33:39 GMT

PHP (Hypertext Preprocessor) is een van de meest gebruikte programmeertalen voor server-side webontwikkeling. Het werd oorspronkelijk ontwikkeld om dynamische webpagina’s te maken en is inmiddels uitgegroeid tot een krachtige taal die wordt gebruikt voor content management systemen, e-commerce platforms en API’s.✅ Waarom is PHP belangrijk? ✔ Maakt dynamische websites mogelijk → Bijvoorbeeld inlogsystemen en contactformulieren. ✔ Werkt samen met databases → Bijvoorbeeld MySQL voor het opslaan van gebruikersgegevens. ✔ Wordt gebruikt door grote platforms → Zoals WordPress, Facebook en Wikipedia.Meer uitleg over PHP en webontwikkeling vind je op PHP.net.PHP werd in 1994 ontwikkeld door Rasmus Lerdorf, een Deens-Canadese programmeur. Hij wilde een eenvoudige manier om bezoekersstatistieken bij te houden op zijn persoonlijke website en schreef een set scripts in C. Dit werd bekend als PHP/FI (Personal Home Page/Forms Interpreter).✅ Belangrijke mijlpalen in de geschiedenis van PHP: ✔ 1994 → Rasmus Lerdorf ontwikkelt de eerste versie van PHP/FI. ✔ 1995 → PHP/FI wordt openbaar en ontwikkelaars beginnen het te gebruiken voor dynamische webpagina’s. ✔ 1997 → PHP 3 wordt gelanceerd, met een volledig herschreven parser door Zeev Suraski en Andi Gutmans. ✔ 2000 → PHP 4 introduceert de Zend Engine, die de prestaties van PHP aanzienlijk verbetert. ✔ 2004 → PHP 5 voegt ondersteuning toe voor object-georiënteerd programmeren (OOP) en PHP Data Objects (PDO). ✔ 2015 → PHP 7 wordt uitgebracht, met enorme prestatieverbeteringen en nieuwe taalfeatures. ✔ 2020 → PHP 8 introduceert Just-in-Time (JIT) Compilation, waardoor PHP sneller wordt dan ooit.PHP blijft een belangrijke speler in webontwikkeling, ondanks de opkomst van andere talen zoals Python en JavaScript (Node.js).✅ Waar wordt PHP gebruikt? ✔ Content Management Systemen (CMS) → WordPress, Joomla en Drupal. ✔ E-commerce platforms → Magento en WooCommerce. ✔ API’s en backend-systemen → Laravel en Symfony frameworks.🚀 PHP blijft evolueren met nieuwe functies en verbeteringen!✅ PHP werd in 1994 ontwikkeld door Rasmus Lerdorf en groeide uit tot een van de belangrijkste server-side programmeertalen. ✅ PHP evolueerde van een eenvoudige scriptcollectie naar een krachtige taal met ondersteuning voor databases en OOP. ✅ PHP wordt nog steeds veel gebruikt in CMS-systemen, e-commerce platforms en backend-webontwikkeling.

1.6 - Geschiedenis van JavaScript

Fri, 20 Jun 2025 11:33:00 GMT

JavaScript is een van de meest gebruikte programmeertalen ter wereld en vormt samen met HTML en CSS de kern van moderne webontwikkeling. Het werd oorspronkelijk ontwikkeld om webpagina’s interactief te maken, maar is inmiddels uitgegroeid tot een veelzijdige taal die wordt gebruikt voor webapplicaties, servers en zelfs mobiele apps.✅ Waarom is JavaScript belangrijk? ✔ Maakt websites dynamisch en interactief → Knoppen, animaties, formulieren en meer. ✔ Werkt op alle moderne browsers → Ondersteund door Chrome, Firefox, Edge en Safari. ✔ Kan zowel client-side als server-side worden gebruikt → Dankzij technologieën zoals Node.js..JavaScript werd in 1995 ontwikkeld door Brendan Eich, een programmeur bij Netscape Communications. Netscape wilde een lichte en toegankelijke programmeertaal toevoegen aan hun webbrowser, zodat ontwikkelaars interactieve elementen konden maken zonder complexe software.✅ Belangrijke mijlpalen in de geschiedenis van JavaScript: ✔ 1995 → Brendan Eich ontwikkelt JavaScript in slechts 10 dagen voor Netscape Navigator. ✔ 1996 → JavaScript wordt opgenomen in Netscape 2 en wint snel aan populariteit. ✔ 1997 → JavaScript wordt een officiële ECMA-standaard (ECMA-262), bekend als ECMAScript. ✔ 2009 → ECMAScript 5 wordt uitgebracht, met verbeterde functies zoals strict mode. ✔ 2015 → ECMAScript 6 (ES6) introduceert moderne functies zoals let, const, arrow functions en classes. ✔ 2024 → ECMAScript blijft evolueren, met nieuwe updates en verbeteringen.JavaScript wordt beheerd door ECMA International, een organisatie die standaarden vaststelt voor programmeertalen. De officiële naam van de taal is ECMAScript, maar in de praktijk wordt de term JavaScript gebruikt.✅ Wat is ECMAScript? ✔ ECMAScript is de officiële standaard → JavaScript volgt deze richtlijnen. ✔ Nieuwe versies worden regelmatig uitgebracht → ES6, ES7, ES8, enz. ✔ Browsers implementeren ECMAScript-functies → Chrome, Firefox, Edge en Safari ondersteunen de nieuwste versies.JavaScript is niet langer beperkt tot webpagina’s, maar wordt gebruikt in servers, mobiele apps en zelfs hardware. Dankzij technologieën zoals Node.js kan JavaScript nu ook server-side worden gebruikt.✅ Waar wordt JavaScript gebruikt? ✔ Webontwikkeling → Dynamische websites en interactieve elementen. ✔ Server-side applicaties → Met Node.js kunnen backend-systemen worden gebouwd. ✔ Mobiele apps → Frameworks zoals React Native maken mobiele ontwikkeling mogelijk. ✔ Internet of Things (IoT) → JavaScript wordt gebruikt in slimme apparaten en sensoren.✅ JavaScript werd in 1995 ontwikkeld door Brendan Eich en groeide uit tot een van de belangrijkste programmeertalen. ✅ ECMAScript bepaalt de standaarden voor JavaScript en introduceert regelmatig nieuwe functies. ✅ JavaScript wordt niet alleen gebruikt voor webpagina’s, maar ook voor servers, mobiele apps en IoT.

1.5 - Geschiedenis van CSS

Fri, 20 Jun 2025 11:31:42 GMT

CSS (Cascading Style Sheets) is de technologie die webpagina’s visueel aantrekkelijk maakt. Het werd ontwikkeld om HTML-opmaak te scheiden van de inhoud, waardoor websites flexibeler en beter beheersbaar werden.✅ Waarom is CSS belangrijk? ✔ Maakt websites visueel aantrekkelijk → Kleuren, lettertypen, lay-outs en animaties. ✔ Scheiding van inhoud en opmaak → HTML blijft schoon en gestructureerd. ✔ Maakt responsive design mogelijk → Websites passen zich aan verschillende schermformaten aan.In de vroege jaren ‘90 bestond er geen standaard manier om webpagina’s op te maken. Webdesigners moesten HTML gebruiken voor styling, wat leidde tot rommelige en moeilijk te onderhouden code.✅ Belangrijke mijlpalen in de geschiedenis van CSS: ✔ 1994 → Håkon Wium Lie, een Noorse webpionier, stelt het eerste CSS-concept voor. ✔ 1996 → CSS1 wordt officieel goedgekeurd door het World Wide Web Consortium (W3C). ✔ 1998 → CSS2 introduceert geavanceerde lay-outopties zoals absolute en relatieve positionering. ✔ 2011 → CSS2.1 verfijnt de standaard en verbetert browsercompatibiliteit. ✔ 2010s → CSS3 wordt modulair ontwikkeld, met nieuwe functies zoals animaties, flexbox en grid.CSS3 is de meest recente versie van CSS en biedt krachtige nieuwe functies voor webdesign.✅ Wat maakt CSS3 beter? ✔ Flexbox en Grid → Geavanceerde lay-outtechnieken voor responsieve websites. ✔ Animaties en overgangen → Websites worden dynamischer zonder JavaScript. ✔ Media queries → Websites passen zich automatisch aan verschillende schermformaten aan. ✔ Variabele lettertypen → Betere typografie-opties voor moderne webdesigns.✅ CSS werd in 1994 voorgesteld door Håkon Wium Lie als oplossing voor HTML-opmaakproblemen. ✅ CSS1 werd in 1996 officieel goedgekeurd en evolueerde naar CSS2 en CSS3. ✅ CSS3 biedt moderne functies zoals flexbox, grid, animaties en media queries.

1.4 - Geschiedenis van HTML

Fri, 20 Jun 2025 11:30:44 GMT

HTML (HyperText Markup Language) is de basisstructuur van het World Wide Web en vormt het fundament van elke webpagina. Sinds de introductie in 1991 heeft HTML zich enorm ontwikkeld, waardoor websites steeds dynamischer en visueel aantrekkelijker zijn geworden.✅ Waarom is HTML belangrijk? ✔ HTML vormt de ruggengraat van elke webpagina → Zonder HTML geen internet zoals we dat kennen. ✔ Biedt een gestructureerde manier om content weer te geven → Tekst, afbeeldingen, formulieren en links. ✔ Werkt samen met CSS en JavaScript → Voor styling en interactiviteit.HTML werd in 1991 ontwikkeld door Tim Berners-Lee en zijn collega Robert Cailliau bij CERN, de Europese organisatie voor nucleair onderzoek. Samen werkten zij aan een methode om wetenschappelijke documenten makkelijker te delen en te verbinden via hyperlinks. Dit leidde tot de eerste versie van HTML en het ontstaan van het World Wide Web.✅ Belangrijke mijlpalen in de geschiedenis van HTML: ✔ 1989 → Tim Berners-Lee en Robert Cailliau werken aan een voorstel voor een hypertekst-systeem. ✔ 1991 → De eerste versie van HTML wordt gebruikt binnen CERN. ✔ 1993 → HTML 1.0 wordt openbaar en begint zich wereldwijd te verspreiden. ✔ 1995 → HTML 2.0 introduceert formulieren en tabellen, waardoor websites interactiever worden. ✔ 1997 → HTML 3.2 voegt ondersteuning toe voor scripts en stijlen, wat de visuele kwaliteit van webpagina’s verbetert. ✔ 1999 → HTML 4.01 wordt de standaard en introduceert CSS voor betere opmaak. ✔ 2014 → HTML5 wordt officieel gelanceerd en biedt ondersteuning voor video, audio en interactieve elementen.Hoewel Tim Berners-Lee vaak wordt gezien als de uitvinder van het web, speelde Belg Robert Cailliau een cruciale rol in de ontwikkeling en verspreiding ervan.✅ Belangrijke bijdragen van Robert Cailliau: ✔ Hij hielp bij het ontwikkelen van het eerste webprototype. ✔ Hij promootte het World Wide Web buiten CERN, waardoor het wereldwijd werd geadopteerd. ✔ Hij werkte mee aan het standaardiseren van HTML en webtechnologieën.🚀 Zonder Robert Cailliau had HTML en het web zich mogelijk minder snel verspreid!HTML5 is de meest recente versie van HTML en biedt krachtige nieuwe functies voor webontwikkeling.✅ Wat maakt HTML5 beter? ✔ Ondersteuning voor multimedia → Video en audio zonder externe plugins. ✔ Verbeterde semantiek → Nieuwe tags zoals

1.1 - Inleiding

Fri, 20 Jun 2025 11:29:12 GMT

Het internet en het World Wide Web (WWW) hebben de manier waarop we communiceren, werken en informatie delen revolutionair veranderd. Hoewel veel mensen denken dat het internet en het web hetzelfde zijn, is dat niet het geval:✅ Het internet → Een wereldwijd netwerk van computers die met elkaar communiceren. ✅ Het World Wide Web → Een dienst die via het internet werkt en webpagina’s toegankelijk maakt.Het internet begon als een militair project in de Verenigde Staten tijdens de Koude Oorlog. Wetenschappers wilden een veerkrachtig communicatienetwerk ontwikkelen dat kon blijven functioneren, zelfs als delen ervan werden vernietigd.✅ Belangrijke mijlpalen in de geschiedenis van het internet: ✔ 1969 → ARPANET wordt gelanceerd, het eerste netwerk dat computers verbindt. ✔ 1971 → De eerste e-mail wordt verzonden door Ray Tomlinson. ✔ 1983 → TCP/IP wordt de standaard netwerkprotocol, waardoor verschillende netwerken met elkaar kunnen communiceren. ✔ 1998 → Google wordt opgericht en verandert de manier waarop we informatie zoeken.Hoewel het internet al bestond, was er nog geen eenvoudige manier om informatie te organiseren en toegankelijk te maken. In 1989 bedacht Tim Berners-Lee samen met Robert Caulliau het World Wide Web terwijl ze werkten bij CERN.✅ Belangrijke mijlpalen in de geschiedenis van het web: ✔ 1989 → Tim Berners-Lee en Robert Caulliau stellen een systeem voor met hyperlinks en webpagina’s. ✔ 1991 → De eerste website wordt gelanceerd. ✔ 1993 → De eerste grafische webbrowser, Mosaic, wordt uitgebracht. ✔ 1995 → Commerciële websites en zoekmachines zoals Yahoo! en AltaVista verschijnen. ✔ 2000s → Sociale media en streamingdiensten veranderen het internet.Sinds de jaren 2000 heeft het internet zich razendsnel ontwikkeld:✔ Web 2.0 → Interactieve websites, sociale media en gebruikerscontent. ✔ Cloud computing → Data wordt online opgeslagen en toegankelijk gemaakt. ✔ Mobiel internet → Smartphones en apps maken internetgebruik overal mogelijk. ✔ AI en machine learning → Slimme algoritmes personaliseren zoekresultaten en aanbevelingen.
✅ Het internet begon als een militair project en groeide uit tot een wereldwijd netwerk. ✅ Het World Wide Web werd in 1989 ontwikkeld door Tim Berners-Lee en maakte internet toegankelijk. ✅ Sinds de jaren 2000 heeft het web zich ontwikkeld met sociale media, cloud computing en AI.

8.12 - Uitloggen en sessies stoppen

Sun, 15 Jun 2025 07:49:34 GMT

Wanneer een gebruiker klaar is met zijn bezoek aan je website, wil je hem of haar de mogelijkheid geven om veilig uit te loggen. Door uit te loggen, wordt de sessie beëindigd en is de gebruiker niet langer aangemeld. Dit is belangrijk voor zowel beveiliging als gebruiksgemak.Een actieve sessie onthoudt wie de gebruiker is. Als je die niet afsluit, blijft een andere bezoeker op dezelfde computer mogelijk automatisch ingelogd. Daarom voeg je best een uitlogknop of -link toe aan je navigatie.Maak een bestand logout.php aan met deze code: Je plaatst deze link op je pagina voor ingelogde gebruikers (bijv. dashboard.php):Uitloggen Je kunt op login.php een melding tonen:Je bent uitgelogd."; } ?> Om sessiekaping te voorkomen, kun je vlak na het inloggen een nieuwe sessie-id genereren:session_regenerate_id(true); Plaats dit net nadat je een sessie start bij een succesvolle login.✅ Sessies onthouden de identiteit van een gebruiker ✅ Met session_destroy() sluit je veilig af ✅ Toon een melding na het uitloggen ✅ Voeg altijd een zichtbare “Uitloggen”-link toe ✅ Beheer sessies zorgvuldig voor maximale veiligheid

8.9 - Betere user experience

Sun, 15 Jun 2025 07:42:55 GMT

Een goed werkende website geeft de gebruiker niet alleen functies, maar ook duidelijke feedback. In deze paragraaf leer je hoe je met PHP en HTML meldingen toont, automatische doorverwijzingen (redirects) instelt, en bevestigingen toevoegt — zodat je site professioneel en intuïtief aanvoelt.Na het toevoegen, bewerken of verwijderen van gegevens wil je de gebruiker een duidelijke boodschap geven:echo "

Leerling succesvol toegevoegd.

"; Of bij een fout:echo "

Er is iets fout gegaan.

"; 💡 Deze meldingen maken gebruik van de klassen van Bootstrap alerts: alert-success → groene boodschap alert-danger → rode foutmelding alert-warning, alert-info enz. ook mogelijk Na een actie (zoals toevoegen of verwijderen) wil je soms terugsturen naar een overzichtspagina. Dit kan met:header("Location: index.php"); exit(); ⚠️ Let op: dit moet uitgevoerd worden vóór er iets op het scherm is getoond (dus vóór elke echo).Voorbeeld in context:if ($stmt->execute()) { header("Location: index.php?toegevoegd=1"); exit(); } En op index.php kun je dan tonen:if (isset($_GET["toegevoegd"])) { echo "

Leerling toegevoegd!

"; } Verwijderen is vaak onomkeerbaar. Laat daarom eerst een bevestiging zien met JavaScript:Verwijder ⚠️ Als de gebruiker op “Annuleren” klikt, wordt de link niet gevolgd.Zorg dat gebruikers makkelijk terug kunnen naar het overzicht:← Terug naar overzicht Voeg ook een eenvoudige menubalk of header toe op al je pagina’s voor consistentie.✅ Geef gebruikers directe feedback met Bootstrap alerts ✅ Gebruik header("Location: ...") om automatisch door te sturen ✅ Toon bevestigingen vóór kritieke acties zoals verwijderen ✅ Maak navigatie makkelijk met duidelijke knoppen of links ✅ Met kleine UX-details voelt je site als een échte toepassing

6.9 - JavaScript en Bootstrap

Sun, 15 Jun 2025 06:34:59 GMT

Nu je een stevige basis hebt in zowel JavaScript als Bootstrap, is het tijd om die twee krachten te bundelen. Veel Bootstrap-componenten — zoals modals, dropdowns, carrousels en collapsibles — werken pas écht optimaal als je ze met JavaScript aanstuurt of uitbreidt.Gelukkig maakt Bootstrap dit makkelijk: je hoeft zelden zelf complexe scripts te schrijven. Vaak gebruik je slechts HTML met speciale data-bs-* attributen, of je roept een component aan via JavaScript.Sommige componenten, zoals de modal, worden automatisch actief via HTML. Maar je kunt ze ook manueel activeren met JavaScript.let mijnModal = new bootstrap.Modal(document.getElementById('voorbeeldModal')); mijnModal.show();

Dit is extra informatie die zichtbaar wordt.

📌 Hier hoef je geen eigen JavaScript te schrijven — Bootstrap regelt het gedrag via data-bs-*.

Met slechts een paar klassen en attributen bouw je een volledig functionele slider — zonder extra scriptwerk!Wil je extra gedrag toevoegen, zoals een alert tonen wanneer een gebruiker op een knop klikt? document.getElementById("extraKnop").addEventListener("click", function () { alert("Je klikte op een Bootstrap-knop met eigen JS!"); }); 💡 Zo combineer je moeiteloos visuele kracht (Bootstrap) met logica en gedrag (JavaScript).✅ Bootstrap bevat interactieve componenten die deels of volledig afhankelijk zijn van JavaScript ✅ Met data-bs-* attributen activeer je gedrag zonder zelf code te schrijven ✅ Voor meer controle kun je zelf JS schrijven met bootstrap.Modal(), collapse, enz. ✅ Door eigen JavaScript toe te voegen aan Bootstrap-knoppen of -velden, maak je je site écht op maat ✅ Een dynamisch, responsief én interactief resultaat ontstaat wanneer je HTML + CSS + JavaScript + Bootstrap slim samen laat spelen

5.8 - Breakpoints

Sun, 15 Jun 2025 06:16:18 GMT

Breakpoints zijn de fundamentele schakelmomenten waarop je layout zich aanpast aan de breedte van het scherm. Dit is cruciaal voor responsive design: een site moet zich niet hetzelfde gedragen op een breed desktopscherm als op een smalle smartphone. Bootstrap regelt dit met een reeks vooraf gedefinieerde schermgroottes, die je eenvoudig kunt aanspreken in je klassen en media queries.Bootstrap hanteert deze breakpoint-richtlijnen:⚠️ Let op: Voor de kleinste schermen (xs) gebruik je geen prefix.Bootstrap-componenten kunnen met prefix-klassen vanaf een bepaald schermformaat gedrag aanpassen.✅ Voorbeeld: kolommen per breakpoint

Responsieve kolom

Deze kolom is: Volledige breedte op mobiel Halve breedte op tablets 1/3 op middelgrote schermen 1/4 op desktops Met display utility-klassen kun je elementen tonen of verbergen per schermtype:

Toon alleen op schermen ≥768px

Toon alleen op smartphones

Combinaties als deze maken het mogelijk om verschillende content te tonen op verschillende apparaten. Zo kun je verschillende menu’s tonen afhankelijk van het schermformaat.✅ Breakpoints zijn de schakelmomenten voor responsieve gedrag ✅ Gebruik col-*, d-*, text-*, enz. met prefixen als -md-, -lg-, enz. ✅ Pas componenten aan per schermgrootte ✅ Combineer breakpoints slim voor precieze controle

5.7 - Forms

Sun, 15 Jun 2025 06:15:09 GMT

Formulieren vormen de kern van interactie op bijna elke website: van contactformulieren tot inlogpagina’s. Bootstrap 5 biedt hiervoor een uitgebreide set gestylede formuliercomponenten die er niet alleen professioneel uitzien, maar ook perfect responsief en goed toegankelijk zijn.Met slechts een paar klassen maak je al nette tekstvelden:

Voornaam

E-mailadres

📌 form-control geeft het veld de typische Bootstrap-opmaak, terwijl form-label zorgt voor nette uitlijning en afstand.Gebruik form-check om je keuzes netjes te groeperen:

Onder de 18

Ik ga akkoord met de voorwaarden

✅ Je kunt meerdere form-check blokken naast elkaar zetten of onder elkaar, afhankelijk van je layout.Dropdowns zijn eenvoudig toe te voegen:Selecteer een optie Gebruik een Bootstrap-knop om het formulier te verzenden: Je kunt uiteraard andere kleuren, iconen of grootte toevoegen via utility-klassen.Bootstrap ondersteunt standaardformulier-validatie met visuele feedback. Een voorbeeld: 📌 Voeg required toe aan het veld, en gebruik was-validated op het formulier om validatie visueel te tonen na verzending.Bootstrap maakt het makkelijk om meerdere velden naast elkaar weer te geven: De klasse row g-3 geeft automatisch ruimte (gap) tussen de rijen/kolommen.✅ Gebruik form-control, form-check, form-label en form-select voor professionele, toegankelijke formulieren ✅ Voeg Bootstrap’s validatie toe voor directe feedback ✅ Combineer met utility-klassen (mb-3, text-center, col-md-6, enz.) voor volledige controle ✅ Plaats knoppen eenvoudig met btn klassenMeer info en voorbeelden vind je op Bootstrap Formulieren

5.6 - Utility-klassen

Sun, 15 Jun 2025 06:13:15 GMT

In Bootstrap 5 zijn utility-klassen kleine, kant-en-klare CSS-klassen waarmee je snel en efficiënt veelvoorkomende stijlregels toepast — zónder dat je zelf CSS hoeft te schrijven. Denk aan marges, padding, kleuren, tekstuitlijning, positionering, zichtbaarheidsinstellingen, en nog veel meer.Ze maken je workflow razendsnel: even een klas toevoegen in je HTML, en klaar!✅ Geen aparte CSS nodig voor kleine wijzigingen ✅ Snel aanpasbaar en goed leesbaar ✅ Krachtige controle over spacing, display, alignment, enz. ✅ Werkt perfect samen met componenten, grid en eigen styling📌 Bootstrap is hiermee “class-first” geworden: het meeste stijlwerk doe je direct in je HTML! m = margin p = padding Richtingen: t (top), b (bottom), s (start/left), e (end/right), x (horizontaal), y (verticaal) Voorbeelden:

Margin rondom 1.0rem

Margin bovenaan

Padding links en rechts

Start 3rem, end 0.25rem

Cijfers gaan meestal van 0 t/m 5 of auto.

Centrale, blauwe tekst

Rechts uitgelijnde, groene titel

Andere kleurklassen: text-danger, text-info, text-muted, text-dark, enz.

Gele achtergrond

Donkere achtergrond

Let op: tekstkleur pas je aan met text-* om voldoende contrast te behouden.

Toon pas vanaf tablets

Flex container

Andere displayopties: d-inline, d-grid, d-sm-none, enz.

Gepositioneerd

Einde van de flexbox

Ook handig in combinatie met Flexbox of Grid. border, border-top, enz. rounded, rounded-pill, rounded-0 De echte kracht komt pas tot leven als je utilities combineert:

Welkom bij mijn website!

✅ Utility-klassen = directe styling zonder CSS ✅ Supersnel voor spacing, kleuren, uitlijning, zichtbaarheid ✅ Combineer ze om mooie, nette blokken te maken ✅ Werkt uitstekend samen met componenten en grids ✅ Volledige lijst op Bootstrap Utility Docs

5.2 - Bootstrap bestanden koppelen

Sun, 15 Jun 2025 06:05:12 GMT

Om Bootstrap correct te gebruiken in je project, moet je de juiste CSS- en JavaScript-bestanden koppelen aan je HTML-pagina. Dit gebeurt deels in de , deels vlak voor . Hieronder leggen we uit hoe je dat doet in je PhpStorm-project.Begin in de van je HTML met het instellen van de viewport. Hierdoor weet de browser hoe breed het scherm van de gebruiker is — essentieel voor responsive gedrag: Koppel eerst het Bootstrap CSS-bestand, gevolgd door je eigen stylesheet: 📌 Let op: bootstrap.min.css is de gecomprimeerde versie (sneller laden) Je eigen CSS (sheet.css) mag na Bootstrap staan, zodat je stijlen kunt overschrijven indien nodig Voor interactieve Bootstrap-componenten (zoals modals, carrousels, dropdowns) is JavaScript vereist. Die koppel je meestal vlak voor de sluiting van : 💡 Reden voor die plaatsing: eerst wordt alle HTML geladen, daarna pas het script. Zo weet JavaScript zeker dat de elementen waar het naar verwijst al bestaan.✅ Als je eigen JS gebruikt (bijvoorbeeld custom.js), voeg dat script na het Bootstrap-script toe: ✅ Zet in de voor responsief gedrag ✅ Koppel eerst bootstrap.min.css, daarna je eigen CSS ✅ Koppel bootstrap.min.js onderaan, net voor ✅ Voeg daarna je eigen JavaScriptbestanden toe indien nodig

4.6 - Alles samen

Sun, 15 Jun 2025 06:00:09 GMT

In de vorige paragrafen hebben we de bouwstenen geleerd: viewport, @media queries, flexbox en grid. In deze paragraaf gaan we die technieken samenbrengen in een complete, responsive layout.De meeste moderne webpagina’s bestaan uit terugkerende onderdelen zoals: header – meestal met logo en navigatie nav – een horizontale of verticale menubalk main – de hoofdinhoud van de pagina aside – zij-informatie zoals widgets of reclames footer – copyright en contactgegevens ✅ HTML-structuurvoorbeeld:

Header

Hoofdinhoud

.container { display: grid; grid-template-areas: "hdr hdr" "nav main" "nav side" "ftr ftr"; grid-template-columns: 1fr 3fr; grid-template-rows: auto; gap: 10px; } .hdr { grid-area: hdr; } .nav { grid-area: nav; } .main { grid-area: main; } .side { grid-area: side; } .ftr { grid-area: ftr; } 💡 Hier hebben we een 2-koloms layout waarin nav verticaal langs de linkerkant loopt.Binnen secties zoals .main of .nav kun je Flexbox gebruiken om rijen, knoppen of kaarten mooi te ordenen..main { display: flex; flex-wrap: wrap; justify-content: space-between; } Gebruik @media om de layout aan te passen bij kleinere schermen:@media (max-width: 768px) { .container { grid-template-areas: "hdr" "nav" "main" "side" "ftr"; grid-template-columns: 1fr; } .main { flex-direction: column; } } 🎯 Hiermee wordt de 2-koloms layout op tablets en smartphones omgevormd tot één enkele kolom — veel gebruiksvriendelijker.✅ Combineer CSS Grid voor de hoofdlayout met Flexbox voor de inhoud ✅ Gebruik @media queries om het gedrag op verschillende schermformaten aan te passen ✅ Start je layout met viewport correct ingesteld ✅ Een goede responsive layout is mobielvriendelijk, flexibel en goed leesbaar

2.13 - Externe inhoud

Sat, 14 Jun 2025 18:36:56 GMT

Naast afbeeldingen kun je in HTML ook video's, audio en externe webpagina's toevoegen. Dit maakt je website interactiever en dynamischer.🚀 Waarom externe inhoud gebruiken? ✔ Verbeterde gebruikerservaring → Video’s en audio maken content aantrekkelijker. ✔ Meer interactiviteit → Gebruikers kunnen direct media afspelen. ✔ Inhoud van andere websites insluiten → Bijvoorbeeld YouTube-video’s of Google Maps.Het -element wordt gebruikt om een video op een webpagina te plaatsen.✅ Basisstructuur: ✔ controls → Voegt afspeelknoppen toe. ✔ width en height → Bepaalt de grootte van de videospeler. ✔ type="video/mp4" → Geeft het bestandsformaat aan.🚀 Je kunt meerdere -elementen gebruiken voor compatibiliteit met verschillende browsers!Het -element maakt het mogelijk om geluidsfragmenten en muziek toe te voegen.✅ Voorbeeld: ✔ controls → Voegt afspeelknoppen toe. ✔ type="audio/mpeg" → Geeft het bestandsformaat aan.🚀 Je kunt MP3, OGG en WAV-bestanden gebruiken voor audio-afspelen!Met kun je een andere webpagina insluiten in jouw website.✅ Voorbeeld: ✔ src → De URL van de externe pagina. ✔ width en height → Bepaalt de grootte van het iframe.🚀 Gebruik voorzichtig, omdat sommige sites het insluiten kunnen blokkeren!✅ Gebruik om video's toe te voegen met afspeelknoppen. ✅ Gebruik voor geluid en muziek. ✅ Gebruik om externe webpagina’s in te voegen.

Webdevelopment

2.2 - Hoe ziet een HTML-bestand eruit

Welkom op mijn website!

Contactformulier

8.11 - Loginformulier

Inloggen

8.10 - Registratieformulier

Registratieformulier

8.8 - Data bewerken en verwijderen

8.7 - Invoer valideren en feedback geven

8.6 - Van forms naar database

Leerling toevoegen

8.5 - Data dynamisch tonen in HTML

Leerlingen in de database

Overzicht leerlingen

' . htmlspecialchars($row["naam"]) . '

8.4 - Configuratiebestand gebruiken

8.3 - Verbinding maken met PHP

8.2 - Database en tabellen aanmaken

8.1 - Inleiding

7.9 - Functies

7.8 - Arrays

7.7 - Loops

7.6 - Conditionals

7.5 - Operatoren

7.4 - Variabelen

7.3 - Je eerste PHP-bestand

7.2 - XAMPP

7.1 - Inleiding

6.8 - Formvalidatie

6.7 - DOM-manipulatie

6.6 - Events

6.5 - Functies

6.4 - Loops

6.3 - Conditionals

6.1 - Inleiding

6.2 - Variabelen, datatypes en operatoren

5.4 - Bootstrap Grid

5.5 - Componenten

Kaarttitel

Berichten 4

5.3 - Containers

5.1 - Inleiding

4.5 - Grid

4.4 - Flexbox

4.3 - @Media

4.2 - Viewport

4.1 - Inleiding

3.8 - Lijsten en tabellen

3.7 - Position

3.6 - Display

t/m

3.5 - Padding, margin en border

3.4 - Achtergronden

3.3 - Tekst

3.1 - Inleiding

3.2 - Syntaxis

2.12 - Div - basis

Schaatsvereniging "De Sneeuwmannen"

Gegevens

Schaatsvereniging "De Sneeuwmannen"

2.11 - Forms

2.10 - Tabellen

2.9 - Afbeeldingen

2.8 - Links

2.7 - Paden

2.6 - Lijsten

2.5 - Tekst structureren

Hoofdtitel van de pagina

Subtitel of belangrijk hoofdstuk

Een subsectie

Kleinere onderverdeling

Specifieke details

Kleinste kopniveau

per pagina (belangrijk voor SEO). ✔ Spring niet over niveaus → Van

naar

zonder

–

) om tekst te structureren. ✅ Gebruik voor alinea’s en voor kleine inline wijzigingen. ✅ Gebruik alleen als een harde enter nodig is. ✅ Gebruik voor verwijzingen naar boeken, films, muziek en andere werken. ✅ Gebruik voor korte quotes en voor langere citaten.

2.4 - Attributen

) om tekst te structureren. ✅ Gebruik
voor alinea’s en voor kleine inline wijzigingen. ✅ Gebruik
alleen als een harde enter nodig is. ✅ Gebruik voor verwijzingen naar boeken, films, muziek en andere werken. ✅ Gebruik voor korte quotes en
voor langere citaten.