Design Basics
Netscape Basics
Hyperlinks
Publishing
Resources

Hyperlinks

Contents Navigation:

A hyperlink is an active part of a document. When you click a hyperlink, you can link to:

Hyperlinks access information on your own computer, and potentially on any accessible computer on the Internet. The information you access, stored in computer files, can produce words, sounds, pictures, or even action video on your own computer.

About URLs and Web Anatomy

Uniform Resource Locators or URLs are street addresses for bits of information on the Internet. Most of the time, you can avoid trying to figure out your own URLs by simply navigating to the information you want to point to with your browser, and then copying and pasting the long string of "stuff" into your link. But it's often useful to understand what a URL is all about, and why it has to be so long and complex. Also, when you begin publishing your own information on the Web, you'll want to know something about URLs so that you can tellpeople how to find your Web page.

Web Anatomy 101

Most URLs have four parts: the protocol, the host name, the directory, and the file name.

For example, let's look at the URL you would use for your web pages.

http://odin.pdx.edu/home/mmlynch/public_html/hyperlink.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 host name (odin.pdx.edu) is the system on the Internet where the information is.stored.

The directory (home/mmlynch/public_html/) the location of the file or other form of information on the host. Each slash (/) provides another path or "direction" to the address. In the example above, my files are located in the "home" directory, "mmlynch" subdirectory, and the "public_html" sub-sub-directory.

Note: It is always important to check with your Internet provider for the URL address for your files. Frequently, some of the directories are invisible to the end user. In the example above both the "home" directory and the "public_html" directories are never revealed to others who might access the pages.

Tip for Home Internet Providers: Many Internet providers use the format of a tilde and your user name to indicate the directory where your web page information is stored, such as~mmlynch or ~maggie.

Example: http://www.chatlink.com/~mmlynch/index.html

The file name is the .HTML or .HTM file that is the actual name for the Web page.

Tip: If you use the file name index.html as your primary file, then users can access your web page without typing the file name. If you use any other file name (e.g., maggie.html), then users must type the file name in order to access your web page.


Creating Links

When you link to a local document, you're linking to a document on your computer or web server; documents you reference don't have to be in the same directory (it's a good idea though). Linking to a remote document means you're linking to somewhere on the Internet rather than on your local computer.

Tip: To create a link to a page displayed in the browser, drag the link icon from the browse window (left of the location box) to an edit window.

You can create links in your documents by dragging them from other windows and then dropping them into the edit window. For example, you can drag a link from a browse, bookmark, mail, or news window and drop it on a document in the editor window. You can also create links using the Link edit window.Choose Insert |Link or click the Link button on the Character Properties toolbar.

Link Source displays the selected text you want to use to create a link. To change this text, select the text in your document and retype. To see the change reflected in the dialog, select the text before opening the dialog.Note: If you don't have any text selected when inserting a new link, the title of the document to which you're linking appears in your document as the link text.

Type the local file name or remote URL to link to the selected text. Click Browse File to select a local file.Linking Images

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

    Insert an image on your Web page.Right-click your mouse on the image for which you want to create a link.Choose Image Properties.Click the Link tab.Specify a link location (refer to instructions in "Creating Links" section).Choose File |Browse Document and then, click on the image to go to the linked page.
Linking to Specific Places in Your Document

If you want to link to a specific place within a document rather than just linking to the document itself, you create a target (also called named target or anchor in HTML). You can do this by inserting a target in one document,and then creating a link in the same document, or another document that points to that target. When you click on the link in the browser, the browser opens the document containing the target and scrolls to the target location.

    Place the cursor at the beginning of a line for which you want to create a target, or select some text at the beginning of a line.Choose Insert |Target or click the Target button on the Character Properties toolbar.Type a name for the target in the edit box; it can be up to 30 characters long. This name will appear in the target list of the Link Properties dialog. If you selected some text in step one, this box will already contain a default target name.Click OK. A special Target icon appears in your document (only visible in edit mode) to mark the location of the link.Follow steps 1, 3, and 4 for inserting a link in the "Creating Links" section.Choose File |Browse Document and click the link you just created to go to the location marked by the selected target.
Relative and Absolute Links

When you specify the path name of a file to be linked to as a single file name, your web browser looks for the listed file in the current directory (same directory as the current file), even if it is looking at that file over a network. This is a relative path name. Relative path names point to the document you want to link to by describing its relationship to the current document.

Absolute path names point to the document by starting at the top level of your directory hierarchy and working down through all the subdirectories to reach the file. You should use absolute path names when linking from your page to a page on another Web site (i.e., the Portland State University site or the Space Age Bicycle site).

Generally, when linking together your own documents, you'll want to use relative path names. If you specify your links as absolute path names and then move your files elsewhere on the disk, or rename a directory or a disk listed in that absolute path, then your links to these files might not work.Absolute Path Names or URLs

The linking you see in most pages to other sites is done via an absolute path name or URL. For example, you can link to Netscape, or the White House, or to your favorite clip art servers.When you link to something on the Internet, you need to provide the entire URL address, including the protocol (e.g., http).

Linking to an E-Mail Address

As mentioned previously, it is important to provide users a way to contact you. You can do this by linking to e-mail. You can also link to other people’s e-mail from within your page. In the Link To dialogue box, use the following format: mailto:mmlynch@pdx.edu where the full e-mail address follows the mailto: designator.

Note: The "mailto" designator replaces the "http" as the protocol. This tells the users browser to open their email program and insert the specified email address.

Copyright 2001, M.McVay-Lynch, Portland State University

Last updated: April 20,2001