HTML - Templates
Website templates are a pre-built website, composing of HTML pages that may also comprise of integrated images, text contents, and support files for JavaScript and font styles. Website templates and web templates all mean the same thing. To create HTML webpages on the go, Flask supports HTML templating using Jinja2.
It allows you to add loops and variables inside your HTML pages cleanly. It makes use of new syntax but it is fairly easy to use once you understand it. Let’s create a new HTML template in Flask. We need to create a new HTML file and call it home.html.Flask framework searches for HTML files in a special folder termed templates. Create the templates folder and save all HTML files inside it.
Below is the code to get you started
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Flask Tutorials</title>
</head>
<body>
<h1> Building a Flask Website </h1>
<p> Flask is a easy framework</p>
<p> Flask and HTML in python looks fun and cool</p>
</body>
</html>
The next step is to make changes to the mainPage.py to allow us to view the home.html created above. Something like embedding the HTML file within the Python code.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("home.html")
@app.route("/Spark")
def Spark():
return "Hello Spark"
if __name__ == "__main__":
app.run(debug=True)
Two new changes were made:
Imports a method called render_template() from the Flask framework. This method searches for the highlighted template (HTML file) within the templates folder. After finding the template as specified, it then renders the template.
Changes are made to return, which now returns render_template(“home.html”). This change to return would allow the viewing of the linked HTML file.
To execute the program, quickly run the code in the command prompt:
We can add more HTML pages to our Flask website.
Let’s create an About Us page, starting with the creation of the aboutUs.html. The aboutUs.html should also be created inside the templates folder.
Now we can add the following lines of code to the file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>About Flask</title>
</head>
<body>
<h1> About Flask </h1>
<p> Flask is a micro web framework. </p>
<p> Flask framework is used by top web apps </p>
</body>
</html>After creating the aboutUs.html, let’s make an update to the
mainPage.py, as shown below.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("home.html")
@app.route("/aboutUs")
def about():
return render_template("aboutUs.html")
if __name__ == "__main__":
app.run(debug=True)
Now that you have created two HTML pages, we can link them all together.
Connecting Pages via a Navigation Menu
We can create a navigation menu to join them by connecting all the pages. Flask makes the creation of the navigation menu process easier. A template is created called template.html, which would serve as the parent template. The other two templates (child templates) created will inherit their code from this template.
After creating the template.html, add the following lines of code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask Parent Template</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/template.css') }}">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">Flask Website</h1>
<strong>
<nav>
<ul class="menu">
<li><a href="{{ url_for('home') }}">Home</a></li>
<li><a href="{{ url_for('about') }}">About</a></li>
</ul>
</nav>
</strong>
</div>
</header>
{% block content %}
{% endblock %}
</body>
</html>
A url_for() function is introduced and it accepts the function name as an argument. The two lines with curly brackets are substituted with about.html and home.html. These additions permit the child pages (about.html and home.html) to link with the parent page (template.html). It also limits the replication of codes for the navigation menu.
Let’s create the about.html, as follows:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>About Flask</title>
</head>
<body>
{% extends "template.html" %}
{% block content %}
<h1> About Page </h1>
<p> Put Something About Your App Here: </p>
<p> And Here.... </p>
{% endblock %}
</body>
</html>Next is creating a Python script to incorporate both pages. we create the
main.py using the code below:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("home.html")
@app.route("/about")
def about():
return render_template("about.html")
if __name__ == "__main__":
app.run(debug=True)
To execute the program, quickly run the
main.py code in the command prompt and enter
http://localhost:5000 in your local browser to see the changes.
Clicking the about link would take you to the about page, or you can navigate through using the
http://localhost:5000/about in your local browser to see the changes.
+91-4446311234
+1-6502652492
+91-7530088009
