Building Your First Website With Flask — Part 2
HTML templates, page links, and CSS
We recently wrote an intro to develop your first website using Flask. In the first part of this series, we provided guides to creating your first Flask program: “Hello World!”, and getting external input into your websites.
Going forward, this second part of the series will guide us through the use of HTML templates to improving your website appearance.
It covers:
- Using HTML templates.
- Adding CSS to our simple Flask website
Using 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.
For HTML templates, they are built using HTML (or XHTML) and usually consist of CSS and JavaScript code. To create HTML webpages on the go, Flask supports HTML templating using Jinja2.
Jinja2 allows you to add loops and variables inside of your HTML pages cleanly. It makes use of new syntax but it is fairly easy to use once you understand it.
For this series, let’s create a new HTML template in Flask.
First, we need to create a new HTML file, let ’s call it home.html.
One important point to note is that the Flask framework searches for HTML files in a special folder termed templates. You are expected to create the templates folder and save all HTML files inside it.
Below is the code to get you started.
The next step is to make changes to the mainPage.py we created in part 1 to allow us to view the home.html created above. Something like embedding the HTML file within the Python code.
Notably, two new changes were made:
Line 1
Imports a method called render_template() from the Flask framework.
The method render_template() searches for the highlighted template (HTML file) within the templates folder. After finding the template as specified, it then renders the template. You can learn more about the render_templates() function.
Line 6
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:
python mainPage.py
And enter http://localhost:5000/ in your local browser to see the changes.
Adding More HTML Pages
Going further, we can add more HTML pages to our simple 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:
After creating the aboutUs.html, let’s make an update to the mainPage.py, as shown below.
Now that you have created two HTML pages, we can link them all together.
Linking All Pages via a Navigation Menu
Just like a regular website, having links connecting other pages makes navigation easy. To connect all the pages, we can create a navigation menu to join them. The use of Flask makes the creation of the navigation menu process easier.
First, let’s create a template 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:
The url_for() function is introduced. It accepts the function name as an argument. You can learn more about the url_for() function.
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:
Next is creating a Python script to incorporate both pages. In this case, we create the main.py using the code below:
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.
Adding CSS to Our Website
To add some style to our website, let’s try adding some CSS to our website. Also, an important point to note is that, similar to creating the templates folder for all HTML templates, we also need another folder called static for all CSS files.
The static folder is intended to store mostly CSS, JavaScript, and image files, alongside other essential documents as well.
This reason makes it vital for the creation of the CSS folder to store all CSS stylesheets. So, you have to create the CSS folder inside the static folder. After creating the folder, your project folder should be similar to what we have below.TK
Moving forward with linking our HTML file with CSS, we add a few more codes to the CSS folder using a template.css file and the already existing template.html as it links all other pages together.
For the template.css file, kindly add the following code and save inside the CSS folder.
The new codes added to the parent page would also be valid for all child pages. Now, let’s update the parent page with these new lines of code:
To execute the program, quickly run the main.py code in the command prompt and enter http://localhost:5000/about in your local browser to see the changes.
Conclusion
The use of HTML templates and CSS for a designing and navigation purpose in our simple Flask website is a simple step.
With the servers rendering the HTML, passing correct variables, and returning the required HTML to the browser, you are sure to be on the right path for building a website.
With more practice, you can explore other formats and input types available under the Jinja template. For now, let’s keep it simple and focus on the next task in part 3. We will cover forms and session tracking.
If you would like to read more articles about programming, data science or consulting read the stuff below!
The Advantages Healthcare Providers Have In Healthcare Analytics
142 Resources for Mastering Coding Interviews
Learning Data Science: Our Top 25 Data Science Courses
The Best And Only Python Tutorial You Will Ever Need To Watch
Dynamically Bulk Inserting CSV Data Into A SQL Server
4 Must Have Skills For Data Scientists
What Is A Data Scientist