Lay-out van de website

Als je op internet zoek zijn er genoeg voorbeelden van de ‘beste’ lay-out voor jouw verschillende pagina’s. Daarom gaan we in deze tutorial vooral focussen op de lay-out van je webpagina. Om te beginnen is het belangrijk dat je weet hoe je teksten en afbeeldingen toe moet voegen aan je website. Dit is in de vorige tutorials uitgelegd. 

Dividers & Columns

Om een goed lay-out te krijgen moet je weten hoe je je pagina onderverdeeld in blokken en columns om het overzichtelijk te houden voor de bezoeker van je website. De website verdelen in blokken doe je met een <div> tag. Deze tag zorgt ervoor dat je inhoud onder elkaar in losse blokken terecht komt. Als je bijvoorbeeld een contactformulier op je pagina wilt zetten, dan wil je dat deze los staat van de rest van je pagina. 

Binnen de <div> tags zijn er manieren om alles naast elkaar uit te lijnen. Dit kan door een column-klasse toe te voegen. Dit ziet er als volgt uit:



Natuurlijk doet de klasse niks zonder een CSS Code, dus in die code zetten we neer hoe breed een column moet zijn. We rekenen er eerst op dat we twee columns naast elkaar willen zetten dus we nemen de klasse: column. De column moet aan de linkerkant van de pagina beginnen dus we voegen een float-element toe aan de klasse in ons CSS bestand. met left geven we aan dat de columns aan de linkerkant van de pagina starten.

In de CSS geven we ook aan dat de columns een gelijke breedte moeten hebben. Dit doen we door de breedte van links en rechts op 50 procent te zetten: width: 50%;.

In de HTML geven we aan dat de klasse van de eerste column een column is met: class=“column” aan het blok. Daarnaast geven we ook aan dat het de linker column is door left als klasse toe te voegen: class=“column left”. de tweede column geven we dan de klasse: class=“column right”.


Je kunt ook columns maken met verschillende breedtes door bijvoorbeeld de linker column 25 procent te geven en de rechter column 75 procent. Ook kun je een column vullen met een afbeelding of een lijst in plaats van een paragraaf.

Opmaak van de tekst

De columns zijn goed gelukt, maar de tekst is een beetje saai, daarom geven we de tekst een opmaak in het CSS bestand. We nemen eerst de titels. Deze titels moeten allemaal dezelfde stijl krijgen dus die geven we in het CSS bestand aan als: h2, h2, h3 enz. achter de titel-namen kunnen we de opmaak tussen haken zetten. In het voorbeeld hieronder passen we de kleur aan met het color-element en we passen de dikte van de letters aan met het font-weight-element (400 staat hierin gelijk aan een normale dikte en 700 is hetzelfde als dik-gedrukte letters.).



De paragraaf tekst passen we aan op dezelfde manier. Alleen willen we dat de paragraaf tekst 1 font-grootte aanhoudt, namelijk 14 pixels. Dit doen we door het font-size-element toe te voegen. Het lettertype in het geheel veranderen kan door het font-family-element. In het onderstaande voorbeeld is het lettertype veranderd in de font-family: Arial, Helvetica, sans-serif;



Nu ben je in staat om de basis van je eigen website-pagina’s te ontwerpen en dit te programmeren! Bij vragen kun je altijd een reactie achterlaten.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *