# Terrarium Project Deel 1: Introductie tot HTML
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, of HyperText Markup Language, is de basis van elke website die je ooit hebt bezocht. Zie HTML als het skelet dat structuur geeft aan webpagina's – het bepaalt waar de inhoud komt, hoe deze georganiseerd is en wat elk onderdeel betekent. Terwijl CSS later je HTML "aankleedt" met kleuren en lay-outs, en JavaScript het tot leven brengt met interactiviteit, biedt HTML de essentiële structuur die alles mogelijk maakt.
In deze les maak je de HTML-structuur voor een virtuele terrariuminterface. Dit praktische project leert je fundamentele HTML-concepten terwijl je iets visueel aantrekkelijk bouwt. Je leert hoe je inhoud organiseert met semantische elementen, werkt met afbeeldingen en de basis legt voor een interactieve webapplicatie.
Aan het einde van deze les heb je een werkende HTML-pagina die plantafbeeldingen in georganiseerde kolommen weergeeft, klaar om gestyled te worden in de volgende les. Maak je geen zorgen als het er in het begin eenvoudig uitziet – dat is precies wat HTML moet doen voordat CSS de visuele afwerking toevoegt.
## Quiz voor de les
[Quiz voor de les](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **Bekijk en leer**: Bekijk deze handige video-overzicht
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## Je project opzetten
Voordat we in de HTML-code duiken, gaan we een goede werkruimte opzetten voor je terrariumproject. Het creëren van een georganiseerde bestandsstructuur vanaf het begin is een cruciale gewoonte die je goed van pas zal komen tijdens je webontwikkelingsreis.
### Taak: Maak je projectstructuur
Je maakt een speciale map voor je terrariumproject en voegt je eerste HTML-bestand toe. Hier zijn twee benaderingen die je kunt gebruiken:
**Optie 1: Gebruik Visual Studio Code**
1. Open Visual Studio Code
2. Klik op "File" → "Open Folder" of gebruik `Ctrl+K, Ctrl+O` (Windows/Linux) of `Cmd+K, Cmd+O` (Mac)
3. Maak een nieuwe map genaamd `terrarium` en selecteer deze
4. Klik in het Explorer-paneel op het pictogram "New File"
5. Noem je bestand `index.html`
**Optie 2: Gebruik Terminal-commando's**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
**Wat deze commando's doen:**
- **Maakt** een nieuwe map genaamd `terrarium` voor je project
- **Navigeert** naar de terrarium-map
- **Maakt** een leeg `index.html`-bestand
- **Opent** het bestand in Visual Studio Code om te bewerken
> 💡 **Pro Tip**: De bestandsnaam `index.html` is speciaal in webontwikkeling. Wanneer iemand een website bezoekt, zoeken browsers automatisch naar `index.html` als de standaardpagina om weer te geven. Dit betekent dat een URL zoals `https://mysite.com/projects/` automatisch het `index.html`-bestand uit de map `projects` weergeeft zonder dat de bestandsnaam in de URL hoeft te worden opgegeven.
## Begrijpen van HTML-documentstructuur
Elk HTML-document volgt een specifieke structuur die browsers nodig hebben om correct te begrijpen en weer te geven. Zie deze structuur als een formele brief – het heeft vereiste elementen in een bepaalde volgorde die de ontvanger (in dit geval de browser) helpen de inhoud correct te verwerken.
Laten we beginnen met het toevoegen van de essentiële basis die elk HTML-document nodig heeft.
### De DOCTYPE-verklaring en root-element
De eerste twee regels van elk HTML-bestand dienen als de "introductie" van het document aan de browser:
```html
```
**Wat deze code doet:**
- **Verklaart** het documenttype als HTML5 met ``
- **Creëert** het root ``-element dat alle pagina-inhoud bevat
- **Stelt** moderne webstandaarden vast voor correcte browserweergave
- **Zorgt** voor consistente weergave in verschillende browsers en apparaten
> 💡 **VS Code Tip**: Beweeg je muis over een HTML-tag in VS Code om nuttige informatie van MDN Web Docs te zien, inclusief gebruiksvoorbeelden en compatibiliteitsdetails van browsers.
> 📚 **Meer leren**: De DOCTYPE-verklaring voorkomt dat browsers "quirks mode" ingaan, wat werd gebruikt om zeer oude websites te ondersteunen. Moderne webontwikkeling gebruikt de eenvoudige ``-verklaring om [standaard-conforme weergave](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) te garanderen.
## Essentiële documentmetadata toevoegen
De ``-sectie van een HTML-document bevat cruciale informatie die browsers en zoekmachines nodig hebben, maar die bezoekers niet direct op de pagina zien. Zie het als de "achter-de-schermen"-informatie die helpt je webpagina correct te laten werken en weer te geven op verschillende apparaten en platforms.
Deze metadata vertelt browsers hoe ze je pagina moeten weergeven, welke tekencodering ze moeten gebruiken en hoe ze met verschillende schermformaten moeten omgaan – allemaal essentieel voor het maken van professionele, toegankelijke webpagina's.
### Taak: Voeg de documentkop toe
Voeg deze ``-sectie in tussen je opening en sluitende ``-tags:
```html
Welcome to my Virtual Terrarium
```
**Wat elk element doet:**
- **Stelt** de paginatitel in die verschijnt in browsertabbladen en zoekresultaten
- **Specificeert** UTF-8 tekencodering voor correcte tekstweergave wereldwijd
- **Zorgt** voor compatibiliteit met moderne versies van Internet Explorer
- **Configureert** responsief ontwerp door de viewport aan te passen aan de breedte van het apparaat
- **Regelt** het initiële zoomniveau om inhoud op natuurlijke grootte weer te geven
> 🤔 **Denk hier eens over na**: Wat zou er gebeuren als je een viewport meta-tag instelt zoals deze: ``? Dit zou de pagina dwingen altijd 600 pixels breed te zijn, wat responsief ontwerp zou breken! Leer meer over [correcte viewport-configuratie](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
## Het documentlichaam opbouwen
Het ``-element bevat alle zichtbare inhoud van je webpagina – alles wat gebruikers zullen zien en mee zullen interageren. Terwijl de ``-sectie instructies gaf aan de browser, bevat de ``-sectie de daadwerkelijke inhoud: tekst, afbeeldingen, knoppen en andere elementen die je gebruikersinterface creëren.
Laten we de structuur van het lichaam toevoegen en begrijpen hoe HTML-tags samenwerken om betekenisvolle inhoud te creëren.
### Begrijpen van HTML-tagstructuur
HTML gebruikt gekoppelde tags om elementen te definiëren. De meeste tags hebben een openingstag zoals `
` en een sluitingstag zoals `
`, met inhoud ertussen: `
Hello, world!
`. Dit creëert een paragraafelement met de tekst "Hello, world!".
### Taak: Voeg het lichaamselement toe
Werk je HTML-bestand bij om het ``-element op te nemen:
```html
Welcome to my Virtual Terrarium
```
**Wat deze complete structuur biedt:**
- **Stelt** het basis HTML5-documentraamwerk vast
- **Bevat** essentiële metadata voor correcte browserweergave
- **Creëert** een leeg lichaam klaar voor je zichtbare inhoud
- **Volgt** moderne webontwikkelingsbest practices
Nu ben je klaar om de zichtbare elementen van je terrarium toe te voegen. We zullen `
`-elementen gebruiken als containers om verschillende secties van inhoud te organiseren, en ``-elementen om de plantafbeeldingen weer te geven.
### Werken met afbeeldingen en lay-outcontainers
Afbeeldingen zijn speciaal in HTML omdat ze "zelfsluitende" tags gebruiken. In tegenstelling tot elementen zoals `` die inhoud omsluiten, bevat de ``-tag alle informatie die het nodig heeft binnen de tag zelf met attributen zoals `src` voor het afbeeldingsbestandspad en `alt` voor toegankelijkheid.
Voordat je afbeeldingen aan je HTML toevoegt, moet je je projectbestanden goed organiseren door een afbeeldingenmap te maken en de plantgrafieken toe te voegen.
**Eerst, stel je afbeeldingen in:**
1. Maak een map genaamd `images` in je terrariumprojectmap
2. Download de plantafbeeldingen uit de [oplossingsmap](../../../../3-terrarium/solution/images) (14 plantafbeeldingen in totaal)
3. Kopieer alle plantafbeeldingen naar je nieuwe `images`-map
### Taak: Maak de plantweergavelay-out
Voeg nu de plantafbeeldingen georganiseerd in twee kolommen toe tussen je ``-tags:
```html
```
**Stap voor stap, wat er gebeurt in deze code:**
- **Creëert** een hoofdcontainer met `id="page"` om alle inhoud te bevatten
- **Stelt** twee kolomcontainers in: `left-container` en `right-container`
- **Organiseert** 7 planten in de linker kolom en 7 planten in de rechter kolom
- **Omvat** elke plantafbeelding in een `plant-holder` div voor individuele positionering
- **Past** consistente klassenamen toe voor CSS-styling in de volgende les
- **Kent** unieke ID's toe aan elke plantafbeelding voor JavaScript-interactie later
- **Bevat** correcte bestandspaden die wijzen naar de afbeeldingenmap
> 🤔 **Overweeg dit**: Merk op dat alle afbeeldingen momenteel dezelfde alt-tekst "plant" hebben. Dit is niet ideaal voor toegankelijkheid. Gebruikers van schermlezers zouden "plant" 14 keer horen zonder te weten welke specifieke plant elke afbeelding toont. Kun je betere, meer beschrijvende alt-tekst bedenken voor elke afbeelding?
> 📝 **HTML-elementtypen**: `
`-elementen zijn "block-level" en nemen volledige breedte in, terwijl ``-elementen "inline" zijn en alleen de benodigde breedte innemen. Wat denk je dat er zou gebeuren als je al deze `
`-tags zou veranderen in ``-tags?
Met deze markup toegevoegd, verschijnen de planten op het scherm, hoewel ze er nog niet gepolijst uitzien – daar is CSS voor in de volgende les! Voor nu heb je een solide HTML-basis die je inhoud correct organiseert en toegankelijkheidsbest practices volgt.
## Semantische HTML gebruiken voor toegankelijkheid
Semantische HTML betekent dat je HTML-elementen kiest op basis van hun betekenis en doel, niet alleen hun uiterlijk. Wanneer je semantische markup gebruikt, communiceer je de structuur en betekenis van je inhoud aan browsers, zoekmachines en hulpmiddelen zoals schermlezers.
Deze aanpak maakt je websites toegankelijker voor gebruikers met een beperking en helpt zoekmachines je inhoud beter te begrijpen. Het is een fundamenteel principe van moderne webontwikkeling dat betere ervaringen voor iedereen creëert.
### Een semantische paginatitel toevoegen
Laten we een juiste kop toevoegen aan je terrariumpagina. Voeg deze regel in direct na je openingstag ``:
```html
My Terrarium
```
**Waarom semantische markup belangrijk is:**
- **Helpt** schermlezers navigeren en de structuur van de pagina begrijpen
- **Verbetert** zoekmachineoptimalisatie (SEO) door de inhoudshiërarchie te verduidelijken
- **Verhoogt** toegankelijkheid voor gebruikers met visuele beperkingen of cognitieve verschillen
- **Creëert** betere gebruikerservaringen op alle apparaten en platforms
- **Volgt** webstandaarden en best practices voor professionele ontwikkeling
**Voorbeelden van semantische versus niet-semantische keuzes:**
| Doel | ✅ Semantische keuze | ❌ Niet-semantische keuze |
|------|---------------------|--------------------------|
| Hoofdkop | `
` |
> 🎥 **Bekijk het in actie**: Bekijk [hoe schermlezers omgaan met webpagina's](https://www.youtube.com/watch?v=OUDV1gqs9GA) om te begrijpen waarom semantische markup cruciaal is voor toegankelijkheid. Merk op hoe een correcte HTML-structuur gebruikers helpt efficiënt te navigeren.
## Het terrariumcontainer maken
Laten we nu de HTML-structuur toevoegen voor het terrarium zelf – de glazen container waar planten uiteindelijk worden geplaatst. Dit gedeelte demonstreert een belangrijk concept: HTML biedt structuur, maar zonder CSS-styling zijn deze elementen nog niet zichtbaar.
De terrariummarkup gebruikt beschrijvende klassenamen die CSS-styling intuïtief en onderhoudbaar maken in de volgende les.
### Taak: Voeg de terrariumstructuur toe
Voeg deze markup in boven de laatste `
`-tag (voor de sluitingstag van de pagina-container):
```html
```
**Begrijpen van deze terrariumstructuur:**
- **Creëert** een hoofdterrariumcontainer met een unieke ID voor styling
- **Definieert** afzonderlijke elementen voor elk visueel onderdeel (bovenkant, wanden, aarde, onderkant)
- **Bevat** geneste elementen voor glaseffecten (glanzende elementen)
- **Gebruikt** beschrijvende klassenamen die duidelijk het doel van elk element aangeven
- **Bereidt** de structuur voor op CSS-styling die het uiterlijk van het glazen terrarium zal creëren
> 🤔 **Merk iets op?**: Hoewel je deze markup hebt toegevoegd, zie je nog niets nieuws op de pagina! Dit illustreert perfect hoe HTML structuur biedt, terwijl CSS zorgt voor het uiterlijk. Deze `
`-elementen bestaan, maar hebben nog geen visuele styling – dat komt in de volgende les!
---
## GitHub Copilot Agent Challenge
Gebruik de Agent-modus om de volgende uitdaging te voltooien:
**Beschrijving:** Maak een semantische HTML-structuur voor een sectie over plantenverzorging die aan het terrariumproject kan worden toegevoegd.
**Prompt:** Maak een semantische HTML-sectie met een hoofdkop "Plantenzorggids", drie subsecties met koppen "Water geven", "Lichtvereisten" en "Bodemverzorging", elk met een alinea met informatie over plantenzorg. Gebruik geschikte semantische HTML-tags zoals ``, `
`, `
` en `
` om de inhoud op de juiste manier te structureren.
Meer informatie over [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) vind je hier.
## Ontdek de HTML Geschiedenis Uitdaging
**Leren over de evolutie van het web**
HTML heeft zich aanzienlijk ontwikkeld sinds Tim Berners-Lee in 1990 de eerste webbrowser bij CERN creëerde. Sommige oudere tags, zoals `
