Websites met stijl

4. Website over Terschelling

In dit hoofdstuk:

We beginnen in dit hoofdstuk met de opzet van een website over Terschelling.

Vier webpagina's

Bekijk de website over Terschelling nog eens.

De teksten op deze site zijn niet bepaald sterk; pas ze gerust aan, als je klaar bent met de cursus.
Mij gaat het hier alleen om de bouw van websites, niet om de inhoud.

De site bestaat uit vier pagina's die ik de volgende bestandsnamen heb gegegeven:

Onthoud:

We beginnen in dit hoofdstuk met het invoeren van de structuur van de startpagina.

De structuur van de pagina's

De structuur van de vier pagina's is hetzelfde, ze zijn opgebouwd uit dezelfde onderdelen:
menu, kop, hoofdtekst, neventekst, voet.

Alleen de inhoud (de teksten en afbeeldingen) van die onderdelen is op de verschillende pagina's anders.

Daarom maken we eerst de structuur van de startpagina klaar. Die kunnen we dan ook gebruiken voor de pagina's polder.html, duin.html en wad.html.

Onderdelen van de startpagina

figuur 1

Hierboven zie je een foto van de startpagina met de verschillende onderdelen, achtereenvolgens:

Html heeft voor al die onderdelen speciale elementen:

De html-code voor de structuur ziet er uit als in figuur 2: figuur 2 <nav> </nav>
 
<header> </header>
 
<main> </main>
 
<aside> </aside>
 
<footer> </footer>

Elk element heeft zijn begin-tag en eind-tag. Daartussen komt later de inhoud (tekst, plaatjes).
De lege regels tussen de elementen zijn voor de overzichtelijkheid.

Het element div

Alle elementen van figuur 2 kun je je voorstellen als rechthoeken waarbinnen de inhoud van het element komt. Eigenlijk verschillen nav, header, main... niet van elkaar, alleen de naam is anders.

Vroeger was er dan ook maar één zo'n element, het element div (van division = onderdeel). De webpagina van figuur 2 bestond vroeger uit 5 div elementen. Zie figuur 2a: figuur 2a <div> </div>
 
<div> </div>
 
<div> </div>
 
<div> </div>
 
<div> </div>

Je zult met me eens zijn dat figuur 2a minder duidelijk is dan figuur 2.

De elementen nav, header, main, aside, footer (en nog enkele andere die we later zullen tegenkomen) zijn in html5 echter niet in de eerste plaats voor ons toegevoegd, maar om het zoekmachines (zoals Google en Bing) gemakkelijker te maken.
Als er bijvoorbeeld een element main op de website staat, weet de zoekmachine dat daar de hoofdtekst van de pagina te vinden is.

Div wordt nog steeds gebruikt op alle plaatsen waar geen speciaal element (zoals main, nav, footer) voor bestaat.

Elementen met een naam

Je begrijpt dat er vroeger in een webpagina heel wat div elementen op een webpagina voorkwamen: voor het het menu, voor de header, voor de main, voor de footer.
Hoe houd je al die elementen uit elkaar? Dat gaat door (sommige) elementen een naam te geven.
Je gebruikt daar het attribuut id voor. (id staat voor identity)

In figuur 3 zie je hoe een div element de naam container krijgt: figuur 3 <div id="container">...</div>

Opmerkingen:

Main en aside ingepakt

De elementen main en aside komen naast elkaar te staan en moeten worden gecentreerd (links en rechts evenveel ruimte). Dat gaat alleen als beiden 'ingepakt' zijn in een element dat we later centreren met behulp van het stijlblad.
We gebruiken hiervoor het algemene element div. Ik heb het de naam container gegeven, omdat het dienst doet als container (zeg maar doos) voor de elementen main en aside.

De code van de de structuur wordt dan: figuur 4 <nav> </nav>
 
<header> </header>
 
<div id="container"> <main> </main>
 
<aside> </aside>
 
</div>
 
<footer> </footer>
Je ziet dat de elementen main en aside nu in element div staan,
tussen de tags <div id="container"> en </div;>

Aan de slag

Alvast onthouden!

De html-pagina's van de website (index.html, polder.html, duin.html, wad.html) moeten straks worden opgeslagen in de map terschelling. (Die map staat in de map websitesmetstijl: websitesmetstijl/terschelling).
Als je ze per ongeluk ergens anders opslaat kunnen ze de afbeeldingen niet vinden - want die staan ergens in de map terschelling.

We gaan nu de pagina index.html aanmaken.

Daarbij gaan we uit van het sjabloon voor een nieuwe webpagina (nieuw.html) dat je in hoofdstuk 3 hebt gemaakt.
De code van figuur 4 plaatsen we in de body van dat sjabloon. Het geheel komt er dan uit te zien als in figuur 5. (de lichtgrijze tekst heb je al in hoofdstuk 3 ingetikt.)

Aanwijzingen staan onder de figuur.

figuur 5 <!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxx</title>
<link rel="stylesheet" href="css/yyy.css">
</head>
 
<body> <nav> </nav>
 
<header> </header>
 
<div id="container"> <main> </main>
 
<aside> </aside>
 
</div>
 
<footer> </footer>
</body>
</html>

Afspraak

Als er staat 'Sla het document op' zonder dat een bestandsnaam wordt genoemd, sla je het document op onder dezelfde naam als daarvoor. Hier is dat dus onder de naam index.html.

Aanpassingen in de head

In de head brengen we twee aanpassingen aan:

De titel van de pagina

De startpagina van onze nieuwe website geven we de titel Terschelling

De verwijzing naar het stijlblad

Het stijlblad voor de website over Terschelling gaat terschelling.css heten en het komt in de map css.
Hoewel we het stijlblad pas aanmaken in hoofdstuk 14, maken we nu al de verwijzing in orde:

Controleren en opslaan

figuur 8 <!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terschelling</title>
<link rel="stylesheet" href="css/terschelling.css">
</head>
 
<body>
<nav> </nav>
 
<header> </header>
 
<div id="container">
<main> </main>
 
<aside> </aside>
 
</div>
 
<footer> </footer>

</body>
</html>

Tip

Je hebt de regels waarschijnlijk ingetikt in de editor. Als je sneller wilt werken kan je in volgende hoofdstukken de code uit een figuur ook met kopiëren en plakken in de editor zetten.

Samenvatting