Leer hoe je een eenvoudige fotogalerij webpagina maakt met HTML en CSS. Deze oefening behandelt de projectstructuur, het gebruik van het <img> element, het instellen van responsieve afbeeldingen en het toevoegen van bijschriften met <figcaption>. Je leert ook hoe je afbeeldingen naast elkaar kunt plaatsen met behulp van display: inline-block; in CSS.
Voordat je begint, is het belangrijk om je bestanden en mappen goed te organiseren. Dit helpt je om je project overzichtelijk en beheersbaar te houden.
Maak een nieuwe map aan en noem deze 'fotogalerij'. Dit wordt de hoofdmap van je project.
Binnen de 'fotogalerij' map, maak twee submappen aan: 'images' voor alle afbeeldingen en 'styles' voor je CSS-bestanden.
Maak een HTML-bestand aan in de hoofdmap 'fotogalerij' genaamd 'index.html'. Maak vervolgens een CSS-bestand aan in de map 'styles' genaamd 'fotogalerij_stijl.css'.
Voeg in je 'index.html' bestand een link toe naar je externe stylesheet in de <head> sectie.
<link rel="stylesheet" type="text/css" href="styles/fotogalerij_stijl.css">Open je 'index.html' bestand en schrijf de basis HTML-code:
<!DOCTYPE html>
<html>
<head>
<title>Mijn Fotogalerij</title>
<link rel="stylesheet" type="text/css" href="styles/fotogalerij_stijl.css">
</head>
<body>
<h1>Mijn Fotogalerij</h1>
<div class="fotogalerij-wrapper">
<!-- Fotogalerij komt hier -->
</div>
</body>
</html>Gebruik het <img> element om je afbeeldingen toe te voegen binnen de <div> tag van de 'fotogalerij-wrapper'. Bijvoorbeeld:
<div class="fotogalerij-wrapper">
<figure>
<img src="images/flower.jpg" alt="Een prachtige bloem">
<figcaption>Beschrijving van de prachtige bloem</figcaption>
</figure>
<!-- Meer figure-elementen met afbeeldingen en onderschriften -->
</div>Bewerk je 'fotogalerij_stijl.css' bestand in de map 'styles' en schrijf CSS om de afbeeldingen responsief te maken:
img {
max-width: 100%;
height: auto;
}
.fotogalerij-wrapper {
margin: 0 auto;
max-width: 1200px;
text-align: center;
}
figure {
display: inline-block;
margin: 10px;
text-align: left;
}Sla je HTML-bestand op en open het in een webbrowser om je fotogalerij te bekijken.
Experimenteer met verschillende afbeeldingsformaten, voeg lazy loading toe aan je <img> elementen, en pas de display-eigenschap toe op je <figure> elementen voor een naast elkaar geplaatste galerijstijl.
In deze sectie leer je hoe je effectief thumbnails kunt gebruiken in fotogalerijen. Thumbnails zijn kleinere versies van afbeeldingen die helpen om laadtijden te verminderen en een overzichtelijke gebruikerservaring te bieden. Belangrijk is het gebruik van twee afbeeldingsformaten: een klein formaat voor de thumbnail en een groter formaat voor de volledige weergave wanneer een gebruiker op de thumbnail klikt.
Hieronder staat een voorbeeld van hoe je een eenvoudige fotogalerij met thumbnails kunt implementeren. Let op het gebruik van twee verschillende afbeeldingspaden: één voor de thumbnail en één voor de volledige afbeelding.
<a href="path/to/large-image1.jpg">
<img src="path/to/thumbnail-image1.jpg" alt="Beschrijving van afbeelding 1">
</a>
alt-attribuut bij elke <img> voor toegankelijkheid en SEO.Door het toepassen van deze technieken, kun je een efficiënte en gebruikersvriendelijke fotogalerij creëren die zowel snel laadt als visueel aantrekkelijk is.
Voor een uniforme en professionele uitstraling van je fotogalerij is het essentieel dat alle foto's dezelfde hoogte hebben. Dit kun je bereiken met het uitsnede-gereedschap in Photoshop. Hier volgt een stap-voor-stap handleiding:
Stap voor stap:
Door deze stappen en tips te volgen, creëer je een professionele en visueel aantrekkelijke fotogalerij voor je website.