HTML Scripting Lesson 3

February 23, 2003

LINKS


Parts of a Link    Working with URLs     Anchors     Targets     Get Email    Graphic Links     Changing Link Colors     ALT tag

There are three parts to a Link:

  1. Destination: What happens when we click on that link?

  2. Label: What the visitor SEES and clicks on to get there. (image, text)

  3. Target: a particular named window or frame in which the link will open

HYPERTEXT / URLS:

For a RELATIVE URL
(Label text) Go to Artc331 Lists Lesson!

The Code for this is:
<A HREF="0129lessonlists.html">(Label text) Go to Artc331 Lists Lesson!</A>

For an ABSOLUTE URL
(Go to another server!) Visit MAPQUEST.COM!

The Code for this is:
<A HREF="http://www.mapquest.com"> (Go to another server!) Visit MAPQUEST.COM!</A>

The important things to remember about your A HREF tag:


ANCHORS:

Another important attribute is an ANCHOR.

An anchor will jump directly to a specified section Within a page.

There are TWO parts to an anchor:

Go to Our Class Calendar


TARGET:

By default, a link will open in the SAME WINDOW that contains that link, replacing the contents with the new link. If you don't want people to lose your home page, have the link open in a NEW window by using the TARGET attribute:

TARGET="title" OR for a New, EMPTY window, type TARGET=_blank in the A tag:

Use in <A HREF="page.html#anchor" TARGET=_blank> OR...

If you want ALL of the links from your page to open in a new page, put the code in the HEAD:

<HEAD> <BASE TARGET=_blank> </HEAD>

Open Lesson 1 in a new window


MAILTO: LINKS

Email Me!
The Code for this is:
<A HREF="mailto:helliot@bgnet.bgsu.edu">Email Me!</A>


GRAPHIC LINKS

Graphic Links make Images act as BUTTONS.

The Code for this is:

<A HREF="destination.html"><IMG SRC="image.gif"></a>

By default, your image will have a border around it to indicate that it contains a link.
However, you can eliminate that border with the BORDER=n attribute: (number of pixels)

If you don't want any border, type in BORDER=0, otherwise the image will have the default link color around it:

The Code for this is:

<A HREF="destination.html"><IMG SRC="image.gif" BORDER=0></a>


CHANGING LINK COLORS

If you want to change the default link colors (to match your palette, for example), You need to add the following to the BODY tag: LINK="#RRGGBB" or VLINK="#RRGGBB" or ALINK= "#RRGGBB" or ="color"

The Code for the links on this page is:
<BODY ALINK="Olive" LINK="Navy" VLINK="Maroon"> </BODY>


THE ALT ATTRIBUTE

You can add the ALT attribute to the A tag to have text appear in a box when your rollover the link:

Put your mouse here

WARNING: This does NOT work in all browsers, only Internet Explorer and some versions of Netscape Navigator.


Today's Color Lecture     |    Back to Syllabus