Site Map Opdrachten Theorie Modulen Trajecten

HTML: 03- Webpagina Opbouw


Structuur

Een webpagina bestaat bijna altijd uit de volgende onderdelen, namelijk een bovenkant, het menu, de inhoud van de pagina en een onderkant. Een structuur die je vaak tegenkomt maar af en toe van wordt afgeweken, omdat het beter past bij het gewenste resultaat. Zie tabel 1 voor een visuele overzicht.
 
Header (Bovenkant)
Menu
Breadcrumbs (Broodkruimels)
Content (Inhoud van de pagina)
Footer (Onderkant)
Tabel 1: pagina opbouw

Terug naar boven

Header

De bovenkant noemen we de header en hierin staat de naam van het bedrijf of product, met eventueel bijbehorende logo en slogan. Het belangrijkste is dat de gebruiker ziet met welk bedrijf of product hij te maken heeft.
Een "regel" is dat de header ook werkt als een hyperlink, zodat de gebruiker doorverwezen wordt naar de start pagina van de website.

Terug naar boven

Menu

Het menu geeft de gebruiker de mogelijkheid heeft om snel naar bepaalde gebieden van de website te gaan, of op de pagina zelf waardoor de gebruiker niet naar beneden hoeft te scrollen. Een website kan gegroepeerd worden in een aantal gebieden, elk met een bepaald doel. Denk aan bijvoorbeeld de verdeling van vakken tussen alfa, bèta en gamma. De gebruiker moet via het menu makkelijk door de website kunnen manoeuvreren.

Terug naar boven

Wanneer je een paar keer in het menu hebt geklikt is het soms moeilijk te achterhalen hoe je daar terecht bent gekomen, of op welke pagina je zit. Om de gebruiker hiervoor ondersteuning te geven kan je gebruik maken van breadcrumbs (broodkruimels). Denk aan het verhaal van Hans en Grietje die het bos inlopen en broodkruimels achterlaten zodat ze hun weg terug kunnen vinden.
Bij een grote website moet de gebruiker soms die 4 of 5 keer klikken om op de gewenste webpagina te komen. Het kan zijn dat hij een verkeerde keuze maakt en snel terug wil om een andere keuze te maken. Via een breadcrumb kan je de gebruiker makkelijk zijn pad terug laten bewandelen.
Een breadcrumb is niet verplicht maar draagt wel bij aan de gebruikersvriendelijkheid van een (grote) website.

Terug naar boven

Content

De inhoud is waar het om draait in een website. De gebruiker zal in dit gedeelte de nodige tekst lezen. Het belangrijkste is dat de webpagina de gebruiker goed weet te bedienen in zijn behoeften en dit overzichtelijk weet te brengen.

Terug naar boven

Footer

De onderkant, ook de footer genoemd, staat onderaan de pagina. Hier staat de copyright, de jaren waarin de copyright van toepassing is de naam van het bedrijf of product en de tekst ‘alle rechten voorbehouden’.
Net als bij de header is een "regel" dat de naam van het bedrijf of product een hyperlink is naar de start pagina.

Terug naar boven

Code toevoegen

code toevoegen
Figuur 1: code toevoegen

In bijna alle landen, zoals in Nederland, lezen we van boven naar beneden en van links naar rechts. Zo schrijven wij onze verslagen, e-mails of andere teksten. Deze gewoonte zal je ook hebben wanneer je een webpagina gaat opzetten, maar dit zal op den duur problemen opleveren. Zeker wanneer je veel elementen op de webpagina wil zetten.
Wanneer we beginnen met het typen van regel 1, daarna regel 2, regel 3 enzovoorts, kan het voorkomen dat je een sluitingstag vergeet. In figuur 2 hebben we 13 regels code, werk je aan een webpagina waar er veel wensen en eisen voor zijn, kan het aantal regels code oplopen tot ver boven de 100. Op zo’n pagina zal er veel gebruik gemaakt worden van geneste tags, waarbij het risico steeds groter wordt dat je ergens een sluitingstag vergeet te plaatsen. Dit heeft uiteraard nadelige gevolgen voor het verdere verloop van de webpagina.


Video 1: het opzetten van de code bij figuur 1

Terug naar boven

Manieren van werken

Hoe moet je dan te werk gaan? Video 1 laat zien wat de aanbevolen manier is om een pagina op te zetten. Je begint met de begintag en typt direct daarna de eindtag. Zou je figuur 5 opzetten dan begin je als eerste met regel 1 en wat nu bij regel 13 staat. Hierna typ je regel 2 en daarna wat bij regel 6 staat. Op deze manier vergeet je nooit de eindtag.
Iets anders dat opvalt is dat bij een geneste tag steeds ingesprongen wordt. Hierdoor wordt de opbouw van je webpagina overzichtelijker, waardoor kan je sneller ziet in welk element je werkt. Dit laatste zorgt dat je code gaat werken als een accordeon die steeds uittrekt en weer samentrekt, als je het van boven naar beneden leest.
De laatste 2 manieren van werken helpt bij het voorkomen van het maken van bepaalde fouten.

Terug naar boven

De tags voor de pagina opbouw

Bij het opzetten van een webpagina gebruik je steeds dezelfde tags. Deze zijn html, head, title, meta, body, div en a. Zoals eerder vermeldt geeft elke tag een opdracht naar de browser. Maar welke opdrachten geven deze tags en waar moeten komen ze te staan?

Terug naar boven

html

De eerste tag die wordt gebruikt is de "html tag". Met deze tag wordt aangegeven dat het gaat om een HTML webpagina, opgebouwd uit andere tags.

Terug naar boven

head

De tweede tag is de "head tag", een verzamelplaats voor de "title tag" en de "meta tags".

Terug naar boven

title

De tweede tag is de "head tag", een verzamelplaats voor de "title tag" en de "meta tags".

Terug naar boven

meta

De "meta tag" bevindt zich in de "head element" en verstuurt informatie naar de browser, dat onzichtbaar is voor de gebruiker. Deze informatie wordt vaak gebruikt door zoekmachines of om extra informatie te bieden over de webpagina.

Terug naar boven

body

De "body tag" is om informatie op het scherm te tonen aan de gebruiker en bevindt zich in de "html element". Alle tags die zichtbaar zijn voor de gebruiker moeten in de "body element" geplaatst worden.

Terug naar boven

div

Met de "div tag" ga je de hoofdlijnen van je webpagina opzetten. In figuur 4 zie je dat een webpagina opgebouwd is in meerdere lagen. Deze lagen kan je maken door de "div (division) tag" te gebruiken. Het plaatst een "lege" blok over de hele breedte van de pagina, waardoor hiernaast geen tekst (of iets anders) naast kan staan. In deze tag kan je andere tags zetten die in hoofdlijnen van elkaar gescheiden worden. Hierdoor blijft de structuur behouden, ook na aanvullingen. Deze tag bevindt zich in de "body element".

Terug naar boven

a

De eerste twee letters van HTML hebben met deze tag te maken, HyperText. Deze tag zorgt voor het verwijzen naar andere webpagina's, locaties op (andere) webpagina's of mediabestanden. Daarnaast heb je ook de mogelijkheid om te kiezen hoe deze verwijzing plaatsvindt, wordt het (standaard) geopend in hetzelfde scherm of op een nieuwe tabblad.
Een stukje tekst of een andere tag dat zorgt voor een doorverwijzing, noemen we een hyperlink.

Terug naar boven



Ga verder naar HTML: 04- De Meta Tag
Over Visual Code

Visual Code is een methode, opgezet voor iedereen die een website wil leren maken. Er zijn verschillende soorten websites. Deze soorten websites zijn opgedeeld in trajecten. Deze trajecten zijn opgedeeld in modulen. Zo begin je met het opzetten van een statische website om deze steeds verder uit te breiden.
Contact

Twitter | Vimeo