Links: [ Linking text | Relative vs. absolute links | Email links
Audio links | Anchors | Linking images | Image maps ]

Linking text The text you link should give your readers a good idea of what they will see when they click the link. Try to link words that describe the content of the page you are linking to.

Highlight the word "PrimeHost" in the paragraph to the right. Choose ElementLink. In the Link to Page field, type http://www.primehost.com Click OK. The text you selected will be linked to the location you typed. You can click the link to visit the PrimeHost Web site. Then, use the toolbar button to return to this page. If you were linking to one of your own pages, you could use the "Browse" button in the Link window to find the page you want. Another way to create links with AOLpress is to cut and paste URLs: Choose FileNew Page to open another window. In the Location field below the toolbar, type the address of a site you like to visit and press the Enter key. For example, you might type http://www.aolpress.com. In the window you opened, choose EditCopy URL of Page. This stores the page's location in your "clipboard". Move back to this page. Type the name of the site you visited in the space to the right. Highlight the text. Choose EditPaste URL to link this text to the page you visited.

Try it here:

AOL PrimeHost is a great place to host your Web site. If you are a PrimeHost customer, you can use AOLpress to publish your pages directly to your Web site.

If you want to remove a link, just highlight the linked text and choose ElementUnlink. Relative and absolute links When you create a link, the location you link to is called a URL. The syntax of URLs is very powerful. You can link to other pages on your own site or any other part of the Web. When you create a link, notice the button that says either Rel or Abs. This button lets you change the type of link. A "relative" link skips some information at the beginning of the address about where the page is located. It lets your browser add this information based on your current location. For example: "forms.htm" and "../refer/link.htm" are relative links. An "absolute" link contains all the information about where the page is. For example, "http://www.aolpress.com/press/documentation.html" is an absolute link. Here's some advice about choosing between relative and absolute links. If you're linking two pages in the same directory, it's best to use a relative link. That way, you can move the pages together without breaking links between them. If you're linking two pages stored in directories that will always be in the same relative position to each other, you can use a relative link. If you're linking to a page on another Web site, you have to use an absolute link. If you think you may need to move the page you are editing to another location someday, it's best to use an absolute link. Links to send Email You can create links to let your readers send email. Just choose ElementE-Mail Link and type the email address to which you want to let people send email. For example, this link lets you send email to info@primehost.com. Links to sound or video files You can even create links to sound and video files with AOLpress. First, you'll need sound or video files to link to and software to play the files. You'll also need to find the MIME type for the file's extension in the ToolsPreferencesExtensions/MIME window. (For example, .wav files have a MIME type of "audio/x-wav".) Then, choose an application to play sounds for that MIME type in the and ToolsPreferencesMIME/Viewer window. Highlight the words you want to link to a sound. Choose ElementLink. In the Link window, click the Browse button. In the List Files of Type field, choose "Sound" or "Video". Select the file you want to link to and click OK. Finally, click OK in the Link window. See the HTML tricks page for ways to add "background" sounds to pages. Creating anchors for links Sometimes you'll want to link to some information that isn't at the beginning of the page. Or, you might want to create a short Table of Contents that lets people move to the headings in your page quickly. To do this, you first create "anchors" at the points you want to be able to jump to.

Highlight the words "Creating links" at the top of this page and choose ElementAnchor. You'll see the Anchor window. Type top as the anchor name for jumps to the top of the page. (It's good to use anchor names you can remember.) Then, click OK. The text will turn magenta. This is just to help you find anchors in your pages. Other browsers will show anchors as normal text. Now, highlight the word "top" in the space to the right. Choose ElementLink and type top in the Append Anchor Name field. Then click OK. You can click on the link to move to the top of this page.

Try it here:

Jump to the top.

Linking images Linking an image is just as easy as linking text.

Highlight the image to the right and choose ElementLink. In the Link to Page field, type images.htm (the filename for the previous lesson on creating images). Click OK. You'll see a border around the image that tells you this is a link. Sometimes you don't want a border to show around a linked image. To hide the border: Highlight the image again. Hold down the Ctrl key (Command key on a Macintosh) while you are selecting a link to keep AOLpress from following the link. Choose ElementImage. Uncheck the Show Link Border field and click OK. The border around the linked image will disappear.

Try it here:

Creating image maps Image maps are images that link to different places depending on where you click. AOLpress lets you create two kinds of image maps: Server-side image maps rely on the server to decide which link to use when someone clicks on the map. AOLpress creates a server-side map in the format that AOLservers use. Client-side image maps let the browser decide which link to use. This makes them faster. Since client-side image maps are newer, not all browsers support them. This image at the top of the page uses a client-side image map. When you move the mouse over the image, you see the outlines of the linked areas (most browsers don't do this) and the link location is shown in the lower-left corner of the window. Usually, it's best to let AOLpress create both types of maps. Newer browser software will use the client-side map, and older browser software will use the server-side map.

Highlight the drawing of Yosemite Falls to the right and choose ElementImage Map to open the image map editor. Select the rectangle tool to the left of the image and draw a rectangle on the image. In the field at the bottom, type the Location you want this shape to link to. For example, type glossary.htm#waterfall to link to the glossary page. (Later, you can add an anchor called "waterfall" to the glossary for this link.) Try creating circles or other shapes with the drawing tools. For example, try using http://www.aolpress.com/ as the location for one of your shapes. Click the arrow tool in the upper-left. This tool allows you to select shapes and resize them or move them. As you move your cursor over the image, you see labels that tell you what location each shape is linked to. You can select a shape and change it's Location. When you've finished playing with the Image Map editor, click Close. You'll see a window that asks how you want to save the map. Accept the default names and click Save. When you put your cursor over the image, you'll see the outlines of the shapes you created. If you click on the links they take you to the location you specified.

Try it here:

The other icons in the Image Map editor are also useful. The trash can icon removes the currently selected shape. The larger graph zooms in so it is easier to work with small images. The smaller graph zooms out so you can see more of the image. (You can also resize the window to see more of the image.) The triangle icon lets you control which shape is on top when shapes overlap. For more information, see the chapter on links in the AOLpress User's Guide. In the next lesson you'll learn how to create forms so that you can get information back from your readers. Don't forget to choose FileSave to save your changes to this page.