QuickRead 10: Navigation

Navigation within the document
There will be many times it's convenient to link to another part of the same document instead of another file. For instance, if you had a list of members (to some club) listed alphabetically, it'd be great to provide an index on top so people can jump to a particular bunch of names without going through the entire list. Here's an example:

The way to reference a different area of the current page is simple. First, you would name each area that you would like to jump to. Second, you would link to that area using the familiar <a href> tag. Use a # followed by the name of the area as the reference.

If you wanted content in your document to link like this:

Read about my friends John, Kathryn and Tom

Stuff about John
blah
blah
blah
blah
blah
blah
Top

Stuff about Kathryn
blah
blah
blah
blah
blah
blah
Top

Stuff about Tom
blah
blah
blah
blah
blah
blah
Top

This is how you would code it:


<!--Naming this area: top-->
<a name=top></a>

<!--Linking the names John, Kathryn and Tom with <a href> tags using a # and the name of the area as the reference.-->
<p>Read about my friends <a href=#john>John</a>, <a href=#kathryn>Kathryn</a> and <a href=#tom>Tom</a>:

<!--Naming this area: john-->
<a name=john></>
<p><font size=+2><u>Stuff about John</u></font><br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
<!--Linking back to the top-->
<a href=#top>Top</a>

<!--Naming this area: kathryn-->
<a name=kathryn></a>
<p><font size=+2><u>Stuff about Kathryn</u></font><br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
<!--Linking back to the top-->
<a href=#top>Top</a>

<!--Naming this area: tom-->
<a name=tom></a>
<p><font size=+2><u>Stuff about Tom</u></font><br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
<!--Linking back to the top-->
<a href=#top>Top</a>

The comments aren't needed but are a good idea. Also, the </a> tag on after the <a name=...> tag is not truly required, but a good idea. (The </a> tag after the < href=...> tag is required)

.
.
Navigation over multiple pages
You can organize your homepage into discrete sections (many pages instead of one). Each page resides as a separate HTML document(file) in your public_html directory and you would link to it from your homepage using the <a href> tag. You can link back to your homepage from the new page using another <a href>link. Here's how:

  1. Login to your class user account
  2. Type cd public_html
    • cd is the command to change your current directory and public_html is the directory you want to change to

  3. Type pico filename1.html
    • pico is the word editor. filename1 is the name you want your new file to be called (You can pick any name. To keep things simple, do not have any spaces in your name).

  4. Type in the basic HTML structure (i.e. head, title, body etc..)

  5. Insert within the body tags the content you want on the new page.
  6. Press ctrl+x
    • ctrl+x lets you save changes and exit.
    • press ctrl+o if you want to save changes and continue editing.

  7. At the command prompt(the > symbol), change the permissions of the newly created file.
    Type >chmod 644 filename1.html
    • "chmod" is the command used to change permissions. The first digit, 7 gives "you" read and write permissions((read-4) + (write-2)); the second digit that belongs to "your group" has read permission only(read-4) and the last digit which belongs to "everyone else" has a read permission too (read-4). For something to be visible on the internet it needs to have read permissions for "everyone else". This is true for html files, pictures, sounds files, etc. The directories that have these files in them (such as public_html) need to have read and execute permissions for "everyone else". (see the unix tutorial for more info on chmod and permissions)

To access your new page using a browser, you can type the following in the location field:
http://grove.ufl.edu/~c3063xyz/filename1.html
Substitute "xyz" with your class user tag, and "filename1.html" with the name of your file.

To link to your new page from your homepage,
type in your home page <a href=filename.html>link</a>
Substitute "filename.html" with the name of your file and "link" with with a descriptive name for your file.

To link to your home page from your new page,
type in your new page <a href=http://grove.ufl.edu/~c3063xyz/
Substitute xyz with your class user tag.

.
.
Navigation over multiple directories
You can organize your homepage into You may want to separate your pages into multiple directories. This is especially useful as you begin to accumulate lots of files for your webpage. For instance you might create a school directory with files and such related to your school work. To do this:
  1. Login to your grove account.
  2. Type cd public_html to change to your web page directory.
  3. Type mkdir school to create a new directory within your web page directory (public_html).
  4. Change the permissions on the directory for global read and execute by typing chmod 755 school
  5. Change to your new directory by typing cd school
  6. Create the new page in this directory (similar to above) using pico, pico filename2.html
  7. Type in the basic HTML structure (i.e. head, title, body etc..)

  8. Insert within the body tags the content you want on the new page.
  9. Press ctrl+x and save the document
  10. At the command prompt(the > symbol), change the permissions of the newly created file.
    Type >chmod 644 filename2.html

Note, you will need to type cd .. to go up one level from the school directory to be back in the public_html directory where your main webpage resides.

To access your new page using a browser, you can type the following in the location field:
http://grove.ufl.edu/~c3063xyz/school/filename2.html
Substitute "xyz" with your class user tag, school is the name of the directory you made (school was our example), and "filename2.html" with the name of your file.

To link to your new page from your homepage,
type in your home page <a href=school/filename2.html>link</a>
Substitute "filename2.html" with the name of your file and "link" with with a descriptive name for your file.

.
.
Absolute, Relative and Base URL's.
For the most part, examples in this tutorial have always used the absolute URL to access pages. An absolute URL (Unique Resource Locator or simply the "address") has all the information that a browser needs to find the page you are linking to. For instance if load the following URL:
<a href=http://www.cise.ufl.edu/~gunderwo/nonex/sompage1.html>.
The browser knows exactly where to find "somepage1.html" on the World Wide Web:
  1. Find a server (computer) called "cise.ufl.edu."
  2. Find a user called "gunderwo" on that server.
  3. In his web page space, locate a directory called "nonex"
  4. In directory "nonexistent," locate a file called "somepage1.html."
Once "somepage1.html" is loaded on your browser, say you were to encounter several links that had the following URL form:
<a href=somepage2.html>,
<a href=somepage3.html>,

How would the browser know where in the World Wide Web to find those documents. The answer is that, the browser simply attaches the information (www.cise.ufl.edu/~gunderwo/nonexistent) that it received previously when it loaded somepage1.html. So as long as you are trying to access documents in the same directory that somepage1.html was in ("nonex"), you have no problem. In other words

<a href=somepage2.html> is equivalent to:
<a href=http://www.cise.ufl.edu/~gunderwo/nonex/somepage2.html>

<a href=somepage3.html> is equivalent to:
<a href=http://www.cise.ufl.edu/~gunderwo/nonex/somepage2.html

If there were subdirectories called "subdir1" and "subdir2" in the directory "nonex," they could be accessed using just the name of the subdirectory and the name of the fil.

<a href=subdir1/morepages1.html> is equivalent to:
<a href=http://www.cise.ufl.edu/~gunderwo/nonex/subdir1/morepages1.html>

<a href=subdir12/somemorepages1.html> is equivalent to:
<a href=http://www.cise.ufl.edu/~gunderwo/nonex/subdir2/somemorepages1.html

Using a tag called <base> the default directory that the browser should use to load all URL's in the document can be set. The base tag goes in the document head and it doesn't have a closing tag.

<html>
<head>
<title>Base referenced document </title>
<base href="http://www.cise.ufl.edu/~gunderwo/nonex/subdir3">
</head>

Setting the base tag to an absolute URL will make the browser resolve all URL's in the document relative to the base URL and not the current document's URL.

<a href=yetmorepages1.html> is equivalent to: <a href=http://www.cise.ufl.edu/~gunderwo/nonex/subdir3/yetmorepages1.html>

.
.
Get Behind the Wheel
Type out the following and try some of your own stuff too:

<html> <head> <title>Fun with Navigation</title><head>
<body bgcolor=#666699>

<a name=top></a>

<p>Here is what we did at <a href=#stlucie>StLucie</a>, <a href=#phuket>Phuket</a> and <a href=#cote>Cote D'Azur</a>:

<a name=stlucie></a>
<p><font size=+2><u>St Lucie</u></font><br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
<a href=#top>Top</a> <a name=phuket></a>
<p><font size=+2><u>Phuket</u></font><br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
<a href=#top>Top</a>

<a name=cote></a>
<p><font size=+2><u>Cote D'Azur</u></font><br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
<a href=#top>Top</a>

</body>
</html>



Type your code here:

.


Index
1   2   3   4   5   6   7   8   9  

10

  11