Starting your Template

Starting to create your template is easy because all templates start with the same basic code if you are going to set them up properly. Of course most existing web pages don't necessarily contain the code exactly like this but then most of the pages on the web were written some time ago before browsers started supporting the current standards properly or were written before their author knew how to do it right.

Let's also plan ahead right from the start. We know that we are going to need some CSS to define the appearance for our page and probably some JavaScript to enhance its behaviour so let's add these into the HTML in the right place right at the start so that when we get to the point where we want to actually create the content for those files that the files are already linked into the right place in the HTML.

We'll start then by creating three files - template.htm, template.css, and template.js. (You can use a different name for these files if you wish but I suggest that you use the same name for all three with just the extension to distinguish them.You might also prefer to use .html instead of .htm. To keep things simple for these tutorials I am going to use these three filenames for my three files for the template code, if you substitute names for the files then you will need to make the same substitution everywhere that the files are referenced in the tutorials. The actual code changes will all be in the code presented in this tutorial so it will mostly be a matter of looking at the file extension to see which of the files we are looking at. If it turns out that you don't need any JavaScript in the page then we can delete the reference to that file and the file itself once we finish building the template.

We can leave the template.css and template.js files empty to start with but if you don't like empty files (or your editor will not allow you to save an empty file) then we can place an empty comment /* */ in each of the two files for now and delete it when we start creating the real content.

We'll start on our actual code with the HTML that all web pages should have in them regardless of how the template is intended to look.

<title>Put Your Title Here</title>
<link rel="stylesheet" href="template.css" type="text/css">
<div id="wrapper">
<script type="text/javascript" src="template.js">

Some of the tags I have here are optional according to the HTML standards but we will always use them since having them there means that you know exactly where they go and what code is where - something not so obvious if you start leaving optional tags out. The stylesheet is attached to the head of the page where it belongs and we have attached the JavaScript to the very bottom of the page which is the preferred location for getting your page to load faster. Having the single JavaScript call here will make a difference to how the JavaScript needs to be written but we'll deal with that when we get to it.

The only actual content I have placed in the HTML so far is a div with an id of "wrapper". This div will enclose all of our page content and make it easier to put borders and margins around the content (as some browsers don't allow you to apply such styles to the body).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow