Python Flask #3: ausliefern von HTML Seiten

In diesem Beitrag möchte ich dir zeigen wie du im Webframework Flask für Python, eine HTML Seite ausliefern kannst.

ausliefern einer HTML Datei mit Python Flask (Templating)
ausliefern einer HTML Datei mit Python Flask (Templating)

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>
einfache HTML Seite mit Text & Bild
einfache HTML Seite mit Text & Bild

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.

HTML Seiten im Browser
HTML Seiten im Browser

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.

Python Flask - Verzeichnis "template" für Template Dateien
Python Flask – Verzeichnis „template“ für Template Dateien

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.

Ein Kommentar

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.