H1 - HTML Layout

00 - Je projectmap maken

In deze cursus bouw je stap voor stap één eigen portfoliosite: een website over jezelf en je werk, met Home, Portfolio, Over en Contact. Je begint met één pagina en breidt dezelfde website in de volgende hoofdstukken steeds verder uit.

Wat is de map www?

www is een gewone map, ook wel een folder genoemd, op je computer. Je kunt deze map op je bureaublad zetten, zodat je hem makkelijk terugvindt. Dit wordt je projectmap: alle bestanden van jouw website bewaar je hierin.

De HTML-bestanden voor je pagina's komen in deze map.
Later komt ook je CSS-bestand in deze map.
Je afbeeldingen komen later in een submap img binnen www.

Je gebruikt de hele cursus dezelfde projectmap. Je maakt dus niet voor elk hoofdstuk opnieuw een website. Maak nu alleen de map; bij item 01 maak je daarin je eerste bestand, index.html. De andere bestanden volgen wanneer je ze nodig hebt.

Zo werk je aan je eigen site

Gebruik je eigen naam, teksten en projectideeën. De voorbeelden laten zien hoe de code werkt. Bij Bouw verder voeg je iets aan je bestaande site toe. Bij Alleen oefenen probeer je iets tijdelijk uit; de actie vertelt wat je daarna verwijdert, herstelt of bewust mag behouden.

Actie — Bouw verder

Maak op je bureaublad een map met de naam www. Heb je die al voor deze cursus gemaakt, gebruik dan die bestaande map.
Open deze map in je code-editor. Bewaar vanaf nu alle projectbestanden in deze map of in een submap ervan.
Ga verder met item 01. Daar maak je je eerste HTML-bestand in de map www.

01 - De verplichte HTML-structuur

Elke HTML-pagina begint met een vaste basisstructuur.
De belangrijkste onderdelen zijn <html>, <head> en <body>.
Elke website heeft deze drie onderdelen en omdat ze tussen < en > karakters staan, noemen we het een tag.
Doorgaans is er een open- en sluit-tag. De sluit-tag wordt gekenmerkt door de extra /.
Een set van tags vormt een container waar je iets in kunt zetten.

<html>
    <head>
        <title>Mijn portfolio</title>
    </head>
    <body>
        Ik ben Sam en ik leer websites maken.
    </body>
</html>

Een tag is een HTML-codewoord en is niet zichtbaar op de website.
In de <html>-container komt alle code van de website. Het is de buitenste container.
In de <head>-container zet je informatie over de pagina, zoals de titel.
In de <body>-container zet je alles wat de bezoeker echt op het scherm ziet.
Als je deze structuur hebt, voeg je alleen nog regels code toe in de <head> of in de <body>.

Actie — Bouw verder

Een HTML-bestand is een gewoon tekstbestand waarin je HTML-code schrijft. Je maakt en bewerkt het met een teksteditor, bijvoorbeeld Windows Kladblok of Visual Studio Code. Je browser leest die code en laat het resultaat als webpagina zien.

Open de projectmap www die je bij item 00 hebt gemaakt.
Open Windows Kladblok of Visual Studio Code en maak een nieuw tekstbestand.
Schrijf daarin de HTML-structuur uit het voorbeeld hierboven. Zet tussen <body> en </body> je naam en wat je graag maakt of wilt leren.
Sla het bestand op in de map www met precies de naam index.html. De naam is index en de extensie is .html. Let op dat het bestand niet index.html.txt heet.
Open hetzelfde bestand index.html ook in je webbrowser. Je ziet nu je eerste webpagina. Laat het bestand daarnaast openstaan in je teksteditor.
Verander in de teksteditor één zin tussen de body-tags en sla het bestand opnieuw op. Ververs daarna de pagina in je browser om de wijziging te zien.
Bewaar dit bestand: je blijft dezelfde index.html in de volgende acties uitbreiden.

02 - h1, p en title

De <h1> is de belangrijkste kop op de pagina.
Het staat voor "header" en is de titel van de pagina.
Meestal gebruik je een <h1> maar één keer per pagina.
De <p> staat voor paragraaf. Dus voor een gewone alinea met tekst.
De <title> staat in de <head>.
Wat in de <head> staat, zie je niet op de pagina.
De <title> zie je bovenin misschien wel in het browser-tabblad.

<head>
    <title>Home | Sam de Vries</title>
</head>
<body>
    <h1>Hallo, ik ben Sam</h1>
    <p>Ik maak graag ontwerpen en leer websites bouwen.</p>
</body>

Actie — Bouw verder

Werk verder in www/index.html. Geef de pagina een eigen title, bijvoorbeeld Home | Sam de Vries.
Maak één h1 met een persoonlijke introductie en zet je introductietekst in een p.
Controleer afzonderlijk de paginakop en de tekst in het browsertabblad.

03 - strong en em gebruiken

Met <strong> geef je aan dat tekst extra belangrijk is.
Met <em> leg je nadruk op een woord of een stuk tekst.
Je mag ze samen gebruiken, maar dan moeten ze netjes als containers in elkaar staan.

Goed voorbeeld:

<p>Ik werk aan een <strong>eigen portfolio</strong>.</p>
<p>Ik leer <em>stap voor stap</em> websites bouwen.</p>
<p>Mijn aanpak is <strong><em>blijven proberen</em></strong>.</p>

Fout voorbeeld:

<p>Mijn aanpak is <strong><em>blijven proberen</strong></em>.</p>

In het foute voorbeeld worden de tags in de verkeerde volgorde gesloten.
Wat je opent, moet je ook in omgekeerde volgorde weer sluiten.

Actie — Bouw verder

Gebruik in je bestaande introductie strong voor iets belangrijks en em voor een nadruk.
Probeer beide tags ook samen en controleer of je ze in omgekeerde volgorde sluit.
Behoud de nadruk alleen waar die inhoudelijk bij je tekst past.

04 - Waarvoor zijn h2 tot en met h6?

De <h1> is de hoofdkop van de pagina.
De <h2> is een subkop onder de <h1>.
De <h3> is weer een subkop onder de <h2>.
Zo kun je doorgaan tot en met <h6>.
Hoe lager het getal, hoe belangrijker de kop meestal is.
Een <h1> of <h2> is dus belangrijker dan een <h5> of <h6>.
Een <h6> is het laagste niveau en wordt meestal gezien als de minst belangrijke kop in de structuur.
Je kunt dit zien als subparagrafen of hoofdstukniveaus, bijvoorbeeld: H1, H1.1, H1.4.6 of H1.6.4.3.

<h1>Hallo, ik ben Sam</h1>
    <h2>Uitgelicht werk</h2>
        <h3>Mijn eerste website</h3>
    <h2>Over mij</h2>

Actie — Bouw verder

Voeg op Home twee h2-koppen toe: Uitgelicht werk en Over mij.
Zet onder Uitgelicht werk een h3 met de naam van je eerste project en een korte beschrijving. Een schoolopdracht, hobbyproject of oefenontwerp is ook goed.
Plaats je introductie en bestaande nadruk bij de passende koppen. Behoud één h1 en een logische kopvolgorde.

05 - Content in containers zetten

Een HTML-pagina bestaat vaak uit stukken inhoud. Je kunt die stukken zien als doosjes. In zo'n doosje zet je bijvoorbeeld een kop, een alinea, een afbeelding of later een link.

Een container heeft meestal een openingstag en een sluit-tag.
Alles wat tussen die twee tags staat, zit in die container.
Containers helpen om je pagina logisch op te bouwen.
Een container mag ook weer andere containers bevatten.

<section>
    <h2>Uitgelicht werk</h2>
    <p>Hier zie je waar ik aan werk.</p>
</section>

Belangrijk: een container moet volledig binnen een andere container staan. Je mag containers dus niet door elkaar heen openen en sluiten.

Goed genest:

<section>
    <article>
        <h2>Mijn eerste website</h2>
        <p>Een eigen portfolio met HTML en CSS.</p>
    </article>
</section>

Fout genest:

<section>
    <article>
        <h2>Mijn eerste website</h2>
    </section>
</article>

In het foute voorbeeld wordt <section> gesloten terwijl <article> nog open staat. Dat is alsof je een doos dichtmaakt terwijl er nog een kleinere doos half uitsteekt.

Semantische HTML5-tags

HTML5 heeft tags waarmee je niet alleen een doosje maakt, maar ook vertelt wat voor soort inhoud erin zit. Dat noemen we semantische tags. Semantisch betekent: de tag heeft betekenis.

<header>: bovenkant of introductie van een pagina of onderdeel.
<nav>: navigatie, meestal een menu met links.
<main>: de hoofdinhoud van de pagina.
<section>: een duidelijk onderdeel of hoofdstuk op een pagina.
<article>: een zelfstandig stuk inhoud, zoals een nieuwsbericht of kaart.
<aside>: aanvullende inhoud naast de hoofdinhoud.
<footer>: onderkant van een pagina of onderdeel.

<header>
    <h1>Hallo, ik ben Sam</h1>
</header>

<main>
    <section>
        <h2>Uitgelicht werk</h2>
        <h3>Mijn eerste website</h3>
        <p>Ik leer websites bouwen.</p>
    </section>
</main>

<aside>
    <h2>Nu aan het leren</h2>
    <p>HTML en CSS.</p>
</aside>

<footer>
    <p>Gemaakt door Sam.</p>
</footer>

De browser laat deze tags vaak gewoon als blokken zien.
De winst zit vooral in de duidelijke structuur van je HTML.
Later kun je deze containers ook met CSS vormgeven.
Gebruik een tag die past bij de inhoud. Gebruik dus <nav> voor navigatie en <main> voor de hoofdinhoud.

Actie — Bouw verder

Geef je bestaande pagina een header met je naam en h1. Zet de twee inhoudelijke onderdelen elk in een section binnen één main.
Voeg na main een aside toe met een korte tekst over wat je nu leert, en daarna een footer met je naam.
Verplaats de bestaande inhoud; maak geen tweede kopie. Controleer de nesting. Een nav voegen we in H3 toe, zodra er echte bestemmingen zijn.

06 - Meta description en meta keywords

In de <head> kun je meta-tags plaatsen.
De meta description geeft een korte beschrijving van de pagina.
Die beschrijving kan bijvoorbeeld in zoekresultaten zichtbaar worden.
De meta keywords-tag werd vroeger gebruikt om zoekwoorden op te geven.
Tegenwoordig gebruiken zoekmachines die tag bijna niet meer, maar technisch kom je hem nog wel tegen.

<meta name="description" content="Bekijk de projecten en interesses van Sam de Vries, beginnend webmaker.">
<!-- Alleen als proef; niet nodig in het eindproduct: -->
<meta name="keywords" content="portfolio, projecten, webdesign">

Actie — Bouw verder

Voeg in de head een meta description toe die jouw portfolio in één korte zin beschrijft, maximaal ongeveer 150 tekens.
Alleen oefenen: voeg ook een meta keywords-tag toe om de schrijfwijze te proberen. Deze is niet nodig voor ons eindproduct; verwijder hem daarna weer.
Behoud je eigen title en de description. Je gaat verder met dezelfde index.html.

07 - Controleren met de W3C Validator

Actie — Alleen oefenen

Controleer de volledige code van je bestaande index.html via de W3C-link hieronder. Noteer de meldingen; verander je inhoud niet in de voorbeeldtekst.
Lees daarna hoe je doctype, charset en lang toevoegt. Die basisverbeteringen gaan wél mee naar je eindproduct.

Gebruik daarvoor deze link: W3C Markup Validator.
Daarmee zie je of je code voldoet aan de HTML-standaard.
Als je je pagina op dit punt controleert, kun je nog meldingen over de volgende basisinstellingen krijgen:

Er ontbreekt een doctype
Er ontbreekt een UTF-8-instelling
Het lang-attribuut ontbreekt in de <html>-tag

Die controle is nuttig, omdat fouten in de basisstructuur later vaak voor vreemde problemen zorgen.
Door bovenaan de pagina <!doctype html> te zetten, los je de eerste fout op. Hiermee geef je aan dat het document een HTML5-document is.
Door in de <head> een meta charset-regel toe te voegen, los je de tweede fout op. Daarmee geef je aan welke tekencodering de pagina gebruikt.
Door lang="nl" toe te voegen aan de <html>-tag, los je de derde fout op. Daarmee geef je aan dat dit een Nederlandstalige website is.

Actie — Bouw verder

Voeg nu de uitgelegde doctype, charset en lang toe aan je eigen index.html.
Voeg ook <meta name="viewport" content="width=device-width, initial-scale=1"> in de head toe. Deze regel bereidt je site voor op het latere testen op telefoons.
Controleer opnieuw met de validator en herstel echte fouten. Behoud je eigen koppen, introductie, projecten, aside en footer; het voorbeeld is een vergelijking, geen vervanging.

Zo kan het eindresultaat eruit zien:

<!doctype html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Bekijk de projecten en interesses van Sam de Vries, beginnend webmaker.">
    <title>Home | Sam de Vries</title>
</head>
<body>
    <header>
        <p>Portfolio van Sam de Vries</p>
        <h1>Hallo, ik ben Sam</h1>
    </header>
    <main>
        <section>
            <h2>Uitgelicht werk</h2>
            <h3>Mijn eerste website</h3>
            <p>Ik werk aan een <strong>eigen portfolio</strong> en leer <em>stap voor stap</em> HTML en CSS.</p>
        </section>
        <section>
            <h2>Over mij</h2>
            <p>Ik maak graag ontwerpen en ontdek hoe websites werken.</p>
        </section>
    </main>
    <aside>
        <h2>Nu aan het leren</h2>
        <p>Van een eerste HTML-pagina naar een eigen responsive website.</p>
    </aside>
    <footer>
        <p>Gemaakt door Sam de Vries.</p>
    </footer>
</body>
</html>

Bekijk hier ook het eindresultaat in de browser: open hoofdstuk 1 voorbeeldpagina.

Quiz