CIW Course Revision Site

Hyperlinks

CIW Website Design Manager Course Section 1, Part B, Chapter 4

Introduction

Without hyperlinks the World Wide Web would not be a Web. It would be a collection of disparate html pages. Hyperlinks are the glue that binds the pages, and creates the Web as we know it today.

What is a Hyperlink?

A Hyperlink is a tag that links to another file (page) either on a remote site or on the local (hosting) site, or to another area within the current page.

The Anchor Tag

Anchor tags are container tags surrounding the text or image (or both) to be used as the link. The HREF attribute is used to specify the link's hypertext reference. You can specify a fully qualified URL or a relative URL reference for any file, page or site.

An Example of an internal link might be: <a href="section1b.php">Section 1B</a>

and would appear thus: Section 1B

An example of an external link might be: <a href="http://www.apprendo-trading.co.uk">Apprendo Trading</a>

and would appear thus: Apprendo Trading

A bookmark can be set within a page such as <a name="toppage">Introduction</a> and then called from a link like <a href="#toppage">Jump to Top</a>

and would appear thus: Jump to Top

This also work with external links allowing you to link to a certain area within the target page.

Image Maps

An image map is a set of coordinates that creates a "hot spot" area on a particular image. You can create multiple image maps on an image. Each of these "hot spots" acts as a hyperlink. Image maps call either a client-side or a server-side set of coordinates to determine how to process the user's mouse action. Client-side image maps use code embedded within the HTML itself - they are easier to develop and use less bandwidth and system resources compared to the older server-side type. You can create an image map for any image format supported by a Web browser.

Microsoft Frontpage is a GUI editor that will let you create image maps by defining hot-spots for your image.

An example of an image map - click on the bear's nose to jump to the top of the page:

Teddy Bear Image map Centre Aligned
Click the Bear's nose to jump to the Top of the Page

If you view the page source you will see the image map declared with the requisite co-ordinates of the circular area around the teddy bear's nose. This is also an example of a link internal to the page, it jumps to an anchor point declared for the "Introduction" text at the top of the page.

Design by Stephen

Certified Internet Webmaster

Page last Edited: 10 Nov 2011