Web Fundamentals

Weergave

HTML ​

HTML staat voor HyperText Markup Language. Het is geen programmeertaal* maar een opmaaktaal: je markeert stukken inhoud en zegt daarmee wat ze betekenen. Niet hoe ze eruit moeten zien, dat is het werk van CSS.

*debatable

Het basisdocument ​

Elk HTML-document start op dezelfde manier.

html
<!doctype html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paginatitel</title>
</head>
<body>
    Inhoud van de pagina
</body>
</html>

Wat elke regel doet:

  • regel 1 zegt de browser dat dit een HTML5-document is
  • regel 2 opent het document en zegt in welke taal de inhoud geschreven is. Dat is geen detail: schermlezers kiezen er hun uitspraak mee, search engines bepalen wie je kan vinden...
  • regel 4 legt de tekencodering vast, zodat é en ë correct verschijnen
  • regel 5 zorgt dat de pagina zich gedraagt op een smal scherm. Waarom precies zien we later bij responsive design
  • regel 6 is de paginatitel, zichtbaar in het browsertabblad en in Google

head en body

De head bevat informatie over de pagina en is niet zichtbaar, op de title na.
De body bevat de inhoud die de bezoeker te zien krijgt.

head is niet header

<head> is het onzichtbare informatieblok bovenaan het document. <header> is een zichtbaar stuk van je pagina, meestal met het logo en de navigatie. Meer daarover volgende week.

Oefening: je eerste document ​

Typ het basisdocument na in de playground. Geef de pagina een eigen titel en zet een zin in de body. Kijk daarna wat er op de pagina zelf staat.

Openen in een nieuw tabblad

En toch werkt het

Ook zonder al die HTML-tags verschijnt er tekst in de browser.
Waarom? Hoe komt dat? En waarom is dat een slecht idee?

Elementen en tags ​

Een HTML-element bestaat uit een opening tag, inhoud en een closing tag.

html
<p>Dit is een paragraaf.</p>
  • <p> is de opening tag, met de tag name p en eventueel attributen
  • Dit is een paragraaf. is de inhoud: tekst, of andere elementen
  • </p> is de closing tag

Elementen kunnen in elkaar zitten, en dat nesten maakt van je document een boom: de DOM. Sommige elementen hebben geen inhoud en dus geen closing tag, zoals <img> en <meta>. Die noemen we self-closing.

Documentatie boven gokken

Twijfel je of een element bestaat, of welke attributen het heeft? Zoek het op in de HTML element reference van MDN. Dat is sneller dan proberen, en je onthoudt het beter.

Attributen ​

Attributen geven extra informatie over een element. Ze staan altijd in de opening tag, en hebben meestal de vorm naam="waarde".

html
<html lang="nl">
<a href="https://odisee.be">Ga naar Odisee!</a>
<img src="images/kat.jpg" alt="Een slapende kat op een toetsenbord">

Vergeet de aanhalingstekens niet. href=https://odisee.be zonder quotes is fout, ook al lijkt het soms te werken. De browser is namelijk erg vergevingsgezind, de docenten niet.

Een link maak je met het a-element, van anchor. Het href-attribuut zegt waar de link naartoe gaat, de tekst tussen de tags is wat de bezoeker ziet en aanklikt.

html
<a href="projecten/">Mijn projecten</a>
<a href="https://developer.mozilla.org">MDN</a>
<a href="#contact">Naar het contactformulier</a>

Een link hoeft geen tekst te zijn. Het kan ook een afbeelding zijn, of een ander element.

Een link is geen knop

Ziet het er soms uit als een knop omdat een designer dat mooier vond, maar brengt het je ergens naartoe? Dan is het een link, en gebruik je a. Een button is voor iets dat gebeurt, niet voor iets waar je naartoe gaat.

Relatieve en absolute paden ​

Als je naar een eigen bestand verwijst, in een href of een src, doe je dat relatief ten opzichte van het bestand waarin je aan het schrijven bent.

PadBetekenis
contact.htmlin dezelfde map als dit bestand
projecten/index.htmlin de map projecten, die naast dit bestand staat
../index.htmlin de bovenliggende map
../../images/logo.pngtwee mappen omhoog, dan in images

Een pad naar een map mag, nee: moet, je afkorten: projecten/ doet hetzelfde als projecten/index.html, want de webserver zoekt daar zelf naar index.html.

Absolute paden werken niet

C:/Users/piet/website/images/logo.png werkt enkel op jouw computer. Op de server bestaat die map niet, en dus is je afbeelding stuk.

Een pad dat met een / begint is ook absoluut: het vertrekt vanaf de document root. Verhuis je je site later naar een submap, dan breekt alles.

Volledige URL's met https:// gebruik je enkel om naar andere websites te verwijzen.

Oefening: welk pad?

Je schrijft in httpdocs/projecten/labo01/index.html. Welk pad gebruik je om te verwijzen naar:

  1. httpdocs/projecten/index.html
  2. httpdocs/index.html
  3. httpdocs/images/logo.png
  4. de website van Odisee
Antwoorden
  1. ../ of ../index.html
  2. ../../ of ../../index.html
  3. ../../images/logo.png
  4. https://www.odisee.be, want dat is een andere website

Oefening: linken tussen mappen ​

Maak in de playground twee pagina's na: een startpagina, en een pagina projecten/index.html. Schrijf op elke pagina een link naar de andere. Welke href gebruik je in welke richting?

Openen in een nieuw tabblad

Antwoord

Vanuit index.html naar de projectenpagina: <a href="projecten/">Projecten</a> of <a href="./projecten/">Projecten</a>

Vanuit projecten/index.html terug naar de start: <a href="../">Home</a>

Afbeeldingen ​

Een afbeelding voeg je toe met img. Dat element is self-closing: er is geen </img>. Alles gebeurt met attributen.

html
<img src="images/kat.jpg" alt="Een slapende kat op een toetsenbord">
  • src is de source: welk bestand geladen wordt, met een relatief pad
  • alt is het tekstalternatief

alt is verplicht, ALT-ijd

Stel je voor dat je de afbeelding niet kan waarnemen: je bent blind, slechtziend, je scherm is kapot, de afbeelding kan niet geladen worden... Welke informatie mis je dan?

Dat schrijf je in alt. Niet "foto" of "afbeelding kon niet geladen worden", wel wat er te zien is en waarom het er staat.

Is de afbeelding puur decoratief en draagt ze geen informatie, dan schrijf je alt="". Leeg dus, maar wel aanwezig. Een ontbrekend alt is de meest voorkomende toegankelijkheidsfout op het web.

Download je afbeeldingen

Zet het bestand in je eigen images-map en verwijs er relatief naar. Verwijs nooit met een volledige URL naar een afbeelding op iemand anders zijn server: die kan ze morgen verplaatsen of verwijderen, en dan staat er een gebroken afbeelding op jouw site. Of erger: een andere afbeelding die je totaal niet wou.

Gebruik vrij te gebruiken beelden, bijvoorbeeld van Unsplash of Pexels.

Hier zie je nesten in zijn eenvoudigste vorm: het ene element zit volledig in het andere.

html
<a href="projecten/">
    <img src="images/portfolio.jpg" alt="Bekijk mijn projecten">
</a>

De hele afbeelding wordt nu klikbaar. Merk op dat het alt nu beschrijft waar de link naartoe gaat, want dat is de informatie die iemand nodig heeft die de afbeelding niet ziet.

Oefening: een afbeelding die linkt ​

Zoek een vrij te gebruiken afbeelding, zet ze in de playground met een zinnige alt, en maak er een link van naar een website naar keuze.

Openen in een nieuw tabblad

Heading levels ​

Koppen lopen van h1 tot h6.

  • de h1 beschrijft de inhoud van de hele pagina, en er is er één per pagina
  • een kop beschrijft altijd wat eronder staat
  • je slaat geen niveaus over: na een h2 komt een h3, niet meteen een h4
  • het is een structuurelement, geen stijlelement. Wil je tekst groter, dan is dat werk voor CSS, niet voor een ander heading level

Oefening: zoek de fouten ​

In dit fragment zitten drie fouten. Zoek ze.

html
<a href=https://odisee.be>Odisee</a>
<img src="C:/Users/piet/foto.jpg">
<h1>Welkom</h1>
<h3>Over mij</h3>
Antwoord
  1. De waarde van href staat niet tussen aanhalingstekens.
  2. De src is een absoluut pad op de computer van Piet, en er is geen alt.
  3. Er wordt een heading level overgeslagen: na h1 hoort h2.
html
<a href="https://odisee.be">Odisee</a>
<img src="images/foto.jpg" alt="Piet aan het werk achter zijn laptop">
<h1>Welkom</h1>
<h2>Over mij</h2>