Flask is a lightweight Python web framework that allows you to effortlessly create web applications. In this tutorial, we will be focusing on how to use HTML templates in Flask to create dynamic web pages.
HTML templates in Flask allow you to separate the design of your web pages from the logic of your web application. This makes it easier to manage and maintain your code, as well as create a consistent look and feel across your entire application.
To get started with this tutorial, make sure you have Flask installed on your computer. You can install Flask using pip by running the following command:
pip install FlaskOnce you have Flask installed, create a new Python file and import the necessary modules:
from flask import Flask, render_templateNext, create a new Flask app instance:
app = Flask(__name__)Now, let’s create an HTML template for our web page. Create a new folder in your project directory called "templates". Inside this folder, create a new HTML file called "index.html" with the following content:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Flask App</title>
</head>
<body>
<h1>Welcome to My Flask App</h1>
<p>{{ message }}</p>
</body>
</html>In this HTML template, we have a simple welcome message that will be passed from our Flask application. The message will be dynamic and can be changed based on the logic of our application.
Next, let’s create a route in our Flask application that will render this HTML template. Add the following code to your Python file:
@app.route('/')
def index():
message = 'Hello, World!'
return render_template('index.html', message=message)In this code snippet, we define a route ‘/’ which will render our index.html template. We pass a message variable to our template, which will be displayed on the web page. The message variable contains the text ‘Hello, World!’.
Now, run your Flask application by adding the following code to the end of your Python file:
if __name__ == '__main__':
app.run()Save your Python file and run it using the following command in your terminal:
python your_file_name.pyOpen your web browser and navigate to http://127.0.0.1:5000/. You should see the welcome message "Welcome to My Flask App" along with the dynamic message "Hello, World!" displayed on the web page.
Congratulations! You have successfully created a Flask application that uses HTML templates to render dynamic web pages. You can now further customize your web pages by adding more HTML templates and integrating them with your Flask application logic. Flask’s HTML templates make it easy to create visually appealing and dynamic web applications with minimal effort.
Funny how much this reminds me of classic ASP and VBScript back in the late '90s
For those confused between adding the doctype tag, the <!DOCTYPE html> tag always goes into HTML5 files. Otherwise it will just be the older version of html
7:10 the mistake i made is i for got to keep the <> in /home lol
to anyone getting not found error around 7:00 mark, make sure the website is going to /somewhere, the default page python launches produces an error with the current code otherwise.
internal server error fix:
rename template to templates
Thank you for teaching me so clearly and quickly something I couldn't learn at school.
Thanks Tim
hey tim, thanks for explaining this in such an easy way , "l will give you few more examples so that you guys really understand it " takes my heart
Awesome
.
Hi Tim, thank you for the tutorial. The code for redirecting the admin page is not working for me. Is this code posted anywhere so i can download and try it?
How to use buttons on rendered template html files. I am unable to do that
would {% %} still work if you were doing it from a separate js file linked to the .html?
If your render_template is not working, maybe giving you template not found error, make sure the folder which has your index.html file is named "templates" and not "template". Hope this helps.
Tim made so many proofs that I'm 100% sure that he hasn't made this up. 🙂
Awesome video! 🙂
FYI for future users: I have copied this code on multiple OS systems (Linux, Windows, and Mac) to no avail. The first episode worked just fine after I tweaked it massively; This episode, I copied everything the same. Does not work. "Internal Service Errors" when trying to use a template. I have tried everything, time to find a youtuber that has posted recently on this topic and is using Python 310
Thanks tim. Just heard "Django" instead of flask 8:14. I'm going to have to learn that also, when does it end.
Thank you so much. Everything you're saying makes so much more sense and is so much more informative than the other tutorials I've found.
nothing seems to work the same for me when i watch your flask videos
is it possible to have:
<p><% x for x in content %><p>