De -header-, -main-, -footer- en -nav-

uit de cursus Basiskennis HTML5 (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML5 (2019)

perm_identity Belinda | video_library 55 video's | query_builder 3:02:53

Webpagina’s maken met HTML

Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd

Doelgroep van deze cursus

Iedereen die wil leren hoe je statische websites maakt of haar/zijn kennis wil uitbreiden van webdesign-technieken in het algemeen. Heb je bijvoorbeeld al ervaring met het maken van websites met een CMS als WordPress. Dan nog is het bijna onmisbaar om voldoende begrip te hebben van de broncode.

Wat ga je leren

In de cursus basiskennis HTML5 leer je hoe je webpagina’s structureert met de juiste HTML-tags. Je krijgt uitgebreid uitleg en inzicht in de juiste wijze waarop je de html-tags toepast.

Je leert hoe de juiste mappenstructuur voor webproducties in de zogeheten Local Root Folder. je krijgt uitleg over de semantische betekenis van de html-tags en leert hoe je pagina’s structureert conform de regels van het W3C.

Eventuele vervolgcursus

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen specifieke voorkennis nodig. Algemene kennis van de computer is wel belangrijk.

De -header-, -main- en -footer- zijn semantische elementen.

Hiermee geef je betekenis aan de layout van de pagina.

Deze elementen zijn eenvoudig te herkennen.

De header staat meestal direct bovenaan de pagina.

Het is de plek waar de bedrijfsidentiteit terugkomt.

Dus is het logo, de bedrijfsnaam, een slogan en soms het telefoonnummer.

Meestal is dit ook de plek waar je functionaliteiten aantreft als...

het kunnen in- en uitloggen, een winkelwagentje en een zoekfunctie.

De daadwerkelijke informatie van de pagina plaats je in het main-element.

En de footer staat bijna altijd helemaal onderaan de pagina.

Hierin plaats je de zakelijke en algemene gegevens van een bedrijf.

De adresgegevens, de algemene voorwaarden, het copyright.

Afhankelijk van het soort bedrijf vind je hier vaak ook een opsomming van links naar...

persberichten, vacatures, een blog. Dat soort algemene activiteiten.

Het nav-element is een section-element.

Een hoofdnavigatie bouw je als een horizontale lijst met links.

Op een pagina komen heel vaak lijsten met links voor.

Hoe kan een browser dan weten welke lijst de hoofdnavigatie is?

Nou, doordat je deze in het nav-element plaatst.

Ik pas deze elementen nu toe op de pagina index-semantic.html.

Maar jij kan ook doorwerken aan de index van de vorige oefening. Dan heb je namelijk hetzelfde.

Ik start met het -nav- element. Die is makkelijk te herkennen.

Dat is mijn hoofdnavigatie en die staat hier.

Normaliter zou dit een lijst zijn met links maar dit oogt nu even beter in het voorbeeld.

Dus we doen net alsof dit een lijst met echte links is.

Ik start het nav-element op, Brackets maakt deze automatisch voor mij af.

En plak de hoofdnavigatie terug.

Dan de header. De header start meestal direct onder de body-tag, -header-.

Nu moet ik besluiten waar ik de header ga eindigen.

Binnen de header mag je ook het nav-element opnemen en dat doe ik.

Dus ik sluit hem af na de -nav-.

Dan omsluit ik de volledige inhoud van de pagina in het main-element.

Dit is alles wat na de header tot aan de footer.

Ik knip de inhoud weg met commando X.

Plaats het main-element en plaats de inhoud weer terug.

Voor de header en de footer heb ik een afbeelding geplaatst.

Normaliter zou dit natuurlijk ook een html-layout zijn.

Met lijsten van links, teksten en plaatjes. Maar het gaat nu even om het idee.

Dit staat voor de footer en deze plaats ik dan ook in het element -footer-.

Dit zijn de eerste semantische html-elementen die je toepast op een webpagina.