References

Links or URLs are what puts the hyper into hypertext. The text (or image) that you click on is called the label and the page that the browser ends up with is called the destination.

You should read Castro chapter 7 pages 118-125 to get a good overview of how to do links.

Ross Shannon's HTML Source tutorial deals with the basics of linking and has a separate page for Internal Links.

Types of Links

There are three major types of links:

  1. to a location (anchor) within the current page. This is the simplest type.
  2. to another web page on your local web site.
  3. to a page somewhere else on the web.

The URL specification covers all these types.

Every link uses the <a> tag and they always have an attribute. So:

<a name="anchor">label</a> is called an anchor
<a href="page2.htm">goto page 2</a> is a local hypertext reference
<a href="http://www.bbc.co.uk">view bbc</a> is a remote hypertext reference

IntraPage links

Open the demo page. Click on one of the links in the Index.
Observe how it jumps to a different part of the page. Now open up the acrobat file with the html codes.
Recognise the <a name> codes and observe how the <a href... > inserts a hash # in front of the anchor name.
Now you are going to insert local links into your own file.

  1. Open the list_links.htm file that you have just created.
  2. Type in the index heading (level 2)
  3. Now type in the index list without the links (we'll add them later)
  4. Click on the line before "Football positions" and type <a name=
  5. type in the anchor name "football" (it doesn't have to go around any label) and close with >
  6. Make sure that the Properties pane is visible at the bottom of the screen (select Window —> Properties, if not)
  7. Here's how we can easily link the index label with the anchor.
    1. Maximize the Dreamweaver app so that it fills the screen.
    2. Click on the Code / Design View button
    3. Highlight the "football positions" in the Index List
    4. Make sure that the anchor for football positions in the text is visible in the Design pane
    5. Now grab the point-to-file gizmo and drag it to point to the relevant anchor.
    6. Voila, the link magically appears and you can see that the href code works

Local page link

This is even easier.

  1. In the Design pane click to the bottom of the page you are editing.
  2. type in "Go to other page".
  3. highlight the text other page
  4. Make sure Properties is visible as before
  5. Now grap the pointer gizmo as before but this time point to the file in the file list that you want to link to.
  6. Display Code View and voila, the link is done hunky dory.