Linking to other pages and your own.
So, your best friend has a web page, and you know she'll kill you if you don't link to it?
Don't worry. Here's what a regular hyperlink looks like:
<A href="http://members.xoom.com/_XMCM/fanosity/december/index.html">
December through and through.. </A>
This is what it means:
- <A> </A>--Anchor tags
These tags specify the beginning and end of a hyperlink. If you don't shut off a link, your
whole page could be linked to one place, so remember the slash.
- href=
This command specifies the web address, or URL (Uniform Resource Locator). The URL is always
placed in quotes.
- December through and through..
This text is what you click on to get to the page. The default color for linked text is blue,
and the default color for a link you've been to is dark purple.
This is what it will look like:
December through and
through..
Picture links
You want to link to someone's page with a banner. Or, you want to link to somewhere with
one of those nifty graphics you snagged in the last section. It isn't as hard as you might
think. All you have to do is put a graphic tag where the text would go. Like this:
<A href="http://members.xoom.com/_XMCM/fanosity/december/index.html">
<IMG WIDTH="190" HEIGHT="85"
src="button.gif" ALT="December through and through.."> </A>
Here's what it looks like:
You can get rid of the blue border around the link by using the BORDER command:
<A href="http://members.xoom.com/_XMCM/fanosity/december/index.html">
<IMG BORDER=0 WIDTH="190" HEIGHT="85"
src="button.gif" ALT="December through and through.."> </A>
Becomes:
Or, you can make it bigger:
<A href="http://members.xoom.com/_XMCM/fanosity/december/index.html">
<IMG BORDER=10 WIDTH="190" HEIGHT="85"
src="button.gif" ALT="December through and through.."> </A>
Becomes:
Linking your own documents together.
All of this is well, and good, but what if you want to link together a bunch of documents
to make your own webpage? This is fairly simple. All you have to do is link to the name of the
document:
<A href="htmlpics.html"> Back to the graphics section </A>
Becomes:
Back to the graphics section
This will work both when you're viewing it on your computer and when you have it uploaded to a
server.
E-mail links
Now you want to put in a link so that people can send you e-mail. This one is a bit
different. Here's what it looks like:
<A href="mailto:primavera@iname.com"> Questions? Comments? </A>
The new element here is mailto:. This command opens an e-mail box when the link is selected.
Here's what it looks like:
Questions? Comments?
Try it, if you'd like.. |^)
Here's an image you can download to link here:
And here's the code:
<A href="http://punkrockpenguin.net/waste/html/">
<IMG BORDER=0 WIDTH="113" HEIGHT="75" src="html.gif"
ALT="learn HTML"> </A>
Back to the tutorial menu