Help Stefan Campaign If you can spare $1 then help support this site and change someone's life forever? Learn how and why on the Help Stefan campaign page. Or donate $10 and get my guide to spices book as a gift for your donation!

Celtnet Information:

How to Create your index.html

In internet terms the index.html page is a rather magical entity that corresponds to the top-level of any directory. Basically if you want to make any directory in your website act as if it was an URL you simply place an index.html file in that directory. Therefore, to make the http://www.mysite.com/fred directory 'clickable' you'd put an index.html file in your fred/ directory and the content and functionality of the index.html file would be the main page of this directory. The same applies to the top level of your website, which is why the first page that you need to create for any new website is the index.html page. This becomes what's known as your 'home page' the page that effectively corresponds to the identity of your website.

As you build your web presence this home page will be the first thing that most visitors see. It is also the first item of your webiste that most of the indexing systems (Google, Yahoo!, MSN, Ask) will see. It is also this page that you will submit to the large indexing sites such as the Open Directory Project (DMOZ). It is this page that will probably gain most Page Rank (PR) for you. Your index.html page is your doorway to the internet. It may well be the first page that your visitors see and it is here that you should make the point about who you are and what your web presence is all about. As a result the page needs to be clean, well-laid out, easy to read and should present clearly your viewpoint and what you're offering the visitor inside.

The index.html file should also contain links and immediately obvious routes to the content of your site. It should also contain a link to the main sitemap of your site (the indexing bots will use this to find the various pages in your site) and the higher up it is in your page hierarchy the better will be the level of indexing bot crawling that you receive.

More about Your Home Page

You've learnt of the importance of your home page in terms of its presentation to the outside world. What follows is a list of no-nos for your home page:

• Flash animation. This is the main no-no. OK it looks cool, but it doesn't add anything to your website's content and search bots can't index it. As a result it's 'dead' content that users can't search to find out anything about your website. The culture of the internet is such, also, that users want information quickly and over 90% of the visitors to your site will simply skip the flash animation. Flash also is quick to load and it nothing appears on your webiste for a while users may simply decide to go elsewhere.


• Avoid large graphics on your home page and don't make your site's banner too big. Admittedly it's important to 'brand' your website, so I'm not telling you to aviod using banners, just don't make them too big. After all it's text and other forms of content that will mainly inform people aobut your site. Don't make any images too big or too complex either, as loading images will slow the overall loading of your web page.


• Wasting space in that region of your home page 'above the fold'. This represnets the top part of your home page, which is that region of your website people see before having to scroll down. As this is the first thing a visitor sees it is here that you need to make most impact. As a result this is your most important screen real estate. Don't waste it with useless white space and images that don't add anything.


• Avoid all the fancy 'bells and whistles'. All those elements that look great when you see them: flash banners, animations, floating text, exploding text, spinning text are great when you first see them but by the thirtieth and the hundredth or thousandth time they're getting decidedly tired. Basically such things are completely pointless and the're adding things to your website that consume bandwidth, make your site load slowly and which won't be indexed by search engines.


• Most of us have done this next one, but if at all possible don't use images as navigation buttons. Again they can't be spidered by search engines and though you can use 'alt' tags to provide text to accompany the images search engine spiders can't veryify these tags and may download the image links.


• Using Frames: Basically don't use frames. Search engine spiders hate them and they will only index the primary (topmost) frame. As a result most of your content simply won't be indexed and all you'll be doing is creating headaches for the future as you'll need to re-code all those frames into something else.


• JavaScript and/or Java code. Both Java and JavaScript can add great functionality to your website, but be careful not to overlad your web pages with these languages as any content within JavaScipt of Java will not be indexed. (Languages such as PHP and Perl are fine as these generally deliver html pages that can be indexed.

We've now gone through the top no-nos in terms of creating your home page, but how do you get started in terms of designing your index.html page. The next part of this page deals with the basic framework of your index.html page.

The Framework of your index.html page:

Despite its elevated status as a special kind of HTML page, the index.html page is still only a website and it's structure is the same as any other website. The general 'invocation' code is the same as for any web page and is given below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title>This is an Improtant Title

<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="keywords" content="first page, main page, index, home page" />
<meta name="description" content="Learn how to write your index.html file." />
<meta name="robots" content="index,follow" />

</head>

<body>





</body>
</html>

In the code above, the first <DOCTYPE> line defines what kind of document you're writing here. I'm using xhtml1-transitional in this case as I'm using XHTML with CSS (cascading style sheets) to define my web pages (which, given the state of the web today, is probably something that you should do as well). The next <html> is critical as it defines the start of the HTML code (in my example it's defined as the XML subset of HTML which allows more flexibility in website design).

Immediately following the <html> tag comes the <head> tag which defines the header block of your HTML page. This region of the web page contains important information that's indexed by the search engines as well as definitions of how things work in your web pages. For the moment I've cut this header block down to just some of the <meta> tags used by the search engines.

First, however we have the very important <title> block that defines the title of your web page (this is very important as it's often used by the serach engines as the title of your web page.

The first element of the <meta> tag bock is the block that defines the 'content-type' of your web page which informs the web spiders as to what type of page you're delivering (in this case it's a 'text/html' page which uses the UTF-8 Unicode character set for a number of special accents and characters. the next <meta> block defines the 'keywords' that are associated with your site. Again the search spiders can use these data to aid with web searches (but please don't go overboard with these as too long a list will count against you.

The next <meta> tag defines the 'description' for your web page. Again, be accurate and informative in this as it's another item of data that's used by search engines to describe your web pages. Next comes the <meta> tag that defines the behaviour of how the search engine spiders should handle this page. In this case I want them to index the page and to follow any links that lie on it. After the block of <meta< tags I close the <head> block and I open the <body> block (this is where the main body of your web page's code goes). To complete the web page I close the <body> block and then I close the <html> block.

With this done the main structure of your index.html page (and incidentally just about any other page on your website) is also complete. In the next article I'll be dealig with actually putting some content in this web page.

On to the next part...