Lesson 14: The Main Pages of Your Website  

Note: this lesson also teaches you how to protect your contact e-mail address on your webpages from being harvested by spambots, using a simple javascript code which you can easily copy and paste from here.

Your website should have at least 4 pages.

1. a homepage ( = Index Page )
2. a contact information page
3. a sitemap
4. a page with legal documents such as a privacy policy, certain disclaimers & others

    1. Your Homepage    

Your website´s homepage is the one which should be seen when users visit your domain - http://www.yourdomain.com - either by typing the complete URL in the address bar of their browsers or by following a hyperlink to your site anywhere on the world wide web.

Your homepage´s file name should be "index" - here´s why:

Your web server (that´s where your website is stored on the internet) always automatically looks for an index file when someone tries to access a directory URL. Your domain´s URL - http://www.yourdomain.com - is the root directory of your website. Other directory URLs are for example the subdirectories of your website, such as ...
http://www.yourdomain.com/weblog/
http://www.yourdomain.com/articles/
etc ...

While the file name of the default webpage in each directory of your site must always be index, its file name extension may be the most frequently used .html or alternatively .htm, .shtml, .php and some others.

The screenshot below shows you what happens if you don´t use an index file in any of the directories of your website. You see, a list of all the files within this directory will be displayed in your visitors´ browsers instead of a webpage (click for a larger view).

From the navigational point of view, your homepage should at least provide direct links to the most important pages and subdirectory index pages of your website.

    2. A Sitemap for Your Website    

A sitemap is pretty useful if you have a large website with dozens or hundreds of pages. It´s basically just a simple webpage with a well organized list of links to all internal pages of your site. This way, your visitors will have it easy to jump quickly to the pages they want and also the search engine spiders will crawl and possibly index your entire website much faster. Optionally, you may also include a short description for each linked webpage right below or beside its link.

It´s good to place a link to your sitemap inside the footer of all your webpages. Below are examples of simple sitemaps. I have included copies of these pages in this tutorial, so you do not have to be connected to the internet to view them.

DentalCareBuddy.com´s Sitemap

TheJungleMarketer.com´s Sitemap

    3. Your Contact Information    

Don´t hide behide an anonymous website. Every serious website owner has his / her contact information somewhere on the website. The best practice is to put it on a separate page, along with some additional information about you or your company.

You should at least provide your postal address and optionally your phone number, too. Don´t worry, very few people will actually call you. But especially when you are selling something, then a contact phone number is a must and it will add a lot of credibility to your website.

Also important for your contact page is a contact email or a contact form, of course. The problem is that when you expose your email address on your webpages using regular HTML code, it can also be seen by email harvesting softwares (aka spambots) and in a short time you will get a lot of spam. For this reason I have included a little javascript here that will make your email address invisible to the spambots and still display it normally to your visitors.

Spambots usually only scan the plain text of webpages for the "@" symbol, but they don´t execute javascripts. The javascripts provided in this lesson use a function to compose your e-mail address from its 3 different parts, the prefix (= anything before the @), the "@" symbol itself and the suffix (anything behind the @).

The only drawback to this technique is that since your email address is composed by the javascript, users who do not have javascript or those who have the javascript disabled in their browsers cannot see your email address. Don´t worry, most internet users have javascript enabled. But in order to get around this problem you might want to inform those who don´t. You can do this with a short alternative message using the HTML element NOSCRIPT, whose content is only displayed as an alternative when javascript is disabled. A sample message is included in the codes below.

The first code creates a simple text e-mail address ( ) and the second code creates a link to your e-mail address ( ). Watch the video to learn how to customize the javascript codes and paste them into your webpages. BTW - the two e-mail addresses in parentheses above are created by this javascript.

Video button not working ? Click Here

JavaScript Code 1: E-mail address in plain text

JavaScript Code 2: E-mail address as link

    4. Legal Docoments    

To keep yourself away from legal troubles, you should have a privacy policy and certain disclaimers on your website. The amount of legal documents you need to have depends on the type and scope of your website project. Sample privacy policies, disclaimers and terms for personal websites as well as good resources for legal documents for commercial websites are provided in the next lesson.