HTML Links

The World Wide Web got its spidery name from the plentiful connections (links) that link websites together with the click of a button. What most people don't know is that HTML links are actually HTML anchors constructed using anchor tags (<a>).

<a>I am a text link!</a>

HTML - Hypertext Reference (href)

A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location. In other words, this Hypertext Reference is where users will navigate to if they do click on this link. Use the demonstration below as a reference.

<a href="http://www.tipsntracks.com/" target="_blank">tips n tracks</a>
Try it with the Editor

HTML - Link Targets

The target attribute defines how each link will open when clicked. Will each one open in a new window, or will each one open in the current browser window? As the web designer, you call the shots as to how a user navigates from page to page, so long as you know how to handle the target attribute.

Option Description
_blank Opens new page in a new browser window
_self Loads the new page in the current window
_parent Loads new page into a parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame

The two most important values are the top two, (target="_blank" and target="_self"). The _self value is generally the default. It loads each new page in the current browser window, while _blank opens up a new web browser window with each click of the text link.

HTML - Email Links

You can create a hyperlink to an email address. To do this, use the mailto attribute in your anchor tag.

Creating an email link is simple. If you want people to mail you about your site, a good way to do it is place an email link with a subject line already filled out for them.

<a href="mailto:tipsntracks@example.com/">tips n tracks Email Links </a>
Try it with the Editor

HTML - Download Links

Placing files available for download is done in exactly the same fashion as placing text links. However, things become complicated if we want to place image links for download. The best solution for images is to use a thumbnail links, which we will discuss in the next lesson.

<a href="http://www.tipsntracks.com/pics/htmlT/blanktext.zip">Text Document </a>
Try it with the Editor

HTML Links - Image as Link

It is common to use images as links:

<a href="http://www.tipsntracks.com">
<img src="htmlweb.jpeg" alt="HTML tutorial">
</a>
Try it with the Editor

HTML Links - Base href

You can specify a default URL for all links on the page to start with. You do this by placing the base tag (in conjunction with the href attribute) in the document's <head>.

<html>
<head>
<title>This is website title</title>
<base url="http://www.tipsntracks.com">
</head>
<body>
<h1>Hello World!</h1>
<p>Welcome to world of web development.</p>
<p>This is my first html web page.</p>
</body>
</html>
Try it with the Editor

You can specify a default URL for all links on the page to start with. You do this by placing the base tag (in conjunction with the href attribute) in the document's <head>.