CO1552 – Web Application Development

Linking Pages - The Basis of the Web

Anchors

<a>…</a>In various forms, anchors provide navigation:

Link one document to another document

Identify bookmark points in a page Link to bookmark points in a page. Anchors are the basis of hyper-text.

Link from one page to another

<a href=”apage.htm”>Load a page</a>

<a href=“http://www.f1community.com/apage.htm”> Load a page</a>

In the above two examples, the text “Load a page” is displayed by the browser in blue text and underlined.

When the text is clicked-on, the named page is loaded by the browser.

Open a page You can write an anchor that will open a page in

the same or a different browser window:“Target=_blank” – web page is opened in a new browser

window._parent” – target URL will open in the parent frameset_self “– target URL will open in the same window or

frame_top” – target URL will open in the full body of the

window If you do not define the target, the new page

replaces the old within the active browser window or frame

Sometimes good and sometimes bad to use this feature!

Link using an image

<a href=“join.htm”> <img src=“joinbutton.gif” alt=”link to joining

instructions” border=”0”></a>

In the above example, an image called “joinbutton” is displayed on the browser.

When the user clicks on the image, s/he is automatically taken to the page defined in the href attribute.

Note that we have to have border=”0” within the image tag to prevent a blue border showing round it

Define a bookmark within a page

Used mainly in very long pages - often academic ones

Try to avoid very long pages…<a name=”contents_page”></a><a name=”index”></a><a name=”chapter12”></a>

The above three examples define points that are sections within a document.

NOTE: there is no indication of any text between the tags, so nothing appears on the page in the browser.

HTML editors (Dreamweaver, Frontpage, Netscape Composer) display an icon in the editor screen

Effects of bookmark anchors

The name and anchor make no difference whatsoever to the formatting of your web page

Named bookmark anchors are used solely to define a position in your web page

They are invisible except to the browser Useful for navigating a large document –

perhaps jumping from a table of contents to various sections

Jumping to anchor points

You can now link to your named anchors by using tags such as:

<a href=”#contents_list”>Go to Contents</a> a href=”#index”>Go to Index</a> <a

href=”http://www.f1community.com/index.htm#chapter12”>Go to chapter 12</a>

These will display underlined, blue text When you click on any of these links

your browser will shift automatically to the part of the document defined by a named anchor.

Back to top

In a long document, you may want to use “go to top” links from the lower parts of your pages Better than forcing the user to scroll all the way back up This might ne where your navigation or page control section

is! Insert a named anchor (eg, “top”) RIGHT at the top of

the page Link to it from the bottom of the page

You need to make a long page and then use named anchors to understand fully how to use them – have a go…..

Practise Links <a> </a> are the basis of hypertext They are the bones of the WWW

You need to practise creating links to set up pages in a pre-designed pattern

Design a simple navigation structure needing 3 or 4 pages

Create the pages (keep them simple but identifiable) and link them

This is a tutorial exercise today! Test in a browser – try Firefox and Internet

Explorer