Cheatsheet HTML, CSS & JavaScript
Snelle naslag voor de meest gebruikte HTML-tags en CSS-eigenschappen.
HTML
Paginastructuur
Basisstructuur van een HTML-pagina
Elke HTML-pagina begint met dezelfde basisstructuur:
<!DOCTYPE html>— vertelt de browser dat dit een HTML5-pagina is<html>— de buitenste tag die alles omhult<head>— informatie over de pagina (niet zichtbaar op de pagina zelf)<meta charset="UTF-8">— zorgt dat speciale tekens zoals é en ij goed worden weergegeven<title>— de tekst die in het browsertabblad verschijnt<body>— alles wat de bezoeker ziet staat hier
Tekst
Koppen — h1 t/m h6
Koppen geven structuur aan een pagina. <h1> is de hoofdkop — gebruik die maar één keer per pagina. <h2> en <h3> zijn tussenkoppen voor secties en subsecties. Gebruik koppen altijd op volgorde: sla geen nummers over.
Paragraaf — p
Een <p> tag maakt een alinea. De browser voegt automatisch ruimte toe boven en onder elke paragraaf, zodat alinea's duidelijk van elkaar gescheiden zijn.
Vetgedrukt en cursief — b, i
Met <b> maak je tekst vetgedrukt en met <i> maak je tekst cursief. Je kunt ze ook combineren door de ene tag binnen de andere te zetten.
Lijsten
Ongenummerde lijst — ul
Een <ul> (unordered list) maakt een lijst met bolletjes. Elk item staat in een <li> tag. Gebruik een ongenummerde lijst als de volgorde niet uitmaakt, bijvoorbeeld een boodschappenlijst.
Genummerde lijst — ol
Een <ol> (ordered list) maakt een genummerde lijst. De browser nummert de items automatisch. Gebruik een genummerde lijst als de volgorde wél uitmaakt, bijvoorbeeld stappen in een recept.
Afbeeldingen en links
Afbeelding — img
Met <img> voeg je een afbeelding in. Het is een zelfsluitende tag — hij heeft geen sluitingstag. De drie belangrijkste attributen:
src— de URL van de afbeeldingalt— een beschrijving van de afbeelding; wordt getoond als de afbeelding niet laadt en voorgelezen door schermlezers voor slechtziendenwidth— de breedte in pixels; de hoogte past automatisch mee zodat de afbeelding niet vervormd raakt
Link — a
Met <a> maak je een klikbare link. Het href attribuut bevat de URL waar de link naartoe gaat. Met target="_blank" opent de link in een nieuw tabblad in plaats van het huidige.
Groeperingen
Blok-element — div
Een <div> is een onzichtbaar blok dat je gebruikt om elementen te groeperen. Op zichzelf heeft een <div> geen opmaak — je stijlt hem via CSS. Het is handig om meerdere elementen samen te stijlen of te positioneren.
CSS
Tekst opmaken
Kleur, lettergrootte en lettertype — color, font-size, font-family
Met color verander je de tekstkleur. Kleuren kun je opgeven als naam (red), hex-code (#e63946) of RGB-waarde (rgb(230,57,70)).
Met font-size stel je de lettergrootte in. rem is relatief aan de basisgrootte van de browser (standaard 16px), px is een vaste pixelgrootte.
Met font-family kies je het lettertype. Zet altijd een algemeen alternatief achter de komma (sans-serif, serif) voor het geval het gewenste lettertype niet beschikbaar is.
Box-model
Achtergrond, padding, margin en border
Het box-model beschrijft hoe ruimte rondom een element werkt:
background-color— de achtergrondkleur van het elementpadding— ruimte binnen het element, tussen de inhoud en de randmargin— ruimte buiten het element, afstand tot andere elementenborder— een zichtbare rand om het element; opbouw isdikte stijl kleur(bijv.2px solid blue)border-radius— maakt de hoeken afgerond
Breedte en hoogte — width, height
Met width en height stel je de afmetingen van een element in pixels in. Als je alleen width instelt bij een afbeelding, past de hoogte automatisch mee. Bij een <div> moet je beide instellen als je een vaste grootte wilt.
Selectoren
Klasse-selector — .naam
Met een klasse geef je één specifiek element een eigen stijl, zonder alle elementen van dat type te veranderen. Je voegt een klasse toe via het class attribuut in HTML. In CSS selecteer je een klasse met een punt voor de naam (.uitgelicht). Een element kan meerdere klassen tegelijk hebben, gescheiden door een spatie.
Pseudo-klassen — :hover, :first-child, :last-child, :nth-child
Pseudo-klassen stijlen een element op basis van zijn toestand of positie, zonder dat je een klasse in de HTML hoeft toe te voegen:
:hover— actief als de muis over het element beweegt:first-child— het eerste kind-element van zijn ouder:last-child— het laatste kind-element:nth-child(n)— het n-de kind-element
Schrijf de pseudo-klasse direct na de selector, zonder spatie: a:hover is anders dan a :hover.
Flexbox
Flexbox — display: flex, justify-content, align-items, gap
Flexbox zet elementen naast elkaar en laat je ze eenvoudig uitlijnen. Je zet display: flex op de container (het omhullende element), niet op de items zelf.
justify-content— uitlijning langs de horizontale as:flex-start(links),center,space-between(verspreid)align-items— uitlijning langs de verticale as:flex-start(boven),center,stretchgap— ruimte tussen de items onderlingflex-direction: column— zet de items onder elkaar in plaats van naast elkaar
JavaScript
DOM manipulatie
Tekst veranderen — getElementById en textContent
Met document.getElementById('id') selecteer je een HTML-element op basis van zijn id-attribuut. Via .textContent verander je de tekst van dat element.
Je schrijft de code direct in het onclick-attribuut — geen functie nodig voor eenvoudige acties:
<button onclick="document.getElementById('bericht').textContent = 'Geklikt!'">
Klik mij
</button>
Let op hoofdletters: getElementById (niet getElementByID). En het id in de HTML moet exact overeenkomen — 'bericht' is iets anders dan 'Bericht'.
Stijl veranderen — .style en camelCase
Met .style pas je de CSS-stijl van een element aan vanuit JavaScript. CSS-eigenschappen met een koppelteken schrijf je als camelCase — zonder koppelteken, tweede woord met hoofdletter:
| CSS | JavaScript |
|---|---|
color | color |
background-color | backgroundColor |
font-size | fontSize |
border-radius | borderRadius |
<button onclick="document.getElementById('tekst').style.color = 'red'">
Rood
</button>
Functies en scripts
Functie in een <script> tag
Als je meerdere dingen tegelijk wilt doen bij een klik, zet je de code in een functie in een <script> tag. De <script> tag staat onderaan de <body>, zodat de HTML-elementen al geladen zijn.
<body>
<button onclick="verander()">Klik mij</button>
<script>
function verander() {
document.getElementById('bericht').textContent = 'Geklikt!';
document.getElementById('bericht').style.color = 'green';
}
</script>
</body>
Extern script — script.js en defer
Bij een groter project zet je de JavaScript-code in een apart bestand script.js. Je koppelt dat in de <head> met het defer-attribuut — dan wacht de browser met uitvoeren tot de HTML volledig geladen is.
<head>
<script src="script.js" defer></script>
</head>
Met console.log() schrijf je berichten naar het consolepanel om te controleren of je code werkt.
function verander() {
document.getElementById('bericht').textContent = 'Geklikt via script.js!';
console.log('De knop is geklikt.');
}
Variabelen
Variabele aanmaken en aanpassen — let
Met let maak je een variabele aan. Je geeft hem een naam en een beginwaarde. De waarde kun je daarna aanpassen.
let teller = 0; // aanmaken met beginwaarde
teller = teller + 1; // waarde aanpassen
Zet variabelen die je wilt onthouden tussen klikken altijd buiten de functie. Binnen een functie wordt de variabele elke keer opnieuw aangemaakt en reset hij naar de beginwaarde.
let teller = 0; // buiten de functie: onthoudt de waarde
document.getElementById('knop').addEventListener('click', function() {
teller = teller + 1;
document.getElementById('uitvoer').textContent = teller;
});
Events
Events met addEventListener
Met addEventListener koppel je een functie aan een event op een element — zonder dat je de HTML hoeft aan te passen. Je kunt meerdere listeners aan hetzelfde element koppelen.
document.getElementById('knop').addEventListener('click', function() {
document.getElementById('status').textContent = 'Geklikt!';
});
Veelgebruikte events:
| Event | Wanneer |
|---|---|
'click' | Muisklik op het element |
'mouseover' | Muis beweegt over het element |
'mouseout' | Muis verlaat het element |
'keydown' | Toets wordt ingedrukt |