How to: HTML & CSS basics (deel 1)

HTML en CSS vormen samen de basis van veel websites. HTML gebruik je om de inhoud op te bouwen, zoals koppen, teksten, links en lijsten. CSS gebruik je om die inhoud op te maken, zoals kleuren, ruimte, lettergroottes en uitlijning. In deze handleiding leer je stap voor stap de basis kennen, zonder ingewikkelde technische taal.

Probeer de oefenen op deze pagina

Wat is HTML?

HTML staat voor HyperText Markup Language. Het is de structuur van een webpagina. Je kunt het zien als het skelet van een huis. Met HTML geef je aan wat iets is: een titel, een paragraaf, een link, een lijst of een afbeelding.

HTML werkt met elementen. Een element herken je meestal aan een openingstag en een sluitingstag.

<p>Dit is een paragraaf</p>

In dit voorbeeld is <p> de openingstag en </p> de sluitingstag. Alles daartussen is de inhoud.

Wat is CSS?

CSS staat voor Cascading Style Sheets. CSS bepaalt hoe HTML eruitziet. Denk aan kleur, lettertype, marges, achtergrondkleur en de grootte van elementen.

Zie HTML als de inhoud van een kamer, en CSS als de inrichting en styling ervan.

p {
  color: blue;
  font-size: 18px;
}

In dit voorbeeld krijgen alle paragrafen een blauwe kleur en een lettergrootte van 18 pixels.

Hoe leest HTML eruit?

Een simpele HTML-structuur kan er zo uitzien:

<h1>Welkom op mijn pagina</h1>
<p>Dit is mijn eerste stukje tekst.</p>
<a href="https://voorbeeld.nl">Klik hier</a>

Hier zie je drie verschillende elementen:

• <h1> voor een hoofdtitel
• <p> voor een paragraaf
• <a> voor een link

De belangrijkste HTML-elementen

Koppen: h1 tot en met h6

Koppen gebruik je om structuur aan te brengen in je pagina. De <h1> is de belangrijkste kop op de pagina. Daarna volgen <h2>, <h3> enzovoort.

<h1>Mijn website</h1>
<h2>Over mij</h2>
<h3>Mijn hobby's</h3>

Gebruik koppen niet alleen omdat ze groot zijn, maar vooral omdat ze structuur geven aan de inhoud.

Paragrafen: p

Een paragraaf gebruik je voor gewone tekstblokken.

<p>Ik leer stap voor stap hoe HTML werkt.</p>

Bijna alle lopende tekst op een pagina staat in een <p>-element.

Links: a

Met het <a>-element maak je een link. Het adres zet je in het attribuut href.

<a href="https://www.google.com">Ga naar Google</a>

Wat tussen de tags staat, is de klikbare tekst.

Je kunt ook een link in een nieuw tabblad openen:

<a href="https://www.google.com" target="_blank">Open Google in nieuw tabblad</a>

Let op: gebruik links het liefst voor echte verwijzingen naar andere pagina’s, niet alleen om tekst op te maken.

Lijsten: ul, ol en li

Er zijn twee veelgebruikte soorten lijsten:

• ul: een ongenummerde lijst met bullets
• ol: een genummerde lijst

De items in de lijst zet je altijd in <li>-elementen.

Voorbeeld van een lijst met bullets:

<ul>
  <li>Appels</li>
  <li>Bananen</li>
  <li>Peren</li>
</ul>

Voorbeeld van een genummerde lijst:

<ol>
  <li>Open je editor</li>
  <li>Schrijf HTML</li>
  <li>Bekijk het resultaat</li>
</ol>

Blokken en inline elementen: div en span

Dit is een belangrijk verschil in HTML.

Een <div> is een blok-element. Het wordt vaak gebruikt om grotere delen van een pagina te groeperen, zoals een kaart, een sectie of een kolom.

<div>
  <h2>Nieuwsbericht</h2>
  <p>Dit is een kort nieuwsbericht.</p>
</div>

Een <span> is een inline element. Dat betekent dat het binnen een regel blijft. Je gebruikt het vaak om een klein stukje tekst apart te stylen.

<p>Deze tekst heeft een <span>belangrijk woord</span> erin.</p>

Kort gezegd:

• Gebruik <div> voor grotere blokken of groepen
• Gebruik <span> voor kleine stukjes tekst binnen een regel

Afbeeldingen: img

Met <img> voeg je een afbeelding toe. Dit element heeft geen sluitingstag.

<img src="bloem.jpg" alt="Een gele bloem">

Hierbij betekent:

• src: het pad naar de afbeelding
• alt: een beschrijving van de afbeelding

De alt-tekst is belangrijk voor toegankelijkheid en wordt ook gebruikt als de afbeelding niet geladen kan worden.

Belangrijke tekst: strong en em

Wil je een woord of zin extra nadruk geven, dan gebruik je vaak:

• <strong> voor belangrijke tekst
• <em> voor nadruk

<p>Dit is <strong>heel belangrijk</strong>.</p>
<p>Lees dit <em>goed</em> door.</p>

Attributen in HTML

Sommige HTML-elementen hebben extra informatie nodig. Die zet je in attributen.

<a href="https://voorbeeld.nl">Bezoek de website</a>

In dit voorbeeld is href een attribuut.

Andere veelgebruikte attributen zijn bijvoorbeeld:

• class voor CSS-styling
• id voor een uniek element
• src voor afbeeldingen
• alt voor alternatieve tekst

Wat is een class?

Een class gebruik je om een element een naam te geven die je in CSS kunt gebruiken.

<p class="intro">Dit is een introductietekst.</p>

In CSS kun je deze class dan zo stylen:

.intro {
  font-size: 20px;
  color: darkblue;
}

De punt voor .intro in CSS betekent dat je een class aanspreekt.

CSS koppelen aan HTML

CSS kun je op meerdere manieren toevoegen, maar voor de basis is het handig om te begrijpen hoe HTML en CSS samenhangen.

Stel dat je deze HTML hebt:

<p class="highlight">Deze tekst valt op.</p>

Dan kun je met CSS zeggen hoe dat element eruit moet zien:

.highlight {
  background-color: yellow;
  padding: 10px;
}

Zo geef je die paragraaf een gele achtergrond en wat binnenruimte.

Veelgebruikte CSS-eigenschappen

Een simpel praktijkvoorbeeld

Hieronder zie je een klein stukje HTML:

<div class="kaart">
  <h2>Welkom</h2>
  <p>Leuk dat je hier bent.</p>
  <a href="#">Lees meer</a>
</div>

En dit is de bijbehorende CSS:

.kaart {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #dddddd;
}

.kaart h2 {
  color: #333333;
}

.kaart a {
  color: #0055cc;
}

Wat gebeurt hier?

• De div krijgt een lichtgrijze achtergrond
• Er komt ruimte binnen het blok
• Er komt een rand omheen
• De kop en link krijgen hun eigen kleur

Het verschil tussen margin en padding

Beginners halen deze twee vaak door elkaar, dat is heel normaal.

• padding is ruimte binnen het element
• margin is ruimte buiten het element

Zie het als een doos:

• Padding is de ruimte tussen de inhoud en de rand van de doos
• Margin is de ruimte tussen die doos en andere dozen eromheen

.box {
  padding: 20px;
  margin: 30px;
  border: 1px solid black;
}

Kleine oefening 1

Maak zelf een simpele introductie met:

• een hoofdtitel
• een paragraaf
• een link

Probeer eerst zelf. Kijk daarna pas naar het voorbeeld hieronder.

<h1>Welkom op mijn pagina</h1>
<p>Ik ben aan het leren hoe HTML werkt.</p>
<a href="https://voorbeeld.nl">Bekijk meer</a>

Kleine oefening 2

Maak een boodschappenlijst met minimaal drie items. Gebruik hiervoor een ongenummerde lijst.

<ul>
  <li>Brood</li>
  <li>Melk</li>
  <li>Kaas</li>
</ul>

Kleine oefening 3

Maak een blok met een titel en tekst, en geef dat blok via CSS een achtergrondkleur en padding.

<div class="info-blok">
  <h2>Over deze cursus</h2>
  <p>Je leert hier de basis van HTML en CSS.</p>
</div>

.info-blok {
  background-color: #eeeeee;
  padding: 20px;
}

Veelgemaakte fouten bij beginners

• Een sluitingstag vergeten, zoals </p>
• Elementen verkeerd nesten, bijvoorbeeld een <li> buiten een lijst
• Een class in HTML gebruiken, maar die naam niet goed in CSS terug laten komen
• Te veel <br>-tags gebruiken voor ruimte, terwijl je eigenlijk CSS-margin of padding nodig hebt
• Een div gebruiken waar een beter semantisch element logischer zou zijn

Wat betekent semantische HTML?

Semantische HTML betekent dat je elementen gebruikt op basis van hun betekenis. Dus niet zomaar alles in een <div> zetten, maar nadenken over wat iets echt is.

Bijvoorbeeld:

• Een titel is een heading, dus gebruik <h1> of <h2>
• Een alinea is een paragraaf, dus gebruik <p>
• Een lijst is een <ul> of <ol>

Dit maakt je code duidelijker, netter en beter voor zoekmachines en toegankelijkheid.

Hoe pas je dit toe in de praktijk?

Als je een stukje content wilt bouwen, denk dan steeds in deze volgorde:

• Wat wil ik tonen?
• Welk HTML-element past daarbij?
• Wil ik het daarna nog stylen met CSS?
• Heeft het element een class nodig?

Bijvoorbeeld: je wilt een kaartje maken met een titel, tekst en knop. Dan begin je met HTML voor de structuur, en pas daarna voeg je CSS toe voor de vormgeving.

Mini voorbeeld: een simpel contentblok

<div class="content-blok">
  <h2>HTML en CSS leren</h2>
  <p>Met een paar basisregels kun je al snel veel maken.</p>
  <a href="#">Start direct</a>
</div>

.content-blok {
  background-color: #f8f8f8;
  padding: 24px;
  border-radius: 8px;
}

.content-blok a {
  color: #0066cc;
  font-weight: bold;
}

Samenvatting

Je hebt nu kennisgemaakt met de basis van HTML en CSS. HTML gebruik je om de inhoud en structuur van een pagina op te bouwen. CSS gebruik je om die inhoud op te maken. De belangrijkste HTML-elementen voor beginners zijn koppen, paragrafen, links, lijsten, divs en spans. Zodra je begrijpt wat elk element doet, wordt het veel makkelijker om pagina’s logisch op te bouwen.

De beste manier om dit te leren is door veel kleine stukjes zelf te maken, uit te proberen en te bekijken wat er gebeurt.

Oefenopdracht voor jezelf

Probeer zelf een klein profielblok te maken met:

• een titel met je naam
• een korte paragraaf over jezelf
• een lijstje met drie hobby’s
• een link naar een website

Geef het blok daarna in CSS een achtergrondkleur, padding en een rand. Als dat lukt, heb je de belangrijkste basis al goed te pakken.

Probeer op deze pagina zelf