Chapter 4: Links

Links are the distinguished feature of the World Wide Web. They let you skip from one page to another, call up a movie or download files with FTP. In this chapter you will learn how to create different types of links.

Linking to Another Web page

If you have more than one Web page, you probably want to create links between the pages. To do so, you use the A tag:

1. Type <A href="file name">, where file name is the destination file.
2. Type the label text.
3. Finish with </A> to complete the link definition.

You've already made links to another site in chapter 3.

Say your main homepage is in directory called MYPAGE. And in MYPAGE directory, you created a subdirectory called SUBPAGE. In SUBPAGE directory, you have a web page called "my_hobbies.htm". How do you link this page to your main page? Here is how:

In the A tag, type <A href="SUBPAGE/my_hobbies.htm">. Everything else is the same. The '/' character tells the browser to look for the file in the specified subdirectory.

Anchoring

Sometimes you may want to make links that take a viewer to a specific region in the same document. To do so, you need to create an anchor and then reference that anchor in the link.

To Create Anchors:

1. In the part where you want the user to jump to, type <A NAME="anchor_name">, where anchor_name is the text you will use internally to identify different sections.
2. Add words or images that you wish to be referenced.
3. Type </A> to finish the anchor.

To Link to a Specific Anchor:

1. Type <A HREF="#.
2. Type the anchor name that you've specified earlier.
3. Type ">.
4. Type the link label.
5. Finish with </A>.

The above method lets you jump to another section in the same document. If the anchor is in another document, type
<A HREF="file_name#anchor-name"> to reference the section. (Note that there is no space between the file name and the # symbol.)

Figure 4.1 and 4.2: Before and after clicking on "Click here to see Dali's Picture" link.

Figure 4.3: The source code for figure 4.1 and 4.2.

Changing the Color of Links

You probably would want to change the color of links when you've changed the background color. Here is how:

1. In the BODY tag, type LINK (for unvisited links), VLINK (for visited links), and/or ALINK (for active links).
2. Type ="hex number or colorname".

Targeting

So far we've been opening links in the same window. You can control where links are opened using TARGET attribute. This way, the page that contains the link stays open, and the user can go back and forth between different windows.

To target links, type TARGET=win_name within the link definition, where win_name is the name of the window where the corresponding page should be displayed.

Figure 4.4: A new window pops up when you click on the links. DALI and SIMPSONS are targeted to the same window, while SMARTBABY is targeted to a different window.

Figure 4.5: Source code for Figure 4.4.

Exercise 6: Expanding Your Web Page

1. Create another html page called "my_java.htm".
2. In the HEAD section, title the page to be "My JavaScript Page".
3. In the BODY section, insert a greeting saying "Welcome to My JavaScript Page".
4. In your my_page.htm file (from exercise 5), make a link to "my_java.htm" file. When opened, the JavaScript page should be in a new window.
5. In the directory that contains your html files, create a subdirecotry named "Assets". Move all your image files (from exercise 5) into that subdirectory.
6. You should change the value of IMG SRC in your web page so that the image still shows up properly on your website. Also resize the file "ch3exfoto1.jpg" (from exercise 5) to be width 150 and height 100.

Your pages should look something like this:

Figure 4.6: Your page should have the image resized and a link to "my_java.htm".

Figure 4.7: This window pops up when the user clicks on "Go to My JavaScript Page" link.

Back to the Top
To the Table of Contents

Last Updated September 9, 2000 by Grace Pok