Lesson 3

Adding Links and Anchors

Note: Feel free to add links & anchors to any text that is highlighted in orange.

What is a URL?

Linking Text

Add Anchor

Link Image

Email Link

About URLs

Before we begin this lesson, let's review what a URL (uniform resource locator) is all about and why it has to be so long and complex.

Most URLs have four parts: the protocol, the host name, the directory, and the file name. For example: http://www.genealogytrails.com/ill/knox/taxlistl850.html

The protocol (http:) is how the document is accessed, that is, the type of protocol or program your browser will use to get the file. If the browser is using HTTP to get to the file, the protocol part is http. If the browser uses FTP, it's ftp.
The hostname (www. itrails.org) is the system on the Internet where the information is stored. You can have the same host name but have different URLs with different protocols, for example:
- http://www.genealogytrails.com/ill
- ftp://www.genealogytrails.com/ill
The directory (/knox) is the actual directory name where your files reside.
The file name (taxlistl850.html) is the HTML file for the web page.

Link Methods

In this lesson, you will be learning how to link an object (either text or image) either to another URL address or a location within the same web page. There are several different ways to create a link using VisualPage. We will briefly discuss each one of them.

In the EDIT option,, you will see an option -- Link to... Once you click on this, a new window will pop up asking you for a URL address. You can also click on the Hyperlink icon (a silver link picture) to get the same window. A quick way to add a link is to select the text and then right-click (with your mouse) to bring up the "link to" window. We'll use the EDIT option for this lesson.

Linking Text

Now let's try to add a link from a text object to a URL address:

Here is a phrase: Illinois Trails History and Genealogy ... You would like to create a link for this phrase so that visitors can go back to the main home page.

Take your mouse and position it over the "I" in "Illinois" and hold down the left mouse button to drag the cursor to the last letter... "y". Release the mouse button and go up to the EDIT option and choose "Link to...". When the new window pops up, type in "http://genealogytrails.com/ill" (without the quotes). Click "OK", it should look like this... Illinois Trails History and Genealogy.

To check to see if your link works, click on the "Open In Viewer" icon and choose Internet Explorer (the browser most people use). Click on your new link! It works! No, it doesn't work? No problem. Drag your left mouse button over the whole phrase again and right-click using your mouse. A new window will pop up. The option to choose is "Edit Link...". Change your address and test the link again.

Let's say that you want to just give the web address itself as a link...no object will be chosen. That's easy. You don't need to select any text; just click on the EDIT option and choose "Link to...". Type in the URL address and click OK. Then it would look like this... http://genealogytrails.com/ill.

Now let's add a link to a location on the same web page.

But first of all, we need to add an anchor. An anchor is a way to mark specific locations within a web page. Once an anchor is placed in a locatio, you can create a link to that spot.

Add an anchor to a web page:

Decide where you want to put the anchor on the web page and put your cursor there.

Click the Insert Anchor button in the Insert toolbar or click on the "Insert Anchor" icon. The Anchor Properties dialog box displays.

Name the anchor, and click OK. Please give your anchors descriptive names. An anchor icon appears in your text.

Example:
The beginning of this sentence has an anchor.

Now you try it.

Insert an anchor at the beginning of this line.

Take a look at the source code (Edit Source icon) to see what was generated.

Note: To change an anchor's name, right-click on the anchor and choose "Anchor Properties". If you would like to delete your anchor, right-click on it and choose the "Cut" option.

Time to create a link using the anchor you created.
Select the object (text or image) to be linked. Use this text as the object.

Click Create Link button in the Insert toolbar or right-click and select Link to. The "Link to" dialog box appears.

Select the anchor from the drop down fist box. See how the anchor name is put in the URL box with a "#" ahead of the anchor name, Click OK. Take a look at the source code (Edit Source icon) to see what was generated. To check a link using an anchor, do a CTRL-CLICK on the link and it should take you to the anchor.

If your link is wrong, another way to change it (other than highlighting the text, right-clicking the mouse and editing the link) is to move your mouse over the link and click on it. You will see the anchor name in the "Link to" box at the very bottom of your screen. Move your cursor down to this box and change the name to the correct one.

Create an email link

Create the link text that will display on a Web page. For example: user@company.com

Highlight the link text.

Click on the "Link to" field and enter the text in the following format: mailto: user@company.com

Replace user@company.com with the email address of the person being emailed.

Note: To reduce spam being sent to addresses listed on your website, we recommend editing the source code. Locate the email address and use "&#64" in place of the "@" sign. For example, user@company.com would be better as user&#64company.com. It really does work!

Linking Images

NOTE: Just as with text, you can configure images as links in your web pages. When you click a linked image, the browse window displays the page that the image is linked to.

Procedure

Once you've inserted the image onto your page, position your cursor over the image and right-click it. You will see the "link to" option. Specify a link location in the same way as you would for text. Below is an image you can practice on. You might even use the anchor you created earlier.

Tip: If you provide links at the top of your web page to many other sections on the same web page, please provide a link at the end of each section that will send the reader back to the top of the page. This will give the reader a chance to choose another link easily. If you notice, I didn't provide a "back to top" link because I wanted the reader to peruse the whole page.

Wonderful! You now know how to insert anchors and links.