Step 3: Create Base HTML Template

Okay, here I am going to diverge from the normal Django tutorials, because I want this tutorial to include everything, and that means that we need to write some HTML as well. 

I'm going to assume a little more familiarity with HTML than I did with the Terminal, but I'll still mostly spell everything out.  I want to be sure that almost anyone reading this tutorial will be able to build a blog for themselves. 

We can stay in the 'zing' directory for now.  Lets make another directory within it, and call it 'template'. 

vernon@slick:~/project/zing$ mkdir template
vernon@slick:~/project/zing$ cd template

Lets create our HTML file.  You can type this in any plain text editor, like Gedit or whatever you use.  Just make sure it is not a word processor or a wysiwyg editor.  I'm going to use Emacs as my example. 

vernon@slick:~/project/zing/template$ emacs base.html

This will open your emacs file.  Change Emacs for gedit or bluefish or anything whatever it is you use.  It must just be something that is on your system.  If you are happy with nano or something like that, be my guest.  If you have no idea, and you are on the Gnome Ubuntu desktop, just stick with Gedit. 

Type the following:

<doctype html>

<html>

<meta charset="UTF-8">

<title>Zing Blog</title>

<link rel="alternate" type="application/rss+xml" title="rss for zing" href="#### We'll come back to this ####"≷
<link rel="stylesheet" type="text/css" href="/media/css/style.css">
<link rel="icon" type="image/gif" href="/media/zing.ico">
<meta name="description" content="My wonderful blog">
<meta name="robots" content="all">


</head>
<body>


<!-- Start title -->
<div id="title">

<h1>Zing Blog</h1>
<h2>The blog</h2>
<!-- End title -->
</div>


<!-- Start content -->
<div id="content">


<!-- End content -->
</div>


<!-- Start sidebar -->
<div id="sidebar">


<!-- End sidebar -->
</div>


<!-- Start footer -->
<div id="footer">


<!-- End footer -->
</div>

</body>
</html>

So far, if you know HTML, simple and normal.  I included some of the common header stuff, just because I am aiming to make this tutorial as complete as possible. 

Now, lets add the Django stuff.  These template tags are going to turn your HTML file from a normal one into a template.  Add the text written in red. 

<doctype html>

<html>

<meta charset="UTF-8">

<title>{% block title %}Zing Blog{% endblock %}</title>

<link rel="alternate" type="application/rss+xml" title="rss for zing" href="#### We'll come back to this ####">
<link rel="stylesheet" type="text/css" href="/media/css/style.css">
<link rel="icon" type="image/gif" href="/media/zing.ico">
<meta name="description" content="My wonderful blog">
<meta name="robots" content="all">


</head>
<body>


<!-- Start title -->
<div id="title">

<h1>Zing Blog</h1>
<h2>{% block under_title %}The blog{% endblock %}</h2>

<!-- End title -->
</div>


<!-- Start content -->
<div id="content">

{% block content %} Here be blog stuff {% endblock %}
<!-- End content -->
</div>


<!-- Start sidebar -->
<div id="sidebar">


<!-- End sidebar -->
</div>


<!-- Start footer -->
<div id="footer">
<p>Copyright your_name &copy; 2010</p>
<!-- End footer -->
</div>

</body>
</html>

Okay, you don't have to go to all the trouble to write it all out.  Just copy and paste it from mine.  But do take the time to have a look at it carefully so that you can see what is going on. 

Once you are done, save it and close your text editor. 


Share |
« Previous Page  |  Return To Contents Page  |  Next Page »

 

Thank you for visiting

This is my personal blog, but I try to write things that you may find interesting or useful.  I'm currently working on a six month long project digging into the elements that make a blog meaningful. For more on that, visit MEANINGFUL BLOG PROJECT page. 

You may want to know a little about me personally, so start at the about page. 

If you find some of what is here interesting, or you want to follow the project through, why not subscribe.

Tweet