Now that you're ready to create your own hyperlinks, you need to understand exactly what they are and how they work. FrontPage gives you an assortment of hyperlink types to add to your site, all of which you'll learn about in this tutorial. You can link to pages or files within your site or anywhere out on the Web. You'll also learn how to send a viewer to a specific spot on a Web page and create a link that lets visitors send emails to your inbox.

In your travels around the World Wide Web, you've clicked on thousands of hyperlinks. Without hyperlinks, how would you move from page to page and site to site? How would you access your Google search results? The latest movie listings? Your American Idol contestant tracker? Hyperlinks make the Web possible.

Now that you're ready to create your own hyperlinks, you need to understand exactly what they are and how they work. FrontPage gives you an assortment of hyperlink types to add to your site, all of which you'll learn about in this tutorial. You can link to pages or files within your site or anywhere out on the Web. You'll also learn how to send a viewer to a specific spot on a Web page and create a link that lets visitors send emails to your inbox.

Sure, you know what a hyperlink is. You've clicked them to check the weather at the beach, to learn about giant squid, and to find bobble head dolls on eBay. But do you really know exactly what's happening behind the scenes when you click on a link?

A hyperlink is an HTML command that tells a browser to display a specific Web page. A link can lead to another spot on the same Web page or across the world to a different Web site.

Sounds pretty simple. But since you're about to create hyperlinks, not just click them, you'll need to learn a bit more. For example, there are different kinds of hyperlinks: absolute and relative. FrontPage helps you manage each type, but you should know how they work.

	<a href="http://www.cnn.com/">Get news
	now.</a>

3.1.1. Absolute vs. Relative URLs

Say you've just published your new Web site. It looks great out there on the Web, but wait! Your links aren't working. Your images don't show up. What happened?

A lot of new Web authors run into problems like these because no one ever told them about the difference between absolute and relative URLs. This section tells you everything you need to know.

3.1.1.1 What's a URL?

The destination of a hyperlink is called a URL (Uniform Resource Locator). URLs don't just appear within a Web page's HTML code. You find URLs all over the placeeven in magazine ads and on TV. A URL is simply an Internet address. For instance, the URLhttp://www.eatyourveggies.com/greens/lettucIndex_4.htm brings one distinct page that's out on the Web into your browser's window.

URLs are divided up into different sectionsall of which direct a browser to a particular page. Here's a look at how the above address breaks down:

• http stands for hypertext transfer protocol. A protocol is a set of communication rules that lets the browser know how to converse with the Web server. (Other protocols you might have seen are FTP [File Transfer Protocol] and email protocols like POP (Post Office Protocol) or IMAP (Internet Message Access Protocol).

• www.eatyourveggies.com specifies the domain, or Web server address, where the site is stored.

• greens is the name of a folder within that Web site.

• lettucIndex_4.htm is the name of the actual Web page that opens in the browser.

3.1.1.2 Absolute URLs

The World Wide Web is a big place. A browser uses every part of a URL to find the particular page that a hyperlink is pointing to. For example, the combination of domain name, folder, and file name in the Web address listed above is precise and unique, much like a phone number that is connected to one particular household. In either case, the location is absolute. Just as there's no other house in the world that has your phone number, every absolute URL points to one specific Web page.

3.1.1.3 Relative URLS

On the other hand, when you link to another page inside your own Web site, things work differently. That's because a browser doesn't need as much information. If a browser is on your site's home page, it already has some of the address details that it needs. It knows the first two components of the Web address: the protocol it's using, and the Web server (or domain) it's on. So, if you direct the browser to another location within the same domain, it needs only to know how to get there from where it is. That means that links within your site are described in relative terms. To use the phone number analogy: when you're inside an office, you need only to dial a person's extensionrather than her complete numberto reach her. Same goes for relative URLs: they need only to indicate the path in relation to the current page.

Relative Web addresses are pretty straightforward, but one thing that can help when you're trying to understand how they work is to think about how Web pages get stored when you're creating a Web site.

When you create a Web site, you store your files within folders (also called directories), as illustrated in Figure 3-1. You do this to help organize your pages. (Tutorial 10 tells you more about why and how maintaining this organization is helpful.) In a relative hyperlink, you're letting the browser know how to navigate through this folder structure.

Imagine that your browser is visiting the Index1.htm page of the Web site illustrated in Figure 3-1. When you click the "gloves" link on the index page, you're telling the browser to open the gloves.htm page. How does your browser get there? By reading that link's relative URL: /accessories/gloves.htm. This URL tells the browser to open up the accessories folder and display the gloveIndex_19.htm file.

Once you've checked out all the gloves, you click a link on the gloves.htm page to get back to the home page (Index1.htm). To go there, the browser needs to get out of the accessories folder and back into the root folder. In other words, the browser goes up one folder level. The link from gloves.htm to Index1.htm has this relative URL: ../Index1.htm. The ../ in front of the file name tells the browser to go up one folder level. The URL ../../Index1.htm would tell a browser to go up two folder levels and look for the Index1.htm file.

Figure 3-1. Here's a simple example of a Web site's folder structure. The clothingstore folder contains the whole Web site. This folder is the first or main level of the site, often called the root directory. The Index1.htm file (the site's home page) lives in the root directory. The gloves.htm file lives one folder level down, within the accessories folder..

3.1.1.4 What all this means to you

Here's the bottom line: you use absolute URLs to link to pages on other Web sites. You use relative URLs to link to pages and files within your own site. Actually you won't really need to manage this yourself. When you create a link within your site, FrontPage automatically formats the URL as relative without any intervention on your part. However, when you have problems with hyperlinks, you can use your knowledge of URL types to troubleshoot.

Okay, so now that you know the theory behind URLs, you're ready to actually create a linking, breathing hyperlink. The first step is to select the element on your Web page that'll serve as the clickable link. You can create a hyperlink out of text or an image. (You've got a few other options for linking from images, which you'll learn about in the next tutorial.)

Next, you'll set the destination for your hyperlink. Most often, links lead to other Web pages. But you can link to pretty much any type of fileAdobe Acrobat (PDF) files; Microsoft Word, Excel, or PowerPoint presentations; even zip files or actual programs (sometimes called executables, because they carry out a series of programmed instructions). Below, you'll learn to link to any page on the Web, to a page in your site, or to an email address.

3.2.1. Inserting a Hyperlink

To create a hyperlink:

Figure 3-2. The Insert Hyperlink dialog box includes many options for setting the destination of your hyperlink. Link to a file within your site, a URL out on the Web (by clicking the Browse the Web button, circled), or help a visitor email you by linking to your address.

Once you've opened the Insert Hyperlink dialog box, you can create any one of the types of hyperlink described in the following sections.

3.2.2. Linking to an Existing File Within your Site

After they get to your site, visitors will need to get from page to page. Follow these steps to link to any page or file within your site:

3.2.3. Linking to a Page on the World Wide Web

The World Wide Web is your oyster. You can link to any page, anywhere in the world.

There are two ways to link to a page out on the Web. The fastest is simply to type the address directly on the page you're editing. For example, type www.google.com followed by a space. FrontPage automatically creates the hyperlink and adds the http:// prefix. You can use the Insert Hyperlink dialog box to edit the link later, if need be.

Or you can use the Insert Hyperlink dialog box to create the link:

Tip: If you've visited the Web page recently, FrontPage gives you an easier way to make the link. Click the Browsed Pages link on the left side of the dialog box to display a list of Web addresses stored in your browser's history menu. Select the address you want and then click OK.

3.2.4. Linking to a New Page

As you build a site, sometimes you'll need to link to pages that you haven't created yet. FrontPage includes a handy option for handling this. Instead of forcing you to create a new page, and then return to the page you were working on to create a hyperlink, the program lets you do both simultaneously.

Tip: If you're working in Design view and want to edit a page you've linked to, just press Ctrl and click the hyperlink. FrontPage opens the destination page of the hyperlink in the document window.

3.2.5. Dragging Between Files to Create Hyperlinks

Sometimes you're too busy to bother with menus. If you're the point-and-click type, FrontPage gives you another option for creating hyperlinks. With the folder list active on the left side of your screen, just drag the file you want to link to onto the page that should contain the hyperlink. Poof! Your hyperlink appears, taking its text from the title of the file you dragged. The page title may not be exactly what you want, but you can edit this. Just right-click the link and select Hyperlink Properties. Then change the Text to Display field.

Tip: A Web page title is different from its file name. To view a page's title, open it in Design view and select File Properties. The Title field shows you the page title and lets you edit it. (See Section 10.4.3.2 for more details.)

Speaking of menus, FrontPage gives you a handy menu when you're dragging your new links around. Instead of dragging with your left mouse button depressed, drag while holding your right mouse button. A menu appears that gives you more choices, as illustrated in Figure 3-4.

Figure 3-4. This pop-up menu offers additional actions for dragged items and even lets you back out of your drag-and-drop operation with a Cancel option.

The right button drag offers the following choices:

• Create Hyperlink. Inserts a hyperlink just like dragging with the left mouse button does.

• Open File. Opens the file you're dragging so that you can edit it within the document window.

• Insert File. Inserts the contents of the file you dragged into the page that's currently open.

• Auto Thumbnail. If you've dragged a picture onto the page, this inserts the graphic as a thumbnail, or miniaturized image, that hyperlinks to the full-size version of the image

3.2.6. Linking to an Email Address

Say you want to provide site visitors with an easy way to contact you. Maybe you need to take orders, gather information, or you just haven't been getting enough email lately. Sure, you could just post your email address and invite people to write to you. But they might decide it's too much trouble to open their email program, copy and paste your address, type a subject line, and so on.

Thankfully, FrontPage provides a faster, more convenient option that makes this process almost effortless. When you create a link to an email address, what you're actually doing is giving the visitor an automated shortcut. When a visitor clicks an email hyperlink, the mailto code command in HTML launches the visitor's email program and creates a new message, already addressed to the email address you specify. All that's left for him to do is fill out the message and click Send.

To create an email link within the Insert Hyperlink dialog box:

Say you've got a hyperlink on your page that links to an article somewhere on the Web that relates to what you're discussing. If a viewer clicks the link, she might get engrossed in the article and click further links within that page. Next thing you know, she's so far away exploring other Web sites that she forgets where she was in the first place. Point is, you may not want people to leave your site entirely. Maybe it would be better for you (and your fragile, neglected ego) if your viewer's browser opens up a new window when a visitor clicks on the article link, keeping your site open at the same time.

You not only have the power to send your visitors where you wish, you can control how destination pages display on their screen. For example, you can launch a linked page in a new, separate browser window. In this section, you'll also learn how to provide viewers with additional information about a hyperlink so they'll know whether or not they want to click it. You can even draw attention to your links using color and rollover effects.

3.3.1. Open a Target Page in a New Window

Unless you specify otherwise, hyperlinks open the destination page in the same browser window as the original page containing the link. The new page replaces the first page in the window. While a viewer can always press the back button on a browser, you may prefer to keep the original page open, while also displaying the destination page in a new window.

You can set this preference by adding a Target attribute to the hyperlink. This attribute specifies where the destination document opensin this case, a new browser window. To do this, click Target Frame within the Insert Hyperlink dialog box. Then, from the list of choices, select New Window. Other selections under Target Frame let you control hyperlinks created on pages that exist within a frameset. You'll learn all about frames and what these target options mean in Tutorial 6.

3.3.2. Adding Screen Tips

The more information you share with your visitors, the better their experience is bound to be. While text often serves as a hyperlink and indicates where the link might go, it's not always so clear cut. What if the hyperlink is a graphic? In some cases, you'll want to provide more info about a link. You can do this by creating a screen tipa small yellow box of text that appears when a visitor passes his cursor over a hyperlink.

To add a screen tip to a hyperlink, open the Insert Hyperlink dialog box. Click Screen Tip, on the upper-right corner, and FrontPage presents you with the Set Hyperlink Screen Tip dialog box. Type in the text that you want to display and click OK.

Note: Screen tips may not work in older browsersthose that predate Internet Explorer and Netscape 4.0.

3.3.3. Changing Hyperlink Colors

Colors can really help your hyperlinks stand out on a page as well as provide some guidance to visitors. For instance, you can help people navigate your site, by displaying links they've already followed in a different color.

Use the Page Properties dialog box to set link colors. Start by selecting File Properties and then click the Formatting tab pictured in Figure 3-5. Within the drop-down lists for each different hyperlink state (Hyperlink, Visited Hyperlink, and so on), select the color you want.

Figure 3-5. On the right side of the Formatting tab, you can set up a color scheme for your hyperlinks. In the Hyperlink field, set the color that links should be when a visitor first opens the page. Links that a viewer has already visited display in the color you choose for Visited Hyperlink. Active Hyperlink controls the color that displays while a visitor is clicking on a link. Experiment with a few schemes and test them in your browser.

Cascading Style Sheets, which you'll learn about in Tutorial 7, offer a better way to set hyperlink colors. Using CSS, you don't need to set colors on each and every page, but you can configure this setting just once in a style sheet and save yourself a ton of work.

3.3.4. Adding Rollover Font Effects

Later in this book, you'll read about lots of ways to add motion to your Web pages. But before you even start learning about some of these more sophisticated tools, you can easily add a simple touch of visual spice by animating your hyperlinks. FrontPage gives you the ability to change the font of a hyperlink when a visitor's cursor passes over it. The effect can be as simple as a change from normal text to bold formatting. Here's what you need to do:

Note: Font rollover effects work only in browsers that support DHTML (see Tutorial 9) and aren't available on pages that use FrontPage themes.

Suppose you'd like to link to another page, but the relevant material is so far down the page that your viewers won't see it when the file first opens in their browser. Your readers could get confused when the information they're looking for doesn't seem to be there.

You can solve this problem with a bookmark. A bookmark allows you to create a hyperlink that jumps to a specific location within a page. The location can be within the same page as the hyperlink or on another page altogether.

You have to set the bookmark first. Then you can create a hyperlink to it.

Note: You can create bookmarks only on pages that you yourself can edit. This means you can't bookmark to a passage within somebody else's page out on the Web.

3.4.1. Setting Bookmarks

When a visitor clicks a link that's keyed to a bookmark, the browser displays only a portion of the Web page. You get to designate what portion by placing a bookmark at the top of the part of the page you want viewers to see (see Figure 3-6).

Figure 3-6. To link directly to this page's game scores, you'd insert a bookmark anywhere on the heading line for that section of the page. A bookmark displays as a small flag icon that's visible in FrontPage's Design view, but not in a browser.

To insert a bookmark:

Note: If your bookmark is too close to the bottom of the page, the browser may be unable to display the bookmark in the upper-left corner. Once a browser hits page bottom, it can't go any lower. This means text above your bookmark will display in the top of the browser window.

3.4.2. Linking to Bookmarks

Linking to a bookmark works the same way as creating a regular hyperlinkthe only difference is you're specifying a specific location on the page you're linking to.

3.4.2.1 Link to a bookmark within the same page

Bookmarks can help you reign in text on a very long page. For example, you can create a list of hyperlinks at the top of a page that link to bookmarked headings farther down the page.

3.4.2.2 Link to a bookmark on another page

Even if you're linking from a separate page, you can send visitors to a specific location on the destination page.

discuss this topic to forum