How to: HTML & CSS next steps (deel 2)

In deel 1 heb je kennisgemaakt met de basis van HTML en CSS. In dit tweede deel gaan we een stap verder. Je leert hoe je elementen gerichter kunt stylen, hoe je blokken naast elkaar zet, hoe formulieren werken en hoe je een pagina beter laat meebewegen op verschillende schermgroottes.

Class en id

Met class en id kun je HTML-elementen een naam geven. Daardoor kun je ze in CSS gericht opmaken.

Een class gebruik je als meerdere elementen dezelfde styling mogen krijgen.

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

In CSS schrijf je dat zo:

.highlight {
  background-color: yellow;
}

Een id is bedoeld voor één uniek element op de pagina.

<h1 id="hoofdtitel">Welkom op mijn pagina</h1>

In CSS schrijf je een id met een hekje:

#hoofdtitel {
  color: darkblue;
}

Kort onthouden:

• . in CSS betekent een class
• # in CSS betekent een id

Gebruik meestal een class. Een id gebruik je alleen als iets echt uniek is.

Links en knoppen

Beginners halen links en knoppen vaak door elkaar. Dat is logisch, want ze lijken soms op elkaar. Toch hebben ze niet dezelfde functie.

• Een link brengt je naar een andere pagina of locatie
• Een knop voert meestal een actie uit, zoals verzenden of openen

Een gewone link ziet er zo uit:

<a href="https://voorbeeld.nl">Lees meer</a>

Een knop ziet er zo uit:

<button>Versturen</button>

Je kunt een link met CSS ook laten lijken op een knop:

<a href="#" class="button-link">Start nu</a>

.button-link {
  display: inline-block;
  background-color: #0066cc;
  color: white;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 6px;
}

Hiermee blijft het technisch een link, maar ziet het eruit als een knop.

Afbeeldingen stylen

In deel 1 heb je gezien hoe je een afbeelding toevoegt met <img>. Nu gaan we kijken hoe je die mooier kunt stylen met CSS.

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

.foto {
  width: 300px;
  border-radius: 12px;
}

Wat gebeurt hier?

• De afbeelding wordt 300 pixels breed
• De hoeken worden afgerond

Wil je dat een afbeelding netjes meeschaalt met het scherm, dan is dit vaak handiger:

.foto {
  max-width: 100%;
  height: auto;
}

Dan wordt de afbeelding nooit breder dan de ruimte die beschikbaar is.

Formulieren: input, label, textarea en button

Formulieren gebruik je wanneer iemand iets moet invullen. Denk aan een contactformulier, zoekbalk of inlogscherm.

Een simpel formulier kan er zo uitzien:

<form>
  <label for="naam">Naam</label>
  <input type="text" id="naam" name="naam">

  <label for="bericht">Bericht</label>
  <textarea id="bericht" name="bericht"></textarea>

  <button type="submit">Versturen</button>
</form>

De belangrijkste onderdelen zijn:

• <form> is het formulier zelf
• <label> is het label bij een veld
• <input> is een invulveld
• <textarea> is een groter tekstvak
• <button> is de verzendknop

Een label is belangrijk, omdat het duidelijk maakt wat iemand moet invullen. Ook voor toegankelijkheid is dit erg goed.

Je kunt formulieren ook stylen:

input,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  margin-bottom: 16px;
}

button {
  background-color: #0066cc;
  color: white;
  padding: 12px 18px;
  border: none;
  border-radius: 6px;
}

Display: block, inline en inline-block

Met de CSS-eigenschap display bepaal je hoe een element zich gedraagt in de layout.

Een paragraaf is standaard meestal een block-element. Een span is standaard inline.

Voorbeeld:

.blok {
  display: block;
}

.inline-tekst {
  display: inline;
}

.knopje {
  display: inline-block;
}

Een link die op een knop moet lijken krijgt vaak inline-block, zodat padding goed werkt.

Position: static, relative en absolute

Met position kun je elementen preciezer plaatsen. Dit is voor beginners vaak wat lastiger, dus zie dit vooral als een eerste kennismaking.

De meest gebruikte waarden zijn:

• static, de standaardpositie
• relative, het element blijft op zijn plek maar kan iets verschoven worden
• absolute, het element wordt los geplaatst ten opzichte van een ouder-element

Voorbeeld:

.box {
  position: relative;
}

.label {
  position: absolute;
  top: 10px;
  right: 10px;
}

Hiermee kun je bijvoorbeeld een klein label rechtsboven in een kaart zetten.

Belangrijk om te onthouden: een element met position: absolute; kijkt vaak naar het dichtstbijzijnde ouder-element met position: relative;.

Flexbox: elementen netjes naast elkaar zetten

Flexbox is een heel handige manier om elementen naast elkaar te zetten en netjes te verdelen. Dit wordt veel gebruikt in moderne websites.

Stel dat je twee blokken naast elkaar wilt tonen:

<div class="row">
  <div class="kolom">Blok 1</div>
  <div class="kolom">Blok 2</div>
</div>

.row {
  display: flex;
  gap: 20px;
}

.kolom {
  background-color: #f2f2f2;
  padding: 20px;
  flex: 1;
}

Wat gebeurt hier?

• display: flex; zet de blokken naast elkaar
• gap: 20px; maakt ruimte tussen de blokken
• flex: 1; zorgt dat beide blokken evenveel ruimte krijgen

Andere handige flexbox-eigenschappen zijn:

Voorbeeld:

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Responsive basics

Een website wordt bekeken op verschillende schermen, zoals mobiel, tablet en desktop. Responsive design betekent dat je layout zich aanpast aan het scherm.

Een veelgebruikte techniek hiervoor is een media query.

@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }
}

Wat betekent dit?

• Als het scherm 768 pixels breed of smaller is
• Dan komen de blokken niet meer naast elkaar
• Maar onder elkaar te staan

Dat is handig op mobiel, omdat daar minder horizontale ruimte is.

Nog een paar responsive tips voor beginners:

• Gebruik liever max-width: 100% dan vaste breedtes voor afbeeldingen
• Gebruik flexbox om blokken makkelijker te laten meebewegen
• Controleer altijd hoe iets eruitziet op mobiel
• Maak knoppen en links groot genoeg om aan te tikken

Een compleet mini voorbeeld

Hier zie je een simpel kaartblok met afbeelding, titel, tekst en knop:

<div class="card">
  <img src="voorbeeld.jpg" alt="Voorbeeld afbeelding" class="card-image">
  <h2>Leer HTML en CSS</h2>
  <p>Met kleine stappen kom je al heel ver.</p>
  <a href="#" class="button-link">Lees meer</a>
</div>

.card {
  max-width: 400px;
  padding: 20px;
  border: 1px solid #dddddd;
  border-radius: 10px;
  background-color: #ffffff;
}

.card-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 16px;
}

.button-link {
  display: inline-block;
  background-color: #0066cc;
  color: white;
  padding: 12px 18px;
  text-decoration: none;
  border-radius: 6px;
}

Dit is een mooi voorbeeld waarin meerdere dingen samenkomen:

• HTML voor de structuur
• Een class om te stylen
• Een afbeelding die netjes schaalt
• Een link die eruitziet als een knop

Kleine oefening 1

Maak een blok met:

• een titel
• een korte tekst
• een link die eruitziet als een knop

<div class="blok">
  <h2>Welkom</h2>
  <p>Dit is mijn eerste contentblok.</p>
  <a href="#" class="button-link">Bekijk meer</a>
</div>

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

.button-link {
  display: inline-block;
  background-color: #0066cc;
  color: white;
  padding: 10px 16px;
  text-decoration: none;
}

Kleine oefening 2

Maak twee blokken naast elkaar met flexbox.

<div class="row">
  <div class="kolom">Links</div>
  <div class="kolom">Rechts</div>
</div>

.row {
  display: flex;
  gap: 20px;
}

.kolom {
  flex: 1;
  background-color: #eeeeee;
  padding: 20px;
}

Kleine oefening 3

Zorg dat twee kolommen op mobiel onder elkaar komen te staan.

@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }
}

Veelgemaakte fouten in deel 2

• Een id meerdere keren op dezelfde pagina gebruiken
• Een link gebruiken waar eigenlijk een knop nodig is, of andersom
• Afbeeldingen een vaste breedte geven waardoor ze op mobiel te groot worden
• Vergeten dat display: flex; op het ouder-element moet staan
• position: absolute; gebruiken zonder te begrijpen ten opzichte van welk element het geplaatst wordt

Samenvatting

In dit tweede deel heb je geleerd hoe je HTML-elementen beter kunt aansturen met class en id, hoe links en knoppen van elkaar verschillen, hoe formulieren werken en hoe je met flexbox en media queries een layout beter kunt opbouwen. Dit zijn belangrijke bouwstenen voor bijna elke moderne webpagina.

Het belangrijkste is dat je klein begint. Bouw eerst een simpel blok, style dat met CSS en voeg daarna pas nieuwe dingen toe. Zo houd je overzicht en leer je het snelst.

Oefenopdracht voor jezelf

Maak zelf een klein profielkaartje met:

• een afbeelding
• een naam als titel
• een korte beschrijving
• een link in knopstijl

Geef het kaartje een achtergrondkleur, padding, afgeronde hoeken en zorg dat de afbeelding netjes meeschaalt. Als dat lukt, heb je al een heel mooie basis te pakken.