1. HTML-Basics
Wat heb je vorige week geleerd?
1 / 18
volgende
Slide 1: Woordweb
Software DeveloperMBOStudiejaar 1
In deze les zitten 18 slides, met interactieve quizzen en tekstslides.
Lesduur is: 180 minOnderdelen in deze les
Wat heb je vorige week geleerd?
Slide 1 - Woordweb
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 2 - Tekstslide
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 3 - 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 4 - 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 5 - Tekstslide
Hello world
<head>
<body>
Slide 6 - 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 7 - 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 8 - 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 9 - Tekstslide
Een afbeelding toevoegen
<img src=”img/plaatje.jpg” alt=”alternatieve tekst als het plaatje niet werkt”>
Slide 10 - Tekstslide
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 11 - Tekstslide
Een a-element toevoegen
Code: Browser
<a href=”songs.html”>Songs</a>Slide 12 - Tekstslide
Opdracht 1.7 Een a-element toevoegen
1. Klik in Sublime Text 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 13 - Tekstslide
Patroon 1.6: Elementen en attributen
In Sublime Tekst 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 14 - 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 15 - 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 16 - Tekstslide
Welke code-fouten haal je uit de index.html van fouten.zip? Stuur ze hier in. Per fout insturen.
Slide 17 - 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.
