CSci 220 - Lecture 8

Web Page Design

© Morris Firebaugh



I. Chapter 8: Creating Links

A. The Concept of Links

B. HTML Link Syntax

C. Bookmark Links

D. Building Links with HTML Editor

E. Building Links with Adobe GoLive

F. Building Image Maps with Adobe GoLive


II. The Concept of Links

The basic concept of an HTML Link involves a Source and Destination



Links are the very heart of hypertext!

Let's Review Some  Considerations in Link Design


III.  HTML Link Syntax

 The basic syntax of HTML Links requires the Anchor tag:  <A>...</A>





Text Links

The following HTML code:

In case anybody want to offer me a job, I've also included my <A  HREF=" Faculty/firebaugh.www/ ResumeMWF.html">Brief Resume.</A>





Graphics Links

The following HTML code:



Let's see what happens when we click the hot image!


Hybrid Links

The HTML Code:



The Color of Links


IV. Bookmark Links

Bookmark Links are how long documents are made "non-linear"

<A HREF="#Sect.III">External Links</A>

<A NAME="Sect.III"></A>






V. Building Links with HTML Editor

External Links are how we connect to the World Wide Web


Building Links with HTML Editor

  1. Type link lable (i.e., the Source)

  2. Select it by dragging

  3. Click on External Link button

  4. Fill in the file address as link box opens




V. Building Links with Adobe GoLive

External Links

1. Type the Source Name, e.g.

Go to Google Search Engine

2. Select it by dragging and click "New Link" icon in top menu bar, e.g.

Go to Google Search Engine

3. The context-sensitive Text Inspector window now opens so type in appropriate URL

Internal Links (Bookmarks)

1. Drag the anchor icon, , to the desired Target location

2. Type the Source Name, e.g., Building Links with Adobe GoLive, and select "New Link"

3. While holding down the <APPLE> key, drag the link from the Source Name to the Target

VII. Building Image Maps with Adobe GoLive

Here is how to build the recommended Client-Side Image Map

1. Create the graphical image to serve as the basis for the Image Map, e.g., Grand5.JPG

2. Go to the "Map" tag of the context-sensitive "Clickable Image Map Inspector"

3. Click on "Use Map", select the Rectangular Region button, and outline the appropriate buttons

4. Repeat the process for each "hot spot", entering the URL for the desired destinations. Job done!

5. The resulting HTML code is generated automatically for this Client-Side Image Map:

<body bgcolor="#000010">
<img height="600" width="800" src="Grand5.jpg" usemap="#Grand5b4befde9">
<map name="Grand5b4befde9">
<area href="" coords="620,104,760,147" shape="rect">
<area href="Adventures/Adventures.html" coords="477,103,616,149" shape="rect">
<area href="GeneralInfo.html" coords="331,103,472,150" shape="rect">
<area href="Presentations.html" coords="188,106,328,148" shape="rect">
<area href="Syllabi.html" coords="43,105,183,150" shape="rect">

VIII. Laboratory Assignment #4