HTML onderzoek
HTML onderzoek
DOM - Het Document Object Model.
Het DOM ofwel het Document Object Model is een verzameling regels en afspraken over hoe een browser een web pagina interpreteert. Het DOM zit ingebakken in een browser en je kunt er niets aan wijzigen. Maar als je weet volgens welke basis regels het DOM werkt kun je er wel gebruik van maken. Je kúnt er niet alleen gebruik van maken, je maakt er gebruik van. Voortdurend.
Een hiërarchische structuur
Iedere HTML pagina is opgebouwd uit een aantal elementen die in een hiërarchische verhouding tot elkaar staan en samen de DOM tree vormen. Sinds de introductie van het DOM wordt een html pagina niet langer gezien als een lange serie tekens, maar als een verzameling op zichzelf staande elementen (objecten) die onafhankelijk van elkaar kunnen worden benaderd en gemanipuleerd en vormgegeven.
De elementen in de DOM tree hebben hun eigen specifieke eigenschappen: attributen. Deze attributen zijn ook beschreven in het DOM. Elementen in de DOM tree kennen ook hun eigen gedrag, ook beschreven in het DOM.
Met het DOM zelf hebben we niet zoveel te maken. Met de DOM tree des te meer!
Ouders en hun kroost
De hiërarchische structuur van een html document wordt omschreven in de vorm van parent-elementen en child-elementen
Bovenaan in deze structuur staat het <html> element. Zeg maar de Padre de Familias, de boss of all bosses. Het <html> element heeft twee directe 'children': <head> en <body>. Vervolgens is bijvoorbeeld <title> weer een 'child' van <head>. Je begrijpt dat <body> niet stil heeft gezeten en stikt van de 'children'.
Wanneer je het ene element in het andere plaatst wordt dit geneste element automatisch het 'child' van het bovenliggende element:
<div class="container"><p>Eigenlijk is de structuur van een html document een grote<strong><em>family</em> business</strong></p></div>
In bovenstaand voorbeeld is de <p> het 'child' van de <div>, terwijl <p> weer de 'parent' is van <strong> en <em> op zijn beurt weer het 'child' is van <strong>
"class" is een attribuut van de <div>.
Het standaard gedrag van een <div> en een <p> is dat ze block elementen zijn en bijvoorbeeld een <strong> is een inline element. Lees hier meer over inline - en block elementen.
Er zijn 2 manieren om de elementen in de DOM te manipuleren. Met JavaScript en met CSS.
Wij zullen onszelf concentreren op de manier waarop je via CSS de verschillende elementen direct kunt benaderen en vormgeven.
Scheiding van structuur en presentatie.
Wanneer je jezelf wat meer gaat verdiepen in de manier van webdesign die ik op deze pagina's beschrijf zul je regelmatig de opmerking tegenkomen dat scheiding van structuur en presentatie belangrijk is.
Met structuur bedoel ik de hiërarchische structurering van de inhoud op een pagina d.m.v. de markup - de HTML (Hyper Text Markup Language). Met de presentatie bedoel ik de opmaak van je inhoud: de opmaak van de teksten, de afbeeldingen, de navigatie en de positionering van de elementen op je pagina. Dit doe je in de stylesheet - de CSS (Cascading Style Sheet).
Structuur is HTML, presentatie is CSS
Het is dus de bedoeling dat je de verschillende elementen die je in een pagina wilt gebruiken vastlegt in de HTML en dat je vervolgens de opmaak en positionering van die elementen vastlegt in de CSS. Met andere woorden:
Als je de structuur van je pagina op een goed doordachte manier in je HTML vastgelegd hebt kun je het uiterlijk van een pagina volledig veranderen door te wisselen van CSS omdat de HTML en CSS volkomen los staan van elkaar.
Bekijk dit eenvoudige voorbeeld maar eens.
Voordelen
Wanneer je werkt volgens deze schone, overzichtelijke en professionele regels bouw je websites die:
- toegankelijk zijn voor iedereen
- begrijpelijk zijn voor iedereen
- eenvoudig te doorzoeken zijn voor iedereen (inclusief zoekmachines zoals Google)
- onderhoudsvriendelijk zijn
- professionaliteit uitstralen op ieder niveau
Maak jouw eigen website met JouwWeb