Online Tools for Teaching
Building and Refining
Your Home Page
The original meaning of the phrase "home page" was "the page that appears first when I start my browser." The definition has since become "the main or top page that I create in my web space." You can help people navigate your site by naming your home page, and any "top" page in any sub-directory with the default name:
Name your home page: index.html
If a browser points to a particular directory at a site and no file name is specified, it will look for a default file name. In the case of the zoo web server, that default file name is "index.html" (all lower case, and the full extension.html must be included. It will consider a file named index.htm to be a completely different file.) For example, if you point your web browser to http://www.uvm.edu/~hag, what you will actually see is the file http://www.uvm.edu/~hag/index.html.
If you have sub-directories, each of the sub-directories should also have an index.html file, if appropriate.
If there is no file named index.html in the directory, the browser will display a list of all files in that directory. Many people take navigate sites by pointing their browser to a particular file in the site, then deleting the file name which re-points the browser to the directory just above that file. For example, if a person visited http://www.uvm.edu/~hag/e-class/ott/597course.html, they could delete the portion 597course.html, which would re-point the browser to http://www.uvm.edu/~hag/e-class/ott/. If there was no file named index.html in that sub-directory, they would see a list of all the files in that directory. But because there is a file named index.html in that directory, what they see is the file http://www.uvm.edu/~hag/e-class/ott/index.html.
Of course, there may be some instances where you want a visitor to see a list of files. An example is: http://www.uvm.edu/icon/balls/. As there is no file named index.html in the directory named "balls" what you will see is a list of files. In this case it makes sense to do it this way because the purpose of this directory is to allow you to choose a graphic file from the list to view.
As you begin to grow your web site, consider its organization. Will you group files by course, project, or type? Would it be useful to create a distinct repository for images, or would it make more sense to keep images in the directory with the files that include them? Does your web site need to reflect the organizational structure of your directories?
Remember that each sub-directory you create should contain an index.html file to make navigation easier. But be very careful when working with files that may be stored in different directories but may have the same name (like index.html). Make sure you know where you are before deleting, editing, or copying over them!
Creating Sub-directories on zoo
To create sub-directories on zoo, telnet to zoo and login. Then change to the public_html directory by typing: cd public_html. Create a sub-directory within public_html by typing: mkdir directory-name
directory-name can be any single word combining letters, numbers, and a dash (-) or underscore (_). It must be a single word with no spaces.
After the sub-directory is created, set the permissions such that you have all rights, and groups and others have read and execute rights:
chmod 755 directory-name
Be sure, when uploading files or working on zoo with pico, to put your files in the correct sub-directory. For example, if using FTP, you would connect to zoo, change to the public_html directory by double clicking on it, then change to the sub-directory by double-clicking on its name. Or, if you login to zoo and want to use pico to edit or create a file in the sub-directory, type cd public_html to change to that directory, then cd directory-name to change to the sub-directory.
Linking from file to file between sub-directories
When creating a link from one file to another you can always use its full Uniform Resource Locator (URL) or physical address. However, if you are linking from one file in your directory structure to another file in your directory structure, you can also use its relational address, that is, specify where one file is in relation to another. For example, if I am creating a file and want to create a link to another file in the same sub-directory named syllabus.html, the link could look like this:
<a href=http://www.uvm.edu/~hag/syllabus.html>Syllabus</a>
or like this:
<a href=syllabus.html>Syllabus</a>
If I am creating a file in my home directory and want to create a link to a file named syllabus.html that is in a sub-directory named ACAD101, the links could look like this:
<a href=http://www.uvm.edu/~hag/ACAD101/syllabus.html> Syllabus</a>
or this:
<a href=ACAD101/syllabus.html> Syllabus</a>
And, if I am creating a file in a sub-directory and want to refer to a file in the directory above that sub-directory, the link would look like this:
<a href=http://www.uvm.edu/~hag/courses.html> Go to complete course list</a>
or this:
<a href=../courses.html>Go to complete course list</a>