Summary  
This chapter covers structuring an HTML document with semantic elements—such as header, nav, section, form, and footer—to organize content into clear, navigable sections.  

General domain of usage  
Personal portfolio websites

We hebben nu de belangrijkste HTML-concepten behandeld en zijn klaar om vanaf nul een complete one-page portfolio website te bouwen.

Je kunt proberen deze zelf te maken of deze stapsgewijze handleiding volgen met code voor elk onderdeel.

### 1. Website Structuurplan
Onze portfolio pagina bevat:
- **Header**: sitetitel en navigatielinks;
- **Over**: een korte introductie over de eigenaar;
- **Portfolio**: projecten met afbeeldingen, titels en korte beschrijvingen;
- **Contact**: een formulier waarmee bezoekers contact kunnen opnemen;
- **Footer**: copyright en contact-/sociale links.

### 2. Structureer inhoud met semantische HTML
Maak een nieuw `index.html`-bestand aan en voeg de basis HTML-structuur toe met `<!DOCTYPE html>`, `<html>`, `<head>`, en `<body>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkp1bGlhJ3MgV2Vic2l0ZTwvdGl0bGU+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgPC9ib2R5Pgo8L2h0bWw+

### 3. Headersectie
Voeg een `<header>` toe met de naam van de eigenaar en een `<nav>` met links die naar de secties Over, Portfolio en Contact springen.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkp1bGlhJ3MgV2Vic2l0ZTwvdGl0bGU+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aGVhZGVyPgogICAgICA8aDE+SnVsaWEgQm90c2ZvcmQ8L2gxPgogICAgICA8bmF2PgogICAgICAgIDx1bD4KICAgICAgICAgIDxsaT48YSBocmVmPSIjYWJvdXQiPkFib3V0PC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI3BvcnRmb2xpbyI+UG9ydGZvbGlvPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI2NvbnRhY3QiPkNvbnRhY3Q8L2E+PC9saT4KICAgICAgICA8L3VsPgogICAgICA8L25hdj4KICAgIDwvaGVhZGVyPgogIDwvYm9keT4KPC9odG1sPg==

### 4. Over Sectie
Maak een `<section id="about">` met een kop en een korte paragraaf die de eigenaar beschrijft.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPCEtLSAuLi4gLS0+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSAuLi4gLS0+CiAgICA8L2hlYWRlcj4KICAgIDxzZWN0aW9uIGlkPSJhYm91dCI+CiAgICAgIDxoMj5BYm91dCBNZTwvaDI+CiAgICAgIDxwPgogICAgICAgIFdlbGNvbWUgdG8gbXkgcG9ydGZvbGlvIHdlYnNpdGUuIEknbSBhIHdlYiBkZXZlbG9wZXIgd2l0aCBhIHBhc3Npb24gZm9yCiAgICAgICAgY3JlYXRpbmcgYW1hemluZyB3ZWJzaXRlcy4KICAgICAgPC9wPgogICAgPC9zZWN0aW9uPgogIDwvYm9keT4KPC9odG1sPg==

### 5. Portfoliosectie

Voeg een `<section id="portfolio">` toe die projecten weergeeft met afbeeldingen, titels en korte beschrijvingen.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPCEtLSAuLi4gLS0+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSAuLi4gLS0+CiAgICA8L2hlYWRlcj4KICAgIDxzZWN0aW9uIGlkPSJhYm91dCI+CiAgICAgIDwhLS0gLi4uIC0tPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24gaWQ9InBvcnRmb2xpbyI+CiAgICAgIDxoMj5Qb3J0Zm9saW88L2gyPgogICAgICA8dWw+CiAgICAgICAgPGxpPgogICAgICAgICAgPGltZwogICAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvMzkyZjI0YWMtMDEyNi00YzM0LWEyOGEtZjJmMjZkMTIxOTZiL3NlY3Rpb24tNS90ZWNodHJhY2sucG5nIgogICAgICAgICAgICB3aWR0aD0iMTAwIgogICAgICAgICAgICBhbHQ9IlRlY2hUcmVrIEFwcCIKICAgICAgICAgIC8+CiAgICAgICAgICA8aDM+VGVjaFRyZWsgQXBwPC9oMz4KICAgICAgICAgIDxwPkV4cGxvcmUgVGVjaCBUcmVuZHM8L3A+CiAgICAgICAgPC9saT4KICAgICAgICA8bGk+CiAgICAgICAgICA8aW1nCiAgICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy8zOTJmMjRhYy0wMTI2LTRjMzQtYTI4YS1mMmYyNmQxMjE5NmIvc2VjdGlvbi01L2Vjb2NyYWZ0LnBuZyIKICAgICAgICAgICAgd2lkdGg9IjEwMCIKICAgICAgICAgICAgYWx0PSJFY29DcmFmdCBXZWJzaXRlIgogICAgICAgICAgLz4KICAgICAgICAgIDxoMz5FY29DcmFmdCBXZWJzaXRlPC9oMz4KICAgICAgICAgIDxwPlByb21vdGUgU3VzdGFpbmFibGUgTGl2aW5nPC9wPgogICAgICAgIDwvbGk+CiAgICAgICAgPCEtLSBBZGQgbW9yZSBwcm9qZWN0IGVudHJpZXMgYXMgbmVlZGVkIC0tPgogICAgICA8L3VsPgogICAgPC9zZWN0aW9uPgogIDwvYm9keT4KPC9odG1sPg==

### 6. Contactsectie
Maak een `<section id="contact">` met een eenvoudig contactformulier dat naam, e-mailadres en bericht verzamelt.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPCEtLSAuLi4gLS0+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSAuLi4gLS0+CiAgICA8L2hlYWRlcj4KICAgIDxzZWN0aW9uIGlkPSJhYm91dCI+CiAgICAgIDwhLS0gLi4uIC0tPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24gaWQ9InBvcnRmb2xpbyI+CiAgICAgIDwhLS0gLi4uIC0tPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24gaWQ9ImNvbnRhY3QiPgogICAgICA8aDI+Q29udGFjdCBNZTwvaDI+CiAgICAgIDxmb3JtIG9uc3VibWl0PSJyZXR1cm4gZmFsc2UiPgogICAgICAgIDxsYWJlbCBmb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIHJlcXVpcmVkIC8+CiAgICAgICAgPGxhYmVsIGZvcj0iZW1haWwiPkVtYWlsOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiByZXF1aXJlZCAvPgogICAgICAgIDxsYWJlbCBmb3I9Im1lc3NhZ2UiPk1lc3NhZ2U6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im1lc3NhZ2UiIG5hbWU9Im1lc3NhZ2UiIHJlcXVpcmVkIC8+CiAgICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlNlbmQ8L2J1dHRvbj4KICAgICAgPC9mb3JtPgogICAgPC9zZWN0aW9uPgogIDwvYm9keT4KPC9odG1sPg==

### 7. Voettekstsectie
Sluit de pagina af met een `<footer>` die copyrighttekst en links naar sociale media, telefoon en e-mail bevat.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPCEtLSAuLi4gLS0+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSAuLi4gLS0+CiAgICA8L2hlYWRlcj4KICAgIDxzZWN0aW9uIGlkPSJhYm91dCI+CiAgICAgIDwhLS0gLi4uIC0tPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24gaWQ9InBvcnRmb2xpbyI+CiAgICAgIDwhLS0gLi4uIC0tPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24gaWQ9ImNvbnRhY3QiPgogICAgICA8IS0tIC4uLiAtLT4KICAgIDwvc2VjdGlvbj4KICAgIDxmb290ZXI+CiAgICAgIDxwPiZjb3B5OyBNeSBQb3J0Zm9saW8uIEFsbCBSaWdodHMgUmVzZXJ2ZWQuPC9wPgogICAgICA8dWw+CiAgICAgICAgPGxpPjxhIGhyZWY9Imh0dHBzOi8vd3d3LmxpbmtlZGluLmNvbS8iPkxpbmtlZEluPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9Imh0dHBzOi8vZ2l0aHViLmNvbS8iPkdpdEh1YjwvYT48L2xpPgogICAgICAgIDxsaT48YSBocmVmPSJ0ZWw6KzQ0MjAzODg1MTgwMSI+KzQ0IDIwIDM4ODUgMTgwMTwvYT48L2xpPgogICAgICAgIDxsaT48YSBocmVmPSJtYWlsdG86anVsaWExODhAbWFpbC5jb20iPmp1bGlhMTg4QG1haWwuY29tPC9hPjwvbGk+CiAgICAgICAgPCEtLSBBZGQgbW9yZSBzb2NpYWwgbWVkaWEgbGlua3MgYXMgbmVlZGVkIC0tPgogICAgICA8L3VsPgogICAgPC9mb290ZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

### Bonus
Om de pagina visueel aantrekkelijker te maken, kunnen we een CSS-bestand koppelen en onze HTML opmaken. CSS regelt kleuren, afstand, lettertypen en lay-out, waardoor dezelfde structuur er veel verzorgder uitziet.

Vergelijk voorlopig hoe de pagina eruitziet met alleen HTML en hoe deze verandert zodra er basis CSS-stijlen zijn toegepast.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkp1bGlhJ3MgV2Vic2l0ZTwvdGl0bGU+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICAgIDwhLS0gTGluayB0byB0aGUgZXh0ZXJuYWwgQ1NTIGZpbGUgLS0+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9ImluZGV4LmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aGVhZGVyPgogICAgICA8aDE+SnVsaWEgQm90c2ZvcmQ8L2gxPgogICAgICA8bmF2PgogICAgICAgIDx1bD4KICAgICAgICAgIDxsaT48YSBocmVmPSIjYWJvdXQiPkFib3V0PC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI3BvcnRmb2xpbyI+UG9ydGZvbGlvPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI2NvbnRhY3QiPkNvbnRhY3Q8L2E+PC9saT4KICAgICAgICA8L3VsPgogICAgICA8L25hdj4KICAgIDwvaGVhZGVyPgogICAgPHNlY3Rpb24gaWQ9ImFib3V0Ij4KICAgICAgPGgyPkFib3V0IE1lPC9oMj4KICAgICAgPHA+CiAgICAgICAgV2VsY29tZSB0byBteSBwb3J0Zm9saW8gd2Vic2l0ZS4gSSdtIGEgd2ViIGRldmVsb3BlciB3aXRoIGEgcGFzc2lvbiBmb3IKICAgICAgICBjcmVhdGluZyBhbWF6aW5nIHdlYnNpdGVzLgogICAgICA8L3A+CiAgICA8L3NlY3Rpb24+CiAgICA8c2VjdGlvbiBpZD0icG9ydGZvbGlvIj4KICAgICAgPGgyPlBvcnRmb2xpbzwvaDI+CiAgICAgIDx1bD4KICAgICAgICA8bGk+CiAgICAgICAgICA8aW1nCiAgICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy8zOTJmMjRhYy0wMTI2LTRjMzQtYTI4YS1mMmYyNmQxMjE5NmIvc2VjdGlvbi01L3RlY2h0cmFjay5wbmciCiAgICAgICAgICAgIHdpZHRoPSIxMDAiCiAgICAgICAgICAgIGFsdD0iVGVjaFRyZWsgQXBwIgogICAgICAgICAgLz4KICAgICAgICAgIDxoMz5UZWNoVHJlayBBcHA8L2gzPgogICAgICAgICAgPHA+RXhwbG9yZSBUZWNoIFRyZW5kczwvcD4KICAgICAgICA8L2xpPgogICAgICAgIDxsaT4KICAgICAgICAgIDxpbWcKICAgICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzM5MmYyNGFjLTAxMjYtNGMzNC1hMjhhLWYyZjI2ZDEyMTk2Yi9zZWN0aW9uLTUvZWNvY3JhZnQucG5nIgogICAgICAgICAgICB3aWR0aD0iMTAwIgogICAgICAgICAgICBhbHQ9IkVjb0NyYWZ0IFdlYnNpdGUiCiAgICAgICAgICAvPgogICAgICAgICAgPGgzPkVjb0NyYWZ0IFdlYnNpdGU8L2gzPgogICAgICAgICAgPHA+UHJvbW90ZSBTdXN0YWluYWJsZSBMaXZpbmc8L3A+CiAgICAgICAgPC9saT4KICAgICAgPC91bD4KICAgIDwvc2VjdGlvbj4KICAgIDxzZWN0aW9uIGlkPSJjb250YWN0Ij4KICAgICAgPGgyPkNvbnRhY3QgTWU8L2gyPgogICAgICA8Zm9ybSBvbnN1Ym1pdD0icmV0dXJuIGZhbHNlIj4KICAgICAgICA8bGFiZWwgZm9yPSJuYW1lIj5OYW1lOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJuYW1lIiBuYW1lPSJuYW1lIiByZXF1aXJlZCAvPgogICAgICAgIDxsYWJlbCBmb3I9ImVtYWlsIj5FbWFpbDo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJlbWFpbCIgaWQ9ImVtYWlsIiBuYW1lPSJlbWFpbCIgcmVxdWlyZWQgLz4KICAgICAgICA8bGFiZWwgZm9yPSJtZXNzYWdlIj5NZXNzYWdlOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJtZXNzYWdlIiBuYW1lPSJtZXNzYWdlIiByZXF1aXJlZCAvPgogICAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TZW5kPC9idXR0b24+CiAgICAgIDwvZm9ybT4KICAgIDwvc2VjdGlvbj4KICAgIDxmb290ZXI+CiAgICAgIDxwPiZjb3B5OyBNeSBQb3J0Zm9saW8uIEFsbCBSaWdodHMgUmVzZXJ2ZWQuPC9wPgogICAgICA8dWw+CiAgICAgICAgPGxpPjxhIGhyZWY9Imh0dHBzOi8vd3d3LmxpbmtlZGluLmNvbS8iPkxpbmtlZEluPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9Imh0dHBzOi8vZ2l0aHViLmNvbS8iPkdpdEh1YjwvYT48L2xpPgogICAgICAgIDxsaT48YSBocmVmPSJ0ZWw6KzQ0MjAzODg1MTgwMSI+KzQ0IDIwIDM4ODUgMTgwMTwvYT48L2xpPgogICAgICAgIDxsaT48YSBocmVmPSJtYWlsdG86anVsaWExODhAbWFpbC5jb20iPmp1bGlhMTg4QG1haWwuY29tPC9hPjwvbGk+CiAgICAgIDwvdWw+CiAgICA8L2Zvb3Rlcj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogCiAgWW91IGRvbid0IG5lZWQgdG8gdW5kZXJzdGFuZCB3aGF0IGlzIHdyaXR0ZW4gaGVyZSwgCiAgYXMgaXQgaXMgQ1NTIHRoYXQgd2FzIG5vdCBjb3ZlcmVkIGluIHRoaXMgY291cnNlLiAKKi8KCi8qIC0tLS0tLS0tLS0tLS0tLS0tLSBCYXNlIFN0eWxlcyAtLS0tLS0tLS0tLS0tLS0tLS0gKi8KLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0gUmVzZXQgLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi8KKiB7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0gQmFzZSAtLS0tLS0tLS0tLS0tLS0tLS0tLSAqLwpib2R5IHsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZDogI2ZhZmFmYTsKICBjb2xvcjogIzMzMzsKICBsaW5lLWhlaWdodDogMS42OwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKc2VjdGlvbiB7CiAgbWF4LXdpZHRoOiA4MDBweDsKICBtYXJnaW46IDUwcHggYXV0bzsKICBwYWRkaW5nOiAwIDIwcHg7Cn0KCi8qIC0tLS0tLS0tLS0tLS0tLS0tLS0tIEhlYWRlciAtLS0tLS0tLS0tLS0tLS0tLS0tLSAqLwpoZWFkZXIgewogIGJhY2tncm91bmQ6IHdoaXRlOwogIHBhZGRpbmc6IDI1cHggMDsKICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2RkZDsKfQoKaGVhZGVyIGgxIHsKICBmb250LXNpemU6IDIuMnJlbTsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9CgpuYXYgdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBnYXA6IDMwcHg7Cn0KCm5hdiBhIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7CiAgY29sb3I6ICMzMzM7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgdHJhbnNpdGlvbjogY29sb3IgMC4yczsKfQoKbmF2IGE6aG92ZXIgewogIGNvbG9yOiAjMDA3N2NjOwp9CgovKiAtLS0tLS0tLS0tLS0tLS0tLS0tLSBIZWFkaW5ncyAtLS0tLS0tLS0tLS0tLS0tLS0tLSAqLwpzZWN0aW9uIGgyIHsKICBmb250LXNpemU6IDJyZW07CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKICBjb2xvcjogIzIyMjsKfQoKLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0gQWJvdXQgLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi8KI2Fib3V0IHAgewogIGZvbnQtc2l6ZTogMS4xcmVtOwogIG1heC13aWR0aDogNjUwcHg7CiAgbWFyZ2luOiAwIGF1dG87CiAgY29sb3I6ICM1NTU7Cn0KCi8qIC0tLS0tLS0tLS0tLS0tLS0tLS0tIFBvcnRmb2xpbyAtLS0tLS0tLS0tLS0tLS0tLS0tLSAqLwojcG9ydGZvbGlvIHVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIGRpc3BsYXk6IGdyaWQ7CiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maXQsIG1pbm1heCgyNjBweCwgMWZyKSk7CiAgZ2FwOiAyNXB4OwogIG1hcmdpbi10b3A6IDMwcHg7CiAgcGFkZGluZzogMDsKICBqdXN0aWZ5LWl0ZW1zOiBjZW50ZXI7Cn0KCiNwb3J0Zm9saW8gbGkgewogIGJhY2tncm91bmQ6IHdoaXRlOwogIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICBwYWRkaW5nOiAyMHB4OwogIHdpZHRoOiAxMDAlOwogIG1heC13aWR0aDogMzAwcHg7CiAgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjJzOwp9CgojcG9ydGZvbGlvIGxpOmhvdmVyIHsKICBib3gtc2hhZG93OiAwIDRweCAxNHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKI3BvcnRmb2xpbyBpbWcgewogIHdpZHRoOiAxMDAlOwogIG1heC13aWR0aDogMTgwcHg7CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKI3BvcnRmb2xpbyBoMyB7CiAgZm9udC1zaXplOiAxLjJyZW07CiAgbWFyZ2luLWJvdHRvbTogNXB4Owp9CgojcG9ydGZvbGlvIHAgewogIGNvbG9yOiAjNTU1Owp9CgovKiAtLS0tLS0tLS0tLS0tLS0tLS0tLSBDb250YWN0IEZvcm0gLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi8KZm9ybSB7CiAgYmFja2dyb3VuZDogd2hpdGU7CiAgYm9yZGVyOiAxcHggc29saWQgI2RkZDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDI1cHg7CiAgbWF4LXdpZHRoOiA0NTBweDsKICBtYXJnaW46IDMwcHggYXV0byAwOwogIHRleHQtYWxpZ246IGxlZnQ7Cn0KCmxhYmVsIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDE1cHggMCA1cHg7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7Cn0KCmlucHV0IHsKICB3aWR0aDogMTAwJTsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNiYmI7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKfQoKYnV0dG9uIHsKICBtYXJnaW4tdG9wOiAyMHB4OwogIHBhZGRpbmc6IDEycHggMjBweDsKICBiYWNrZ3JvdW5kOiAjMDA3N2NjOwogIGNvbG9yOiB3aGl0ZTsKICBib3JkZXI6IG5vbmU7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIGN1cnNvcjogcG9pbnRlcjsKICB3aWR0aDogMTAwJTsKICBmb250LXNpemU6IDFyZW07CiAgZm9udC13ZWlnaHQ6IGJvbGQ7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZDogIzAwNWZhMzsKfQoKLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0gRm9vdGVyIC0tLS0tLS0tLS0tLS0tLS0tLS0tICovCmZvb3RlciB7CiAgYmFja2dyb3VuZDogd2hpdGU7CiAgcGFkZGluZzogMjVweCAwOwogIGJvcmRlci10b3A6IDFweCBzb2xpZCAjZGRkOwogIG1hcmdpbi10b3A6IDUwcHg7Cn0KCmZvb3RlciB1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGdhcDogMjVweDsKICBtYXJnaW4tdG9wOiAxNXB4Owp9Cgpmb290ZXIgYSB7CiAgY29sb3I6ICMwMDc3Y2M7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwp9Cgpmb290ZXIgYTpob3ZlciB7CiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7Cn0=

Hier is de link naar <u>de volledige website</u> die in dit hoofdstuk is gebouwd: <a href="https://olreyplay.github.io/html-essentials_build-entire-website/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Julia's Website</a>

#### Wat je hebt gebouwd
Je hebt een volledige webpagina gemaakt met HTML, inclusief structuur, inhoud en basiselementen.

#### Wat ontbreekt er
Je pagina functioneert, maar ziet er erg eenvoudig uit.
HTML bepaalt de structuur, niet het ontwerp.

#### Wat nu
Om je pagina op te maken, heb je **CSS** nodig om kleuren, lay-out en visuele verfijning toe te voegen.

Bouw gestructureerde webpagina's met HTML. Maak tekstinhoud, links, lijsten, afbeeldingen, tabellen en formulieren, en organiseer alles met semantische elementen tot een volledige pagina.

Een Volledige Website Bouwen met HTML

Stapsgewijze Handleiding

1. Website Structuurplan

2. Structureer inhoud met semantische HTML

3. Headersectie

4. Over Sectie

5. Portfoliosectie

6. Contactsectie

7. Voettekstsectie

Bonus

Wat je hebt gebouwd

Wat ontbreekt er

Wat nu