Voorbeeld: HTML

HTML-structuur
HTML (HyperText Markup Language) is de opmaaktaal die wordt gebruikt om webpagina's te maken. Het document wordt georganiseerd in een boomstructuur (DOM - Document Object Model) met elementen als knopen (nodes). Bijvoorbeeld, een eenvoudige HTML-structuur kan er als volgt uitzien:

html
<html>
      <head>
          <title>Mijn webpagina</title>
      </head>
     <body>
             <h1>Welkom</h1>
             <p>Dit is een paragraaf</p>
      </body>
</html>

 

Opmaak en CSS
CSS (Cascading Style Sheets) wordt gebruikt om de opmaak en lay-out van HTML-documenten te beschrijven. De term "cascading" verwijst naar hoe opmaakregels worden toegepast en geërfd door de elementen in de HTML-structuur. Bijvoorbeeld:

body {
   font-family: Arial, sans-serif;
   color: black;

}

h1 {
   color: blue;
}

Wanneer een stijl op een ouderknoop (bijvoorbeeld <body>) wordt toegepast, erven de kindknopen (zoals <h1> en <p>) deze stijl, tenzij er specifiek andere stijlen voor de kindknopen zijn gedefinieerd.

JavaScript en de DOM
DOM (Document Object Model):


De DOM is een programmeerbare object-georiënteerde representatie van de HTML-documenten. Het wordt door de browser gegenereerd en kan gemanipuleerd worden met JavaScript om de inhoud en de structuur van de webpagina dynamisch te veranderen.

In de DOM wordt elk HTML-element als een object (knoop) gerepresenteerd, en de boomstructuur van de HTML wordt nagebootst. Bijvoorbeeld:

html
     <body>
             <h1>Welkom</h1>
             <p>Dit is een paragraaf</p>
      </body>

Wordt in de DOM als een boomstructuur gerepresenteerd:

css

body
├── h1
└── p

JavaScript en de DOM manipulatie:

Met JavaScript kun je de DOM manipuleren door elementen toe te voegen, te verwijderen of te wijzigen. Dit zorgt ervoor dat je webpagina's dynamisch kunt maken. Bijvoorbeeld:

javascript
// Selecteer het h1 element
const heading = document.querySelector('h1');

// Verander de tekst van het h1 element
heading.textContent = 'Hallo Wereld';

// Voeg een nieuwe paragraaf toe
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Dit is een nieuwe paragraaf.';
document.body.appendChild(newParagraph);

Wanneer je deze JavaScript code uitvoert, zal de browser de wijzigingen weergeven door de huidige staat van de DOM te tonen.

Kortom, de structuur van een HTML-document en het "cascading" aspect van CSS zijn essentieel voor de opmaak en weergave van webpagina's. Met JavaScript kun je vervolgens de DOM manipuleren om dynamische en interactieve webpagina's te creëren.