|
A link is a clickable element on your page that takes you
to another page. The 'anchor' tag <A> with a
location is what's used to create a link. Here is the syntax...
<A href= "location
to go to">what the user sees< /A>
There are other attributes of course but the
HREF attribute is the most important, although not required, since
it specifies what page to link to. HREF is the URL of the page to
load. This may be a fully qualified url address such as
"http://www.someaddress.com" or a relative address such as
"../../somedirectory/somefile.htm". A note about the location, if
you want to go to a page on a different server than the
current page, you must specify the fully qualified url address.
Simply putting "www.anotheraddress.com" will result in trying to
bring up the "www.anotheraddress.com" page in the current directory,
because it will look like a relative address.
The HREF attribute could also contain a location
within the current document. Suppose you want the user to stay on
the current page when the link is clicked....maybe because you're
not done with the target page yet. Use <A href="#">. Now
suppose you want the user to go to a different location on
the current page. First, you need to mark where you want the
user to go. For that we use a named anchor with no href. <A
name="bookmark1"></A>some html. This anchor
does not make a link since there is no href. But it does
bookmark the position of 'some html' in the page. Now to create
a link to it, use <A href="#bookmark1">.
As an example, I've
marked the exercise section of this page with the "1" anchor id. Now I
can use <a href= "#1">Exercise</a> to access it.
Try this link... Exercise
The actual link content (between
<A> and </A>) may either be text or an image. Normally,
text is shown underlined and blue, but you can change this with the
SYTLE attribute. For example....
<a href="#" style="text-decoration:none;font-weight:bold;color:red">a mysterious
link</a>
Looks like this...
a mysterious link
- Images as links
- As stated previously, you can make an image link by surrounding an
image element with an anchor...
<a href="#"><img
src="someimage.gif"></a>
Just be aware that some browsers like Netscape will underline the
image in blue when you make it a link. To remove it, use border="0"
attribute on the image.
There is another way of creating an image
link, that is by using a client-side image map. This is beyond the
basics so I'll just give a short definition and leave it up to you
to learn more. Consult the html links section of
this tutorial for links to more advanced topics.
A client-side image map is an area of an image
that you specify to be clickable. You use the <MAP> tag
to specify the area and <A> with href to specify the
location the link goes to. This is useful if you have a large (in
area) image containing multiple smaller images that you want as
links to different locations. If not for image maps, you would have to cut the large image into several smaller
images to use as links.
Now for an exercise. Using the exercise from the last section, create a link
on the image. Make it point to our home page (chisholmtech.com/index.html) or
wherever you like. Just remember that if it's not on your machine you must
give the fully qualified url.
Next >> |
