Ga naar hoofdinhoud

HTML in bestanden

Tot nu toe schrijf je HTML als strings in Python. Dat wordt onoverzichtelijk bij grote pagina's. In deze les leer je hoe je HTML in aparte bestanden zet.

Mappenstructuur​

Maak een pages folder in je static folder:

je-project/
├── main.py
└── static/
    ├── css/
    │   └── style.css
    └── pages/
        └── home.html

HTML bestand maken​

Maak static/pages/home.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" href="/static/css/style.css">
    </head>
    <body>
        <h1>Welkom!</h1>
        <p>Dit is een HTML bestand, geen Python string.</p>
    </body>
</html>

FileResponse gebruiken​

Pas je main.py aan:

from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles

app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")

@app.get("/")
async def home():
    return FileResponse("static/pages/home.html")

Wat is nieuw?​

  • FileResponse("static/pages/home.html") - Stuurt een bestand terug in plaats van een string
  • De HTML staat nu in een apart .html bestand
  • Je krijgt syntax highlighting in je editor

Testen​

Ga naar http://127.0.0.1:8000. Je ziet de HTML pagina met CSS styling!

Gaat er iets mis?

Krijg je een 404 of 500 error? Check of het pad in FileResponse("...") exact klopt en of het bestand echt op die plek staat. Bekijk de troubleshooting pagina voor meer oplossingen.

Opdrachten​

Opdracht 1: Predict - Wat gebeurt er?​

@app.get("/contact")
async def contact():
    return FileResponse("static/pages/contact.html")

Vraag: Wat gebeurt er als contact.html niet bestaat?

Tip

FastAPI probeert het bestand te openen. Wat kan er misgaan als een bestand niet gevonden wordt?

Antwoord

Je krijgt een error (500 Internal Server Error) omdat het bestand niet gevonden kan worden.

Opdracht 2: Run​

Maak de mappenstructuur uit het voorbeeld (static/pages/home.html), pas je main.py aan met FileResponse, en test of de pagina laadt.

Opdracht 3: Investigate - Fout pad​

Verander het pad in FileResponse naar een bestand dat niet bestaat, bijvoorbeeld FileResponse("static/pages/oeps.html"). Wat voor error krijg je?

Antwoord

Je krijgt een 500 Internal Server Error in de browser, en in de terminal zie je een foutmelding dat het bestand niet gevonden kan worden. Dit is een veelvoorkomende fout als je een typfout maakt in het pad.

Opdracht 4: Make - Twee pagina's​

Maak twee HTML bestanden (home.html en about.html) met elk een eigen endpoint. Voeg op elke pagina een link naar de andere toe:

<a href="/about">Over Mij</a>
Tip

Maak twee .html bestanden in static/pages/ en twee endpoints in main.py. Vergeet niet dat de href verwijst naar het endpoint, niet naar het bestand.

Antwoord

static/pages/home.html:

<!DOCTYPE html>
<html>
    <body>
        <h1>Home</h1>
        <a href="/about">Over Mij</a>
    </body>
</html>

static/pages/about.html:

<!DOCTYPE html>
<html>
    <body>
        <h1>Over Mij</h1>
        <a href="/">Terug naar Home</a>
    </body>
</html>
@app.get("/")
async def home():
    return FileResponse("static/pages/home.html")

@app.get("/about")
async def about():
    return FileResponse("static/pages/about.html")

Opdracht 5: Make - Drie pagina's met navigatie​

Maak drie pagina's (home, about, contact) die allemaal dezelfde CSS laden en links naar elkaar hebben.

Tip

Maak drie .html bestanden die alle drie dezelfde <link rel="stylesheet" href="/static/css/style.css"> bevatten. Zet op elke pagina links naar de andere twee met <a href="/...">.

Antwoord

Maak drie bestanden in static/pages/ (home.html, about.html, contact.html) met elk:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/static/css/style.css">
    </head>
    <body>
        <a href="/">Home</a> | <a href="/about">Over Mij</a> | <a href="/contact">Contact</a>
        <h1>Home</h1>
    </body>
</html>

En drie endpoints in main.py:

@app.get("/")
async def home():
    return FileResponse("static/pages/home.html")

@app.get("/about")
async def about():
    return FileResponse("static/pages/about.html")

@app.get("/contact")
async def contact():
    return FileResponse("static/pages/contact.html")

Oefen met Python​

Python oefenblok

Dit oefenblok draait pure Python in je browser — geen FastAPI. Oefen hier de Python-concepten die je nodig hebt voor je server.

# Bestanden herkennen aan extensie
bestanden = [
  "index.html",
  "over.html",
  "style.css",
  "app.js",
  "logo.png",
  "data.json"
]

# Filter op type
for bestand in bestanden:
  if bestand.endswith(".html"):
      print(f"📄 Webpagina: {bestand}")
  elif bestand.endswith(".css"):
      print(f"🎨 Stylesheet: {bestand}")
  elif bestand.endswith(".js"):
      print(f"⚡ Script: {bestand}")
  else:
      print(f"📁 Overig: {bestand}")

# Naam zonder extensie
voor_punt = "index.html".split(".")[0]
print(f"
Bestandsnaam zonder extensie: {voor_punt}")