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

en

doet? En

....

, 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 🎬Video - korte uitleg HTML 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 Voeg een bestand toe met de naam opdracht2.html 2. Typ deze HTML-code 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

en een sluit tag bijvoorbeeld

...

betekent dat de tekst een pragraaf is.

...

betekent dat de tekst een header is. Je hebt nog meer headers:

,

, ..... Opdracht Vervang de header die tussen

...

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
-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 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 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 Hoe voeg je een plaatje toe op je web pagina? 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 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 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