Overzicht van de cursus

HTML

LEERDOELEN

OPBOUW VAN DE CURSUS

Markup open_in_new

Wanneer je begint met webontwikkeling, is het belangrijk om het verschil te kennen tussen structuur en opmaak. Ook de termen server, client en browser mogen je niet vreemd zijn. In dit hoofdstuk wordt dus een algemene inleiding gegeven hoe websites worden ontwikkeld, en wat je hiervoor allemaal nodig hebt.

Markup met Markdown open_in_new

Markdown is een simpele Markup-Language waarmee je documenten kan maken in een Code Editor. Je kan titels, alinea's, vette tekst, schuine tekst, lijsten, ... aanmaken met behulp van duidelijke annotaties.

Markup met HTML open_in_new

Een website bestaat vaak uit verschillende onderdelen. Met HTML worden die onderdelen door jou, de ontwikkelaar, correct aangeduid. In dit hoofdstuk wordt uitgelegd hoe HTML jou daartoe in staat stelt.

HTML Elementen open_in_new

Elk document bestaat uit verschillende inhoud, of het nu een Word-document of een webpagina is. Elke inhoud die aangeduid wordt met specifieke markup, wordt ook een element genoemd. Zo wordt het mogelijk om elementen *in* andere elementen te plaatsen.

Attributes open_in_new

Sommige onderdelen op een website hebben meer informatie nodig. HTML gebruikt attributes om deze extra informatie aan te duiden. In dit hoofdstuk leer je werken met attributes.

Block en Inline open_in_new

Elke website heeft grote en kleine onderdelen. Sommigen nemen veel ruimte in beslag, anderen kan je toevoegen in het midden van een zin. Het verschil tussen deze twee soorten onderdelen wordt in dit hoofdstuk verder toegelicht.

Structuur open_in_new

Websites veranderen vaak. Het is dus belangrijk dat je je code zo opbouwt dat die veranderingen gemakkelijk te maken zijn, zonder dat je daar als ontwikkelaar veel werk aan hebt. Een goede structuur is daarbij enorm belangrijk. In dit hoofdstuk wordt verder uitgelegd hoe je zo'n structuur kunt opbouwen.

Semantiek open_in_new

Een website bestaat uit veel verschillende onderdelen. HTML voorziet heel veel mogelijkheden om die onderdelen correct aan te duiden, maar vaak is er maar één optie de meest correcte. In dit hoofdstuk wordt verder uitgelegd welke onderdelen je best op een bepaalde manier aanduidt.

Foutopsporing in HTML en CSS open_in_new

BELANGRIJKE TERMEN

markup

HTML
Een taal die gebruikt wordt om de structuur van een website te bepalen.
CSS
Een taal die gebruikt wordt om de opmaak van een website te bepalen.
commentaar
Een stuk tekst in de code dat genegeerd wordt door de computer. Dit kan gebruikt worden om extra uitleg bij code te geven.
server
Een computer met een eigen, uniek internet-adres waar alle code en bestanden van een website zijn opgeslagen.
browser
Het programma waarmee je een website kunt bezoeken.
viewport
De ruimte in de browser waarin een website getoond wordt.
client
De computer van een gebruiker die surft naar een website.
*.html
Met deze bestands-extensie worden pagina's van een website opgeslagen als document.
index.html
De standaard startpagina van een website. Als je geen pagina meegeeft aan het adres van de website, wordt deze pagina automatisch geladen.

markup-met-html

tag
Een kleiner dan (<) en groter dan (>) teken waartussen een codewoord staat.
tagnaam
Een codewoord dat inhoud aanduidt voor een bepaald doel.
openingstag
Een kleiner dan (<) en groter dan (>) teken waartussen een codewoord staat, dat aanduidt waar de inhoud begint.
sluitingstag
Een kleiner dan (<) en groter dan (>) teken waartussen een forward slash en codewoord staat, dat aanduidt waar de inhoud eindigt.
<h1>-<h6>
Een element dat een koptekst aanduidt.
<p>
Een element dat een alinea aanduidt.
<img>
Een element dat een afbeelding aanduidt. De attributes src en alt zijn verplicht voor dit element.
<hr>
Een element dat een horizontale lijn aanduidt.
<br>
Een element dat inhoud op de volgende tekst-lijn plaatst.
<a>
Een element dat een hyperlink aanduidt. Het attribute href is verplicht voor dit element.

html-elementen

element
Een blok code, bestaande uit een openingstag, inhoud en sluitingstag.
zelfsluitend element
Een element dat de inhoud dat het aanduidt zelf toevoegt. Dit element heeft daarom enkel een openingstag.
nesten
Het insluiten van één element in een ander element.
inhoud
Alles dat tussen de openingstag en sluitingstag van een element staat.
indentatie
Het aantal spaties voor elke lijn code, dat aanduidt in welk element die lijn code is genest.
<html>
Een element dat de basis van de volledige webpagina bepaalt.
<head>
Een element dat meta-informatie over de webpagina bevat.
<body>
Een element waarin alle zichtbare inhoud van de webpagina wordt geplaatst.
<title>
Een element dat de titel van de webpagina aanduidt. Dit element hoort thuis in het <head> element.

html-attributen

attribute
Een deel van de openingstag dat meer informatie geeft over het element.
attribute-key
De naam van het attribute. Dit staat aan de linkerkant van het = teken.
attribute-value
De waarde van het attribute. Dit staat aan de rechterkant van het = teken.
src attribute
Dit attribute geeft een verwijzing naar een extern bestand (zoals een afbeelding of javascript bestand).
alt attribute
Dit attribute geeft een naam aan een afbeelding. Wanneer de afbeelding zelf niet geladen kan worden, wordt deze naam getoond in de plaats.
href attribute
Dit attribute geeft een verwijzing naar een andere website of pagina.

block-en-inline

block-level
Een type element dat steeds op de volgende lijn start en de volledige breedte in beslag neemt.
inline
Een type element dat slechts zoveel breedte inneemt als het nodig heeft en tussen andere inhoud geplaatst kan worden.

structuur

structuur
De logische manier waarop de ontwikkelaar elementen heeft genest.

semantiek

semantiek
Het doel van een element, duidelijk gemaakt door de naam van het element.
<div>
Een algemeen block-level element dat weinig semantische waarde heeft.
<section>
Een block-level element dat een groot onderdeel van een document aanduidt.
<header>
Een block-level element dat gebruikt wordt voor inleidende inhoud of navigatielinks.
<footer>
Een block-level element dat gebruikt wordt aan het einde van het document. Bevat vaak extra informatie over de auteur, copyright en contact-informatie.
<main>
Een block-level element dat gebruikt wordt om de hoofdinhoud aan te duiden. Dit element komt maar één keer voor in het document.
<aside>
Een block-level element met extra inhoud, dat naast de inhoud wordt geplaatst waarin het element geplaatst is.
<article>
Een block-level element met inhoud die onafhankelijk van de rest van de site verspreidt kan worden, zonder dat die inhoud onduidelijk wordt.
id attribute
Geeft een unieke naam aan een element.
class attribute
Deelt een element in bij een groep elementen met gelijkaardige semantische waarde.

foutopsporing

w3c validation error
Dit is meestal een syntax fout in HTML, waarbij een tag-naam of attribute verkeerd is geschreven of een element of attribute op een plaats staat waar deze niet thuishoort. Deze fouten moeten zo snel mogelijk opgelost worden.
w3c validation warning
Dit is meestal een poging om een runtime fout op te sporen in HTML. Wordt vaak getoond wanneer een attribute wordt aangeraden of een element leeg is. Deze fouten moet je zelf inschatten of ze een probleem zijn of niet.