HTML PRIMER

 by Jim Gordley
 2008-2016 HomeSpun Internet Enterprises


Adding links to your web pages brings out the wonder of the information age. The "Anchor Tag". The Anchor Tag creates links to any file available on the Internat/Intranet, as long as you know the path name i.e, Search Google. You can also create a link to a specific place on a web page using the Anchor Tag with the "id" attribute. <a href="path/filename.ext"> Visit My Web Page</a>

<a href="http://www.google.com" target="new">Search Google</a>

<a id="top"></a>

<a href="#top">Top of Page</a>

THE LINK TYPE CODE
Polaris Career Center External <a href="http://www.polaris.edu" target="new">Polaris Career Center</a>
Boy on a bridge image Internal <a href="boyonbridge.jpg" target="new">Boy on a bridge image</a>
Dire Straits - Walk of Life Internal <a href="music/walk of life.mp3" target="new">Dire Straits - Walk of Life</a>
The text for this document Internal <a href="links2.txt" target="new">The text for this document</a>
The cover page for this course Internal <a href="index.htm" target="new">The cover page for this course</a>
XTi Owners Manual Internal <a href="PDF/Canon_XTi.pdf" target="new">XTi Owners Manual</a>

CREATING LINKS

The Anchor Tag on its own is not all that useful. The programmer (you) must assign the Anchor Tag with attributes and values.

All content between the <a></a> becomes the clickable link or hot spot. The hot spot by default will be an underlined blue text where the cursour turns into the A click of the mouse on the link loads the associated file onto the users computer. Keep in mind that "all" content between the <a> and </a> becomes the hyperlink, so it is important to use the closing tag </a> where the clickable link (hot spot) should end.

IMAGES AS LINKS


click me
The link is created by enclosing the <img> tag within the <a></a> tag.

In this example a small image was used as a visual link to a larger version of the same image. Here is how it was done.
  1. <a href="images/mayra_large.jpg" target="_blank"></a>
    • Create the link to the larger image by setting the href attribute value to the URL of the image file, set the target attribute to open a new tab or window.
  2. <a href="images/mayra_large.jpg"><img src="images/myra_thm.jpg" border="0"></a>
    • Make the small image the content of the anchor tag. Setting the border attribute value to 0 will prevent a border from appearing around the small image.
COMMON ATTRIBUTES
Attribute Name Values
href *URL
target _blank
_new
_parent
_self
_top
*Both absolute and relative URL's can be used. An absolute URL is a complete address of a file. A relative URL is the directory path to a file stored locally.

ABSOLUTE URL FOR THIS PAGE:
http://www.homespunhtml.net/html_primer/links.htm

RELATIVE URL FOR THIS PAGE:
links.htm


RELATIVE URL FOR THIS IMAGE:
images/redfox_3.jpg

Links can be created that link to different areas of the same page. These links are most often refered to as book marks. A book mark is made by using the name attribute.

The bookmark that was created using the name attribute is not displayed by the browser program. This bookmark is a target that is pointed to by using the href attribute.

Creating a hyperlink to this target you would use the following code.

Pointing to a target (bookmark) on the same page.
<a href="#top">Top of page</a> Points to <a name="top"></a>

Pointing to a target (bookmark) on a different page (relative URL)
<a href="links.htm#top">Top of page</a> Points to <a name="links.htm#top"></a>

Pointing to a target (bookmark) on a different page (absolute URL)
<a href="http://www.homespunhtml.net/html_primer_2015/links.htm#top">Top of page</a>

A practical example of using bookmarks would be a glossary of terms. Glossary
A blank alphabetic link page

Top of page