# HTML - Phoenix
[cursus 28568](https://talnet.instructure.com/courses/28568)
## 1 Introductie Phoenix Code
[datasource](https://www.roc.ovh/books/software-development-2025/page/html-phoenix)
*In deze les leer je werken met Phoenix Code: een makkelijke code-editor in de browser. Je maakt je eerste HTML-bestand aan en bekijkt het resultaat in je browser.*
### 🎯 Leerdoelen
- Je weet wat Phoenix Code is en waarvoor je het gebruikt
- Je kunt een HTML-bestand maken en bewerken
- Je kunt je werk bekijken in de browser
### 💡 Wat is Phoenix Code?
- Phoenix Code is een gratis code-editor die in je browser werkt
- Je kunt er HTML, CSS en JavaScript mee maken
- Het werkt zonder installatie en je kunt alles opslaan als ZIP
### 🔰 Wat gaan we doen?
- We openen Phoenix Code
- We maken een HTML-bestand aan
- We bekijken het resultaat in de browser
### 🛠️ Stappenplan
#### 1. Open Phoenix Code
- Ga naar [https://phoenixcode.dev](https://phcode.dev/)
- Klik op**File - StartProject** en kies **HTML5 project**.
Je hebt nu een standaard HTML bestand (index.htm).
Tip: je kunt Phoenix Code ook downloaden en installeren. Dat is makkelijker omdat je dan je bestanden kunt bewaren.
#### 2. Maak een nieuw HTML-bestand
- Klik links op de map
- Klik op `+` en kies **File**
- Geef het bestand de naam `myfirst.html`
#### 3. Zet deze voorbeeldcode erin
```html
Hallo wereld
Hallo allemaal!
Dit is mijn eerste HTML-pagina in Phoenix Code.
```
#### 4. Bekijk het resultaat
- Klik bovenaan op **Run** of **Live Server**
- De pagina verschijnt rechts of opent in een nieuw tabblad
- Klik aan de rechterkant op de verschillende onderdelen; je ziet nu welke HTML bij dezeonderdelen horen.
- Je kunt ook op het bestand dubbelklikken
### Opdracht
Waarvoor dient HTML? Zet deze vraag en het antwoord op jouw HTML pagina.
💬 *AI-tip:*
Vraag een AI-assistent (zoals ChatGPT) om in 3 zinnen uit te leggen wat HTML doet. Vergelijk dat met jouw eigen uitleg in Phoenix Code — komt het overeen?
### 🧠 Vragen
- Wat denk je dat <h1> en </h1> doet?
- En <p>....</p>, wat doen die denk je?
### 📤 Inleveren
1. Screenshot van je browser waarin de vraag "Waarom dient HTML?" en jouw antwoord zichtbaar zijn.
### Voorbeeld screenshot
[datasource](https://www.roc.ovh/books/software-development-2025/chapter/blok-3-web-front-end)
## 2 Wat is HTML?
*In deze les leer je wat HTML is, waarom het belangrijk is voor websites, en maak je je eerste eenvoudige webpagina met koppen en tekst.*
### 🎯 Leerdoelen
- Je weet waar HTML voor wordt gebruikt
- Je kent de structuur van een HTML-pagina
- Je kunt zelf een eenvoudige HTML-pagina maken
### 💡 Wat is HTML?
- HTML betekent **HyperText Markup Language**
- Het is de **basis van elke webpagina**
- HTML vertelt de browser wat er op een pagina moet staan: tekst, afbeeldingen, knoppen, enzovoort
### 🎬Video - korte uitleg HTML
[https://www.youtube.com/watch?v=it1rTvBcfRg](https://www.youtube.com/watch?v=it1rTvBcfRg)
### 🔰 Wat gaan we doen?
- We maken een nieuw HTML-bestand in Phoenix Code
- We schrijven een pagina over onszelf met koppen en tekst
### 🛠️ Stappenplan
#### 1. Maak een nieuw project in Phoenix Code
- Ga naar [https://phoenixcode.dev](https://phcode.dev/)
- Voeg een bestand toe met de naam `opdracht2.html`
#### 2. Typ deze HTML-code
```html
Over mij
Hallo! Ik ben [jouw naam]
Ik ben [leeftijd] jaar oud en ik zit op school bij [schoolnaam].
Mijn favoriete hobby is [hobby].
```
#### 3. Pas de tekst aan
- Vervang `[jouw naam]`, `[leeftijd]`, `[schoolnaam]` en `[hobby]` door je eigen gegevens
#### 4. Bekijk je werk
- Klik op **Run** of **Live Server** om je webpagina te bekijken
### Uitleg
Tekst staat tussen tags. Deze tags geeft aan hoe een tekst moet worden weergegeven.
Vrijwel alle HTML tags bestaan uit een open-tag (bijvoorbeeld <p> en een sluit tag bijvoorbeeld </p>
**<p>...</p>** betekent dat de tekst een **pragraaf** is.
**<h1>...</h1>** betekent dat de tekst een **header** is.
Je hebt nog meer headers: <h2>, <h3>, .....
### Opdracht
1. Vervang de header die tussen <h1>...</h1> staat door een kleinere header.
2. Zoek op hoe je tekst schuingedrukt (italic) kan afdrukken en laat jouw naam schuin afgedrukt worden.
### 📤 Inleveren
1. Maak een screenshot van je webpagina met aangepasgte header en jouw naam ver gedrukt.
## 3 Tekst en opmaak
*In deze les leer je hoe je tekst opmaakt met HTML. Je leert koppen, paragrafen, vetgedrukte tekst, cursieve tekst en regels afbreken.*
### 🎯 Leerdoelen
- Je kunt kopjes en paragrafen maken met HTML
- Je weet hoe je tekst vet of schuin maakt
- Je kunt regels afbreken met een <br>-tag
### 💡 Wat kun je met HTML-opmaak?
- HTML laat je tekst er beter uitzien en duidelijker maken voor de lezer
- Je gebruikt kopjes om structuur aan te brengen, en `
` om losse alinea's te maken
- Je kunt woorden **vet** of *schuin* maken om ze op te laten vallen
### 🔰 Wat gaan we doen?
- We maken een pagina met meerdere kopjes en paragrafen
- We oefenen met ``, `` en ` `
### 📝 Eenvoudige HTML-tags voor tekstopmaak
Tag
Betekenis
Voorbeeld
Uitleg
`
` t/m `
`
Koppen
`
Grote titel
`
`
` is de grootste kop, `
` de kleinste
`
`
Paragraaf / alinea
`
Dit is een stukje tekst.
`
Zorgt voor witruimte vóór en na
``
Vetgedrukt (belangrijk)
`Let op!`
Wordt ook door screenreaders benadrukt
``
Cursief (nadruk)
`Heel belangrijk`
Geeft nadruk, ook voor screenreaders
` `
Regellijn afbreken
`Eerste regel Tweede regel`
Breekt een regel zonder nieuwe paragraaf
(deze tag bestaat alleen uit een openingstab)
### 🛠️ Stappenplan
#### 1. Maak een nieuw project of nieuw bestand in Phoenix Code
- Noem het bestand `tekst.html`
#### 2. Typ of plak deze HTML-code
```html
Mijn interesses
Over mij
Hallo! Ik ben [jouw naam]. Ik ben enthousiast over programmeren.
Mijn hobby's
Ik hou van muziek maken voetballen en gamen.
Toekomst
Later wil ik werken als programmeur bij een groot bedrijf.
```
#### 3. Pas de inhoud aan
- Vervang de afbeelding met een plaatje dat jij leuk vindt (gebruik Google of Wikipedia en kopieer de afbeeldingslink)
- Verander de link naar jouw favoriete website
- Verander de tekst zodat het bij jouw afbeelding past
#### 4. Bekijk je werk
- Klik op **Run** of **Live Server** om je pagina te testen
### 🧠 Reflectie
- Wat gebeurt er als je een verkeerde link of afbeelding gebruikt?
- Waarom is het belangrijk om de `alt`-tekst te gebruiken?
### 📤 Inleveren
1. Maak een screenshot van je webpagina met een afbeelding én een werkende link
## 5 Lijsten in HTML
*In deze les leer je hoe je lijsten maakt met HTML. Je leert zowel opsommingen als genummerde lijsten maken.*
### 🎯 Leerdoelen
- Je weet wat het verschil is tussen een genummerde en een opsomming
- Je kunt een lijst maken met HTML
- Je kunt zelf kiezen welk type lijst het best past
### 💡 Wat zijn lijsten in HTML?
- Je gebruikt een lijst om dingen op een rijtje te zetten
- **Opsomming (bullets):** gebruik je met `
` = **unordered list**
- **Genummerde lijst:** gebruik je met `` = **ordered list**
- Elk item in een lijst staat in een `
` = list item
### 🔰 Wat gaan we doen?
- We maken een lijst van hobby’s
- We maken een genummerde top 3 van favoriete dingen
### 🎬Voorbeeld
[https://www.youtube.com/watch?v=2O8pkybH6po](https://www.youtube.com/watch?v=-kXZvKxs9oA)
### 🛠️ Stappenplan
#### 1. Maak een nieuw HTML-bestand in Phoenix Code
- Noem het bestand `lijsten.html`
#### 2. Typ of plak deze HTML-code
```html
Mijn lijsten
Mijn hobby's
Gamen
Voetballen
Tekenen
Top 3 favoriete snacks
Pizza
Frikandel
Chips
```
### Opdracht
Verander de pagina en maak:
1. een **numbered list** van dingen die jij leuk vind om te doen. Op nummer 1 staat dan wat je het leukst vind, op 2 wat je daarna het leukts vind, etc. etc. Noem tenminst 5 dingen.
2. een **unnumbered lists** van dingen die je tot nu hebt geleerd van software development. Wees specifiek, dus antwoord (Python is onjuist omdat dit niet specifiek genoem is).
Klik op **Run** of **Live Server** om je pagina te testen
### 📤 Inleveren
1. Maak een screenshot van jouw webpagina met beide lijsten zichtbaar
## 6 Tabellen in HTML
*In deze les leer je hoe je een eenvoudige tabel maakt met HTML. Je gebruikt dit om informatie netjes in kolommen en rijen te tonen.*
### 🎯 Leerdoelen
- Je weet wat een HTML-tabel is en waarvoor je die gebruikt
- Je kunt een eenvoudige tabel maken met rijen en kolommen
- Je gebruikt de tags `
`, `
`, `
` en `
`
### 💡 Wat is een tabel in HTML?
- Een tabel is een manier om informatie te tonen in rijen (horizontaal) en kolommen (verticaal)
- `
` = de hele tabel
- `
` = een rij (table row)
- `
` = een cel met gegevens (table data)
- `
` = een kopcel (table header)
In een HTML tabel moet elke regel evenveel kolommen bevatten. Om dat voor elkaar te krijgen zou je lege kolommen kunne toevogen als een regel te weinig kolommen heeft.
In een tabell moet elke regel precies evenveel kolommen bevatten!
### 🎬Voorbeeld
[https://www.youtube.com/watch?v=2O8pkybH6po](https://www.youtube.com/watch?v=iDA0kF5lrVk)
### 🔰 Wat gaan we doen?
- We maken een tabel met onze schoolrooster of favoriete eten
- We geven de bovenste rij een titel (kopjes)
### 🛠️ Stappenplan
#### 1. Maak een nieuw HTML-bestand in Phoenix Code
- Noem het bestand `tabel.html`
#### 2. Typ of plak deze HTML-code
```html
Mijn schoolrooster
Mijn schoolrooster
Dag
Vakken
Maandag
Nederlands, Wiskunde
Dinsdag
Engels, Gym
```
#### 3. Pas de inhoud aan
- Vervang de dagen en vakken door jouw eigen rooster
💬 *AI-opdracht:* Vraag ChatGPT:
“Hoe kan ik mijn tabel beter leesbaar maken zonder CSS?” Probeer één van de suggesties uit.
#### 4. Bekijk je werk
- Klik op **Run** of **Live Server** om je tabel te bekijken
### 📤 Inleveren
1. Maak een screenshot van jouw tabel met minstens 6 rijen (kopregel plus maamndag t/m vrijdag)
## 7 Formulieren in HTML
*In deze les leer je hoe je een formulier maakt in HTML. Je leert invoervelden gebruiken en een knop toevoegen om informatie te versturen.*
### 🎯 Leerdoelen
- Je weet wat een formulier is en waarvoor je het gebruikt
- Je kunt invoervelden maken voor tekst, getallen en knoppen
- Je kunt een formulier laten verzenden naar een ander HTML- of PHP-bestand
### 💡 Wat is een formulier?
- Een formulier gebruik je om gegevens in te voeren op een website
- Denk aan: contactformulieren, inlogvelden, zoekvelden, bestellingen
- Je gebruikt tags zoals:
- `
