HTML Help & Resources
Anchors and Links
Probably one of the most vital aspects of a website, is its navigation. Can visitors to your site find all the information, products, or services, you have available ?
Anchored text, images or graphics, provide a distinct method to link website content together. Search engines, especially, will define your site, based on its navigation. If your site's links are scattered, displaying inconsistently across all pages, search engines will have difficulty assigning how relevant each page is to another, and likewise, how each page is relevant to the site overall.
Most designers will outline a flowchart, showing the influence of links and where each link takes a visitor, to determine whether a website is properly concentrated or configured. In other words, you want to control where, whenever possible, a visitor to your site will ultimately go. And, you want to eliminate the need for a visitor to use their browser back button, to find where they last were or to return to a previous page.
There are various different ways, in which to create anchors, using text, labels, or images. See the example below for more information.
Anchoring Titles
The most common use for anchoring titles is when the size or length of page is large, causing visitors to scroll beyond the normal height of a page. In this instance, it may be worthwhile to insert an anchored title, that links various parts of a document on a single page. An example below.
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
... META DATA ...
</HEAD>
<BODY>
<H1><A NAME="top">Top of Page</A></H1>
...page content...
<A HREF="#top">Go to Top of this Page</A>
</BODY>
</HTML>
When a visitor clicks the anchor “Go to Top of this Page” the browser will automatically scroll to the position, on the page, where the anchored title of “top” is set.
Notice the HREF value is the name of the anchor, preceded by the # sign. This tells the browser, in the absence of a URI, the link is to be found on the current page.
Used another way, you could link an external documents' anchored title by following the example below.
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
... META DATA ...
</HEAD>
<BODY>
<A HREF="http://www.mysite.com/mypage.html#top">Go to Top of another Page</A>
</BODY>
</HTML>
When a visitor clicks the anchor “Go to Top of another Page” the browser will open the external document mypage.html, and automatically scroll to the position, on the page, where the anchored title of “top” is set.
Notice the HREF value is the name of the anchor, preceded by the URI and the # sign. This tells the browser, open the new document, and set the scrolling position to where the anchored title of “top” can be found.
Anchoring Links
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
... META DATA ...
</HEAD>
<BODY>
<A HREF="http://www.example.com/">More Information</A>
</BODY>
</HTML>
This is a very basic example of how links can be created and used. This link would be displayed according to each browser's link properties, which are set in Internet Options.
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
... META DATA ...
</HEAD>
<BODY>
<A CLASS="links" ID="mi_link" HREF="http://www.example.com/">More Information</A>
</BODY>
</HTML>
In this example we have a class defined, called links, and an id defined as mi_link. Using style, you can alter each links' appearance, with various colors, sizes, and fonts. The ID element can be used in conjuction with client-side scripting to make further adjustments.
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
... META DATA ...
</HEAD>
<BODY>
<A HREF="http://www.example.com/" TARGET="_blank">More Information</A>
</BODY>
</HTML>
In this example we have outlined an alternate target for this link to be displayed, which is _blank. Valid target references are explained later on in this reference.
Anchored Link - Properties
HREF
Can be a valid URI, an anchored title, or a valid URI with an anchored title referenced.
TARGET
In the absence of the target value being set, browsers assume it has been set to _self. Values used with target are:
_blank
Opens document in new window or tab.
_top
Opens document in current, unframed, window or tab. This is useful for breaking out of framed pages.
_self
Opens document in current frame.
*name*
Opens document in a frame named *name*.
CLASS
Style Class Defintion.
ID
Tag Identification. Useful for attributing style elements or accessing objects' properties via a client-side script.
STYLE
Tag specific style definition. Helpful for overriding classes and ids containing style references.
STYLE="color:red;"
REL
Describes the links' relationship to the web page. Valid uses are: REL=follow (default); REL=nofollow; REL=Next; REL=Prev; REL=Start.
REL="nofollow" - Tells crawlers not to follow this link and lend your site's credibility to the link.
TITLE
Use the title attribute to display an alternate visual reference to the link. The visual reference is usually in the form of a Tool Tip type of operating system dialog box.
TITLE=" Tip: Opens in new window "
ACCESSKEY
Define an easy way to access a link by defining a short-cut key. Short-cut keys are accessed by pressing a letter in combination with the ALT key.
ACCESSKEY="A" - User needs to press ALT+A.
TABINDEX
While the tab order is defined by the user's browser, you are able to set the order yourself.
TABINDEX="2" - Element relates to the second TAB stop.
Client-Side Scripting Elements
ONFOCUS
when the element receives focus.
OnFocus="javascript:document.getElementById(this).style.color='red';"
OnFocus="doSomething(event);"ONBLUR
when the element losses focus.
OnBlur="javascript:document.getElementById(this).style.color='red';"
OnBlur="doSomething(event);"ONMOUSEOVER
when the user has hovered their mouse over an element.
OnMouseOver="javascript:document.getElementById(this).style.color='red';"
OnMouseOver="doSomething(event);"ONMOUSEOUT
when the user has moved their mouse away from an element.
OnMouseOut="javascript:document.getElementById(this).style.color='red';"
OnMouseOut="doSomething(event);"ONMOUSEUP
when the user has released a mouse button over an element.
OnMouseUp="javascript:document.getElementById(this).style.color='red';"
OnMouseUp="doSomething(event);"ONMOUSEDOWN
when the user has pressed a mouse button over an element.
OnMouseDown="javascript:document.getElementById(this).style.color='red';"
OnMouseDown="doSomething(event);"ONMOUSEMOVE
while the user is moving their mouse over an element.
OnMouseMove="javascript:document.getElementById(this).style.color='red';"
OnMouseMove="doSomething(event);"ONCLICK
when the user clicks on an element.
OnClick="javascript:document.getElementById(this).style.color='red';"
OnClick="doSomething(event);"ONKEYPRESS
when the user has pressed and released a key while over an element.
OnKeyPress="javascript:document.getElementById(this).style.color='red';"
OnKeyPress="doSomething(event);"ONKEYDOWN
when the user is pressing and holding a key while over an element.
OnKeyDown="javascript:document.getElementById(this).style.color='red';"
OnKeyDown="doSomething(event);"ONKEYUP
when the user has released a key while over an element.
OnKeyUp="javascript:document.getElementById(this).style.color='red';"
OnKeyUp="doSomething(event);"
Move on to the Next Topic - Paragraphs.