All about Links - Hyperlinks, Buttons, and Bookmarks
Article ID: KB101483
Text Hyperlinks
Hyperlinks to different pages, or even different web sites, are defined with
the A element and HREF attribute. The HREF attribute points
to the
URL of where
you want the link to go. The A tags surround the linked text or content
that you want to display on the page.
<a href="http://www.pixelmill.net">Click here to go to PixelMill!</a>
The code above would display in a browser like this:
Click here to go to PixelMill!
Link Buttons... Image Hyperlinks
The A tags can also surround the IMG element so that you have
an image hyperlink. Here's an example:
<a href="http://www.pixelmill.net"><img src="/images/logo.gif"></a>
This code would make the PixelMill logo into a hyperlink, like this:
(Why is there a colored border around the image? Because we didn't specify
the border of the image to be "0.")
If you make different button graphics in an image editor, you can create more
interesting links than with just plain text. But remember to balance your "cool"
page elements with your page loading time! The more graphics you have, the
longer your page will take to load.
Bookmarks
Bookmarks (as they are commonly called) are links that jump the user down to
a different part of the document. They are created in part by using the NAME
attribute. When you use the NAME attribute with the A tag, you
define a place that a hyperlink can jump to. To create a bookmark, you'll
have two A tags on your page. Here's an example:
<p><a href="#bookmark-one">Link to jump down to bookmark</a></p>
<p>This is all the other text on the page in between the bookmark link and the
actual bookmark...</p>
...
<p><a name="bookmark-one">This is where the bookmark is.</a></p>
Notice that the bookmark link URL starts with the "#" symbol. This tells the
browser to look for a bookmark.
Note: If you're on a different page and you want to jump to a bookmark
on this page, make a link like this:
<a href="pageurl.htm#bookmark-one">Link text here</a>
Attributes
Below are some of the attributes of the A element.
| A - attributes |
href
="[url]" |
The "href" attribute should
point to the URL that you want to go to. The URL can be a web page on
your site, a web page on a different site, or even some other kind of
file like an image or something to download! |
name
="[uniqueID]" |
The "name" attribute defines
a place where you can hyperlink to, as with a bookmark. The
bookmark name should be unique from other names. |
title
="[titletext]" |
You can use the "title"
attribute to define a title for your link. This is often used to make a
site more accessible so that you can more clearly describe the link. |
target
="_blank"
="_parent"
="_self"
="_top"
="[window or frame name]" |
The "target" attribute is
usually used with frames, so we won't discuss it too much here. However,
if you want a link to open in a new browser window, you can use
target="_blank" in the A tag. This method gives you a brand new browser
window. There is a different method using JavaScript to open a "pop-up
window" that we'll discuss later. |
Putting it all together...
Here's a sample page using this code below:
<p><a href="#bottom">This link goes to a bookmark at the bottom of the
page.</a></p>
<p><a href="http://www.microsoft.com" target="_blank">This link goes to
Microsoft's web site, in a new browser window.</a></p>
<p><a href="http://www.pixelmill.net/support"><img src="/images/prodcircle-support.gif"
border="0"></a><br>
The image above links to PixelMill Support.</p>
<p>(Hit your backspace button to return to this page.)</p>
<p><a href="http://www.pixelmill.net" title="Your Title Text
Here!">Mouse over this link and hold. In Internet Explorer, a tooltip will pop
up with the title of the link.</a></p>
<p><br><br><br><br> </p>
<p><a name="bottom"></a>There is a bookmark here called "bottom"</p>
See live example!
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1065/kb101483.htm
permalink to this article:
http://www.pixelmill.com/support/kb101483.htm
Back to top