# Terrarium Project Deel 1: Introductie tot HTML
```mermaid
journey
title Your HTML Learning Journey
section Foundation
Create HTML file: 3: Student
Add DOCTYPE: 4: Student
Structure document: 5: Student
section Content
Add metadata: 4: Student
Include images: 5: Student
Organize layout: 5: Student
section Semantics
Use proper tags: 4: Student
Enhance accessibility: 5: Student
Build terrarium: 5: Student
```
> 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 het 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 de fundamentele HTML-concepten terwijl je iets visueel aantrekkelijks 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.
```mermaid
mindmap
root((HTML Fundamentals))
Structure
DOCTYPE Declaration
HTML Element
Head Section
Body Content
Elements
Tags & Attributes
Self-closing Tags
Nested Elements
Block vs Inline
Content
Text Elements
Images
Containers (div)
Lists
Semantics
Meaningful Tags
Accessibility
Screen Readers
SEO Benefits
Best Practices
Proper Nesting
Valid Markup
Descriptive Alt Text
Organized Structure
```
## Pre-Les Quiz
[Pre-les quiz](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **Kijk en Leer**: Bekijk deze handige video-overzicht
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## Je Project Instellen
Voordat we in de HTML-code duiken, laten 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 Terminalcommando'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
> 💡 **Handige 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 bestand `index.html` uit de map `projects` weergeeft zonder dat de bestandsnaam in de URL hoeft te worden opgegeven.
## Begrip 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.
```mermaid
flowchart TD
A[""] --> B[""]
B --> C[""]
C --> D[""]
C --> E["<meta charset>"]
C --> F["<meta viewport>"]
B --> G["<body>"]
G --> H["<h1> Heading"]
G --> I["<div> Containers"]
G --> J["<img> Images"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
```
Laten we beginnen met het toevoegen van de essentiële basis die elk HTML-document nodig heeft.
### De DOCTYPE Declaratie en Root Element
De eerste twee regels van elk HTML-bestand dienen als de "introductie" van het document aan de browser:
```html
<!DOCTYPE html>
<html></html>
```
**Wat deze code doet:**
- **Verklaart** het documenttype als HTML5 met `<!DOCTYPE html>`
- **Creëert** het root `<html>` element dat alle pagina-inhoud bevat
- **Stelt** moderne webstandaarden in voor correcte browserweergave
- **Zorgt** voor consistente weergave op 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 browsercompatibiliteitsdetails.
> 📚 **Meer leren**: De DOCTYPE-declaratie voorkomt dat browsers "quirks mode" ingaan, wat werd gebruikt om zeer oude websites te ondersteunen. Moderne webontwikkeling gebruikt de eenvoudige `<!DOCTYPE html>` declaratie om [standaard-conforme weergave](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) te garanderen.
### 🔄 **Pedagogische Check-in**
**Pauzeer en Reflecteer**: Voordat je verder gaat, zorg ervoor dat je begrijpt:
- ✅ Waarom elk HTML-document een DOCTYPE-declaratie nodig heeft
- ✅ Wat het `<html>` root element bevat
- ✅ Hoe deze structuur browsers helpt pagina's correct weer te geven
**Snelle Zelftest**: Kun je in je eigen woorden uitleggen wat "standaard-conforme weergave" betekent?
## Essentiële Documentmetadata Toevoegen
De `<head>` 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 `<head>` sectie in tussen je opening en sluitende `<html>` tags:
```html
<head>
<title>Welcome to my Virtual Terrarium
```
**Wat elk element doet:**
- **Stelt** de paginatitel in die verschijnt in browsertabs 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 Hierover Na**: Wat zou er gebeuren als je een viewport meta tag instelt zoals deze: ``? Dit zou de pagina altijd 600 pixels breed maken, waardoor responsief ontwerp wordt gebroken! Lees meer over [juiste viewport configuratie](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
## De Documentbody Opbouwen
Het `` element bevat alle zichtbare inhoud van je webpagina – alles wat gebruikers zullen zien en mee interactie hebben. 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 body-structuur toevoegen en begrijpen hoe HTML-tags samenwerken om betekenisvolle inhoud te creëren.
### Begrip van HTML Tag Structuur
HTML gebruikt gekoppelde tags om elementen te definiëren. De meeste tags hebben een openingstag zoals `
` en een sluitingstag zoals `
`, met inhoud ertussen: `
Hallo, wereld!
`. Dit creëert een paragraafelement met de tekst "Hallo, wereld!".
### Taak: Voeg het Body Element 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 in
- **Bevat** essentiële metadata voor correcte browserweergave
- **Creëert** een lege body klaar voor je zichtbare inhoud
- **Volgt** moderne webontwikkelingspraktijken
Nu ben je klaar om de zichtbare elementen van je terrarium toe te voegen. We gebruiken `
` elementen als containers om verschillende secties van inhoud te organiseren, en `` elementen om de plantafbeeldingen weer te geven.
### Werken met Afbeeldingen en Lay-out Containers
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 terrarium projectmap
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 Plantweergave Lay-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
- **Omhult** elke plantafbeelding in een `plant-holder` div voor individuele positionering
- **Past** consistente classnamen 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 14 keer "plant" horen zonder te weten welke specifieke plant elke afbeelding toont. Kun je betere, meer beschrijvende alt-tekst bedenken voor elke afbeelding?
> 📝 **HTML Element Types**: `
` elementen zijn "block-level" en nemen de volledige breedte in, terwijl `` elementen "inline" zijn en alleen de benodigde breedte innemen. Wat denk je dat er zou gebeuren als je alle `
` tags zou veranderen in `` tags?
### 🔄 **Pedagogische Check-in**
**Structuur Begrip**: Neem een moment om je HTML-structuur te bekijken:
- ✅ Kun je de hoofdcontainers in je lay-out identificeren?
- ✅ Begrijp je waarom elke afbeelding een unieke ID heeft?
- ✅ Hoe zou je het doel van de `plant-holder` divs beschrijven?
**Visuele Inspectie**: Open je HTML-bestand in een browser. Je zou moeten zien:
- Een eenvoudige lijst van plantafbeeldingen
- Afbeeldingen georganiseerd in twee kolommen
- Eenvoudige, ongestileerde lay-out
**Onthoud**: Dit eenvoudige uiterlijk is precies hoe HTML eruit zou moeten zien voordat CSS wordt toegepast!
Met deze markup toegevoegd, verschijnen de planten op het scherm, hoewel ze er nog niet gepolijst uitzien – dat is wat CSS doet in de volgende les! Voor nu heb je een solide HTML-basis die je inhoud goed organiseert en toegankelijkheidsrichtlijnen 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.
```mermaid
flowchart TD
A[Need to add content?] --> B{What type?}
B -->|Main heading| C["
