Links

Links are what connect one web page to another. Links are what make the world wide web a web! For our purposes here, there are two kinds of links:

In either case a link can be a piece of text or a graphic (rollover images and image maps are discussed separately). However, there are slightly different things to think about in each case.

Creating a Text Link

A basic text link can be created in three ways. In either case you must first select the piece of text that you wish to use as the link. Once you have selected the appropriate element you can either:

Link DialogIn the first two cases you will then see the Hyperlink dialog, as shown on the right. The selected text will be shown in the Text box.

The Link box allows you to enter the web page to which you are linking. The best way to do this depends on whether you are creating an internal link or an external link (see below).

The use of the Target option is also described below.

The Title option allows you to enter a text description of the link that will be displayed as a pop-up tooltip by most browsers. This is a useful feature, and unfortunately this seems to be the only way to access this property without going into code view and editing your HTML manually.

The Access key property lets you assign keyboard short cuts to the link, but this is not really a very useful feature as most users will not be expecting it and, unless you also provide additional instructions, they will not know what the available shortcuts are.

Each time you press the tab key in a browser, the keyboard focus moves to the next link, allowing you to visit that link by pressing return. The Tab index property lets you define the tab key ordering for the link. Again, this is only really useful to people who navigate web pages using only the keyboard.

Creating an Image Link

If you are creating a link from an image, then the first two options described above cannot be used. Instead you must use the third option which, of course, can also be used with text links.

First, you should insert and position the picture as described here. Once you have your picture in place, you can create your link directly by entering the appropriate information in the Link box. As already mentioned, the best way to do this depends on whether you are creating an internal link or an external link. These options are now discussed.

Internal Links

File DialogAn internal link is a link from one page to another within your own site or, perhaps, a link from one part of a page to another. The best way to create an internal link is by using the Browse for File icon Folder Icon beside the Link box.

This will bring up the Select File dialog as shown on the right. You should be familiar with this kind of dialog from other windows applications. Navigate your way to the file you want to link to, and select it.

Click OK. This will add a link to what every you had previously selected in the page, whether it was a piece of text or an image.

Named Anchors

Named anchors allow you to refer to a particular location within a page. They can be placed anywhere in a page by positioning the cursor at the desired location and then clicking on the Named Anchor button Anchor Button in the Common tab of the toolbar. When you click on this button you will get a simple dialog asking you to enter a name for the anchor. Note that this name is case sensitive. To refer to the anchor in a link you simply add its name following a # symbol to the link. Thus, to refer to a named anchor called MyAnchor in a page called example.html the actual link would be example.html#MyAnchor. When a link like this is clicked on, thew browser opens the page and then scrolls so that the specified anchor is as close to the top of the window as it can manage. If the link is to an anchor in the same page, then you do not specify a page, instead simply typing #MyAnchor, for example, directly into the Link box.

Note that if the named anchor does not exist within a page, then the page is simply loaded and displayed as normal.

External Links

This page contains a link to the web site of the Royal Botanic Gardens, Edinburgh.

Link to the Royal Botanic Garden web siteThe first example, in the previous paragraph, uses a piece of text as the link. But the image of the orchid to the right is also configured to provide the same link.

When you are linked to an external web site, or a specific page on an external web site, it is important to include the full web address of the intended page. For example, the link used here is:

http://www.rbge.org.uk/

Note the inclusion of the http:// prefix - this is important as it tells the browser that it is loading the page from an external web site, and not a page from your own site. To create an external link in Dreamweaver, the best technique is to load the actual page that you want to link, and copying its complete URL from the browser's address bar and pasting that into the Link box.

Link Targets

Notice the difference in behaviour of the two links given above. The text link opens the page in a new window, but the image link opens the page in the same window. This behaviour is controlled by the Target property of a link.

The text-based link has a Target property set to rbge, which means that most browsers will open a new window with that name to display the page (note that your user will not see the name, but you can continue to refer to the window by that name in your page code). If you open another link with the same Target property, then the browser should reuse the same window. In contrast, the picture-based link has no Target set. This means that the browser will open the page in the same window as the page containing the link.

If you wish a link to open in a new page every time it is clicked, then you can select the _blank value from the Target drop down.

Now, you should be made aware that there is a great deal of controversy around the use of this attribute. So much so, that it is not even valid in strict XHTML! However, there are some legitimate uses of it. I will not rehash all the arguments here, but see, for example, the extensive discussion on this blog from 2006.

Firefox behaves well with the Target attribute, openning a new Tab in the existing window, this usually makes it clear the the user what has happened. Internet Explorer opens a whole new window, even though Version 8 supoprts tabs. The Google Chrome browser behaves the same as Firefox.

I believe it is a useful feature when used appropriately. Perhaps this web site uses it a little too much...