Django HTML Pages

Django HTML Pages

In this tutorial, we are going to explore how to render HTML with Django using Templates. Django is written in Python and is different than how things work in say PHP for example. In PHP we can mix PHP with HTML to output web pages. Django and Python work a little differently. In Django, we use the Django Template Language or DTL templates to output dynamic data generated by Python and Django into HTML pages. In the prior tutorial, we skipped using templates and simply returned HTTP responses directly from view functions. Now we are going to see how to use a view function to render a template.


Adding A Templates Directory

To start using templates in our project, we first need a place to put them. This is going to be in a templates directory which is in the project root folder. In our case, the project root is the outer djangoblog directory. The inner djangoblog directory is our root app. Let’s create that directory now.

adding templates directory django

Creating HTML files

Inside of the templates directory, we are going to add two Html files. Once is going to be home.html, and the other will be about.html. These are going to be the templates we now render instead of sending back an HttpResponse directly from our view functions.

html pages in templates

Once those files are created, we can put some simple Html markup in them like so.

templates/home.html

templates/about.html


Update views.py

In this step, we are going to change from returning an HttpResponse object from the view functions to rendering our new template files in the view functions. This is the current views.py file.

Here is how we want to make those changes to views.py.

djangoblog/views.py

In the new iteration above for views.py, the highlighted lines now use the render() function. This function can accept three arguments, but we only pass two in our case. The first argument is the Http request itself. The second argument is the Html template to render. In a future tutorial, we’ll look at also using the third argument. That third argument can be a dictionary so you can pass dynamic data from the view to the template.

Configure Templates Settings

Before we can try this out in the browser, we need to configure the templates settings in the settings.py file of Django. If we do not take this step, we’ll get an error of something like:

TemplateDoesNotExist at /
home.html

Request Method: GET
Request URL: http://localhost:8000/
Django Version: 3.0.3
Exception Type: TemplateDoesNotExist
Exception Value:

home.html

Therefore, let’s open up djangoblog/settings.py and configure our templates location. Look for this code:

Then change the code to match this example below:

Now we can test out the / and /about routes to see what they produce for us.

The homepage
django render html home page

The about page
django about html page

Django HTML Pages Summary

That’s some nice incremental improvements! With this code, we moved from view functions returning responses directly to the browser, to now having the view functions render an Html template for a better result. For a deeper dive into this topic, check out our Django Templates tutorial.