HTML-documentstructuur

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 reactie

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.

We starten met een nieuw project.

Ga naar Bestand - Open map.

En wijs de local root folder htm-- aan.

Deze map kun je downloaden bij dit hoofdstuk of je maakt zelf een map aan.

Want hier staat nog niets in.

We maken een nieuw document aan via Bestand - Nieuw.

Bewaar het bestand via Bestand - Opslaan.

Controleer dat je het bestand gaat opslaan in de local root folder htm--.

Noem dit bestand index.html.

Klik op Save.

Zet ook maar alvast het Live Voorbeeld aan, dan zie je meteen een voorbeeld in de browser.

Een webpagina heeft altijd als bestandsextensie .html

Maar daar kan een browser niet aan aflezen in welke versie html het het document is geschreven.

Hiervoor is specifiek de doctype voor ontwikkeld.

Deze plaats je als eerste bovenaan met het html-element !doctype html.

Elk html-element plaats je tussen een kleiner dan en grote dan teken.

Dankzij de doctype kan de browser de inhoud op de juiste manier gaan weergeven.

Je begint met het maken van de html pagina met de html-elementen, html en einde html.

Zodra ik een openingstag schrijf dan maakt Brackets dit automatisch voor mij af.

En staat de cursor direct tussen de opening- en sluittag zodat ik met de inhoud ervan bezig kan.

Ik sla een paar regels over en loop weer naar boven.

Het is erg handig dat Brackets dit voor mij doet, want het werkt snel en voorkomt fouten.

Als eerste plaats je dan binnen de html de -head-.

Deze wordt automatisch voor mij afgesloten.

Alles wat je in de head plaatst is om de browser ten dienste te zijn.

Hierin plaats je alle informatie, en koppelingen naar bestanden...

die de browser nodig heeft om de inhoud van de pagina goed te kunnen weergeven.

In principe zal de bezoeker hier niets van merken. Het enige dat ze wel zien is de title.

De title is een verplicht onderdeel van een webpagina.

Deze titel wordt weergegeven op het tabblad in de browser.

Wordt gebruikt als titel als je een pagina bookmarkt.

En ook als paginatitel bij de zoekresultaten. Nogal een belangrijk dingetje dus.

Op een webpagina staat meestal tekst.

De letters van het alfabet a tot en met z worden altijd wel goed weergegeven in een browser.

Maar zodra de tekst ook bijzondere leestekens bevat als deze ë, û, à.

Dan gebruik je hiervoor speciale codering. Dit behandelen we later in de cursus.

Deze speciale coderingen moeten wel op de juiste manier vertaald kunnen worden.

Als de browser de speciale leestekens niet goed kan vertalen dan gebeurt er dit.

Rare wiebertjes met een vraagteken erin of zwarte blokjes.

Misschien heb je weleens deze tekens gezien op een webpagina.

Om dit te voorkomen geef je in de head aan van welke karakterset de website gebruik maakt.

Dat heet de charset.

Met UTF- zorg je ervoor dat de browser alle leestekens correct kan weergegeven.

In de head plaats je ook metatags die informatie geven over de inhoud van de pagina.

Bijvoorbeeld een meta-tag met een korte beschrijving van de inhoud met de meta name=description.

Met de meta name=keywords kun je kernwoorden opgeven.

Waarop je wilt dat jouw webpagina in de zoekresultaten wordt getoond.

De schrijver van de inhoud geef je op met Author.

En zo zijn er nog veel meer metatags.

Lange tijd kon je met de metatags zoekmachines om de tuin leiden.

Maar dit is nu niet meer het geval.

Zo moeten de woorden die je gebruikt voor de description en de keywords ...

daadwerkelijk woorden zijn die in de pagina terugkomen.

Is dit niet het geval dan kunnen zoekmachines dit afstraffen.

Door jouw site juist niet meer op te nemen in de zoekresultaten.

Een beetje een vreemde eend in de bijt is de metatag viewport.

Deze zorgt er namelijk voor dat de inhoud van de pagina zich altijd aanpast aan de breedte van het scherm waarop deze getoond wordt.

Hier staat geschreven dat de inhoud van de pagina zich % moet aanpassen...

aan de breedte van het beeldscherm.

Altijd goed om deze op te nemen in de head.

Dan door naar de -body-, deze plaats je onder de head.

Begin body en hij wordt automatisch voor mij afgesloten met einde body.

De body is het visuele gedeelte van de website.

Dit is wat de gebruiker ziet,

Hier plaats je de teksten en afbeeldingen.

De belangrijkste kop op de pagina plaats je binnen het h-element.

Leesteksten plaatst je binnen p-elementen. Dat zijn de paragrafen.

In het komende hoofdstuk leer je hoe je teksten op de juiste manier structureert in html.