7. Link Web pages and locations

Page Contents - Link Web pages and locations

Linking: Introduction
Web Site Navigation
Planning
Linking methods	Absolute Linking Relative Linking Advantage of Relative Linking
Linking to another page
Linking to an Anchor	Declare the Anchor Declare the Link
Linking from a Image	T171 Additional Info
Links have 4 States

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.

This is where you will find that creating web pages becomes realy useful. when you can easily benifit from jumping arround a Web page or Web site by the use of links. T171 students are told to make notes as Web pages, I don't know if T170 students are given this advice, but it is an excellent way of taking notes for any student.. Inserting suitable links can make these notes interesting and easy to use. The size of HTML files is a fraction of a word document file, another advantage.

John McGuinn

Up to 80% off for Students from Adobe.  Plus FREE Shipping Offer

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
    • Note T171 students have to be aware of the e-TMA system which does not allow this normal method of file house keeping. For TMAs I believe that ALL files,such as html files and image files must be kept in the same directory.
• Besides linking your pages, think of which words, headings you wish to place links to.

  Top.

Linking Methods

Absolute Linking

A reference to a file or web page that contains the full address. E.G. The home page is:
http://members.aol.com/M206ou/m206/index.htmThis 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 current of 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 subfolder of the current document’s folder, provide the name of the subfolder, 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

Open University ETMA Restrictions

T171 students must use relative linking for all links to anchors or other pages of the same site. If you are linking to another site then absolute linking must be used. Do not become confused on this matter.

ETMA System uses a flat file structure I.E there are no subfolders therefore T171 students should never use ../
or a folder name graphics/big.gif in there ETMAs because ALL there files are in the same directory (folder).

The Home page reference is
index.htm

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.

Students on the Open University course T171 should note that the only method of linking within their own site is via the relative linking method. This is due to the ETMA sytem used by the Open University.

Linking to another page

Linking to an Anchor

In Netscape Composer Anchor is called Target

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 immediatly above the sub heading above and the declaration that I used follows. The H2 element is also shown for clarity.

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

Note that Anchor names can only contain letters and numbers and must start with a letter. Spaces are not allowed. The name 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 is and is followed by the name 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 th properties window drag the Point-to-File icon to the anchor. Note a line appears while you drag
Click OK

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.

Additional Information

T170 and T171 students should note that in this site, the image is not in the same folder as this HTML file, this is shown by the
graphics/

This use of seperate folders must NOT be used in ETMAs. When doing any ETMA make sure that any graphic file(s) that you are going to use are in the same folder as the HTML file(s). Before you code them into your page, and ensure you use relative links. The code then will look like
<A href="#Top"><IMG src="top.gif" width="30" height="45" border="0"></A>

To do this in Dreamweaver or Composer see above

Links have 4 States

Links have a typical appearance, and this appeance can change depending on the link state. The 4 states are:

1. Link
2. The visited link, the document is in the browser cashe.
3. The hover state when the mouse is over the link
4. The active state, this state usually only lasts a fraction of a second imediataly following a click on the link.

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

Leisure Time - book your holiday or flights with our UK sponsors

Book a Thomson holiday	easyJet Holidays	Book a Monarch Holiday
Fly Thomas Cook flights	Jet2 Cheap flights	Monarch Flights

More Tutorials

Home page of a tutorial in programming in Smalltalk, a object-oriented programming language. This is an ideal tutorial for anybody learning Smalltalk and of particular interest to students on courses: M206 at the OU Open University, and course CSC517 at NCSU North Carolina State University

Home page of a tutorial in programming in C This is an ideal tutorial for anybody learning C programming language, and of particular interest to students on courses: T223 at the OU Open University.

Home page of tutorials4u.com

Leeds my home town

Top

Leeds Web design

Copyright © John McGuinn 2001-03

.