Labo 1: webserver en tools

Vandaag zet je alles op wat je de rest van het semester gebruikt: een editor, je eigen webruimte, en de mappenstructuur van je portfolio. Op het einde van dit labo staat er een website van jou op het internet, met meerdere pagina's die naar elkaar verwijzen.

Dat klinkt klein. Het is het niet: je hebt dan de volledige ketting gehad, van een bestand op je laptop tot een adres dat iedereen ter wereld kan openen.

Doelstellingen

Na dit labo kan je:

• een editor installeren en er een project mee openen G_2.5
• uitleggen wat er gebeurt tussen jouw computer en de webserver wanneer je een pagina opvraagt CORE_1.1
• een mappenstructuur opzetten waarin elke pagina index.html heet CORE_1.4
• je bestanden publiceren op je eigen hostingaccount
• pagina's in verschillende mappen naar elkaar laten verwijzen met relatieve paden CORE_2.5
• een afbeelding toevoegen met een correct pad en een zinnig tekstalternatief CORE_2.6 CORE_7.1
• je HTML valideren met de W3C-validator CORE_2.9

Slides

Deel 1: je werkomgeving (± 60 min)

Installeer een editor

Je hebt twee opties:

• WebStorm: gratis voor iedereen, kant-en-klaar, je moet niets instellen of toevoegen.
• VS Code: gratis voor iedereen, maar je voegt zelf de nodige plugins toe.

Kies er één en installeer ze. Twijfel je, neem dan het dezelfde editor als die van je labodocent. Kies je toch voor een andere, dan verwachten we dat je zelfredzaam bent in die bepaalde editor.

AI 🤖

Schakel onmiddellijk alle AI-code completion volledig uit.
Je gebruikt geen AI om de fundamentals van iets te leren. Dat is gewoon echt niet slim.

Maak je project aan

Maak een map voor je portfolio en open die als project in je editor.
Bouw nadien in je editor deze structuur:

portfolio/
├── index.html
├── projecten/
│   ├── index.html
│   └── labo01/
│       └── index.html
└── images/

• index.html wordt de startpagina van je portfolio
• projecten/index.html wordt het overzicht van al je labo's
• projecten/labo01/index.html wordt de pagina over dit labo
• images/ blijft voorlopig leeg

Geen hoofdletters, geen spaties

Niet Mijn Projecten, niet Labo 01, niet Über mich. Enkel kleine letters, cijfers en koppeltekens. Op je eigen computer werkt het misschien nog. Op de server niet.

Vul elke pagina

Zet in elk van de drie bestanden een volledig basisdocument, met een eigen unieke title en minstens een h1 en een paragraaf. Gebruik lang="nl" of nog specifieker: lang="nl-BE".

🤔 Title

Een goede title toont éérst het specifieke deel en dan pas het algemene deel!

Niet → "Mijn website | Projecten"
Wel → "Projecten | Mijn website"

Anders zie je in je browsertabs enkel "mijn webs" "mijn we" "mijn websi" ... in plaats van wat belangrijk is.

💡 Tip

Typ ! in je editor en druk op tab. Emmet maakt het skelet voor je. Controleer het wel! Want er soms staat te veel in de meta viewport tag!

Dit mag er absoluut niet in, want het verhindert inzoomen.

user-scalable=no, maximum-scale=1.0, minimum-scale=1.0

Is dat bij jou het geval?
Vraag raad aan je labodocent, je kan die "zen live template" wijzigen.

Controlepunt 1

Laat je mappenstructuur en je drie pagina's controleren door de labodocent. Dit telt mee voor je permanente evaluatie.

Deel 2: van je computer naar het web (± 45 min)

Open je pagina op twee manieren

Dubbelklik eerst op je index.html in verkenner.
De pagina opent in je browser, maar kijk naar de adresbalk: die begint met file:/// en verwijst naar een map op jouw schijf ❌.

Open nu je pagina via de webserver van je editor.

• In vs code is dat via de live preview plugin.
  💡 Kies altijd voor 'open in browser'
• In webstorm/phpstorm kies je onmiddellijk voor 'open in browser'

Nu zie je je site net alsof ze door een echte server gehost zou worden ✅.

Log in op je hostingaccount

Je webruimte draait op Plesk. Je labodocent toont hoe je inlogt en waar je bestanden moeten staan.

Zet de inhoud van je projectmap in httpdocs op de server. Let op: de inhoud van je map, niet de map zelf. Je index.html moet rechtstreeks in httpdocs staan, niet in httpdocs/portfolio/.

Controlepunt 2

Toon je labodocent je site op je eigen adres, en toon dat je drie pagina's bereikbaar zijn via jouwnaam.ikdoeict.be, jouwnaam.ikdoeict.be/projecten en jouwnaam.ikdoeict.be/projecten/labo01.

Deel 3: pagina's die naar elkaar verwijzen (± 45 min)

Een website met losse pagina's waar je niet naartoe kan klikken, is geen website.

Voorzie op elke pagina een navigatie met drie links: naar de startpagina, naar de projectenpagina, en naar de pagina van labo 1. Gebruik overal relatieve paden.

Denk goed na: dezelfde link ziet er anders uit naargelang de map waarin je schrijft. Vanuit projecten/labo01/index.html is de weg naar je startpagina niet dezelfde als vanuit projecten/index.html.

Schrijf op de pagina van labo 1 ook kort op wat je vandaag gedaan hebt en wat er misliep. Dat is meteen het begin van de gewoonte die je het hele semester aanhoudt.

💡 HTML

Die HTML zal vandaag nog niet 'correct' zijn. We hebben nog veel te weinig gezien.

Gewoon <a>-tags voor de links, in de <body>, is nu ruim genoeg.
Als je wil kan je ook paragrafen (<p>) gebruiken voor de grote stukken tekst. En <h1> etc. voor de titels.

Publiceer opnieuw en test elke link door erop te klikken, ook op de server. Een link die lokaal werkt maar op de server niet, is bijna altijd een hoofdletter of een absoluut pad.

Deel 4: een afbeelding en validatie (± 30 min)

Voeg een afbeelding toe

Zoek een vrij te gebruiken afbeelding op Unsplash of Pexels. Download ze en zet ze in je map images.

Verwijs er relatief naar, met een alt die beschrijft welke informatie je wil overbrengen met die afbeelding.

Niet linken naar andermans server

<img src="https://unsplash.com/ergens/foto.jpg"> lijkt te werken, maar je toont dan een bestand van iemand anders zijn server. Verdwijnt het daar, dan staat er bij jou een gebroken prent. Besluiten ze om daar morgen iets anders te zetten, dan staat dat bij jou ook zo...

Zet het bestand bij jou, als je er de rechten voor hebt
(CC0, public domain, CopyLeft, eigen materiaal...)

Maak van je afbeelding ook een link, door ze in een a te steken.

💡 Alt-tekst

Wanneer je een afbeelding als link gebruikt wijzigt de informatie die je wil overbrengen met die afbeelding.

😺 Hoe?

Valideer

Controleer al je pagina's met de W3C Markup Validation Service. Je kan je online adres rechtstreeks ingeven.

Controlepunt 3

Je website is altijd gevalideerd. Website niet geslaagd? Jij ook niet.

Toon je gevalideerde pagina's met werkende navigatie en je afbeelding aan de labodocent.

Indienen

Je site staat online tegen zondag om 20u, op je eigen adres.

Zorg dat op dat moment:

• je drie pagina's bereikbaar zijn via nette URL's zonder .html
• elke pagina een werkende navigatie heeft met relatieve paden
• je afbeelding zichtbaar is en een zinnig alt heeft
• alles valideert
• je wachtwoord gewijzigd is

Als er iets misgaat

De klassiekers, in volgorde van hoe vaak ze voorkomen:

• Ik zie mijn wijziging niet. Je browser toont een bewaarde versie. Doe een harde refresh met Ctrl+F5 of Ctrl+Shift+R. Zie je ze dan nog niet, dan heb je waarschijnlijk niet geüpload.

• 404 op de server, terwijl het lokaal werkt. Bijna altijd een hoofdletter of een spatie in een map- of bestandsnaam. De server maakt wel een verschil tussen Projecten en projecten, jouw laptop niet.

• Mijn afbeelding is stuk. Ofwel een absoluut pad dat naar je eigen schijf wijst, ofwel het bestand staat niet mee op de server, ofwel de extensie klopt niet: .JPG is niet .jpg.

• Ik zie een '404' pagina. Er staat geen index.html in die map, of hij heet anders.