Chapter 4: Getting Around with Hyperlinks | Microsoft Expression Web For Dummies

If Web sites were individual islands of text and graphics, they would be little more than glorified digital billboards. Hyperlinks are the waves that propel Web surfers around the globe in a few deft clicks. Links are where the action is; they're what turns a pile of disconnected Web pages into a useful, usable Web destination.

Adding Hyperlinks to Your Site: The What and the Where

A hyperlink can be anything-a word, a phrase, a single character, or an image-that acts as a springboard from somewhere on a Web page to another location. In the magical world of Harry Potter, you could compare hyperlinks to port keys: Touch an object (which, on a Web page, means that you click an object) and you're whisked off to someplace else.

Hyperlinks between pages and files in a Web site (internal hyperlinks) transform the site from a jumble of separate pages into a cohesive unit. Hyperlinks to locations outside the Web site (external hyperlinks) connect the site to the rest of the World Wide Web.

Here are the basic steps to create a hyperlink (the rest of this chapter fills in the details):

In the page, select the "thingy" you want to transform into a hyperlink.

We call this thingy the hyperlink source. The hyperlink source is the object that people click.
Connect the hyperlink source to the place you want visitors to end up after they click the hyperlink.

From now on, we call this location the hyperlink destination. A hyperlink destination can be a spot in the same page, another page or file inside the same Web site, or a different site on the World Wide Web. A hyper-link destination can also point to an e-mail address or initiate a file download, such as a PDF document.

Linking to a Web page or file

Most often, when you create a hyperlink, you already have the link's destination in mind. As long as you know that destination's location-whether it's a page inside the same Web site or a different Web site altogether-you're ready to roll.

To link to an existing page or file, follow these steps:

In the page, select the object you want to turn into a hyperlink (the hyperlink source).

Highlight a bit of text, click a picture, double-click a word-whatever. (We cover how to add a picture to a Web site in Chapter 5.)
On the Common or Standard toolbar, click the Insert Hyperlink button.

The Insert Hyperlink dialog box appears, as shown in Figure 4-1.

Figure 4-1: The Insert Hyperlink dialog box.
Click the Existing File or Web Page icon in the dialog box's Link To section (if it's not already selected) to make those options visible.

Depending on the location of the page or file to which you want the hyperlink to lead, specify the hyperlink destination:

If the destination file is part of the open Web site, in the dialog box's file list, click the file.

REMEMBER
When a page is open in Design view, two instances of that page appear in the dialog box's file list. You can click either icon in this step.

If the destination file is located on the World Wide Web, type its address (also known as its URL ) in the Address box.

REMEMBER

You need to include the full address, including the http and any slashes, periods, or other characters, as in these examples:

http://www.server.com

http://www.server.com/filename.htm

http://www.server.com/foldername/filename.htm

image from book If you can't remember the URL, in the dialog box, click the Browse the Web button (it looks like a globe with a magnifying glass on top) to launch your Web browser. Surf to your destination and switch back to Expression Web by clicking the Expression Web button on the Windows taskbar (or press Alt+Tab). The URL should appear in the Address text box.

Warning

Expression Web is a little temperamental when it comes to copying URLs. If the URL doesn't magically appear for you, you have to copy it from the Web browser and paste it into the Address text box manually.

Warning

If the page or file is elsewhere on your hard drive or network, be aware of the potential problems with this type of hyperlink. If you're sure that you want to create the link, in the dialog box, navigate to the location of the file and then click it.

The problem is that when you publish your finished Web site on a host Web server, the link no longer works because the location of the hyperlink destination file is specific to your computer's file system, not to the Web server's.

Sometimes this feature comes in handy, such as when you're creating a local Web presentation to be displayed only on your computer or local network (not on the World Wide Web). If you decide to use this option, proceed with care, and double-check the link after you publish your site, to be sure that the link works properly.

Click OK.

The dialog box closes, and a hyperlink is born.

If the hyperlink source is text, that text now displays the proud markings of a link: underlining and color.

Tip

You can still apply the same font and paragraph styles (bold and italic, for example) to text hyperlinks as you can to regular text. You can also get rid of the default underlining that appears when you transform regular text into a hyperlink. To do so, click inside the link, and then click the Underline button on the Formatting toolbar. As with regular text and paragraphs, formatting changes are applied to hyperlinks by using CSS styles. The cool thing about using styles is that you can monkey around with a single hyperlink until you get it looking the way you want. You then apply the hyperlink style to all links to give them a consistent look and behavior throughout the site. We talk about styles in detail in Chapter 7.

If the hyperlink source is a picture, the image itself looks no different than before its transformation. Trust us: The image is now a graphic hyperlink. If you want proof, pass your cursor over any text or graphic hyperlink, and the link destination appears in the lower-left corner of the Expression Web status bar.

REMEMBER

When your visitors are viewing your page in their Web browser, passing their cursor over a graphic hyperlink changes the cursor into its "This thing is clickable" shape, usually a hand icon with a pointing index finger. This cursor behavior has been in practice for so long-in Web pages, e-mail, software, and even documents-that it's probably not necessary to make graphic hyperlinks stand out in any other way (unless you really want to).

Here are a couple more tips and shortcuts for creating hyperlinks:

Open the page that you want to add a hyperlink to in Design view, and then drag an icon for a file or Web page from the Folder List task pane to the open page. (If the Folder List task pane isn't visible, choose Task Panes Folder List.) The file or Web page that you drag becomes the destination, and the destination page's filename is the hyperlink text. This is a great shortcut if you have a whole bunch of document files (such as PDFs) you want to create links to.
Type a URL or an e-mail address inside the body of your page and then press the spacebar or Enter. Expression Web automatically turns the URL or address text into a hyperlink to that location or address.

REMEMBER

The steps in this section apply to links leading to any type of file, not just to Web pages. For example, you may want to create a hyperlink that, when clicked, enables visitors to download a file. No problem. Simply add the item (in this case, the file you want to make available for downloading) into your Web site (see Chapter 1 for details on adding files), and then create a hyper-link leading to that item. When a visitor clicks that link, if the visitor's Web browser doesn't know how to open that file type, the browser automatically prompts the visitor to download the file. (Try it and see.)

Take a look at the HTML code for hyperlinks. If it's not already selected, click Split at the bottom of the editing window to turn on Split view, and find a few hyperlinks.

Here's what an external link to a Web site address outside the current Web site looks like:

 <a href="http://www.google.com">Google</a>

Notice that the full Web address, including the http://, appears inside the HTML code for a hyperlink. This is an absolute link because absolutely every bit of the Web address is included. There can be no question about its location.

In HTML, a link appears inside the tag pair <a></a>, which stands for anchor. When a Web browser sees the <a> tag, it looks for the two parts: the hyperlink destination and the hyperlink source. The href="http://www.google.com" part tells the Web browser, "This place inside the quotation marks is the hyper-link destination." Notice that the hyperlink destination is inside the opening tag angle brackets, like this: <a href="http://www.google.com">. The next part, inserted between the opening and closing tags, is the hyperlink source. In this example, clicking the text Google takes the visitor to the Web address, http://www.google.com.

Here's a link to another Web page inside the same Web site, located in the same folder as the page containing the link. The link takes the visitor to the site's home page when the word Home is clicked:

 <a href="default.htm">Home</a>

Here's an internal link to a page located in a subfolder in the same Web site:

 <a href="/bigplants/trees.htm">Trees for small gardens</a>

Choosing worthy hyperlink words

Many beginning Web designers (and even some seasoned professionals), create links that include the phrase "Click here," such as "Click here for a list of trees suitable for small yards." Pretty soon their Web pages are peppered with underlined Click here commands, which visually shout at visitors but give them little information-like obnoxious car dealers on television commercials.

Instead, choose text that describes what visitors will see when they click the hyperlink. In the preceding example, "Trees suitable for small yards" is a good phrase for the hyperlink text because it describes exactly what visitors see after clicking the link.

These links are relative links because they point to a location relative to the current page. As long as you build your Web page and folder structure and create hyperlinks between pages within Expression Web, the program keeps tabs on where everything is, even if you move things around a bit. When you publish your site to the Web, the links work as advertised (although you should always check them to make sure!).

Here's an internal link to a page inside the same Web site that uses an image rather than text as the clickable thing:

 <a href="/bigplants/trees.htm"><img alt="Japanese maple"           src="/books/1/178/1/html/2/japanesemaple.jpg" /></a>

Images have their own, special HTML tag, <img>, which opens and closes with only one set of angle brackets. So, instead of a bit of text sitting between the <a></a> hyperlink tags, you see another HTML tag, this one specifying the location and filename of an image file (in this case, japanesemaple.jpg). (We talk more about image tags in Chapter 5.)

Linking to an e-mail address

The quickest way to help your visitors get in touch with you is to include a link to your e-mail address inside each page in your site. That way, if visitors have comments (or, heaven forbid, complaints), they can click this link to pop open an e-mail window, preaddressed to you, from their Web browsers. From there, they can fire off messages in seconds.

Warning

For e-mail links to work, the visitor's browser must either have a built-in e-mail component or be able to hook up with the visitor's e-mail program. Also, nefarious "scraper" programs sometimes harvest e-mail addresses from Web pages and then use them to spam their owners. Keep this information in mind if you decide to include your e-mail address on your site.

Tip

If creating a direct e-mail link doesn't appeal to you, consider creating a form that visitors fill out with their names, e-mail addresses, and comments. Your e-mail address remains hidden from the form-filler-outers, but they still have a way of getting in touch with you. We cover creating forms in Chapter 6.

The quickest approach to creating a link to your e-mail address is to type your e-mail address in the page, followed by pressing the spacebar or the Enter key. Expression Web automatically transforms the address text into a link. Otherwise, do this:

In the page, select the hyperlink source.
Click the Insert Hyperlink button to open the Insert Hyperlink dialog box.
In the dialog box's Link To section, click the E-Mail Address icon.

The contents of the Insert Hyperlink dialog box change accordingly.
In the E-Mail Address text box, type an e-mail address.

The address should look something like this: name@address.com. When you start typing your address, Expression Web automatically tacks mailto: to the beginning. Don't fret-that's good HTML.
Optionally, in the Subject text box, type a subject line for the e-mail message generated by this link.

Not all e-mail programs and Web browsers use the subject heading you enter.
Click OK.

Tip

If you want a link to your e-mail address on every page in your site, place the mailto link in a template. We tell you how to create a page template as the basis for new pages in Chapter 2. In Chapter 11, we tell you how to place elements common to several Web pages in Dynamic Web Templates.