HTML Links – Part 1

The link also known as the hyperlink, refers to the resourse(URL)/document on the Web: An image, web page, movie, sound, image file, etc.

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

Note: The XHTML & HTML code is the same.

Syntax:
<a href="url">Link Text</a>

Example:
<a href="http://ermsitgirl.wordpress.com/">Visit Zelna’s Blog</a>
Will display as:
Visit Zelna’s Blog

The <a> Tag
This defines the anchor, which can be used for:

1. A link to another document, by using the href attribute
2. A bookmark inside a document, by using the name attribute

The href attribute
The href attribute indicates the destination.

The target Attribute
The target attribute specifies where the linked document will be opened.

Example: This will open the page in a new window:
<a href="http://ermsitgirl.wordpress.com/" target="_blank">Visit Zelna’s Blog</a>

The target attribute values
_blank The target URL will open in a new window.
_self The target URL will open in the same frame as it was clicked.
_parent The target URL will open in the parent frameset.
_top The target URL will open in the full body of the window.
framename The name of the target frame the URL should open in.
_tab The target URL will open in a new tab page.

The name Attribute
When the name attribute is used, the <a> defines a named anchor inside the document. This is not displayed in any special way. The importance is to create a link to the named anchor.
Remember if a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs.

Named anchor Syntax
<a name="label">Content</a>

Link Syntax to a Named Anchor
<a href="#label">Content</a>

Example:

<p>
<a href="#ch3">See also Chapter 3.</a>
</p>

<h2>Chapter 1</h2>
<p>In this chapter you will learn about blah, blah, blah, …</p>

<h2>Chapter 2</h2>
<p>In this chapter you will learn about blah, blah, blah, …</p>

<h2><a name="ch3">Chapter 3</a></h2>
<p>In this chapter you will learn about blah, blah, blah, …</p>

<h2>Chapter 4</h2>
<p>In this chapter you will learn about blah, blah, blah, …</p>

Note: You can also specify it as follow, and refer to another page:
<h2><a name="http://ermsitgirl.wordpress.com/#ch3">Chapter 3</a></h2>

TryIt:

See also Chapter 3.

Chapter 1

In this chapter you will learn about blah, blah, blah, …

Chapter 2

In this chapter you will learn about blah, blah, blah, …

Chapter 3

In this chapter you will learn about blah, blah, blah, …

Chapter 4

In this chapter you will learn about blah, blah, blah, …

This was a quick introduction to links. In the next post we have at look at some more links.