logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies
Romance Novels


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

HTML Fundamentals - Links and Anchors

Guest Author - Elizabeth Connick

You can use links to connect your page to other pages, or even to jump to different parts of the same page. Links give your website a dynamic quality that make it different from, say, a book or a magazine.

At its most basic level a link tag looks like this:

<a></a>

Any tag that begins with 'a' indicates a link, but there are two basic kinds of links: hyperlinks and named anchors. A hyperlink is a link that connects one web page to a different web page and will look something like this:

<a href="www.domain.com/page.html">Link text here</a>

The information within the tag tells your browser that this is a hyperlink (href) that connects to the webpage 'page.html.' The text inside the tags (Link text here) is the part of the link which a visitor actually sees, and can click on to jump to page.html. If you are linking to a page on your site from a page located in the same site, you can leave out the domain information. For example, if you were creating a link on your page located at www.domain.com/home.html and the link connected to the destination page www.domain.com/page.html, you could write the link as <a href="page.html"> and skip the domain name information. If you leave out the domain name, the browser will assume that the destination page is located on the same website as the linking page.

The named anchor (often called simply 'anchor') serves a different purpose. As you might have guessed from the name, an anchor creates an invisible flag on the page that tells your browser where to land when you set up a link that drops visitors at a specific point on a page. An anchor looks like this:

<a name="post"></a>

Typically an anchor does not hold any text between the opening and closing tags, because it's there simply to mark a spot on the page. To create a link that will allow visitors to jump to this spot on the page from a different page, you might build a hyperlink like this:

<a href="page.html#post">Visit the Post section</a>

The '#' within the link tells the browser that you are linking to a named anchor. If you wanted to create a hyperlink that would jump a visitor to a different section of the same page, it would look something like this:

<a href="#post">Visit the Post section</a>

Another important part of your hyperlinks is the 'target' attribute. This tells the browser how to display the destination page. You have three main options: 'target="_blank",' 'target="_self",' and 'target="_top".'

The '_blank' argument will open the linked page in a new window. This is particularly useful when you are linking to an external site, as the visitor can browse through the new site to their heart's content without losing their location on your site. It's also best to open documents such as PDFs in a new window, since visitors will often automatically close the document when they are finished with it.

The '_self' argument causes the linked page to replace the current page in the existing browser window. This is best for links within your site; otherwise visitors who do a lot of browsing through your site will end up with many open windows, which can be extremely annoying! This is the default argument for the 'target' attribute, so if you don't specify a target your links will always use the existing browser window.

The '_top' argument is generally used in frameset websites, and tells the browser to overwrite the entire frameset, as opposed to simply loading the new page into whichever part of the frameset holds the original link.
This site needs an editor - click to learn more!

Add HTML+Fundamentals+%2D+Links+and+Anchors to Twitter Add HTML+Fundamentals+%2D+Links+and+Anchors to Facebook Add HTML+Fundamentals+%2D+Links+and+Anchors to MySpace Add HTML+Fundamentals+%2D+Links+and+Anchors to Del.icio.us Digg HTML+Fundamentals+%2D+Links+and+Anchors Add HTML+Fundamentals+%2D+Links+and+Anchors to Yahoo My Web Add HTML+Fundamentals+%2D+Links+and+Anchors to Google Bookmarks Add HTML+Fundamentals+%2D+Links+and+Anchors to Stumbleupon Add HTML+Fundamentals+%2D+Links+and+Anchors to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor