In this series of tutorials we are going to take an example page template and look at how to write the HTML and CSS step by step to create that template. What we will end up with at the end is a web page template that just needs our content added to it to make a complete web page. The HTML for our template will use appropriate semantic tags and we will style those tags appropriately from the CSS to get the page looking the way we want.
The order in which I am going to add the various pieces of code into the template is one which makes sense to me. You may have a preference for doing things in a different order. The order in which the code is added doesn't really matter. What is important is what code that you select to perform which task. In most cases there are particular HTML tags that are more appropriate choices for what we intend their content to be and we should therefore use those tags rather than other tags which might provide the same result but which are less semantically correct.
There are also several different ways that we can define how our template is to look using the CSS. In these tutorials we'll use the simplest way of setting out our page by floating blocks of content to control where it appears in the page. The same result could be achieved using positioning however creating the layout that way such that it can correctly realign everything as the size of the browser viewport changes is more complicated and positioning is only really needed where you want parts of your content to move independently of the rest of the page or to overlap other content.
The first step in creating your template is of course to design the way you want the template to look using whatever method that you decide to use to do that. If you haven't designed a template before then using a pencil and paper to roughly sketch out the basic layout of the page first is probably the best way to start. Depending on who the template is for (and how much detail you want to go to in designing the template before you start to create it) you may then need to move on to creating images that show the way you expect the final page to look. I'll leave it up to you to work out how you want to design your template since for the purposes of this tutorial I am going to assume that we have already selected a design and are looking at how to convert that design into HTML and CSS.
Of course in order to go through the steps in converting a design into a working template I will need a design to use for my example so that you can see for yourself how the code that we need to create relates back to the original design. I have selected a design to use that is complex enough to illustrate a number of different aspects to coding a template without making the design so complicated that it will need lots of code that you will rarely use in order to make it work. The design I have chosen will consist of a page header with a menu bar under it and then we'll have an image gallery in the main part of the page. Here's a picture of how it might look with some dummy text and images where the real content is intended to go..
In the next tutorial we'll start creating the HTML that we are going to need in order to convert this design into a working template.
This article written by Stephen Chapman, Felgall Pty Ltd.