| Revise How to Run | Start with templates |
Adding HTML to flask
Adding HTML into the mix
In the last tutorial we created a very basic webpage. A single line of text on a white background. But by adding in HTML we can make it much more interesting.
Let’s open our website folder, then the app folder, right click, and create a new folder. We’ll call it “templates”.
Now lets open up visual studio code and create a new file (Ctrl+N).
We’ll create a basic HTML file here, with the following text:
<html>
<!--Page attributes-->
<head>
<!--Page Title-->
<title>My Website </title>
</head>
<!--Page content-->
<body>
<h1>Hello, World!</h1>
<p>This is an HTML file</p>
</body>
</html>
Now we have an HTML file, we need the routes to point to it. Let’s edit the routes file in the app folder to look like this:
We�ll be using a new function called render_template to show HTML files. This function is really flexable and also allows us to use interactive data in our website. For now though, all we'll do is render our unedited HTML file.
from flask import render_template #NEW #imports the ability to render HTML files
from app import app #import statement for the whole application instance
@app.route('/')
@app.route('/index') #these are called decorators. They associate the URL (or links) of / and /index to this function
def index(): #now the function definition
return render_template('index.html') #MODIFIED #renders the HTML file we created
You�ll notice the new import statement at the top, that brings in the render_template functionality.
The return statement has also changed and now points to the html file we created.
Let’s see the result when when run.
| Revise How to Run | Return to top | Start with templates |