Summary  
This chapter explains how to structure a semantic HTML document by using tags such as html, head, body, header, main, article, headings, paragraphs, images, and footer to organize content into multiple articles.

General domain of usage  
Blog website development

## Doel
Laten we eerst de basisstructuur van het document voor onze website opzetten. We willen drie artikelen hebben. In elk artikel willen we de titel van het artikel, wat inhoud en een afbeelding specificeren.

Je kunt de door ons aangeleverde prompts gebruiken of deze naar wens aanpassen. Er is niet slechts één manier om het doel te bereiken. ChatGPT is flexibel en kan op verschillende manieren ondersteunen.

Opmerking

## Mogelijke Prompt
Maak een HTML-documentstructuur voor een blogwebsite waarmee 3 artikelen gepubliceerd kunnen worden. Elk artikel moet bestaan uit:
- Een titel (kop);
- Meerdere alinea's tekst;
- Een afbeelding;
- Een onderwerp of categorie.

De HTML-structuur moet duidelijk en logisch georganiseerd zijn, waarbij HTML-tags en semantische betekenis correct worden toegepast.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TXkgQmxvZzwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gTXkgQmxvZzwvaDE+CiAgICA8L2hlYWRlcj4KCiAgICA8bWFpbj4KICAgICAgPGFydGljbGU+CiAgICAgICAgPGgyPkFydGljbGUgMTogRXhwbG9yaW5nIE5hdHVyZTwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LiBTZWQgZXVpc21vZCwgdG9ydG9yIG5vbgogICAgICAgICAgdWxsYW1jb3JwZXIgY29tbW9kbywganVzdG8gbGliZXJvIG1heGltdXMgcHVydXMsIHZlbCBwdWx2aW5hciB0dXJwaXMgcXVhbSB2aXRhZSBtaS4gTnVsbGFtCiAgICAgICAgICBhdWN0b3IsIHRvcnRvciBpZCBzYWdpdHRpcyBmZXJtZW50dW0sIGxlbyBsYWN1cyB2ZW5lbmF0aXMgdG9ydG9yLCBhdCB0cmlzdGlxdWUgbGVvIG1hZ25hCiAgICAgICAgICBpbiBsb3JlbS4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9Im5hdHVyZS5qcGciIGFsdD0iTmF0dXJlIEltYWdlIiAvPgogICAgICAgIDxwPkNhdGVnb3J5OiBOYXR1cmU8L3A+CiAgICAgIDwvYXJ0aWNsZT4KCiAgICAgIDxhcnRpY2xlPgogICAgICAgIDxoMj5BcnRpY2xlIDI6IENvb2tpbmcgQWR2ZW50dXJlczwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBQaGFzZWxsdXMgcnV0cnVtIHRpbmNpZHVudCBzYXBpZW4sIHNlZCB2ZXN0aWJ1bHVtIHZlbGl0IHZlaGljdWxhIG5lYy4gU2VkIHBoYXJldHJhIGR1aSBpbgogICAgICAgICAgZmVybWVudHVtIHNvZGFsZXMuIFBlbGxlbnRlc3F1ZSBoYWJpdGFudCBtb3JiaSB0cmlzdGlxdWUgc2VuZWN0dXMgZXQgbmV0dXMgZXQgbWFsZXN1YWRhCiAgICAgICAgICBmYW1lcyBhYyB0dXJwaXMgZWdlc3Rhcy4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9ImNvb2tpbmcuanBnIiBhbHQ9IkNvb2tpbmcgSW1hZ2UiIC8+CiAgICAgICAgPHA+Q2F0ZWdvcnk6IENvb2tpbmc8L3A+CiAgICAgIDwvYXJ0aWNsZT4KCiAgICAgIDxhcnRpY2xlPgogICAgICAgIDxoMj5BcnRpY2xlIDM6IFRyYXZlbGluZyBBcm91bmQgdGhlIFdvcmxkPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIE51bGxhbSBlZmZpY2l0dXIgbGFjdXMgbmVjIHVybmEgZnJpbmdpbGxhLCB1dCB2ZW5lbmF0aXMgdG9ydG9yIGxhY2luaWEuIER1aXMgdml0YWUgbWF1cmlzCiAgICAgICAgICBzZWQgbWkgc2VtcGVyIGFsaXF1ZXQuIEFlbmVhbiB2ZXN0aWJ1bHVtIGxpYmVybyBlZ2V0IG5pYmggbWFsZXN1YWRhLCBpZCBsdWN0dXMgbGliZXJvCiAgICAgICAgICBwaGFyZXRyYS4gRnVzY2UgYXVjdG9yIG1hdXJpcyBzZWQgdHJpc3RpcXVlIGVmZmljaXR1ci4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9InRyYXZlbC5qcGciIGFsdD0iVHJhdmVsIEltYWdlIiAvPgogICAgICAgIDxwPkNhdGVnb3J5OiBUcmF2ZWw8L3A+CiAgICAgIDwvYXJ0aWNsZT4KICAgIDwvbWFpbj4KCiAgICA8Zm9vdGVyPgogICAgICA8cD4mY29weTsgMjAyNCBNeSBCbG9nLiBBbGwgcmlnaHRzIHJlc2VydmVkLjwvcD4KICAgIDwvZm9vdGVyPgogIDwvYm9keT4KPC9odG1sPg==

Als u geïnteresseerd bent om dieper in de code te duiken en de functionaliteit ervan te begrijpen, gebruik dan de <span style="padding: 0 10px; border: 2px solid lightgray; border-radius: 10px; color: black; background-color: #fff;">Code Description</span> knop hieronder. Indien gewenst, sla deze stap over en ga verder naar het volgende hoofdstuk.

Waarom is het een goed idee om elk artikel binnen een `<article>`-element te structureren bij het bouwen van een blogpagina?

Leer de basisprincipes van webontwikkeling en maak gebruik van AI-tools zoals ChatGPT. Begrijp de rol van HTML, CSS en JavaScript bij het bouwen van websites en hoe AI de snelheid en creativiteit van coderen kan verhogen. Oefen met het opstellen van effectieve prompts en het genereren van code met ChatGPT. Bouw een complete blogwebsite vanaf nul met behulp van AI-ondersteunde ontwikkeling en ontwikkel praktische vaardigheden voor webprojecten.

Maak kennis met de kernconcepten en technologieën in webontwikkeling, inclusief de rol van AI in moderne codering. Deze sectie legt de basis voor uw leertraject en behandelt de basisprincipes van webontwikkeling en hoe AI de productiviteit, creativiteit en efficiëntie in codering verbetert.

Leer de essentiële webontwikkelingstechnologieën. Verken de basisprincipes van HTML, CSS en JavaScript, waarbij hun individuele functionaliteiten en gezamenlijke rol in het vormgeven van het digitale landschap worden belicht.

Ontdek de kracht van ChatGPT door de mogelijkheden te verkennen en te leren hoe deze effectief kan worden ingezet. Inzicht verkrijgen in het opstellen van prompts en het werken met code via ChatGPT. Afsluiten met praktische tips voor het benutten van ChatGPT in diverse toepassingen.

Een volledige en functionele blogwebsite vanaf nul opzetten, waarbij diverse webontwikkelingstechnieken met ChatGPT worden geïntegreerd.

Het Structureren van het HTML-Document

Doel

Mogelijke Prompt

Resultaat

Website-status