HTML templates, page links, and CSS

SeattleDataGuy
Sep 2 · 5 min read

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.

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.

Better Programming

Advice for programmers.

SeattleDataGuy

Written by

#Data #Engineer, Strategy Development Consultant and All Around Data Guy #deeplearning #machinelearning #datascience #tech #management http://bit.ly/2uKsTVw

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade