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
Klik opFile - 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

<!DOCTYPE html>
<html>
<head>
  <title>Hallo wereld</title>
</head>
<body>
  <h1>Hallo allemaal!</h1>
  <p>Dit is mijn eerste HTML-pagina in Phoenix Code.</p>
</body>
</html>

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

Screenshot van je browser waarin de vraag "Waarom dient HTML?" en jouw antwoord zichtbaar zijn.

Voorbeeld screenshot

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

🔰 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
Voeg een bestand toe met de naam opdracht2.html

2. Typ deze HTML-code

<!DOCTYPE html>
<html>
<head>
  <title>Over mij</title>
</head>
<body>

  <h1>Hallo! Ik ben [jouw naam]</h1>
  <p>Ik ben [leeftijd] jaar oud en ik zit op school bij [schoolnaam].</p>
  <p>Mijn favoriete hobby is [hobby].</p>

</body>
</html>

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

Vervang de header die tussen <h1>...</h1> staat door een kleinere header.
Zoek op hoe je tekst vet kan afdrukken en laat jouw naam ver afdrukken.

📤 Inleveren

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 <p> 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 <strong>, <em> en <br>

📝 Eenvoudige HTML-tags voor tekstopmaak

Tag	Betekenis	Voorbeeld	Uitleg
`<h1>` t/m `<h6>`	Koppen	`<h1>Grote titel</h1>`	`<h1>` is de grootste kop, `<h6>` de kleinste
`<p>`	Paragraaf / alinea	`<p>Dit is een stukje tekst.</p>`	Zorgt voor witruimte vóór en na
`<strong>`	Vetgedrukt (belangrijk)	`<strong>Let op!</strong>`	Wordt ook door screenreaders benadrukt
`<em>`	Cursief (nadruk)	`<em>Heel belangrijk</em>`	Geeft nadruk, ook voor screenreaders
`<br>`	Regellijn afbreken	`Eerste regel<br>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

<!DOCTYPE html>
<html>
<head>
  <title>Mijn interesses</title>
</head>
<body>

  <h1>Over mij</h1>
  <p>Hallo! Ik ben <strong>[jouw naam]</strong>. Ik ben <em>enthousiast</em> over programmeren.</p>

  <h2>Mijn hobby's</h2>
  <p>Ik hou van muziek maken<br>voetballen<br>en gamen.</p>

  <h2>Toekomst</h2>
  <p>Later wil ik werken als programmeur bij een groot bedrijf.</p>

</body>
</html>

3. Pas de inhoud aan

Vervang de tekst door jouw eigen naam en interesses
Gebruik minstens één <strong>, één <em> en één <br>

4. Bekijk je werk

Klik op Run of Live Server om het resultaat te zien

🧠 Reflectie

Wat doet <br> precies?
Wanneer zou je <strong> gebruiken en wanneer <em>?
Hoe maak je een tekst extra duidelijk voor de lezer?

📤 Inleveren

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 <img> om een foto of plaatje te tonen
Link: je gebruikt de tag <a> 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

🔰 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

<!DOCTYPE html>
<html>
<head>
  <title>Afbeelding en link</title>
</head>
<body>

  <h1>Mijn favoriete dier</h1>

  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg" alt="Foto van een kat" width="300">

  <p>Meer informatie over katten vind je op 
    <a href="https://nl.wikipedia.org/wiki/Kat_(dier)" target="_blank">Wikipedia</a>.
  </p>

</body>
</html>

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

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 <ul> = unordered list
Genummerde lijst: gebruik je met <ol> = ordered list
Elk item in een lijst staat in een <li> = list item

🔰 Wat gaan we doen?

We maken een lijst van hobby’s
We maken een genummerde top 3 van favoriete dingen

🛠️ Stappenplan

1. Maak een nieuw HTML-bestand in Phoenix Code

Noem het bestand lijsten.html

2. Typ of plak deze HTML-code

<!DOCTYPE html>
<html>
<head>
  <title>Mijn lijsten</title>
</head>
<body>

  <h1>Mijn hobby's</h1>
  <ul>
    <li>Gamen</li>
    <li>Voetballen</li>
    <li>Tekenen</li>
  </ul>

  <h2>Top 3 favoriete snacks</h2>
  <ol>
    <li>Pizza</li>
    <li>Frikandel</li>
    <li>Chips</li>
  </ol>

</body>
</html>

Opdracht

Verander de pagina en maak:

een numbered list van dingen die jij luek vind om te doen. Op nummer 1 staat dan wat je het leukst vnd, op 2 wat je daarna het leukts vind, etc. etc. Noem tenminst 5 dingen.
een unnumbered lists van dingen die je tot nu hebt geleerd van software development.

Klik op Run of Live Server om je pagina te testen

📤 Inleveren

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 <table>, <tr>, <td> en <th>

💡 Wat is een tabel in HTML?

Een tabel is een manier om informatie te tonen in rijen (horizontaal) en kolommen (verticaal)
<table> = de hele tabel
<tr> = een rij (table row)
<td> = een cel met gegevens (table data)
<th> = 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!

🔰 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

<!DOCTYPE html>
<html>
<head>
  <title>Mijn schoolrooster</title>
</head>
<body>

  <h1>Mijn schoolrooster</h1>

  <table border="1">
    <tr>
      <th>Dag</th>
      <th>Vakken</th>
    </tr>
    <tr>
      <td>Maandag</td>
      <td>Nederlands, Wiskunde</td>
    </tr>
    <tr>
      <td>Dinsdag</td>
      <td>Engels, Gym</td>
    </tr>
  </table>

</body>
</html>

3. Pas de inhoud aan

Vervang de dagen en vakken door jouw eigen rooster

4. Bekijk je werk

Klik op Run of Live Server om je tabel te bekijken

📤 Inleveren

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:
- <form> – de container
- <input> – invoerveld
- <label> – beschrijving van een veld
- <button> of <input type="submit"> – knop

🔰 Wat gaan we doen?

We maken een formulier met naam, leeftijd en hobby
We laten het formulier "doen alsof" het iets verstuurt

🛠️ Stappenplan

1. Maak een nieuw HTML-bestand in Phoenix Code

<!DOCTYPE html>
<html>
<head>
  <title>Contactformulier</title>
</head>
<body>

  <h1>Vertel iets over jezelf</h1>

  <form action="#" method="post">
    <label for="naam">Naam:</label><br>
    <input type="text" id="naam" name="naam"><br><br>

    <label for="leeftijd">Leeftijd:</label><br>
    <input type="number" id="leeftijd" name="leeftijd"><br><br>

    <label for="hobby">Hobby:</label><br>
    <input type="text" id="hobby" name="hobby"><br><br>

    <input type="submit" value="Verstuur">
  </form>

</body>
</html>

Noem het bestand formulier.html

2. Typ of plak deze HTML-code

Opdracht

Gebruik het formulier als voorbeeld en maak zelf een formulier.

Vraag de gebruiker om de volgende gegvens:

voornaam
achternaam
adres
postcode
woonplaats
teelfoonnummer

Bekijk je werk

Klik op Run of Live Server en vul het formulier in
Klik op "Verstuur" – er gebeurt nog niets, dat komt later met PHP!

🧠 Reflectie

Wat zou je met dit formulier willen doen als het "echt" was?

📤 Inleveren

Maak een screenshot van jouw formulier met ingevulde gegevens

8 Mini-project: Jouw persoonlijke homepage

In deze les ga je zelf een echte webpagina bouwen over jezelf. Je gebruikt alles wat je hebt geleerd over HTML: tekst, afbeeldingen, lijsten, tabellen en een formulier.

🎯 Leerdoelen

Je kunt zelfstandig een complete HTML-pagina maken
Je gebruikt verschillende HTML-elementen op de juiste manier
Je denkt na over opbouw, inhoud en structuur van een webpagina

💡 Wat gaan we doen?

Je maakt een persoonlijke homepage met meerdere onderdelen
Je laat zien wat je geleerd hebt in lessen 1 t/m 6

🛠️ Opdracht

Maak een bestand mijnhomepage.html aan en zorg dat het deze onderdelen bevat:

✅ Verplichte onderdelen:

Een titel en <h1>-kop met je naam
Minstens twee <p> paragrafen over jezelf
Een <img> met een afbeelding die bij jou past (bijv. hobby, dier of sport)
Een <ul> of <ol> met je favoriete dingen (bijv. films, games, hobby's)
Een <table> met 2 of meer rijen, bijv. je rooster of een eetplanner
Een <a>-link naar een website die jij vaak bezoekt
Een klein <form> met 2-3 invoervelden (bijv. naam + boodschap + knop)

Basis HTML code

<!DOCTYPE html>
<html>
<head>
  <title>Contactformulier</title>
</head>
<body>


</body>
</html>

🌟 Extra uitdaging (optioneel):

Gebruik <strong>, <em> en <br> om je pagina mooier te maken
Geef je pagina een leuke kleur of lettertype met een inline CSS-regel

📤 Inleveren

Maak een screenshot van jouw volledige homepage

Revision #9
Created 4 June 2025 10:32:30 by Max
Updated 4 June 2025 20:40:10 by Max