About Index Files

Getting Started With Your Website:

 
About Index Files

Basic HTML Structure

When you first open up an account with Crosswinds and go to your website address http://youatcw.net/, you will simply see a generic list of folders. To have your own introductory page load up automatically, your main folder must contain an index file. The name for that file is one of the following:

index.htm
index.html
index.shtml
index.php

!Remember: Make sure the file names use small letters only, no uppercase letters!

The index page is the “start page” for your website: the page that is seen when people go to your site’s address.

Please note that you can have more than one index file in your folder, however, the first alphabetical one will take precedence, ie: index.html will be loaded instead of index.php. This can come in handy when you are doing maintenance on your site. (For WordPress users, please read more about maintenance index pages.)

To create your index page, open up a text editor (notepad). Type the words “Welcome to my webpage” (or whatever information you’d like everyone to see) and save the file as “index.html“. Upload the file via ASCII to the main folder in your account. Now go to http://youatcw.net/ and your site will have started to be yours.

Note that you can have more than one index page. The index page is the “start page” for whatever folder it is in. ie: each folder can have its own index page.

BUT, you want to add more than just plain text to your index pages, don’t you? Well, you can do that too. And it’s relatively easy.

Bear in mind that HTML is interpreted by a machine and if there are errors in coding that the machine doesn’t recognize, it will guess your intentions. Depending on the machine, the guess will be far or close to what you intended. A good rule of thumb is to remember that if a tag is opened, it must be closed. Naturally, because all languages are perverse, there are a few exceptions to this rule (For more information, please see w3schools.com -Introduction to HTML).

The following instructions using the simplest of coding will get you started and should display a working page on all the later browsers and most of the earlier ones.

On the index page, as well as any information about your website, you’ll probably want to show a list of links to the various pages and folders on your site. Here is an example of how to do that:
<ul>
<li><a href="/NameofFileEXACTLY.html">title of link</a></li>
<li><a href="/FOLDERname/">title of a folder</a></li>
<li><a href="/FOLDERname/FileName.html">title of page in a folder</a></li>
<li><a href="/anotherFOLDERname/FileName.html">title of page in another folder</a></li>
</ul>

The <ul> at the beginning tells the computer where the start of your unordered list is. The <li> is placed at the beginning of each listed item. And </li> is placed at the end of each item. The final </ul> goes at the very end of the list to tell the computer that the list is finished.

Each link begins with <a href=””> and ends with </a>. Note the leading slash after the first quotation mark in the example link. This instructs the browser to add “http://yourdomainname.com/” to the beginning, causing the link to work on any page of your website at all.

greendotN.B. File names are case sensitive. You must enter them into your coding eXacTly aS they aPpear.

You can have many folders on your website and just as many index pages. The index page is the “start page” for whatever folder it is in. ie: each folder can have its own index page.

Every folder without an index file on your site may simply show a generic list of files that are in the folder. Or, it’s possible that when your visitors try to directly access a folder that does not have an index file, they will see the unwelcoming message “Access to that file/directory is forbidden”.

You may have a folder that you don’t want people wandering around to be able to see all the files that are there. To prevent that, you can create an index page for it. Simply type the folder name on the index file, along with a link to your homepage. This way, you control what your visitors can see when going to your site.

To create the index page for a folder (aka directory) – let’s say that in this case, it’s your image folder, open up a text editor (notepad). Type the words “My Images” (or whatever information you’d like everyone to see) and save the file as “index.html”. Upload the file via ASCII to the “images” folder in your account.

If you do not have an images folder, you can easily create it in the file manager:

  1. Simply login to your cpanel at http://YOURdomainname.net/cpanel/ Scroll to File Manager and click on it.
  2. Then click on “New Folder” and type ‘images’ into the window that appears beside the words “New folder name”. Please remember that everything is case sensitive. (“Images” is different from “imaGes”.) Click on the “Create New Folder” button and the new folder will be created. Using File Manager in CPanel
    Using File Manager in CPanel
    Here is an example of what the coding for your images folder might look like:
    <h1>My Images</h1>
     
    <ul>
    <li><a href="/images/myhouse.jpg">My house</a></li>
    <li><a href="/images/mygarden.jpg">My garden</a></li>
    <li><a href="/images/myfamily.jpg">My family</a></li>
    <li><a href="/">My homepage</a></li>
    </ul>
  3. Make sure the new index file has been uploaded via ascii to the images folder. Now go to http://YouatCW.com/images/ and you will see a page entitled “My Images” along with the list of links to any images you would like people to easily open. Alternately, you can leave out the links and simply type “My Images”.

Tip
Please remember to keep backups of your site on your computer and/or a remote hard-drive. You never know when inexplicable crashes can occur.