razorBlog

Web Design Drives Me Nuts

Lets Get Going Already

Back to blog page

First we are going to create a template file, this will be used over and over again for all your web design projects, the main benefit is you don’t have to re-create the essential page headers and layout of your page with the necessary information, like file type (doctype), the character set. This never changes throughout your web site, and it also makes all the pages look the same, consistency is something you will learn to enjoy.

We are going to write all our code in a raw text only editor, code cannot be written in a word processing environment as these add extra characters that can be hidden to the eye like carriage returns, these symbols would break the rules of XHTML and would cause errors in your code. A raw text editor will omit these symbols from the saved file as well as any other kind of processing symbols. An example of a raw text editor would be Kwrite, Gedit or VIM for linux and notepad for windows. Please do not use wordpad as this can save files with formatting (the invisible characters) if not saved correctly. One of the benefits of using the linux editors is that most have support for various programming languages, this can help when debugging your code. Debugging is the process of fault finding errors that break the functionality of your code like a missing end characters like ‘;’. The editors help by colour coding functions, tags and much more in different colours making code more readable. There are plenty of additional text editors available on the market, some free, some not, so for the interests of your piggy bank, we have concentrated on the free ones.

So lets get structured, use your favourite file browser and navigate to your ‘home’ in linux or ‘my documents’ in windows. Create a folder called ‘websites’, and then go into the folder. Once in the websites folder, create another folder called ‘templates’. In this folder we will create and save a template XHTML file with all the necessities in place that can be used over and over again. For added protection you can set any template files to be read only once created by right clicking on any template files and altering the properties. This will stop you from overwriting your precious templates.

Start your favourite raw text editor and click ‘file’ then ‘save as’ and call your page xhtml_basic.htm (.html can be used but I like 3 letter suffixes so use .htm), be sure to not save the file as a text file if using windows, select all files and not text document when using notepad, and then click ‘ok’ to create it. To ensure that the file is a HTML file and not a text file, double click on the file in your file browser, it should open up in your web browser window as a blank page. If the file opens up as a text file then you need to go back and try again.

OK, now we can start to setup the HTML file and begin to setup our re-useable template as a XHTML file.

First off, you need to copy or type the following code in your text editor, pay particular attention to the symbols used.

The code above enforces the particular type of language we are using in our file and the particular Document Type Definition (DTD) it is using, either Strict, transitional or frameset. We will be using strict.

Next we will set out the rest of the file with the following code

The weird symbols you see above are tags, tags are placed in what I like to call pointy brackets (< and >). The text inside the brackets is the tag, where as the < and the > symbols tell us what ever is in between is a tag. In webland, we have two types of tags, tags that are opened and then closed, and tags that are self closing. The above example is made up of normal tags, the tag opens the tag and the tag closes the tag, anything caught in the middle of the opening and closing tag is classed as being inside.

Looking at the code above does three things, is the start tag for our html code, is the start tag for our html header and is the start tag of our content that is to be displayed on the screen when people view the page in a web browser. The tags with a / in them are the closing tags which accompany the opening tag.

A little on tags, basically a tag is a way of referencing a string of characters or words within the tags to the tag itself. By this I mean that anything inside a set of tags, takes on the properties of the tag it is inside. Think of it as a box filled with items, they are all grouped together in the and within the box you could have anything, maybe even more boxes.

So...

Moving back to the code example again, anything in between the opening tag and the closing tag would basically be considered as HTML or XHTML code.

And...

Anything in between the opening tag and the closing tag would basically be considered as header information for the page itself.

As well as…

Anything in between the opening tag and the closing tag would basically be considered as web page content, the stuff that is seen on your screen when you visit a website.

You will notice that the end tag comes at the end of the code and not after the tag. Think about this, the html tags define anything in between them as being html code, and seeing as tags are html code themselves they have to be within the tags just like the box example above.

You will also notice that some of the tags are indented, this is to help keep the file readable, you do not have to do this, but if you do not you will find it hard to work out which closing tags match which opening tags and trust me this will make your head spin after a while. Whenever you open and close tags, put the contents inside the tags 4 spaces in (do not use tabs as these are special formatting characters that differ in dimension in various editors). If you then open another set of tags inside already open tags, put there contents another 4 spaces in, and so on.

So where were we, right we have defined our doctype at the very top of our file which is called xhtml_basic.htm, and by doing this we have defined the file as being a XHTML file, using the Strict document type declaration. We have also setup a crude structure for us to place our XHTML information and explained what all these areas are for. At present you should have the following in your file, I have added a line in between the doctype and the start tag this helps make it more readable, you can do the same too if you wish.

This is all you need for a completely basic template, so we can save this file by saving it and then exit the text editor.

Now once again go to your file browser, locate the file we just saved inside the directory /websites/templates and then double click on the xhtml_basic.htm template, this should open inside a browser and give you a blank white page, if this happens your basic template should be configured. Close down the web browser and inside your file browser right click on the file you just opened and we will set the properties so we don’t accidentally over right our work later on. When the menu pops up simple go into your properties and either select read-only or change to give read permissions only for everyone depending on what operating system you are using (windows, linux or mac).

Ok, in your file browser, right click on the xhtml_basic.htm and ‘open with’ your favourite text editor (if you double click default should be your web browser). Now this file is read-only so we need to save as something different first, so file save as and call the file xhtml.htm as we are going to expand on the basic template a little. Ensure you save this as a html file and not a text file like earlier, feel free to check again by double clicking on the new file to see if it opens up as default with a web browser.

Now in the new template we are going to add a little extra information to make the template more complete. We are going to add a title, just like a book has a title so does your website. This is what is displayed at the top of the web browser in the title bar. In order to add a title we need to define the tags for a title, and we need to put it in the correct place in the file. We have already defined the working area of our html code using the html tags , so all code needs to be between these tags as this defines your html. Within these tags we structure the html further more into head and body. The title needs to be placed within the head tags as do a few other page defining items. All the content for the page is then placed in the body section.

So add the following

as you guessed the title tags are , easy isn’t it. Any text that is in between these tags will be displayed in the title bar of your web browser. And did you put it into the correct place, and indent it with 4 spaces too??, check below to see how your file should look.

if it doesn’t look like the above then don’t worry just alter it, not everything makes sense straight away, if it does then will done, big pat on the back.

Back to blog page