Websites met stijl

6. Afbeeldingen

De header

De header is de kopsectie van de webpagina. In het eerste deel van dit hoofdstuk vullen we de header met een kopfoto en een koptekst. Voor we dat doen kijken we waar de afbeeldingen te vinden zijn en hoe je een afbeelding in beeld brengt.

Plaats en naam van de afbeeldingen

Het is handig om alle afbeeldingen voor een website in een aparte map te plaatsen. Meestal, ook bij de website Terschelling, is dat de map img. Alle benodigde foto's staan er al in.

De namen van de afbeeldingen heb ik als volgt gekozen:

• Bovenaan elke pagina staat de kopfoto. Die heet:
  - kop1.jpg voor index.html - de startpagina,
  - kop2.jpg voor polder.html,
  - kop3.jpg voor duin.html en
  - kop4.jpg voor wad.html.
• In de zijbalk rechts staan telkens vier foto's (op de startpagina zijn het er drie).
  Die heten resp.
  - home1.jpg t/m home3.jpg
  - polder1.jpg t/m polder4.jpg
  - duin1.jpg t/m duin4.jpg
  - wad1.jpg t/m wad4.jpg
• De drie zijfoto's op de startpagina, home1.jpg t/m home3.jpg, dienen tevens als link naar de webpagina's polder, duinen en wad. Als je op zo'n foto klikt spring je naar de betreffende pagina.

Het element img

Een afbeelding wordt getoond met behulp van het element img.
Img is een leeg element, zonder eind-tag.

Het onderstaande voorbeeld toont de afbeelding uit het bestand kop1.jpg (in de map img): figuur 1 <img src="img/kop1.jpg" alt="kopfoto">

Toelichting

• Het attribuut src="img/kop1.jpg" 'wijst' naar het afbeeldingsbestand kop1.jpg in de map img.
  (src is de afkorting van source, bron).
  Merk op dat de afbeelding zelf niet wordt opgenomen in het document, alleen een verwijzing naar (de plaats van) het afbeeldingsbestand.
  Omdat het bestand kop1.jpg niet in de in dezelfde map staat als de startpagina, maar in de sub-map img, moet het pad worden opgegeven: img/kop1.jpg.
  (Meer over het pad vind je op de pagina Het pad naar een document. )
• Het attribuut alt="kopfoto" zorgt ervoor, dat de computer de tekst kopfoto in beeld zet als de afbeelding zelf niet kan worden getoond. Dat is bijvoorbeeld het geval in webbrowsers voor blinden waar de tekst wordt voorgelezen.
• Meer mogelijkheden vind je in de naslag over img.

Koppen

Voor het maken van koppen (titels in grote leters) kent html de elementen h1 t/m h6: h1 is de grootste kop, h2 is wat kleiner, .... h6 is de kleinste kop.

Een foto en h1-kop in de header zetten

We gaan nu het element header vullen met een kopfoto en een h1-kop: figuur 2 <header>
<img src="img/kop1.jpg" alt="kopfoto">
<h1>Terschelling</h1>
</header>

• Open index.html in de editor
• Zoek de regel <header> </header> op.
• Verander die regel in de vier regels van figuur 2.
• Sla het gewijzigde document op, maar sluit het niet.

Afbeeldingen in de zijbalk

In de zijbalk (aside) zetten we een aantal afbeeldingen met onderschriften. Daarvoor hebben we twee nieuwe elementen nodig: figcaption en figure.

Onderschrift bij een afbeelding

Een onderschrift bij een foto zet je in het figcaption element (caption is onderschrift): figuur 3 <figcaption>Het onderschrift</figcaption>

Het element figure

Om een figuur en het onderschrift bijelkaar te houden kun je ze het beste samen in één element zetten. Daarvoor is het element figure bedoeld. Bekijk het voorbeeld in figuur 4:
figuur 4

De afbeeldingen in de zijbalk aanbrengen

Met de kennis van hierboven kun je de zijbalk (aside) invullen. De html ziet er uit als figuur 5.

• Zoek de regel met <aside> </aside> op.
• Verander die regel in de zes regels van figuur 5. (Lees eerst de opmerkingen onder figuur 6)
• Sla het gewijzigde document op.
• Bekijk het document in je browser. Eindelijk zie je iets! Als het goed is ziet het er ongeveer uit als figuur 6:

Opmerkingen

• De vier <figure> tags zijn precies gelijk op het volgnummer van de afbeelding na: home1.jpg, home2.jpg, home3.jpg, home4.jpg.
  Je kunt dan ook het beste de bovenste regel 3 keer kopiëren en dan de volgnummers aanpassen.
  Om te laten uitkomen dat de 4 regels bijna gelijk zijn, spilitsen we de regels niet op.
• Er staan op de startpagina maar drie foto's in de zijbalk, waarom zijn er dan vier <figure> elementen; afbeelding home4.jpg bestaat toch niet?
  De reden is dat dit bestand tevens dient als aanzet voor de andere drie pagina's en die hebben wel vier foto's in de zijbalk. We kopiëren (aan het eind van hoofdstuk 8) de startpagina naar de andere drie pagina's. Later halen we dan op de startpagina het vierde <figure> element weg.

Controleren en opslaan

• Controleer of de startpagina er bij jou uitziet als in figuur 7.
• Verbeter evetuele fouten en sla het verbeterde document opnieuw op.