Concepts

What are hyperlinks?

Hyperlinks are links in a Web page that you can click on to go to other Web resources. They can also do things like open an e-mail program for you to send messages. When the cursor is on hyperlinks, it changes into the shape of a hand. Usually, a text hyperlink is a different color than regular text and underlined. Images can also be hyperlinks. Hyperlinks are also called links.

1. Linking to a remote Web site. These links allow you to link to any page on the World Wide Web. For example, you may want to link to your department, ISBE Learning Standards, NASA, etc.
2. Linking within the same site (local links). For example, there are links from this lesson to other lessons and to the table of contents. These lessons are within the ci235 Website.
3. E-mail links. When users click on an e-mail link, the e-mail composing program (such as Netscape Messenger, Eudora, MS. Outlook Express, etc.) will be launched and allows them to compose a message.
4. Targeted links. Targeted links allow users to jump to a specific part of the Web page. They are usually seen in a long document (same page) or cross reference (different page). For example, the six links at the top of this page are targeted links that bring you to the five sections below. Moreover, after each section, a back to top link will bring you back here on the top of this page.

To create a link (i.e. to link) from your page to a remote Web site:

1. Select the text/image to be linked.
2. Click the  button. You can also choose Insert > Link from the menu bar. You will be prompted to enter the URL (Web address).
3. Type the URL of that Web site as shown below.
4. Then hit OK.

The link to a remote Web site is called an "absolute link." You have to provide the whole and exact Web address (including path and file name) for the page you link to.

Tip
To set the exact address for your link and avoid typing errors:

1. Use the browser (Navigator or Explore) to go to the Web site you want to link to.
2. Highlight the URL.
3. Type Ctrl+C to copy it (hold down the Ctrl key and type C).
4. Place the cursor in the blank space beneath "Link to a page location or local file:" and type Ctrl+V to paste the URL in stead of typing it.

Select the text/image you want to link from and click the  button. A window called "Character Properties" will pop up. That is your prompt to enter the web address of the file/document you want to link to. Then click on the Choose File button as shown below.

When prompted to choose the file (see the diagram below), locate the file and select it. Hit Open to return to the "Character Properties" window.

You will see the file name appears in the window. Hit OK and you are done.

Tip
If you are linking to other file type other than HTML, you have to select the file type or just select All Files. It is suggested that you put all your Web pages in the same disk or same folder of the disk.

The link within the same site is known as a "relative link" in which you just provide the file name without specifying the path. When you send your files to the server, the server will append the path to your files automatically. Thus, if you send the file "eport.html" to your account in the www.students.uiuc.edu server, the URL for this file becomes http://www.students.uiuc.edu/~your_netID/eport.html

However, if you send the same file to a different server, the URL of the file is different. Suppose you are enrolled in C&I 336 and your instructor set up Web accounts in MSTE server for the class. When you send the same file "eport.html" to the MSTE server, the URL for this file becomes http://www.mste.uiuc.edu/courses/ci336sp00/students/your_name/eport.html

Making e-mail links is similar to making regular hyperlinks except for the mailto command. Select your e-mail address and click the  button. In the space below Link to, type mailto:your_e-mail_address. See the example below. Remember, no space is allowed. Hit OK.

Click your mouse anywhere on the screen to deselect the text and you will see your e-mail address has become a hyperlink.

The purpose of targeted links:

When you click on a regular link, you are transported to the top of another page. You can then scroll down to see the rest of the page. But there may be times when you want to create not only a link to a page, but a link to a specific part of a page that is not necessarily the top of the page. 

Types of targeted links:

There are two types of targeted links -- same page (internal) and different page (external). Internal links (links within the same page) are illustrated by the following diagram.

External links (links to a specific part of a remote page) are illustrated by the following diagram.

Making Targeted Links:
Creating such targeted links involves two steps. You have to insert targets and then make the links. The target icon designates the destination of your link.

Step 1. Inserting targets

1. To insert the target at the location you want to link TO, place your cursor at the top of that location.
2. Press the  button or choose Insert > Target form the menu bar. You will be prompted to enter a name for the target. Choose an appropriate name and type it in the space provided.
3. Hit OK and you will see a small target icon . Target icons are visible in Composer, but unseen in the Navigator browser. You can edit a target by double-clicking on it.

Tip:
If you need to change the name of a target, you can

1. Double-click on the target icon to open the Target Properties window.
2. Delete the old name and type the new name.

Step 2. Linking to the Target

1. Select the text which you want to link FROM and hit the  button. The Character Properties window appears with a list of available targets.
2. For within-page targeted links, click on the target you want to link to (as shown in the above diagram). The link appears in the Link to box with a # sign in front of it. The # sign indicates that it is a target. Hit OK and you are done.
3. However, for remote-page targeted links, you have to choose the file (click on the Choose File button) first and then choose the target on that file.

Note:
Hitting the Enter key will automatically "inherit" the format of the previous text. For example, suppose you set the text size to 12 and the color to green and hit the Enter key, the next line will also be size 12 and green. Moreover, if you hit the Enter key right after a link, the next line will also be the same link (which is a common trouble).

• Click-and-drag over the linked text (or image) to highlight it.
• Choose Insert --> Link or click on the  button.
• In the Character Properties window, make any changes to the link. To remove a link completely, just delete the link text entirely or click on Remove Link... button.
• Hit OK.

• Place the cursor anywhere on the linked text (or image). The cursor should change to an "I" shape. 
• Click the right mouse button and choose Remove Link from the menu.

Prev

Tutorial Home

Next