HTML notes: Anchors (Links)
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
Three parts to a Link

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

  • Hypertext = go to another URL
  • Mailto: = send mail to someone
  • download a file
  • open up an image, sound, quicktime, or some other type of file

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

  • (The underlined part that we actually click on).

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

  • Open in Existing Window, replacing the current page (DEFAULT)
  • Open in a NEW window ( TARGET="_blank" will give you a NEW window)
  • Open in an assigned window

Hypertext / URLs - <A HREF>
For a RELATIVE URL: Click Here to go to next page of NOTES

Code: <a href="htmlnotes4.html">Click Here to go to next page of NOTES </a>

For an ABSOLUTE URL: Click Here to go to BGSU site

Code: <a href="">Click Here to go to BGSU site</a>

The important things to remember about your A HREF tag:

• HREF="don't forget to put your URL or page in quotes!"
• use "http://......." when using ABSOLUTE URLs!

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

There are TWO parts to an anchor:

1. Placing the Anchor -- the destination of the link that is clicked.

Code: <a name="myAnchor"></a>
• I placed an anchor at the top of this page -- anchors are invisible to the viewer.

2. Link to the anchor

Code: <A HREF="#myAnchor">Click to go to TOP of Page</A> Click to go to TOP of Page
• If the anchor is on another page, then you have to include the name of the page:
<A HREF="myPAGE.html#myAnchor">

You can put them in your own pages OR reference others' existing anchors, but you can't add an anchor to someone else's page.


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:

To open a link in a new, EMPTY window, use TARGET="_blank" in the A tag: <A HREF="" TARGET="_blank">
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>

Different types of Targets: _blank, _self, _top and _parent:

Target="_blank" causes the link to open in a totally new browser window.

Target="_self" loads the page within the same frame as the link tag.

Target="_top" within a link tag causes the new page to load in the full body of the window, which is useful if you ever want to break out of a frameset.

Target="_parent" is similar to target="_top" but will refer to the immediate parent of a frame. In more advanced frame usage there may be several nested frames and this allows more control over which frames are specified.

Targets will become more important when we get to frames.


Mailto: Link (does not work with BG Mail)

Click Here To Email Me!
Code: <a href="">Click Here To Email Me!</a>


Graphic Links make images act as BUTTONS.

<a href="" target="_blank"><img src="../images/dir.jpg"></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 BORDER=0 in the A HREF tag.

If you don't want any border, type in BORDER=0 within the <a href> tag, otherwise the image will have the default link color around it.


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 - color of links NOT yet visited
• VLINK - color of links visited
• ALINK - changes color when you click on it (Mouse down)

Code: <BODY LINK="#003300" VLINK="#006600" ALINK="#009900" > </BODY>