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
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....
, 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-codeIk 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 (bijvoorbeelden een sluit tag bijvoorbeeld
...
betekent dat de tekst een pragraaf is. 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
Paragraaf / alinea
Dit is een stukje tekst. Hallo! Ik ben [jouw naam]. Ik ben enthousiast over programmeren. Ik hou van muziek maken Later wil ik werken als programmeur bij een groot bedrijf. Meer informatie over katten vind je op
Wikipedia.
π Eenvoudige HTML-tags voor tekstopmaak
Tag
Betekenis
Voorbeeld
Uitleg
t/m
Koppen
Grote titel
is de grootste kop,
de kleinste
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
Over mij
Mijn hobby's
voetballen
en gamen.Toekomst
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
π° 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
Mijn favoriete dier
= unordered list
Genummerde lijst: gebruik je met
= ordered list
Elk item in een lijst staat in een
Mijn hobby's
Top 3 favoriete snacks
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 ,
, 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!
π° 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
Mijn schoolrooster
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:
Dag
Vakken
Maandag
Nederlands, Wiskunde
Dinsdag
Engels, Gym