|
     
|
|
To create a link, you start with your text...<body bgcolor="#ffffff">
Go to Netscape's Homepage
</body>Now, we need to anchor the text that we want to make a
link out of. This is done using the anchor tags <a> </a>.<body bgcolor="#ffffff">
Go to <a>Netscape's Homepage</a>
</body>All that is left is to specify the URL (universal resource location),
otherwise known as a web address, that you're linking to...<body bgcolor="#ffffff">
Go to <a href="http://home.netscape.com/">Netscape's Homepage</a>
</body>And the result should look something like this....
Go to Netscape's Homepage
One quick note...if you would like to link to another page you've uploaded to the same directory it
works a little different. For example, say you've created a few html documents and uploaded them
to your "public html" directory with Touch America. You've got a main page, a family pictures page
and a funny stories page, and you want to link to family pictures and funny stories from your main
page. This is much easier than linking to an entirely different site, and here's how you would do
it, assuming the files were saved as "familypics.html" and "funnystories.html".......<body bgcolor="#ffffff">
Go to <a href="familypics.html">My Family Pictures Page</a>
Go to <a href="funnystories.html">My Funny Stories Page</a>
</body>And this would be the result...
Go to My Family Pictures Page
Go to My Funny Stories Page
An image may be used as a link, as well.
"netscape.gif"Right click on
this image and
choose Save As.
Then save it to
your new folder.
Now, all we need to do is insert the image between a couple of anchor tags.
<body bgcolor="#ffffff">
<center>
Click on the symbol to go to Netscapes Homepage!<p>
<a href="http://home.netscape.com/">
<img src="netscape.gif" height="32" width="32">
</a>
</center>
</body>Click save, then reload and you should see something like this.....
Click on the symbol to go to Netscapes Homepage! You can barely notice it here, but sometimes that blue border around a hyperlink image
can be pretty annoying. It is pretty easy to get rid of, however. Just add a border="0"
attribute to your <img src> tag.
Anchors work the same on Email addresses...
<body bgcolor="#ffffff">
Send me <a href="mailto:rich.fennell@in-tch.com">Mail!</a>
</body>Equals this......
Send me Mail!
Every now and then, you may want to link to another spot on the
same page. If I wanted to send you back up to the top of this
page, I would start with this...First, I want to pick a spot at the top of the page and anchor it. I'll start
with the first image on this page (the top banner), like so...<A><img src="banner5.jpg"></A>
Then I need to give that spot a name....
<A name="top"><img src="banner5.jpg"></A>
Now I'm ready to build the link.....
Click <A>HERE</A> to go to the top
I need to tell the browser that I'm linking to the same document....
Click <A href="links.html">HERE</A> to go to the top
Now all that's left is to tell the browser where on the page....
Click <A href="links.html#top">HERE</A> to go to the top
And here's the result.....
Click HERE to go to the top
