7. Link Web pages and locations

Planning

If you have not already planned out your proposed web site start by doing it now.

Plan:

• The subject of each page.
• The headings for that subject
• The sub headings for each heading
• Consider the structure for all the files that will make up your site.
  • What directories do you require,
    • for example graphic files are often kept in a graphic folder
• Besides linking your pages, think of which words, headings you wish to place links to.

   

Linking Methods

Absolute Linking

A reference to a file or web page that contains the full address. E.G. The home page is:
http://leeds-uk.com  This is a link to another Web site and therefore Absolute linking must be used. The full URL is required.

More examples are below. Linking to another page

Relative Linking

This reference does the same job as an absolute reference, but misses out most of the address. Relative linking always omits the http://www.your-sites-name.com/
part of the URL

When referencing a location on the same Web site, it is best to use Relative Linking. The file is found based on the location relative the current file

To link to another file in the same folder as the current document, simply enter the filename.

To link to a file in a sub folder of the current document’s folder, provide the name of the sub folder, then a forward slash /, and then the filename.
Example: graphicsfolder/my.gif

To link to a file in the parent folder of the current document’s folder, precede the filename with ../
(where “..” means “up one level in the folder hierarchy”).
Example: ../index.htm

More Examples are below Linking to another page

Advantage of Relative Linking

There is a very big advantage in using Relative Linking. It allows you to move or copy your site, say from your local site on your hard drive, on to your hosts server, without changing all of the links, because relative to each other they are in the same location.

Linking to another page

This link goes to a file index.htm which is in the same directory as the current page. Note that the default colours of a link are blue underlined text.

Relative Address Code
<A href="index.htm">Home</A>

Direct Address Code
<A href="http://tutorials4u.com/html/index.htm">Home</A>

Both Display as: Home

This link goes to a file index.html which is in a directory up one level ( note the ../ in the relative version) from directory html containing this page. Note that the default colours of a link are blue underlined text.

Relative Address Code
<A href="../index.html">Home tutorials4u.com</A>

Direct Address Code
<A href="http://tutorials4u.com/index.html">Home tutorials4u.com</A>

Both Display as: Home tutorials4u.com

Linking to an Anchor

Named anchors let you set markers in a document and are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which quickly take your visitor to the specified position. Also known as a target. The anchor will be displayed on the top line of the page. Each anchor on a page must have a unique name, but the same name can be used on different pages. E.g. I have an anchor named Top on the top line of each page. At regular intervals down the page are links to Top, this allows the user to return to the Top of the page, with easy access to the Page content links, or the Site links

Declare the Anchor- A element

Anchors are invisible, but they are there. There is an anchor immediately above the sub heading above and the declaration that I used follows. The H2 element is also shown for clarity.

 <a id="DeclareAnchor"></A> 
 <h2>Declare the Anchor</H2>

Note that Anchor ids:

• Can only contain letters, numbers, and the characters - and _
• They must start with a letter.
• Spaces are not allowed.
• The id I have used "DeclareAnchor" relates to subject in the line below. I could have given it any suitable name, the use of "Declare" or "Anchor" in the name is not required.
• The a element is used and is followed by the id attribute with a value "DeclareAnchor"

Composer

Dreamweaver

Place the cursor at the spot where you wish to insert the

target

anchor. Do this in Design view.

On the Menu bar click the Target button

In the Objects panel click the Anchor button .
If you did not customise the Objects panel as per:
Add Additional Buttons to the Common Category or
Create your own category.
it is in the invisibles section.

Enter a short name with no spaces. Note: Anchor names are case sensitive.

The target marker appears

If an anchor marker doesn't appear at the insertion point location, choose View > Visual Aids > Invisible Elements.

Declare the Link- A element

Sample of a Link Declare the Anchor

The code for this is:

 Sample of a Link <A href="#DeclareAnchor">Declare the Anchor</A>

The A element is used again but this time is followed by the href attribute with a value "#DeclareAnchor"

Note that a hash is placed before the name.

Composer

Dreamweaver

Select the text (or image see below) which you wish to link from

Click Link icon

Scroll to the anchor

Select the name of the target

In the properties window drag the Point-to-File icon to the anchor. Note a line appears while you drag

Click OK

Page Contents - Link Web pages and locations.

Linking from a Image

Basically the same as linking from text. The same considerations of Absolute or Relative linking must be made.
In the code in place of the text you use the SCR tag with its own link to an image file. In the following examples I will use a a text link and a corresponding image link

<A href="#Top">Top of Page.</A>

Top of Page.

<A href="#Top"><IMG src="graphics/top.gif" width="30" height="45" border="0"></A>

This image is top.gif

Note how the actual link is the same in both text and image methods.
In this case a link to an anchor, but links to external sites or to other pages on your own site are the same as a text version.

Links have 4 States

Links have a typical default appearance, being underlined and a colour depending on the link state. The 4 states are:

1. Link a normal, unvisited link. Default colour blue
2. The visited link, the document is in the browser cache. Default colour purple
3. The hover state when the mouse is over the link. No recommended default but should be different from the Link state, for user information.
4. The active state, this state usually only lasts a fraction of a second immediately following a click on the link. Default colour red

The appearance of the link can be altered in CSS for these 4 states and you will learn how to do this in a style sheet.

Lesson Introduction - Link Web pages and locations

Probably one of the best features of the web is the ability to link. Linking allows you to click on one spot on a page and be:

• Navigated to another Web page.
• Navigated to another location on the same page.
• Navigated to some location on another page.
• Navigated to another site.
• See a graphic.
• Hear a sound
• download a file.

Web Site Navigation

Web sites consist of one or more pages.

Pages contain code that allows the user to easily move (navigate) around the site or page.

There are many ways of achieving this, which will learn in this lesson.

Some of the navigation system used on this page is shown below.

The underlined word linking is an example of how a link to another page can be made.

The panel on the left of the pages on this site allow the user to navigate to different pages on the site