Table of contents for Learn how to create a website series

1. Learn how to create a website using a Template
2. Understanding the Basic Structure of a Website
3. Choosing a template for your website
4. Editing the CSS Template to Make a Website

Getting ready to edit your template to make a website

In this part of our series you will start editing your template to make your website. Don’t worry, I’ll guide you every step of the way so you don’t get lost.

What do you need?

1. The BigSpaceLove template found on Free-CSS-Templates
2. A browser to open your website. (e.g. Internet Explorer, Firefox…)
3. A text editor to edit your website. Preferably one that supports syntax highlighting. Programmer’s Notepad is free and is what I’ll be using.

Start editing the template

Open up index.html using your text editor. If you remember the basic structure of a website we taught you can notice that it is the same way the html file is structured.

• The header contains “Website Title” and “Subheader, website description H2″ in this case
• The body is separated into a left section containing the content the and a right section containing the menu.
• The footer contains information about the person who created the template.

You will notice these sections are denoted with the following tag in the HTML document:

The <div> </div> tag

You can think of the div tag as a section within your HTML document. They will usually be named after the sections described above.

Making and viewing changes to your website

To make a change, simply save the index.html file at any time. Then open it using any browser. Once the page is open, you can refresh it thereafter whenever you make a change to the html file.

Changing the title of your website

Let’s change the title of our website. Currently it says Big Space. Look for the following code in the html file.

<title>Big Space</title>

It should be enclosed within the section. This section is used for placing information about the website such as meta tags, links to the css stylesheet, and the title of the site.

Let’s change the title to whatever you want. I’ll name it the following:

<title>Let's talk Binary!</title>

Now view the changes you have made using the steps I provided earlier. See what happened? The title of our website changed, this isn’t visible on the page itself but in your browser.

Editing the Header Section

Now let’s go ahead and change the “Website Title”. Look for the following.

<h1><a href="#">Website Title</a></h1>
<h2>Subheader, website description H2</h2>

I’ll be changing it to the following.

<h1><a href="index.html">Let's Talk Binary!</a></h1>
<h2>Eliminating the barrier between code and people</h2>

If you noticed, I change “#” to “index.html” above. “Let’s Talk Binary!” is encapsulated with the <a> </a> tag making it a link. Whenever you click on it, it will take you to the index.html page which is the current page your on.
It is also encapsulated with the <h1> </h1> tags, making it a header.

The <a> <h1> tag

The <a> seen is used to create a link to another document with the source being “index.html” in our case.

The <h1> tag defines headings. The values range from 1 to 6. 1 being the largest.

Now save and view changes. Isn’t this easier than you thought?

Go to the next page to learn how to edit the menu

Now, go on to the next page to learn how to edit the menu.

Table of contents for Learn how to create a website series

1. Learn how to create a website using a Template
2. Understanding the Basic Structure of a Website
3. Choosing a template for your website
4. Editing the CSS Template to Make a Website

Finding the right template

Finding the correct template for your needs can be quite tricky. For example, I needed something clean and fresh while maintaining a level of professionalism so I decided to go with the layout found on my personal website. If you noticed, you can get a nice looking website once you find the right template.

But how did I find it first of all? I simply dug around the internet. Google for me was a great place to start but for those that need help, I’ll show you a couple of sites that will give you a head start.

Note for tutorial

For purposes of the tutorial I encourage everyone to use BigSpaceLove found on the front page of Free-CSS-Templates so you can follow me step by step. This template is fairly easy to edit.

Where to find free CSS templates

• Smashing Magazine – 100 Free High Quality XHTML/CSS Templates – Great list showing off a large variety of templates
• 1st Web Designer- 101 High Quality CSS and XHTML Free Templates and Layouts – Another great list you shouldn’t miss out on
• Itensivstation – Basic CSS Templates – For those who want to start from scratch check out these templates
• Mitch Bryson – Free CSS Templates – More basic CSS templates
• FreeCSSTemplates.org
• Free-CSS-Templates

So once I have a template what now?

You are almost there. Once you have a template all we have to do is set up our environment, and start editing! (Remember, to use BigSpaceLove found on the front page of Free-CSS-Templates so you can follow my tutorial step by step.)