Capt. Horatio T.P. Webb

HTML LINKS Parks -- Spring 2014 Version 1 -- 7/18/2014

The general form of a link is:

    <a href="url">text or image</a>

The object is to indicate that the text or image is a link which will bring the URL specified into the browser if clicked.

The default color of the "link text" is blue.

For example, the HTML below is a link to google:

   <a href="http://www.google.com">click here for the google web site </a>

It appears on the page as:

   click here for the google web site

The "a' in the tag means "anchor" i.e., a specific place

One can us an image instead of text. The color of the border of the image is initially blue and magenta when visited.

The HTML below:

Click this image →

<a href="http://www.bauer.uh.edu/parks><img src="captsm.gif" border="4"></a>

produces:

Click this image →

Links can have a "target" and specify where to open the link."target" has four possible values:

1. _self the default values opens the document in same window where "_self" was clicked
2. _blank opens the document in a new window or a new tab
3. _parent opens the document its the parent
4. _top Opens the document in the entire window

The link can create an email by using "mailto:

<a href="mailto:someone@someplace.com">text for mailto link</a>

Like this (Caution -- clicking the link below will attempt to open your email and place
the email address):

send email to someone@someplace.com

A "subject' value can be added by using:

mailto:email_address?subject=subject text"

There are several user events (interactions) with the anchor tag:

• onlick="some javascript code"

  Multiple javascript statements can be used:

     onclick="javascript: statement; statement; ..."

     or

     onclick="javascript: function name()"

• onmouseover="some javascript code"

  Multiple javascript statements can be used:

     onclick="javascript: statement; statement; ..."

     or

     onclick="javascript: function name()"

• onmouseout="some javascript code"

  Multiple javascript statements can be used:

     onclick="javascript: statement; statement; ..."

     or

     onclick="javascript: function name()"

Here is a gray DIV block with all three user interactions.

put your mouse in this gray box. click or leave.

your mouse action:

User event codes for the DIV:  onmouseover "javascript:document.getElementById('mouse_action').innerHTML='<center>mouseOVER<p>the gray box';"   onmouseout "javascript:document.getElementById('mouse_action').innerHTML='<center>mouseOUT<p>of the gray box';"   onclick "javascript:document.getElementById('mouse_action').innerHTML='mouse Clicked<p>in the gray box';"

The anchor tag can be used to control links to locations inside a HTML page other than the top.

All that is done is to append the web address with a "#" symbol followed by the "anchor name"

   <A href="URL#anchor_name">click here</a>

This transfers the browser to the new page (specified by the URL)

and then

The browser moves down the newpage to the location where the specified named anchor is located.

If the URL is omitted, transfer takes place inside the program where the link is located.

For example, this page has the anchor below at the top of this page:

<a name="top_of_the_links_page">

The click here to go to the top of this page

The code for the link above is:

<A href="#top_of_the_links_page">click here to go to the top of this page</a>