CSci 220 - Lecture 8
Web Page Design
© Morris Firebaugh
I. Chapter 8: Creating Links
II. The Concept of Links
The basic concept of an HTML Link involves a Source and Destination
- There are four general classes of Destinations
- Relative Links [links to other files on-site]
- Bookmark Links [links to targets within long documents, e.g. TOCs]
- External Links [links to off-site URLs ]
- Link to different protocols [e-mail, FTP, PDF, TelNet, etc.]
- There are also three forms for Sources
- Text Links [either file names or complete URLs]
- Graphics Links ["hot" images which link to other images or files]
- Hybrid Links [combination of text and graphics links]
Links are the very heart of hypertext!
Let's Review Some Considerations in Link Design
- "Avoiding the Back Button Blues"
- Linking to External URLs forces the use of the Back Button
- However, linking within your own site (root directory) allows better design
- At a minimum you should design links up and down the HFS hierarchy
- Optimum design calls for logical cross-linking
- One of the best designs provides for fixed frame or banner with options always visible
- Good style considerations in path naming
- Make filenames simple and intuitive
- Limit names to <= eight characters
- Use relative paths where possible
- Use absolute ("fully qualified") URLs when in doubt
- Some more thought provoking considerations are given in The Ten Commandments of HTML
III. HTML Link Syntax
The basic syntax of HTML Links requires the Anchor tag: <A>...</A>
- Attributes of the <A>...</A> tag include:
- HREF="link destination" [filename or complete URL]
- NAME="bookmark" [destination marker within a long HTML document]
- TARGET="frame label" [specifies frame (window) link should be sent to]
- All <A> tags must have an attribute
- The destination filename or URL must be enclosed in "..."
The following HTML code:
In case anybody want to offer me a job, I've also included my <A HREF="http://www.uwp.edu/academic/ computer.science/ Faculty/firebaugh.www/ ResumeMWF.html">Brief Resume.</A>
In case anybody want to offer me a job, I've also included my Brief Resume.
- Note, the source has no spaces between the text and the tags.
- My usage in the Homework Assignments ("Click here") is considered lame - and is.
- HTML Editors eliminate much of the nitty-gritty syntax of building links.
The following HTML code:
Let's see what happens when we click the hot image!
- The thumbnail may be a reduced version or partial image of the larger image.
- The thumbnail may link to another image or to another HTML file.
- The thumbnail is identified as a link by the color-coded link border.
The HTML Code:
<A HREF="http://dragon.acadiau.ca/~giles/HTML_Editor/Documentation.html"><IMG SRC="Rick2.GIF" border="2" height="143" width="95" align="left">Rick's HTML Editor Documentation</A>
- See: both the Image and Text are "hot links"
- On early browsers,the whole rectangle defined by the image and text was hot.
The Color of Links
- The de facto standard is that links are bright blue and underlined (or framed)
- The de facto standard is that visited links are purple (or red).
- However, the user's color selection over-rides your page design.
- So don't specify "Click on green words."
IV. Bookmark Links
Bookmark Links are how long documents are made "non-linear"
- The general rule for web pages: Keep them less than 1 - 2 physical pages
- Longer documents can be kept internally linked using bookmarks
- Bookmarks consists of two elements:
- An anchor tag using the HREF attribute which serves as source
<A HREF="#Sect.III">External Links</A>
- An anchor tag using the NAME attribute which serves as destination
- The source tags are generally groups at the front of the document as a
- The targets identified by NAME need not have visible text included
- Most HTML Editors make life simple for embedding links with intuitive buttons like these:
- from NetScape Composer
- from GoLive
- from HTML Editor.
V. Building Links with HTML Editor
External Links are how we connect to the World Wide Web
- The syntax follows the basic anchor tag:
Building Links with HTML Editor
- Type link lable (i.e., the Source)
- Select it by dragging
- Click on External Link button
- Fill in the file address as link box opens
- Note: HTML Editor automatically provides the http: prefix.
V. Building Links with Adobe GoLive
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:
<img height="600" width="800" src="Grand5.jpg" usemap="#Grand5b4befde9">
<area href="mailto:email@example.com" 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">