How to Make a Website
Step by Step

In this tutorial, you'll take one of our free website templates and learn to make it into a 5 page website.

When you complete this tutorial, you'll be able make your own website using any of our free web templates.

Note: I recommend printing out this tutorial to cut down on the confusion once you get into the actual page building process.

When you're finished, get first class hosting for your website for only $50.28 a year at CaFW Web Hosting

Step #1
Download your free website builder. I recommend NoteTab Light. If you get the Light version it's FREE. It even includes a built in FTP function for uploading your web pages.
Download Now

After you download and install NoteTab Light, take some time to run thru this tutorial for setting it up and building the first page. Then proceed to Step 2.

Note: The process of converting a predesigned template will be easier than making web pages from scratch. I recommend running thru the NoteTab tutorial, just to get you familiar with some of the procedures. It works out of the box, but setting up default filters and folders will save you time when building web pages.

Step #2
Now, download the free website template, WebStyled7. Right click on the downloaded file to Extract All files. ( Be sure you really extract the files!! ) If the files aren't extracted, you won't see images on the pages when you view them in a browser.

Now let's do a little planning.
We need a name for the website. For the demonstration it will be Discount Widgets.

We need to determine what pages we are going to build.
For the demo, we'll build
index.html - The Home page
about-us.html - The page that tells about us
services.html - The page that tells about our services
products.html - The page that displays our products
contact.html - The page that displays our contact information or contact form.

These are the 5 pages we'll build for the demo. Yours may be different. You can also use a different site name.


Step #3

NEW-Create Your own Free Web Page Heading Online

Or you can order from us. Be sure to specify the Webstyled7 template on the order form. Get It Now

When you receive your heading text graphic, save it in the WebStyled7/images folder.

Step #4
Open NoteTab Light and load webstyled7/default.html into the editor.
First we'll change the document title and meta tags
At the top of the editor window find these 3 lines of code:

<title>Webstyled Template #7</title>
<meta name="description" content="Webstyled Template Seven">
<meta name="keywords" content="free web template">


Change them to:

<title>Discount Widgets</title>
<meta name="description" content="Widgets at discount prices and free service for all our widgets.">
<meta name="keywords" content="discount, widgets">


If you've chosen a different name for your website , enter your title, meta description and keywords accordingly.

Save the Web Page

Dig: More on Meta Tags

Step #5
Open NoteTab Light and load webstyled7/default.html into the editor. (Ignore if already loaded.)
To add our new heading text graphic, find this line of code:
<img src="images/heading-text.png" style="margin-top: 65px; margin-left: 90px" align="left" border="0">
Change: heading-text.png
to
discount-widgets.gif
or change it to the name of the graphic that you saved in the images folder for your heading.

Save the Web Page

Preview in Browser

Dig: More on Using Images and Adding Images

Step #6
Open NoteTab Light and load webstyled7/default.html into the editor. (Ignore if already loaded.)
Now let's change the links to the list of 5 pages we planned.
Find this block of code:
<!--Edit Links Here-->
<p><a href="sub-temp1.html">Page Number Two</a></p>
<p><a href="sub-temp1.html">Page Number Three</a></p>
<p><a href="sub-temp1.html">Page Number Four</a></p>
<p><a href="sub-temp1.html">Page Number Five</a></p>
<p><a href="sub-temp1.html">Page Number Six</a></p>
<p><a href="sub-temp1.html">Page Number Seven</a></p>
<br>

Change the code to:
<!--Edit Links Here-->
<p><a href="index.html">Home</a></p>
<p><a href="about-us.html">About Us</a></p>
<p><a href="services.html">Services</a></p>
<p><a href="products.html">Products</a></p>
<p><a href="contact.html">Contact</a></p>
<p><a href="sub-temp1.html">Page Number Seven</a></p>
<br>

Delete:
<p><a href="sub-temp1.html">Page Number Seven</a></p>

Save the Web Page

Preview in Browser

Note: If you click on the page links now, you will get a Cannot Display Webpage error message. The new web pages do not exist yet!!

Dig: More on Hyperlinks and Anchor Tag

Step #7
Open NoteTab Light and load webstyled7/default.html into the editor. (Ignore if already loaded.)
Now let's change the page heading.
Find the code:
<!--Edit Body Text Here-->
<h1>Webstyled Template Seven</h1>

Change it to:
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Home</h1>

Delete current web page text and images.
Beginning with the code:
<p>Place your own text between the paragraph tags ,
carefully delete everything down to:

<br clear="all">

</td>

Your HTML code can be added to the page using the drop down menu on the left of the editor window. If it isn't selected choose HTML from the drop down menu.

Set your cursor directly below the code for the page header tag:
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Home</h1>

Scroll down the HTML tags list to Quick tags and double click the p for a paragraph tag.
This will add the code: <p></p> to the page.
Type some words between the 2 paragraph tags so that you end up with something like:

<p>Discount Widgets has been supplying the world with widgets of all styles and colors since 1965.</p>

That's all the text we'll add for now. This is going to be our template for our 3 column web page. One more change and we're done.

Save the Web Page

Preview in Browser

Step #8
Open NoteTab Light and load webstyled7/default.html into the editor. (Ignore if already loaded.)
Let's change the footer.
Find the code:
<!-- edit Company info Here-->
<address>Company<br>
Address<br>
Email</address>

Change it to:
<!-- edit Company info Here-->
<address>Discount Widgets<br>
Somewhere, Someplace<br>
contact@discount-widgets.com</address>

or enter your real company information.

Save the Web Page

Preview in Browser

The 3 column template page is completed. You can now use it to create the 5 pages of your website.

If you prefer the 2 column design for the interior pages, load sub-temp1.html into the editor and repeat the steps 4 thru 8 for its modification.

After you finish modifying sub-temp1.html, you will have a template for a 2 or 3 column page.

Step #9
Let's use the 3 column template as our home page.
Open NoteTab Light and load webstyled7/default.html into the editor.
On top left of Editor Click File - Click Save As
Enter: index.html as the filename
Click Save

We now have our home page. (index.html)

default.html is preserved as our 3 column template.

Step #10
Let's create the remaining 4 pages using the 2 column template.
Open NoteTab Light and load webstyled7/sub-temp1.html into the editor.
Be sure that you have completed steps 4 thru 8 for its modification.
On top left of Editor Click File - Click Save As
Enter: about-us.html as the filename
Click Save

We now have our About Us page. (about-us.html)

sub-temp1.html is preserved as our 2 column template.

On top left of Editor Click File - Click Save As
Enter: services.html as the filename
Click Save

We now have our Services page. (services.html)

On top left of Editor Click File - Click Save As
Enter: products.html as the filename
Click Save

We now have our products page. (products.html)

On top left of Editor Click File - Click Save As
Enter: contact.html as the filename
Click Save

We now have our Contact page. (contact.html)

If everything has gone right you should be able to Preview the Contact page in the browser and access all other web pages.

Note: you can save time on Step #11 by using the Reopen function under File instead of Open.

Step #11
Now open each individual page and change the page header according to its page name:
Change:
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Home</h1>

to
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Products</h1>
on the products.html page.
to
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Services</h1>
on the services.html page.
to
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>About Us</h1>
on the about-us.html page.
to
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Contact</h1>
on the contact.html page.

NEXT --> Add an image to Product page

Common Problems

You can save some clicks by setting your default filter to HTML. Here's a visual tutorial that shows you how. Filters Tutorial

I'll be expanding this tutorial in the next few days. A step by step guide was requested by some of our users. This should get you going.