In diesem Beitrag möchte ich dir zeigen wie du im Webframework Flask für Python, eine HTML Seite ausliefern kannst.
Zunächst sollen nur statische Inhalte ausgeliefert werden und danach zeige ich dir wie du Daten aus einem Formular in Python auswerten kannst.
Was ist eine HTML Seite?
Bevor wir eine HTML Seite ausliefern, möchte ich dir kurz erläutern was eigentlich eine HTML Seite ist und was du damit machen kannst.
Da du dich ja bereits auf meinem Blog befindest siehst schon eine HTML Seite. Auch wenn diese mit WordPress erstellt (und PHP) erstellt wurde ist der Code dahinter trotzdem HTML.
Eine HTML Seite kann verschiedene Elemente wie Bilder, Audio, Video und natürlich Text enthalten. Des Weiteren kannst du interaktive Formulare gestalten und somit Eingaben vom Besucher entgegen nehmen.
Wie ist eine HTML Seite aufgebaut?
Ein HTML Dokument enthält einen Kopfteil (eingeleitet durch ein HEAD) sowie ein Inhaltsbereich (BODY).
Im Kopfteil des HTML Dokumentes kannst du verweise zu Ressourcen wie JavaScript und Stylesheet Dateien verlinken. Des Weiteren lassen sich dort wichtige Informationen für den Crawler und Browser hinterlegen (Sprache, Zeichensatz, Größe der Seite, Beschreibung, Autor usw.).
In diesem Beitrag möchte ich dir lediglich zeigen wie du eine HTML Seite auslieferst. Ich werde aber nicht zum generellen Aufbau von HTML Tags, CSS Stylesheets und JavaScript eingehen, denn das würde den Rahmen dieses Beitrages sprengen.
Hier nun ein kleines Beispiel einer HTML Seite welche ein Bild, und Text enthält.
<html>
<head>
<title>ein kleines Beispiel</title>
</head>
<body>
<h1>Hello World!</h1>
<p>
Hier steht ein Text <br/>
mit einem Umbruch.
</p>
<img src="https://draeger-it.blog/wp-content/uploads/2021/01/m5stickc_env_hat_display_gr.jpg" width="30%"/>
</body>
</html>
ausliefern von HTML Code mit Python
Wollen wir nun unser bisher bekanntes Programm “Hello World!” so umbauen das wir den oben gezeigten HTML Code ausliefern.
Wir können nun einfach den HTML Code in eine Variable packen und diese mit einem return in der Funktion zurückliefern.
Eine lange Zeichenkette können wir in Python mit 3 Anführungszeichen einleiten und darin einen Zeilenumbruch mit Enter tätigen. Diese Zeichenkette müssen wir zum Schluß noch mit zusätzlichen 3 Anführungszeichen beenden.
zeichen = """ Hier steht ein Text"""
Diese “technik” können wir nun nutzen um den HTML Code einfach in die Variable zu kopieren.
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
html = """<html>
<head>
<title>ein kleines Beispiel</title>
</head>
<body>
<h1>Hello World!</h1>
<p>
Hier steht ein Text <br/>
mit einem Umbruch.
</p>
<img src="https://draeger-it.blog/wp-content/uploads/2021/01/m5stickc_env_hat_display_gr.jpg" width="30%"/>
</body>
</html>"""
return html
if __name__ == '__main__':
app.run()
Dieses geht bei so einem kleinen HTML Code vielleicht gerade so aber so richtig professionell ist das nicht.
Hier muss also eine bessere Lösung her. Das Stichwort ist hier “Template”. Wir erstellen eine HTML Datei und diese befüllen wir dann dynamisch mit Werten aus unserer Funktion.
einbinden eines Templates in Flask
Damit wir ein Template in Flask einbinden können müssen eine bestimmte Verzeichnisstruktur anlegen.
Um nun die Datei “index.html” aus dem Verzeichnis “templates” zu laden müssen wir aus dem Modul “flask” die Klasse “render_template” importieren.
from flask import Flask, render_template
Da das Verzeichnis “templates” das default Verzeichnis für die Ablage von HTML Dateien ist müssen wir dieses nicht extra benennen und können direkt auf die HTML Datei verweisen.
@app.route('/')
def hello():
return render_template("index.html")
Bei größeren Projekten / Programmen ist es sinnvoll die verschiedenen HTML Seiten in Unterverzeichnisse zu gruppieren. Hier müssen wir dann natürlich das Unterverzeichnis in den Pfad einbinden.
Ausblick
Im nächsten Beitrag möchte ich dir nun zeigen wie du Inhalte in diesem Template nun dynamisch mit Flask und der Template Engine Jinja2 ändern kannst.