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:
- index.html (de startpagina)
- polder.html
- duin.html
- wad.html
Onthoud:
- Elke webpagina wordt opgeslagen als een apart bestand.
- De bestandsnaam ervan eindigt op .html
- De startpagina heet altijd index.html
Toelichting: Als je in je browser wwww.terschelling intikt, dan opent de browser automatisch het bestand www.terschelling/index.html.
Zou je de startpagina van de website anders noemen, bijvoorbeeld start.html, dan moet je om dat bestand te openen de volledige naam intikken: www.terschelling.nl/start.html. Dat doen we dus niet.
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:
- menu (de gele balk met de links naar de andere pagina's)
- kop (de brede foto met de titel 'Terschelling')
- hoofdtekst (de linker kolom)
- neventekst (de rechter kolom, hier met vooral foto's)
- voet
Html heeft voor al die onderdelen speciale elementen:
- nav voor het menu. (nav staat voor navigation, de engelse term voor een menu van een webpagina)
- header voor de kop
- main voor de hoofdtekst
- aside voor de neventekst
- footer voor de voet
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:
- Alle elementen kunnen een naam krijgen, niet alleen div elementen.
- Een naam moet uniek zijn op de pagina. Er mogen geen twee elementen op een pagina zijn met dezelfde id-naam.
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>
- Open het bestand nieuw.html dat je in de vorige les gemaakt hebt.
(Als het goed is staat dat bestand in de map websitesmetstijl.)
- Sla het bestand meteen op onder de naam index.html in de map websitesmetstijl/terschelling (De submap terschelling van de map websitesmetstijl. Gebruik opslaan als), maar sluit het bestand niet.
- Tik de gekleurde tekst uit figuur 5 in (tussen de begin- en eind-tag van het element body). Houd je aan de regelindeling.
- Als je klaar bent sla je het bestand opnieuw op, maar sluit het document nog niet.
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:
- Ga naar de regel met de link naar het stijlblad (de 7e regel van boven):
figuur 7a
<link rel="stylesheet" href="css/yyy.css">
- Verander de naam van het stijlblad van yyy.css in terschelling.css
figuur 7b
<link rel="stylesheet" href="css/terschelling.css">
De naam van de map (css) is al correct.
Controleren en opslaan
- Controleer of je document eruit ziet zoals in figuur 8.
- Corrigeer eventuele fouten.
- Sla je document op (onder de naam index.html).
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