Overzicht van de cursus
HTML
LEERDOELEN
- De termen server, client, browser, viewport kunnen benoemen en definieren
- Weten wat een element is en uit welke onderdelen een element is opgebouwd
- Weten wat een attribute is en uit welke onderdelen een attribute is opgebouwd
- De termen nesten, indentatie, structuur, semantiek kunnen benoemen en definieren
- Block en inline elementen van elkaar kunnen onderscheiden
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.