HTML = de standaardtaal die wordt gebruikt om webpagina's te maken
Structuur: <!DOCTYPE html> documenttype en versie van HTML
Overzicht HTML-tags
Block-tags (volledige breedte)
heading, paragraph, division
Inline-tags
image, anchor, span, strong & emphasis, button
Formulieren
Tekstinvoer: input
Radioknoppen: dezelfde name-waarde
Selectievakjes
Verwijzingen naar andere bestanden
Relatieve paden = verwijzing naar een bestand ten opzichte van de
locatie van het huidige HTML-bestand ideaal voor bestanden die zich op
dezelfde server bevinden en handig als je de website in zijn geheel wilt
verplaatsen, omdat de links dan automatisch correct blijven
Absolute paden = volledige URL die naar een bestand verwijst,
onafhankelijk van waar het HTML-bestand zich bevindt vaak gebruikt
voor bronnen buiten je eigen website, zoals CDN’s voor afbeeldingen,
video’s of stylesheets
CSS = een stylesheet-taal die bepaalt hoe HTML-elementen worden
weergegeven op een webpagina
selector { property: value; }
Vanilla CSS = het gebruik van standaard CSS zonder frameworks
How to
Waar CSS plaatsen: inline (rechtstreeks aan HTML-element m.b.v. style-
attribuut binnen element zelf in HTML-code), internal (binnen <style>-tag,
in <head>-sectie van HTML-document) & external (in apart .css-bestand en
link in HTML-document m.b.v. <link>-element in <head>-sectie)
Selectors in CSS: tag (element) (alle elementen van een bepaald HTML-
type selecteren en stylen; gewoon de naam), class (één of meerdere
elementen selecteren die dezelfde class hebben; begint met een punt) &
ID (een enkel, uniek element selecteren en stylen; begint met een hekje)
selector
, Lay-out
Kleuren: hexadecimaal (#-symbool gevolgd door 6 tekens, die verwijzen
naar de hoeveelheid rood, groen, en blauw in de kleur)
Lettertypes
Icoontjes: Font Awesome = een populaire iconenbibliotheek die
duizenden schaalbare vectoriconen biedt die je eenvoudig kunt toevoegen
aan je website
Box model: beschrijft hoe de ruimte van een element wordt berekend
a.d.h.v. width, height, padding (ruimte tussen inhoud en rand), border, en
margin (ruimte buiten border)
Debugging
Developer Tools gedetailleerd overzicht van de code en andere
bestanden die in de browser worden geladen, en hoe deze door de
browser verwerkt tot een website: elements (structuur van de HTML en
CSS), console (JavaScript-fouten) & network
Bulma = een populair CSS-framework dat gebruik maakt van kant-en-
klare componenten, waardoor het ontwerpen van moderne websites
eenvoudiger en sneller verloopt
Elementen & componenten
Formulieren
Kolommen
<div class="columns">
<div class="column">First column</div>
<div class="column">Second column</div>
</div>
CSS-Helpers: kleuren, tekst, spacing
CSS-variabelen (HSL-waarden voor kleuren)
Javascript = de enige programmeertaal die gebruikt kan worden in
de browser
bewerkingen uitvoeren, HTML en CSS aanpassen, data ophalen en
versturen
Vanilla Javascript
How to: inline, internal & external (einde van de <body>-sectie)
Output
alert(), console.log(), document.getElementById(‘…’).innerHTML(‘…’)
Syntax: comments (enkel //, meerdere /* */), lijnen eindigen met
puntkomma, inspringen
Structuur: <!DOCTYPE html> documenttype en versie van HTML
Overzicht HTML-tags
Block-tags (volledige breedte)
heading, paragraph, division
Inline-tags
image, anchor, span, strong & emphasis, button
Formulieren
Tekstinvoer: input
Radioknoppen: dezelfde name-waarde
Selectievakjes
Verwijzingen naar andere bestanden
Relatieve paden = verwijzing naar een bestand ten opzichte van de
locatie van het huidige HTML-bestand ideaal voor bestanden die zich op
dezelfde server bevinden en handig als je de website in zijn geheel wilt
verplaatsen, omdat de links dan automatisch correct blijven
Absolute paden = volledige URL die naar een bestand verwijst,
onafhankelijk van waar het HTML-bestand zich bevindt vaak gebruikt
voor bronnen buiten je eigen website, zoals CDN’s voor afbeeldingen,
video’s of stylesheets
CSS = een stylesheet-taal die bepaalt hoe HTML-elementen worden
weergegeven op een webpagina
selector { property: value; }
Vanilla CSS = het gebruik van standaard CSS zonder frameworks
How to
Waar CSS plaatsen: inline (rechtstreeks aan HTML-element m.b.v. style-
attribuut binnen element zelf in HTML-code), internal (binnen <style>-tag,
in <head>-sectie van HTML-document) & external (in apart .css-bestand en
link in HTML-document m.b.v. <link>-element in <head>-sectie)
Selectors in CSS: tag (element) (alle elementen van een bepaald HTML-
type selecteren en stylen; gewoon de naam), class (één of meerdere
elementen selecteren die dezelfde class hebben; begint met een punt) &
ID (een enkel, uniek element selecteren en stylen; begint met een hekje)
selector
, Lay-out
Kleuren: hexadecimaal (#-symbool gevolgd door 6 tekens, die verwijzen
naar de hoeveelheid rood, groen, en blauw in de kleur)
Lettertypes
Icoontjes: Font Awesome = een populaire iconenbibliotheek die
duizenden schaalbare vectoriconen biedt die je eenvoudig kunt toevoegen
aan je website
Box model: beschrijft hoe de ruimte van een element wordt berekend
a.d.h.v. width, height, padding (ruimte tussen inhoud en rand), border, en
margin (ruimte buiten border)
Debugging
Developer Tools gedetailleerd overzicht van de code en andere
bestanden die in de browser worden geladen, en hoe deze door de
browser verwerkt tot een website: elements (structuur van de HTML en
CSS), console (JavaScript-fouten) & network
Bulma = een populair CSS-framework dat gebruik maakt van kant-en-
klare componenten, waardoor het ontwerpen van moderne websites
eenvoudiger en sneller verloopt
Elementen & componenten
Formulieren
Kolommen
<div class="columns">
<div class="column">First column</div>
<div class="column">Second column</div>
</div>
CSS-Helpers: kleuren, tekst, spacing
CSS-variabelen (HSL-waarden voor kleuren)
Javascript = de enige programmeertaal die gebruikt kan worden in
de browser
bewerkingen uitvoeren, HTML en CSS aanpassen, data ophalen en
versturen
Vanilla Javascript
How to: inline, internal & external (einde van de <body>-sectie)
Output
alert(), console.log(), document.getElementById(‘…’).innerHTML(‘…’)
Syntax: comments (enkel //, meerdere /* */), lijnen eindigen met
puntkomma, inspringen
