Spread → Web (HTML/CSS)

Project DISCO — van spread naar HTML

We bouwen een webpagina in VS Code, vertrekkend van je InDesign-spread (inleiding, bodytekst, alinea’s en een streamer). We werken met semantische HTML en een eenvoudige CSS met variabelen (zoals kleurstalen).

Stap 1 — Mappenstructuur

disco/
├─ index.html
└─ assets/
   ├─ css/
   │  └─ style.css
   └─ img/
      └─ Afbeelding.jpg 

Stap 2 — HTML boilerplate (index.html)

Maak index.html in VS Code en plak dit skelet. Let op: we koppelen style.css en gebruiken Google of Adobe Fonts.

<!doctype html>
<html lang="nl">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>DISCO — Van spread naar HTML</title>

  <!-- Koppel je eigen CSS -->
  <link rel="stylesheet" href="assets/css/style.css">

  <!-- Google Fonts (voorbeeld) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700;800&family=Source+Serif+4:wght@400;700&display=swap" rel="stylesheet">

</head>
<body>

  <header class="site-header">
    <h1 class="site-title">DISCO — 70s/80s Night</h1>
  </header>

  <main id="content">
    <p class="lead">Korte inleiding uit je spread. Deze alinea valt op en vat de pagina samen.</p>

    <h2>Hoofdtitel / Sectietitel</h2>
    <p>Hier komt je bodytekst (alinea 1).</p> Gebruik <p>voor elke alinea.</p>

    <h3>Paragraaftitel</h3>
    <p>Nog een alinea (alinea 2). Hou alinea’s kort en duidelijk.</p>

    <!-- Streamer: opvallend tussenblok -->
    <aside class="streamer">“Disco is ritme, kleur en sfeer.”</aside>

    <!-- Afbeelding (optioneel; hero doen we later) -->
    <figure>
      <img src="assets/img/cover.jpg" alt="Dansvloer met discobal">
      <figcaption>Sfeerbeeld van de avond (optioneel bijschrift).</figcaption>
    </figure>
  </main>

  <footer class="site-footer">
    <p>© 2025 DISCO Project — Klas 5</p>
  </footer>

</body>
</html>

Stap 3 — CSS (assets/css/style.css)

We gebruiken CSS-variabelen (zoals stalen in InDesign). Content is gecentreerd met margin: 0 auto en krijgt een basisbreedte.

/* ===== Variabelen (stalen) ===== */
:root{
  --font-head: "Poppins", system-ui, sans-serif;           /* koppen */
  --font-body: "Source Serif 4", ui-serif, Georgia, serif; /* lopende tekst */

  /* Pas aan aan je InDesign-kleurstalen */
  --kleur-achtergrond: #0e0e12;
  --kleur-tekst: #f6f6f7;
  --kleur-primair: #ffd800;    /* bv. geel */
  --kleur-secundair: #6c5ce7;  /* bv. paarsblauw */

  --maat-basis: 16x;          /* basis lettergrootte body */
  --kolombreedte: 800px;       /* basisgrootte van de tekstkolom (main) */
  --rand: 1px;                 /* dunne rand voor het contentvlak */
  --ruimte: 16px;              /* standaard tussenruimte */
}

/* ===== Reset & basis ===== */
*{ 
    box-sizing: border-box; 
}

html, body{ 
    margin:0; padding:0; 
}

body{
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  font-family: var(--font-body);
  font-size: var(--maat-basis);
  line-height: 1.6;
}

/* ===== Header/Footer (smal als de content) ===== */
.site-header, .site-footer{
  max-width: var(--kolombreedte);
  margin: 0 auto;            /* centreren */
  padding: 24px var(--ruimte);
}

/* ===== MAIN centreren + basisgrootte ===== */
#content{
  width: var(--kolombreedte);   /* basisgrootte */
  max-width: 92vw;              /* smal op kleine schermen */
  margin: 0 auto;               /* CENTREREN */
  padding: 24px var(--ruimte);  /* eenvoudige padding */
  background: #14141b;          /* subtiele achtergrond */
  border: var(--rand) solid rgba(255,255,255,.12);
}

/* ===== Typografie ===== */
.site-title{
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 32px;     /* eenvoudig, geen clamp() */
  margin: 0;
  color: var(--kleur-primair);
}

h2, h3{
  font-family: var(--font-head);
  margin: 24px 0 8px;
  line-height: 1.3;
}

h2{ 
    font-size: 24px; 
}

h3{ 
    font-size: 20px; 
}

.lead{
  font-size: 20px;
  color: #e8e8ec;
  margin: 0 0 16px;
}

/* ===== Streamer (opvallend tussenblok) ===== */
.streamer{
  background: var(--kleur-primair);
  color: #111;
  padding: 12px 16px;
  margin: 20px 0;
  border-left: 6px solid var(--kleur-secundair);
  font-weight: 700;
}

/* ===== Afbeeldingen en bijschrift ===== */
figure{ 
    margin: 16px 0; 
}

img{ 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

figcaption{
  font-size: 14px;
  color: #bfc0c7;
  margin-top: 4px;
}

/* ===== Links ===== */
a{ 
    color: var(--kleur-primair); text-decoration: none; 

}
a:hover, a:focus{ 
    text-decoration: underline; 
}

Stap 4 — Tekst plakken

1. Open het gedownloade tekstbestand op je computer en kopieer de inhoud.
2. Plak in index.html binnen <main id="content"> en verdeel in alinea’s (<p>…</p>).
3. Maak kopjes met <h2> en <h3> en laat de streamer staan of vervang door je eigen quote.

Stap 5 — Kleurstalen & fonts aanpassen

• Vervang --kleur-primair en --kleur-secundair door de kleuren uit je InDesign-spread.
• Kies Google/Adobe Fonts die horen bij je spread en vul --font-head en --font-body in.

Stap 6 — Checklist

• index.html en assets/css/style.css bestaan en zijn gekoppeld.
• #content is gecentreerd met margin: 0 auto en heeft een basisbreedte.
• Semantische tags: header, main, footer; kopjes en alinea’s zijn correct.
• CSS-variabelen worden gebruikt voor kleuren/typografie.
• (Optioneel) Afbeelding met <figure>/<figcaption> en correcte alt.

Voorbeelden

Onderstaande link toont een voorbeeld van een uitgewerkte webpagina op basis van deze opdracht.