Web Structure

by R. Glass

Revised:

Why do I need to know about a Web Directory Structure?

In truth, you don't. If you have one or two pages, with a few images then you could keep all your files in one place. Eventually, what will happen is that you will make more and more pages and images. You will be faced with one huge listing of files. By using a directory structure you can better organize your material.

The Web directory structure is analogous to that of PC DOS or UNIX directories (folder for individual files). The differences between Web and PC DOS is the directory separator. The Web (and UNIX) uses a / (aka slash or forward slash or that slash with the positive slope). This differs from the PC DOS where the names are separated by \ (aka backslash or that slash with the negative slope). Web information (or files such as HTML files and images such as GIF files) can and should (for sanity sake) be stored in different directories.

URL, URI, U R What?????

The UR in the above stands for Uniform Resource. The L stands for Locator. It is the method or technique by which information is obtained. The most common URL you will use is the http://. The I in URI stands for Identifier. It is that object (information) that is to be obtained. In many instances the terms URL and URI are used interchangeably. Although this is not technically correct, no ONE will miss your point and URL is the most common term and is sometime refered to as a link.
Relative URL
A URL that makes use of the fact that the information is stored on the current server and and makes use of the directory structure of the web via pathnames only. In other words, the information consists of only the pathnames of the files. The URL here is implied to the server. There is no http:// specified. The server knows how to interpret the URL.
The rationale for this is so that you can develop and test your pages off line. It also makes transporting your pages from one server to another an easy task.
Absolute URL
A URL such as http://. This should only be used when the information requested is found on a different server.

Whenever a URL ends in a directory name, then the web server will look in that directory for a file (usually) called index.html (or .htm or .shtml or whatever the server is configured for). If found, then that file is sent and interpreted by the browser. (On most servers, if there is no index file then a listing of the directory contents is presented). This index.html file is referred to as the home page.

Note: The matcmp server accepts the .htm suffix while the polar server accepts either .htm or .html.
Figure 1. a graphical browser would really help here

Typical Web Directory

Consider a typical Web directory structure ( figure 1 ) for a server called www.matcmp.sunynassau.edu (the colored boxes are directories and the text with lines are the files contained in those directories).

A link into this server from the outside with a http://www.matcmp.sunynassau.edu would produce the home page for the server. That home page is the file index.html located in the directory / (or root). A http://www.matcmp.sunynassau.edu/~glassr would produce the index.html file in the ~glassr directory.

It is certainly the case that these pages would provide links (URLs) and graphics to other information on this server. It is here that the URLs should be relative and not contain an http://. The URL given would be relative to the directory the page is in.

Note 1: If you know PC DOS then the directory where the page resides is the present (or current) working directory. A page (say page1.html, can just reference page2.html withoout any slashes provided it is in the current directory. Accessing files follows the same rules as PC DOS, including the .. (dot-dot specifying the parent directory) syntax, which will not be covered here. In short, .. stands for the parent so ../dir1/file.html moves up one directory and down the dir1 directory.

Examples for the index.html in the / directory (department home page)

  1. Display the graphic saddlei.gif ( figure 1 ) The HTML image tag would be: 
    <IMG SRC="images/saddlei.gif">
    Here the directory images is specified and is assumed to be a subdirectory of /.

  2. Provide a link to the morepage.html 
    <A HREF="morepage.html">More pages</A>
    since morepage.html is in the current directory.

  3. Provide a link to the home page of ~glassr (link to the index.html file in the directory ~glassr) Either 
    <A HREF="~glassr">R. Glass</A>
    or 
    <A HREF="/~glassr">R. Glass</A>
    or 
    <A HREF="~glassr/index.html">R. Glass</A>
    would work.

  4. Show the image iconimg.gif contained in the image directory under ~glassr. 
    <IMG SRC="/~glassr/images/iconimg.gif">
    Also, the previous way would work.

    Examples for the index.html in the ~glassr directory.

     Here is where things get interesting ( figure 1 ). Since the index.html file lives in ~glassr, URLs can be built using pathnames either relative to ~glassr or absolutely starting with /. Do not confuse the absolute and relative terms here with the absolute and relative used for Uniform Resources. Information can be obtained by:
    1. Always specifying the full pathname of the file. Starting with / and naming all directories encountered until finally, you have reached the destination.
      or
    2. If the information is contained in a subdirectory of where the referenced page is, then one need only specify the path relative to where the page resides ( figure 1 ).

      1. Display the image iconimg.gif that is in the images directory under ~glassr. 
        <IMG SRC="images/iconimg.gif">

      2. Provide a link to the morepage.html file contained in the directory morestuff (the directory morestuff that is a subdirectory of ~glassr) 
        <A HREF="morestuff/morepage.html><R. Glass: More Pages</A>
        <A HREF="/~glassr/morestuff/morepage.html><R. Glass: More Pages</A>
        would both work.

      3. Provide a link to the morepage.html file in the / directory. 
        <A HREF="/morepage.html"><More Department Pages</A>

      4. Display the moregif.gif contained in the image subdirectory of /. 
        <IMG SRC="/images/moregif.gif">

    A little fun?

    Interested in a little QUIZ?

    Figure 2.

    In Reality ...

     In reality, the Web directory structure ( figure 2 ) will have nothing to do with the operating system directory structure. There really is no ~glassr. The name ~glassr will be an alias for another directory where the user (assume it is GLASSR) can put html files to be used as web pages. The same is true for the web directory called /.

    The directory GLASSR is the directory where the user glassr can keep all the private work. It is the subdirectory called public.www (this name changes from server to server) that is really the web directory ~glassr. The same is true for /. It is the directory /sys/web/docs that is where the web directory / is really located.

    Creating Links to a Particular Point in a Document.

    Now that you have mastered the concept of URLs and creating links, the ability to create a link to a particular point in the document is easy.

    The first thing you must do is create an ANCHOR NAME (it is really a label) using the <A NAME= container. Surround the text (graphic or even blank) you wish to link to. Pick a name for the label. In the sentence below, I picked the word gotohere as the NAMEd / target / anchor text.

    <A NAME="gotohere">target text</A>
    To link to that point in the document you need to preface the anchor name (label) with a pound sign (#). This is very useful in providing a table of contents within a document or placed within a document taking the reader back to the top or a table of contents.