Relative and Absolute Paths

The HTML used to place images and links into a web page consists merely of a reference or path to the image file or the page to be linked to.

An important concept to understand in web design is the difference between relative and absolute paths.

Absolute Paths – An absolute path is one that contains the full URL of the page to be linked to or the image to be included in the file. An absolute path leaves no room for dispute as to its location on the internet. An example of an absolute path is:

http://www.myweb site/section2/introduction.html

Absolute paths are most commonly used when you link to a page external to your own web site.

Relative Paths – A relative path finds its way to a particular file based on its starting point. Relative paths can therefore be shorter than absolute paths but care needs to be taken to ensure the route taken is correct.

Consider the above web site. To link from the file index.html to the file contacts.html which is in the same directory the path would simply be:

contacts.html

If however there is a file called introduction.html is in a sub-directory called section1 the path from index.html would be:

section1/introduction.html

To link from introduction.html to index.html the double dots syntax can be used. Double dots take the path up a directory in the structure. Therefore to link from introduction.html to index.html the relative path would be:

../index.html

Relative paths are most commonly used to create links between files within your own web site.

Document vs Site Root Relative Paths

There are two ways that Dreamweaver adds relative paths.

Document Relative – is the default method. The document relative path is calculated from the document which is to include the link or image.

Site Root Relative – provides the path from the site’s root folder to a document. The path begins with a forward slash (/) which stands for the site root folder. This can be a useful technique if you are working on a more complex site.
Note: Dreamweaver will calculate relative paths for you. It will also prompt you to update links if you move files around within the site that have links associated with them.

Adding Internal Links

There are a number of methods of placing links from one page to another in your web site all of which are very straight-forward.
Property Inspector and Browse to File

  • highlight some text that you want to act as the link;
  • click the Browse for File icon next to the Link Box in the Property Inspector;
  • select the document to link to.

Adding a hyperlink

  • Ensure that the Relative To option is set to document. It is this option that can be used to change to Site Root relative if required.

Property Inspector and Point to File

  • ensure that the Site Panel is open;
  • highlight some text that you want to act as the link;
  • click the Point to File icon next to the Link Box in the Property Inspector;
  • drag to draw a link line to the target file in the Site panel.

Although you could also just type the name of the file to be linked to into the Link Box in the Property Inspector this is not the recommended method. Wherever possible always use Dreamweaver to add relative links. This will reap benefits later when using site management tools.

Adding External Links

For external links you will require an absolute path. To add an external link:

  1. highlight some text that you want to act as the link;
  2. in the Link Box in the Property Inspector type the URL to link to.

It is recommended that wherever possible that you cut and paste the URL into the Link Box to avoid typing errors.

Tip: To open a link in a new browser window you can target a link. Select “_blank” from the target drop-down in the Properties Inspector. This technique is often used when linking directly to PDF files that you do not want to open up in the current window.

Adding Email Links

Email links are hyperlinks that when clicked will open the users default email programme with an email address already featured in the ‘To’ box.

  1. highlight some text that you want to act as an email link;
  2. click on the Email Link icon on the common insert bar or select Insert > Email Link;
  3. the Email Link dialog box appears. The text highlighted should appear in the Text box.
  4. add the email address to be linked to in the E-Mail box.

Both the Email Link icon on the insert bar and the Insert > Email Link options can be used without highlighting text. When that is done enter text in the Email Link dialog box and that will be the text of the link.

Alternatively email links can be coded straight into the Link Box in the Property Inspector. To type an email link into the Link Box simply type mailto: before the email address to be used ie:

mailto: thetrainingfoundry@shu.ac.uk

You can add a subject to the email by amending the email address in the link box. Append the email address as follows:

mailto: thetrainingfoundry@shu.ac.uk?subject=Web Query

The above example will create an email with the subject heading ‘Web Query’. Change the value of subject to change the subject heading in the email.

Anchor Points – Linking to Specific Points in a Document

Links can also be used to jump to a specific point in a document. This technique uses a HTML tag called Named Anchor. Named Anchors can be added to any point in a file and as long as each has a unique name there is no limit to the amount of anchors that can be added to a document.

Two parts to this. Firstly add anchors to the point you wish to link to. This is done by clicking the Anchor icon on Common Insert bar or select Insert > Named Anchor.

  • the Named Anchor dialog box appears;
  • enter a unique name for the Named Anchor (no whitespacing).
  • A Named Anchor Placeholder appears in the document next to the text indicating that a Named Anchor has been added.
  • if you click on the Named Anchor Placeholder the Properties Inspector changes to show the name of the Named Anchor;

Secondly add the link to the anchor point.

  • highlight the text or image to act as a link;
  • use the point to file to select the anchor point anchor or type a # followed by the anchor point name in the link option in the properties inspector.

The hash # is a null link – ie it links to the current document. It is important to remember that the Named Anchor’s you create will appear in the URL of any links. Therefore use sensible names avoiding special characters, spaces and capitals. When adding links to a Named Anchor you need to remember the names you used. This will become hard work if you have lots of Named Anchors in a file. One way to avoid having to remember them all is to use the Point to File icon when creating the links. When you do so drag and point at the Named Anchor Placeholder you wish to link to.

Tip 1: You can use this technique to link to a specific point in one document from other document all together. Simply append the link with the # and the name of the anchor. Alternatively open both files and use the Point to File icon across the two documents. Restore both the documents down in order to do this.

Tip 2: You could also add an anchor point at the top of a document and then add ‘Back to top’ links at various points in the text.

Leave a Comment