Ga naar hoofdinhoud

Links tussen pagina's

Hier bouw je op verder: Pagina's koppelen en Semantische HTML (nav)

Weet je dit niet meer zeker? Lees het terug voordat je verdergaat.

Je pagina's staan nog los van elkaar. Met de <a> tag verbind je ze.

De a-tag​

Met <a> maak je een klikbare link:

static/pages/home.htmlgaat zoals hij is naar de browser
<a href="/about">Ga naar Over Mij</a>
  • href="/about" zegt naar welk endpoint de link gaat
  • De tekst tussen <a> en </a> is klikbaar
Link naar endpoint, niet naar bestand

Gebruik href="/about", het endpoint, en niet de naam van het bestand. Wat er met de bestandsnaam gebeurt, probeer je uit in opdracht 3.

Voorbeeld​

Twee pagina's die naar elkaar linken. Vervang je home.html door deze versie, met een link, en maak er een pagina about.html bij.

static/pages/home.htmlgaat zoals hij is naar de browser
<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
    </head>
    <body>
        <h1>Home</h1>
        <a href="/about">Ga naar Over Mij</a>
    </body>
</html>
static/pages/about.htmlgaat zoals hij is naar de browser
<!DOCTYPE html>
<html>
    <body>
        <h1>Over Mij</h1>
        <a href="/">Terug naar Home</a>
    </body>
</html>

Je endpoint voor / heb je al. Zet in main.py een endpoint voor /about eronder:

main.pydraait op de server
@app.get("/about")
async def about():
    return FileResponse("static/pages/about.html")

Klik je op "Ga naar Over Mij", dan ga je naar /about. Met "Terug naar Home" kom je weer op /.

Gaat er iets mis?

Krijg je een 404 als je op een link klikt? Dan bestaat het endpoint waarschijnlijk niet in je main.py. Meer oplossingen staan op Er gaat iets mis.

Zo ziet je main.py er nu uit

Dit is je hele main.py na deze les, zonder wat je in de opdrachten maakte.

main.pydraait op de server
from fastapi import FastAPI
from fastapi.responses import FileResponse, HTMLResponse

app = FastAPI()

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

@app.get("/info")
async def info():
    return {"naam": "Jouw Naam", "leeftijd": 16}

@app.get("/pagina", response_class=HTMLResponse)
async def pagina():
    return """
    <!DOCTYPE html>
    <html>
        <head>
            <title>Mijn Pagina</title>
        </head>
        <body>
            <h1>Hallo!</h1>
            <p>Dit is mijn eerste HTML pagina.</p>
        </body>
    </html>
    """

@app.get("/styled", response_class=HTMLResponse)
async def styled():
    return """
    <!DOCTYPE html>
    <html>
        <head>
            <title>Met CSS</title>
            <style>
                h1 { color: blue; }
                p { color: gray; }
            </style>
        </head>
        <body>
            <h1>Gestylede pagina</h1>
            <p>Deze tekst is grijs.</p>
        </body>
    </html>
    """

@app.get("/about")
async def about():
    return FileResponse("static/pages/about.html")
Controlevraag
Je verandert in main.py de regel @app.get("/about") in @app.get("/over"). De functie heet nog about, en in home.html staat nog href="/about". Wat gebeurt er als je op Ga naar Over Mij klikt?
Kies wat jij denkt. Bij het goede antwoord zie je de uitleg.
Controleer je server

Laat je server draaien en typ in een tweede terminal python controleer.py paginas. Het script kijkt of alles uit dit hoofdstuk werkt; je downloadt het op Project checken.

Opdrachten​

Opdracht 1: Predict - Waar ga je heen?​

static/pages/home.htmlgaat zoals hij is naar de browser
<a href="/contact">Neem contact op</a>
Voorspel
Welk pad vraagt de browser aan je server als je op deze link klikt?
Kies wat jij denkt. Bij het goede antwoord zie je de uitleg.

Opdracht 2: Run​

Maak de twee pagina's uit het voorbeeld (home.html en about.html) en het endpoint voor /about. Klik op "Ga naar Over Mij": staat er /about in de adresbalk, met de kop Over Mij? En brengt "Terug naar Home" je weer op /?

Opdracht 3: Investigate - Bestandsnaam als link​

Wat gebeurt er als je href="about.html" schrijft in plaats van href="/about"?

Antwoord

De browser probeert naar http://127.0.0.1:8000/about.html te gaan, maar dat endpoint bestaat niet in je Python code. Je krijgt {"detail":"Not Found"}, een 404. De browser kent je bestanden niet, alleen de adressen die je server aanbiedt. Een link verwijst daarom naar een endpoint, niet naar de naam van een bestand. Later geef je ook bestanden een eigen adres, zoals /static/css/style.css; dan link je naar dat adres.

Opdracht 4: Make - Drie pagina's​

Maak er een derde pagina bij, contact.html, en zorg dat alle drie de pagina's (home, about, contact) links naar de andere twee hebben.

Tip

Je hebt één nieuw HTML-bestand en één nieuw endpoint nodig. Zet op elke pagina twee <a>-tags naar de andere pagina's.

Antwoord

Drie HTML bestanden in static/pages/ met elk links naar de andere twee, bijvoorbeeld home.html:

static/pages/home.htmlgaat zoals hij is naar de browser
<!DOCTYPE html>
<html>
    <body>
        <h1>Home</h1>
        <a href="/about">Over Mij</a>
        <a href="/contact">Contact</a>
    </body>
</html>

De endpoints voor / en /about heb je al. Er komt er één bij:

main.pydraait op de server
@app.get("/contact")
async def contact():
    return FileResponse("static/pages/contact.html")

Opdracht 5: Make - Navigatie menu​

Zet op elke pagina dezelfde drie links bovenaan, bijvoorbeeld in home.html:

static/pages/home.htmlgaat zoals hij is naar de browser
<nav>
    <a href="/">Home</a>
    <a href="/about">Over Mij</a>
    <a href="/contact">Contact</a>
</nav>
Tip

Kopieer het <nav> blok naar elke HTML pagina, bovenaan de <body>. Zo heeft elke pagina dezelfde navigatiebalk.

Antwoord

Zet in elk HTML bestand (home.html, about.html, contact.html) hetzelfde navigatie-blok. Zo ziet home.html eruit:

static/pages/home.htmlgaat zoals hij is naar de browser
<!DOCTYPE html>
<html>
    <body>
        <nav>
            <a href="/">Home</a>
            <a href="/about">Over Mij</a>
            <a href="/contact">Contact</a>
        </nav>
        <h1>Home</h1>
        <p>Welkom op de homepagina!</p>
    </body>
</html>