Maak een eenvoudige webpagina met een productkaart

Opdracht: Maak een basisproductkaart met HTML en CSS. Zet de juiste mappenstructuur op voor je project en koppel een extern CSS-bestand. Pas de stijlen toe door borders, achtergrondkleur, marges en padding te wijzigen. Zorg ervoor dat je alle HTML-elementen voorziet van de juiste attributen, zoals alt en title.

Stappen:

  1. Mappenstructuur: Maak de volgende mappen aan in je project:
    • website/
    • website/styles/ (voor CSS-bestanden)
    • website/images/ (voor afbeeldingen)
  2. HTML-structuur (inclusief correcte attributen): Maak een bestand met de naam index.html in de map website/. Voeg de basisstructuur van een HTML-pagina toe, en koppel een extern CSS-bestand dat zich in de styles/ map bevindt. Vergeet niet de alt-attributen en andere relevante attributen toe te voegen.

HTML:


<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Productkaart</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div class="product-card" title="Product kaart voor een voorbeeld product">
        <img src="images/product.jpg" alt="Afbeelding van het product">
        <h2>Productnaam</h2>
        <p>Beschrijving van het product in één zin.</p>
    </div>
</body>
</html>
  1. CSS-bestand: Maak een bestand met de naam style.css in de map styles/. Voeg de basisstijlen toe voor de productkaart. Gebruik het CSS box model om borders, padding en marges toe te passen.

CSS:


/* Globale stijlen */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
}

/* Stijlen voor de productkaart */
.product-card {
    width: 300px;
    background-color: #fff;
    padding: 20px;
    border: 2px solid #ddd;
    margin: 50px auto; /* Zorgt dat de kaart in het midden staat */
    text-align: center;
}

img {
    width: 100%;
    height: auto;
    border-bottom: 2px solid #ddd;
    margin-bottom: 15px;
}

h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

p {
    font-size: 16px;
    color: #333;
}

Toepassing van attributen:

  • Afbeelding: Het alt-attribuut beschrijft de afbeelding, zodat als de afbeelding niet geladen wordt, er toch een beschrijving wordt weergegeven voor visueel gehandicapte gebruikers of in de context van SEO.
  • Title: Het title-attribuut op de div geeft extra informatie wanneer de gebruiker over de kaart hovert. Dit kan nuttig zijn voor extra uitleg of details.

Uitdagingen:

  • Voeg een andere afbeelding toe in de map images/ en gebruik deze in de productkaart (bijvoorbeeld product.jpg).
  • Probeer verschillende border-stijlen uit zoals dotted, dashed of solid.
  • Verander de marges en padding om de ruimte rondom de inhoud van de productkaart aan te passen.

Bonus:

Voeg nog een extra element toe, zoals een button met een title-attribuut dat extra informatie biedt over de actie van de knop.

Met deze oefening leer je de basis van het CSS box model, maar ook het belang van het correct toepassen van HTML-attributen, wat essentieel is voor toegankelijkheid en SEO (Search Engine Optimization). Door attributen zoals alt correct toe te voegen aan afbeeldingen, zorg je ervoor dat zoekmachines de inhoud van je afbeeldingen begrijpen, wat de vindbaarheid van je pagina's kan verbeteren.