De DOM (Document Object Model)

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

Volgende video: HTML-documentstructuur

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.

Voordat je gaat beginnen met het maken van html-pagina's.

Is het belangrijk om te weten wat de DOM is.

De DOM staat voor het Document Object Model.

Het is de wijze waarop html-pagina's gestructureerd en opgebouwd zijn.

De DOM heeft het mogelijk gemaakt dat je elk element op een pagina kunt manipuleren met css en javascript.

Met css kun je de vormgeving bepalen en met javascript kun je interactiviteit toevoegen.

Het WC heeft hiervoor een standaard ontwikkeld en dit noemen we dus de DOM.

Elk html document wordt hiërarchisch opgebouwd.

En in de DOM van een document staat beschreven wie de baas is over wie.

Belangrijk is dat je wel de html pagina's op de juiste manier structureert.

Door de juiste html tags te gebruiken.

De hiërarchische structuur van een html pagina bestaat uit, in eerste instantie de html.

Deze is de baas over twee elementen, namelijk de head en de body.

De head is weer de baas over de title.

En de title is de titel van de pagina, die zie je bovenin de browser terug.

In de body plaats je de inhoud van de pagina.

In dit voorbeeld geef ik alleen maar een voorbeeld van een opsommingslijst.

Een opsommingslijst wordt gebouwd uit het definiëren van de lijst, een ul.

En die lijst kan bestaan uit één of meerdere listitems, de li's.

Dit betekent dat het html-element.

De begin html en einde html de Parent is van alles wat zich tussen de begin- en eindtag staat.

Deze parent heeft twee kinderen, te weten de head en de body.

Maar een kind kan ook weer een ouder zijn van zijn eigen kind.

Zo is in dit geval de head ook de ouder van de title.

En het element body is de ouder van het kind, de opsommingslijst de ul.

En zo gaat het door, want ook de lijst is een ouder en heeft twee kinderen in dit geval, de lijstitems, de li's.

Om het gene wat ik voorgaand heb uitgelegd toe te lichten laat ik dat even zien op onze webpagina.

Om het gene wat ik nu heb uitgelegd toe te lichten laat ik dat even zien op onze webpagina.

Klik met de rechtermuisknop in geklikt op de pagina en kies voor Inspecteren.

Activeer het select gereedschap van de inspector.

En loop hiermee over delen van de pagina.

Zie je dat alle elementen los omkaderd worden.

Met een tooltip wordt aangegeven wat voor soort html-element dit is.

Dit is een kop in het h-element.

Dit is een kop in het h-element.

En dit zijn afbeeldingen in het img-element.

Elk element dat omkaderd wordt kan ik apart gaan benaderen.

Zo kan ik straks alles voorzien van eigen vormgeving en opmaak.

En dat is dankzij de DOM.

En natuurlijk omdat je de pagina op de juiste manier gaat voorzien van html-coderingen.