1. HTML-Basics
WEB
Webdevelopment-I (WDV-I)
Les 1 / Week 1
HTML Basics
Itslearning --> (Modules) --> WEB --> WDV-I
1 / 29
volgende
Slide 1: Tekstslide
Software Developer [WEB_A]MBOStudiejaar 1
In deze les zitten 29 slides, met interactieve quizzen en tekstslides.
Lesduur is: 180 minOnderdelen in deze les
WEB
Webdevelopment-I (WDV-I)
Les 1 / Week 1
HTML Basics
Itslearning --> (Modules) --> WEB --> WDV-I
Slide 1 - Tekstslide
Week 1 // WEB
HTML Basics
Moduleboekje:
Itslearning --> Bronnen --> Modules --> WEB: WDV-I --> Lesmateriaal --> Moduleboekje_WDV-I.pdf
Slide 2 - Tekstslide
Inhoud van de les
- Welkom bij de lessen (20 min )
- Installeren Visual Studio Code en Laragon (30 min)
- Kennismaken met een HTML-document (30 min )
- HTML-elementen (30 min)
- Aan het eind van de les weet je welke programma’s we gebruiken om code te schrijven en uit te laten voeren en wat de structuur is van een basis-HTML-document is.
- Aan het eind van de les kun je een basis HTML-document opbouwen met behulp van o.a. <!DOCTYPE>, <head>, <body>.
Gebruikmaken van verschillende elementen zoals <h1>, <img>, <a> en die laten zien in de browser.
Slide 3 - Tekstslide
Wat is HTML en waarvoor gebruiken we het?
Slide 4 - Open vraag
HTML (Hyper Text Markup Language)
- Frontend language (te zien voor de gebruiker / statisch)
- webpagina’s met een banner en navigatie bovenaan.
- Één of meerdere artikelen die de content vormen
- Een kolom aan de rechterkant voor reclame
- Een voettekst met bedrijfsinformatie onderaan.
Slide 5 - Tekstslide
Onze ontwikkelomgeving inrichten
Opdracht 1.1: een lokale webserver installeren
- Ga naar Itslearning - Bronnen Modules - WDV-I - Lesmateriaal - Week 1 - H1 Instructie laragon
- Voer het installatieprogramma uit. Zorg dat bij de pagina ‘Select a folder’ C:\laragon' staat.
- Voltooi de installatie.
- Ga naar https://code.visualstudio.com/
- Klik op ‘Download for Windows’ en doorloop het installatieprogramma.
Slide 6 - Tekstslide
Klaar met de installatie?
Ja
Slide 7 - Poll
Patroon 1.1: Nieuw project opstarten
Voor elk project start je vanuit C:\laragon\www\
In de www-map maken we een map aan voor een project waarmee we gaan starten.
Slide 8 - Tekstslide
Opdracht 1.3: projectstructuur opbouwen
- 1. Navigeer naar C:\laragon\www\
- 2. Maak in deze map één map met de naam ‘myportfolio’.
- 3. Zet in deze map twee mappen:
- a. img (voor images/afbeeldingen)
- b. css (voor stijl: hier gaan we later mee aan de slag
- 4. Open Visual Studio Code en klik op File en vervolgens ‘Open folder’.
- 5. Zoek de map C:\laragon\www\myportfolio en klik op ‘map selecteren’.
- 6. Je kunt nu je project zien en bewerken.
- 7. Klik met de rechtermuis op de projectmap ‘New file’ en sla deze op onder de naam ‘index.html’ in de hoofdmap.
Slide 9 - Tekstslide
Opdracht: Opbouwen mappenstructuur. Geef het hier aan als je de opdrachten: projectmappenstructuur hebt uitgevoerd.
Slide 10 - Open vraag
Basis opbouw HTML Document
<open tag> datgene waar de tag op slaat </sluiten tag>
Zet altijd je server ‘Apache’ aan in Laragon als je gaat testen in de browser. (open hiervoor programma ‘Laragon’).
Als Apache groen kleurt weet je dat de server werkt.
Opdracht 1.4: basisopbouw van een website maken
1. Zet als je gaat programmeren server ‘Apache’ aan in de Laragon-omgeving door op Start te klikken.
2. Klik met de rechtermuis op de map ‘myportfolio’ en maak een ‘New file’ aan met de naam ‘index.html’.
Typ in je net gemaakte bestand het de rechtse code in je editor:
3. Kijk eens in je browser naar het bestand door te typen ‘myportfolio.test’.
4. Merk op dat het <title>-element nu te zien is als titel van je tabblad. De tekst binnen het <body>-element in het <p>-element is te zien op de pagina zelf.
Slide 11 - Tekstslide
Elementen en tags
Voordat we daadwerkelijk gegevens kunnen zien in de browser kunnen we gegevens instellen over ons project. Hieronder zie je enkele elementen. Waar zouden ze voor kunnen staan?
We bespreken ze samen.
Commentaar
<!DOCTYPE>
<html lang>
<head>
<title>
<meta>
<link>
Slide 12 - Tekstslide
Patroon 1.3: Basisopbouw 1: Opbouw van een webpagina
1. We starten het HTML-document door te vertellen dat het een HTML-document betreft, waarna we de taal van de pagina instellen, in het onderstaande voorbeeld ‘Nederlands’:
2. Na deze gegevens volgt het head-element, waarin we informatie over onze webpagina zetten die we niet kunnen zien, maar wel gebruikt wordt door browsers.
3. De daadwerkelijke content van de pagina, die de gebruiker gaat zien komt te staan in het body-element
4. Aan het eind van onze code sluiten we onze html af:
Slide 13 - Tekstslide
Hello world
<head>
<body>
Slide 14 - Tekstslide
Patroon 1.4: Opbouw van het body-element
1. <Header> Dit is het bovenste deel van de pagina en op elke pagina ongeveer hetzelfde – vaak zit het logo en de navigatiebalk (nav) in de <header>2. <main> Hier komt de content van je pagina; dit verschilt op elke pagina.
3. <footer> Dit is het onderste deel van de pagina. Ook dit is eigenlijk op iedere pagina ongeveer hetzelfde en zit vast aan de onderkant van je pagina. Hierin staan bijv. contactgegevens of logische links waar je naar door kunt klikken.
Slide 15 - Tekstslide
Elementen en tags <body>
- <body>
- <nav>
- <header>, <main>, <footer>
- <div>
- <p>
- <h1> t/m <h6>
parent - child relatie
<p>Dit kan een stukje tekst zijn dat je wilt laten zien op je pagina</p>
Slide 16 - Tekstslide
Opdracht 1.5: onze eerste code
We gaan onze myportfolio-pagina uitbreiden. Nog niet met de echte inhoud, maar we geven onze pagina wel structuur mee, door aan te duiden waar de navigatie gaat komen, waar de werkelijke content komt en hoe de footer geplaatst is.
1. Verwijder het in opdracht 1.4 gemaakte <p> element in je body.
2. Open in je body een header-element (typ: ‘header’ en druk op ‘tab’), main-element en <footer>-element.
3. Zet in je header-element een image-element (druk na <header> op ‘enter’. Typ ‘img’ en druk op ‘tab’.
4. Zet onder het image-element een heading-1-element (typ ‘h1’ en druk op ‘tab’). Typ in het element ‘Mijn portfolio’.
5. Zet onder het h1-element een nav-element met daarin een p-element, op de manier zoals hiernaast weergegeven.
6. Ga naar het main-element en zet daarin een h2-element en een p-element
7. Zet binnen het footer-element een p-element met daarin een copyright-teken (‘©’) met daarachter jouw naam en het jaartal.
8. Kijk in de browser naar het resultaat.
Slide 17 - Tekstslide
Sleep de juiste elementen naar de juiste plaats:
<body>
</body>
<head>
<header>
<main>
</header>
<footer></footer>
<nav></nav>
<p>Hallo</p>
</main>
<title>
<heading>
</heading>
</html>
Slide 18 - Sleepvraag
In welk deel van de webpagina zet je de code die voor de gebruiker zichtbaar is?
A
head
B
body
Slide 19 - Quizvraag
Met welk element maak je een kop?
A
head
B
header
C
heading
D
hoofd
Slide 20 - Quizvraag
Een afbeelding toevoegen
<img src=”img/plaatje.jpg” alt=”alternatieve tekst als het plaatje niet werkt”>
Slide 21 - Tekstslide
Opdracht 1.6: een afbeelding toevoegen aan het project
1. We gaan in ons myportfolio-project een afbeelding toevoegen. Hiervoor slaan we eerst een afbeelding op. Zoek een afbeelding van jezelf of een leuk plaatje op internet op wat gerelateerd is aan jou en sla dit plaatje in de map ‘img’ op als ‘home_img.jpg’.
2. Nu gaan we in de body van onze code het plaatje met de juiste html-tags toevoegen. In het main-element zie je al een img-element. Zet tussen de aanhalingstekens achter het source (‘src’->bron)-attribuut het volgende: ‘img/home_img.jpg’.
3. Als je het plaatje op de juiste plaats in de map hebt gezet kan hij het plaatje nu vinden door de map ‘img’ in te gaan en daar het plaatje ‘home_img.jpg’ op te zoeken. Kijk eens in je browser of het gelukt is?
4. Het img-element heeft ook nog een tweede attribuut: ‘alt’. De waarde van dit attribuut is een alternatieve beschrijving van het plaatje als het plaatje niet (meer) werkt.
5. Kijk eens of je nog meer plaatjes kunt toevoegen aan je main content? Grootte en plaats maken nog niet uit, hier gaan we later aan werken.
Slide 22 - Tekstslide
Een a-element toevoegen
Code: Browser
<a href=”songs.html”>Songs</a>Slide 23 - Tekstslide
Opdracht 1.7 Een a-element toevoegen
1. Klik in Visual Studio Code met de rechtermuisknop op de projectmap ‘myportfolio’. Klik op ‘New File’. Sla het bestand in de hoofdmap op als ‘hobbies.html’. Doe dit hetzelfde voor ‘projects.html’, ‘aboutme.html’, ‘playlist.html’, en ‘contact.html’.
2. Open ‘hobbies.html’ en bouw de basis-html-structuur op (zie patroon 1.2 en 1.3). Denk aan het DOCTYPE, head-element, body-element, header, main, footer.
3. Kopieer de tekst in je header van ‘index.html’ naar de pagina ‘hobbies.html’, zodat je je navigatiemenu ook op de nieuwe pagina ziet.
4. Zet in de main van je hobbies.html een h2-element met de tekst ‘Hobbies’.
5. Ga terug naar je index.html bestand in de editor en navigeer naar het deel tussen de <nav>-tags. Haal het p-element daar weg.
6. Zet twee a-elementen in het nav-element:
• Index.html Leidt naar homepagina terug
• Hobbies.html Leidt naar een pagina over jouw hobbies
7. Laten we eens kijken in de browser hoe dit er uit ziet. De html-pagina laat in de browser zien dat we op een tekst ‘Hobbies’ kunnen klikken en dan gaan we naar de pagina hobbies.html. Kijk in de URL of je ziet dat het websiteadres gewijzigd is van localhost/myportfolio/index.html naar localhost/myportfolio/hobbies.html. Op die pagina zie je alleen de tekst ‘Hobbies’ staan.
8. Kijk eens of je ook een link kunt maken naar pagina’s ‘Projecten’(projects.html aanmaken), ‘Over mij’ (aboutme.html aanmaken), ‘Playlist’ (playlist.html aanmaken) en ‘Contact’ (contact.html aanmaken) en terug naar ‘Home’?
Slide 24 - Tekstslide
Patroon 1.6: Elementen en attributen
In Visual Studio Cde hebben we inmiddels al met verschillende elementen gewerkt. Deze elementen krijgen in onze editor een rode kleur. Een element kan één of meerdere attributen bevatten. Een attribuut zegt iets over het element en heeft een paarse kleur. De waarde van het attribuut (tussen aanhalingstekens) heeft een lichtgroene kleur.
Een img-element heeft in ons eerder genoemde voorbeeld een attribuut
• src: source/bron (waar staat het betreffende plaatje)
• alt: alternatieve tekst als het plaatje niet (meer) werkt.
Een a-element heeft in ons eerder genoemde voorbeeld één attribuut:
• href: hyperlinkreference (naar welke pagina brengt de anchor-tag/de link ons toe)
Slide 25 - Tekstslide
Patroon 1.7: fouten in je code
Geen resultaat in je browser? Dan zit er een fout in je code:
Veelvoorkomende beginnersfouten zijn:.
- het niet afsluiten van tags </>.
- spellingsfouten bij namen van elementen. Bijvoorbeeld <budy> i.p.v. <body>.
- Hoofdletters in elementtags gebruikt: <Header>
- Slash verkeerde kant op <a href=”index.html”>Home<\a>
- Twee openingstags. Bijv. <p> stukje tekst <p>
- Niet verwezen naar de juiste pagina.
Om dit te voorkomen kun je je code nalopen en letter voor letter controleren of je code klopt.
Tip: een tip van een ervaren programmeur: let op het indenten. Een child staat altijd één tab verder naar rechts dan de parent. Wordt het element afgesloten, dan start het volgende element op dezelfde lijn.
Voorbeeld:
1. Main is de parent van de division met class ‘wrapper’ (deze is geindent ten opzichte van main).
2. Div is de parent van de children <h2>, <p> en <img>. De children zijn 1 tab geindent ten opzichte van div.
Slide 26 - Tekstslide
Opdracht 1.7: fouten uit je code halen
1. Ga naar Itslearning en open in module WDV-I - Lesmateriaal - Week 1 het zip-bestand ‘fouten.zip’.
2. Extract (uitpakken) het bestand en plaats de map in je htdocs.
3. Open de folder in je editor, zoals je dat hebt geleerd in patroon 1.1.
4. In de index.html-file zijn een aantal fouten geslopen, waardoor de pagina nog niet werkt. Aan jou de taak om de 7 fouten er uit te halen.
5. Stuur de fouten in op de volgende pagina.
Slide 27 - Tekstslide
Welke code-fouten haal je uit de index.html van fouten.zip? Stuur ze hier in. Per fout insturen.
Slide 28 - Woordweb
Inleveropdracht H1 / Een website voor het Smartcafé
In Itslearning --> WDV-I --> Weekchecks --> Inleveropdracht H1 vind je de opdracht voor deze week.
Lever een screenshot in van:
• bites.html: de code die je geschreven hebt over het kaasplankje.
• drinks.html: hoe je drankjes er in de browser uit ziet.
