What's a template, you may ask?
A template is a file that we can re-use to present different information in a consistent format – for example, you could use a template to help you write a letter because although each letter might contain a different message and be addressed to a different person, they will share the same format.
A Django template's format is described in a language called HTML (that's the HTML we mentioned in the first chapter, How the Internet works).
HTML is a code that is interpreted by your web browser – such as Chrome, Firefox or Safari – to display a web page for the user.
HTML stands for "HyperText Markup Language". HyperText means it's a type of text that supports hyperlinks between pages. Markup means we have taken a document and marked it up with code to tell something (in this case, a browser) how to interpret the page. HTML code is built with tags, each one starting with < and ending with >. These tags represent markup elements.
Creating a template means creating a template file. Everything is a file, right? You have probably noticed this already.
Templates are saved in blog/templates/blog directory. So first create a directory called templatesinside your blog directory. Then create another directory called blog inside your templates directory:
(You might wonder why we need two directories both called blog – as you will discover later, this is simply a useful naming convention that makes life easier when things start to get more complicated.)
And now create a post_list.html file (just leave it blank for now) inside the blog/templates/blogdirectory.
See how your website looks now: http://127.0.0.1:8000/
If you still have an errorTemplateDoesNotExist, try to restart your server. Go to the command line, stop the server by pressing Ctrl+C (Control and C keys together) and start it again by running a python manage.py runserver command.
No error anymore! Congratulations :) However, your website isn't actually publishing anything except an empty page, because your template is empty too. We need to fix that.
Add the following to your template file:
<html><p>Hi there!</p><p>It works!</p></html>
So how does your website look now? Visit it to find out: http://127.0.0.1:8000/
It worked! Nice work there :)
Each HTML page is also divided into two elements: head and body.
We use <head> to tell the browser about the configuration of the page, and <body> to tell it what's actually on the page.
For example, you can put a web page title element inside the <head>, like this:
<html><head><title>My blog</title></head><body><p>Hi there!</p><p>It works!</p></body></html>
Save the file and refresh your page.
Notice how the browser has understood that "My blog" is the title of your page? It has interpreted <title>My blog</title> and placed the text in the title bar of your browser (it will also be used for bookmarks and so on).
Probably you have also noticed that each opening tag is matched by a closing tag, with a /, and that elements are nested (i.e. you can't close a particular tag until all the ones that were inside it have been closed too).
It's like putting things into boxes. You have one big box, <html></html>; inside it there is <body></body>, and that contains still smaller boxes: <p></p>.
You need to follow these rules of closing tags, and of nesting elements – if you don't, the browser may not be able to interpret them properly and your page will display incorrectly.
You can now have a little fun and try to customize your template! Here are a few useful tags for that:
Here's an example of a full template, copy and paste it into blog/templates/blog/post_list.html:
<html><head><title>My Blog</title></head><body><div><h1><a href="/">My Blog</a></h1></div><div><p>published: 14.06.2014, 12:14</p><h2><a href="">My first post</a></h2><p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p></div><div><p>published: 14.06.2014, 12:14</p><h2><a href="">My second post</a></h2><p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p></div></body></html>
We've created three div sections here.
It gives us this effect:
Yaaay! But so far, our template only ever displays exactly the same information – whereas earlier we were talking about templates as allowing us to display different information in the same format.
What we really want to do is display real posts added in our Django admin – and that's where we're going next.