Chapter V

A URL, or Uniform Resource Locator, is a web address. Ya know, like http://www.nbc.com. On your pages, you can use links as a quick jump to a different url on the web. Links are clickable items or text which act as a button, sending the browser to a different place. There are two types of URLs:

Absolute or Complete - gives the entire address, including a new hostname and new directory.
Relative - point to another file or folder within the same directory. For example, everything in this site is contained in the directory, "https://members.tripod.com/~Zannadu/tutor/" When linking from this page to the homepage, only the html name needs to be given. "home.html" and "chap5.html" are both in the same directory. So, when linking to a page in the same directory, the complete URL need not be given. It saves loading time to give relative URLs when moving from page to page within the same site.

The tag involved with links is always the anchor [A][/A] tag. The anchor can either mark a link to another document, or mark a target. It's always used in pairs, and encloses the clickable item.

When linking to a place outside the current page, the anchor tag is used with the HREF attribute. This means that the anchor is a link pointing to a different place, be it on the same page or a completely different site on the net. It is written as such:

[A HREF="___"][/A]

with the blank being the url. Remember that everything between the beginner and closer anchor tags will be clickable links to the address specified. By default, text links usually appear as bold, underlined text. It's a different color than the other text, unless otherwise coded, and turns a different color if the viewer's browser has been to the address before. This way, they know where they have and haven't gone. For example, on this page the links are default colors: blue for non-visited places and purple for visited. Here's a link to a made-up address typed as [A HREF="blah_blah.html"]Blah[/A]:

Blah

And here's a link to this page, so of course you've been here. It it typed as [A HREF="chap5.html"]Chapter V[/A], and is a relative url.

Chapter V

If i were to link it as an absolute url, it would appear as [A HREF="https://members.tripod.com/~Zannadu/chap5.html"]Chapter V[/A]

Sometimes a single HTML doc is very long and contains much information. It may not be convenient to split all the information up, so a way for viewers to easily navigate it is to place target links within the page. As said before, anchors can also be a marked target for a link to jump to. Just like on this page, there are divisions of the information which can be easily jumped to from the link menus at the top and bottom.

First of all, you have to place the target names on the page. This is done by using the NAME="..." attribute within the anchor tag. The name should be something logical and easy to remember. It should also be placed exactly where you want the top of the screen to be. To name a target, it's easiest to use the anchors to surround the first word of a paragraph, or the first graphic of the section. Here, i make the first word of each paragraph the target. For this section, the word "Sometimes" is the target, and it's coded as such:

[P][A NAME="within"]Sometimes[/A]

Now, to use these targets, you must also create a link to them. Again, i'll use this page as an example: At the top and bottom, you'll see a short menu of links for this page. Each one points to a target within the text. Since these are links within the same page, the url is typed slightly differently. Keep the address the same, but add the target's name. For example, a link to just this page ( from within this site, of course ) would appear as [A HREF="chap5.html"][/A]. After the HTML doc name, add a pound ( # ) and the name of the target. Linking to the "within" target woult appear as such: [A HREF="chap5.html#within"][/A].

Images may also be clickable. They can be referred to also as buttons. The border of the image appears in the same colors as text links. These work in exactly the same way, but instead of text between the anchor tags, there is an image tag. The "HOME" image ( called "hhome.gif" ) at the bottom of the screen is a clickable image linking to "home.html." It is coded as such:

[P ALIGN="center"][A HREF="home.html"][IMG SRC="hhome.gif" ALT="( HOME )"][/A][/P]

Links are an important part of the design of your site. It's a good idea to make a simple design, with a homepage linking to all the other sections and pages. It should be easy to display the layout of your site as a web, which is a good way to start out the design.

After designing the web, it will be easy to begin construction. You already know the layout of your site, and thus will save time later. Begin by constructing the basic homepage. Divide the information up logically and create links to all the separate pages. Remember to always place yourself in the viewers' position, taking into consideration the ease with which viewers will be able to navigate, and where their attention will be drawn. Keep your linking networks fairly simplistic. Too many links is a bad thing, as is too little.