In Teil 14 hast du gelernt, wie man mit Flask eine Webseite im Browser anzeigt.
Bisher war das HTML aber direkt im Python-Code – das ist unübersichtlich und nicht gut erweiterbar.
Jetzt trennen wir Logik (Python) und Layout (HTML).
Das geht in Flask mit der Funktion:
render_template(...)
🎯 Ziel dieses Teils
✅ Du legst eine HTML-Datei an
✅ Du lässt Flask diese HTML-Datei anzeigen
✅ Du nutzt das Flask-„Templates“-System
Schritt 1: Projektstruktur
Erweitere deinen Ordner todo-web/, damit er so aussieht:
todo-web/
├── app.py
└── templates/
└── index.html
Wichtig:
- Der Ordner muss
templatesheißen – das erwartet Flask - Die HTML-Datei muss in diesem Ordner liegen
Schritt 2: HTML-Datei erstellen (templates/index.html)
Erstelle die Datei index.html und schreibe Folgendes hinein:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine To-Do-Liste</title>
</head>
<body>
<h1>📝 Willkommen!</h1>
<p>Das ist meine erste HTML-Seite mit Flask.</p>
</body>
</html>
Schritt 3: Python-Datei anpassen (app.py)
Ändere app.py so:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def startseite():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
Neu ist:
from flask import render_template
Und:
render_template("index.html")
Das sagt:
„Zeig dem Browser bitte die Datei templates/index.html.“
Schritt 4: Server starten
Im Terminal im Projektordner:
python app.py
Und öffne im Browser:
Du solltest sehen:
📝 Willkommen!
Das ist meine erste HTML-Seite mit Flask.
🎉 Glückwunsch! Jetzt hast du saubere Trennung von Code und Layout.
Was du heute gelernt hast
| Funktion / Begriff | Bedeutung |
|---|---|
render_template("datei") | Zeigt eine HTML-Datei an |
templates/ | Ordner für HTML-Dateien |
index.html | Startseite deiner App |
<h1>, <p> usw. | HTML-Elemente (Überschrift, Text) |
Nächste Ziele
Jetzt kannst du:
- Beliebige HTML-Seiten anzeigen
- Deine HTML-Dateien beliebig gestalten
- Später Inhalte (Aufgaben!) aus Python einfügen
Schreibe einen Kommentar