Macromedia Studio 8 [Electronic resources] : Training from the Source

Adding Hyperlinks

Now that you have all the pages for your site (although some are not yet completed), you can start linking them to other resources. Using hyperlinks, you can link pages to other pages within your site, to pages in other sites, to other file types (such as images or PDFs), and even to email. After all, links are what make the World Wide Web a web. I227, regardless of the type of link, all links are created with the anchor tag pairing: <a></a>. For example, to create a link on your Web page to Peachpit's Web site, use the followin220:

<a >Peachpit Press</a>

Lesson 4,

Preparing a New Site , you created a within-page link for accessibility purposes.

The outreach page will link to events.

[View full size image]

[View full size image]

When you click outside the paragraph, you'll see that the word "outreach" is underlined and in green, the color you designated as the link color when you redefined the <a> tag in the previous lesson.

You just successfully created one type of hyperlink: linking an existing page to another page on your local site. When linking to pages within your site, you use relative URLs, which are partial URLs that indicate files located in the same folder tree as the file pointing to it. If you look at the Link text field when you return to the page window, you will see that instead of a full URL (like the http://www.peachpit.com/index.asp URL you saw earlier), the link contains about. In the absence of additional information (including the http:// part and the domain), the browser looks for the file in the same folder as the source file.

The alternative to relative URLs is absolute URLs. As you have seen, absolute URLs contain the full URL, including the protocol (for example, http://), the server (for example, www.peachpit.com) and the file name (for example, index.asp). For local files, you shouldn't use absolute URLs because your local machine and the server probably have different directory structures.

You've just created an email link. When users click email links, their default email editor (such as Outlook Express) opens with the correct email address specified in the To line. These email addresses also use the <a> tag, but they place the prefix mailto: before the email address. The code Dreamweaver writes for you during this step is as follows:

<a href="mailto:info@jadevalley.com>info@jadevalley.com</a>

By going through the main menu to establish the email link, you let Dreamweaver write the code for you. The text block you selected now looks just like a link, but when clicked, it opens the default email editor with info@jadevalley.com already in the To field, rather than opening a new Web page.

[View full size image]

This is a link to the official government Web site of the State of Indiana.

This is an absolute URL, easily recognizable because it specifies the protocol and domain. Interestingly, it does not specify a file name; that is, you don't see index or home at the end of the URL. Nearly all Web sites have a default home page that appears when users send requests with only the domain name.

You've added some links, but you're not yet finished with the file. In the next task, you'll lay out the contact information inside a227 table.