# Blok 3 - Web Front End # HTML - Phoenix ## 1 Introductie Phoenix Code *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). #### 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. ### 🧠 Vragen - Wat denk je dat <h1> en </h1> doet? - En <p>....</p>, wat doent die denk je? ### 📤 Inleveren 1. Screenshot van je browser waarin de vraag "Waarom dient HTML?" en jouw antwoord zichtbaar zijn. ### Voorbeeld screenshot ![image.png](https://www.roc.ovh/uploads/images/gallery/2025-06/scaled-1680-/image.png) ## 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 vet kan afdrukken en laat jouw naam ver afdrukken. ### 📤 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

TagBetekenisVoorbeeldUitleg
`

` 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 tekst door jouw eigen naam en interesses - Gebruik minstens één ``, één `` en één `
` #### 4. Bekijk je werk - Klik op **Run** of **Live Server** om het resultaat te zien ### 🧠 Reflectie - Wat doet `
` precies? - Wanneer zou je `` gebruiken en wanneer ``? - Hoe maak je een tekst extra duidelijk voor de lezer? ### 📤 Inleveren 1. Maak een screenshot van jouw pagina waarin opmaak en breekregels zichtbaar zijn ## 4 Afbeeldingen en links *In deze les leer je hoe je een afbeelding op een webpagina toont en hoe je een klikbare link toevoegt naar een andere website.* ### 🎯 Leerdoelen - Je kunt een **afbeelding** invoegen met HTML - Je kunt een **link** maken naar een andere website - Je begrijpt wat attributen zoals `src`, `alt` en `href` doen ### 💡 Wat zijn afbeeldingen en links in HTML? - **Afbeelding:** je gebruikt de tag `` om een foto of plaatje te tonen - **Link:** je gebruikt de tag `` om een klikbare link te maken - Je gebruikt attributen zoals: - `src` = locatie van de afbeelding - `alt` = tekst als de afbeelding niet geladen wordt - `href` = doel van de link ### 🎬Voorbeeld ##### Hoe maak je een link? [https://www.youtube.com/watch?v=gOioxltfh48](https://www.youtube.com/watch?v=gOioxltfh48) ##### Hoe voeg je een plaatje toe op je web pagina? [https://www.youtube.com/watch?v=Hh\_se2Zqsdk](https://www.youtube.com/watch?v=Hh_se2Zqsdk) ### 🔰 Wat gaan we doen? - We voegen een afbeelding toe aan onze pagina - We maken een link naar een favoriete website ### 🛠️ Stappenplan #### 1. Maak een nieuw HTML-bestand in Phoenix Code - Noem het bestand `afbeelding.html` #### 2. Typ of plak deze HTML-code ```html Afbeelding en link

Mijn favoriete dier

Foto van een kat

Meer informatie over katten vind je op Wikipedia.

``` #### 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 `