Lesson 4
Let's learn about links.
Add a pair of anchor tags with the URL and you're done! .URL Stands for Universal Resource Locator or is just an address.
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>
Go to Yahoo!
The link is normally displayed in blue colur with an underline. When you place the cursor over the link, the cursor shape will, be changed to a pointing hand. Click on the link to go to the page, which is mentioned in the anchor tag.
An email link works the same way. We just use an email address instead of a page address with the keyword mailto:
<BODY BGCOLOR="#FFFFFF">
Send me <A HREF="mailto:info@bizhat.com">Mail!</A>
</BODY>
Send me Mail!
The word "Mail!" is the email link.
You can get rid of the underline in links if required by using style sheets. Put the following between the HEAD tags of your document. Normally a link is displayed in blue colour with an under line and is accepted universally. So avoid removing the underline in a link.
<style type="text/css">
<!--
a:link, a:visited, a:active {text-decoration: none}
-->
</style>
We can make an image a link if we want. Using the 'Go to Yahoo!' example above we simply substitute an <IMG> tag for the word Yahoo!
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.yahoo.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101></A>
</BODY>
When you click on the image chef.gif , you will be send to Yahoo.com's Home page.
Image link has a blue border and can be removed by adding BORDER=0 to the IMG tag.
It is perfectly acceptable to link to someones page(s) without asking. If you're making a page, of course include links if you think it adds value, but try to refrain from having a page that consists of nothing more than linkz and links.
When you include images on your page, remember that they contain a lot of data and therefore can be slow to load. One way to reduce the size (by size I mean Kb) is to reduce the dimensions. Cutting the length and width in half results in an image only 1/4 the size in Kb. Use Photoshop CS2 or Paintshop pro to edit images.
Another option that can be used if you want to offer a lot of imagery is to provide thumbnails that link to larger versions of the image. Click on the thumbnail to see a larger image.
Using an image editor (Photoshop) reduce the image size and save the smaller copy of the image in some other name.
Use this image file as a link to the big image.
<BODY BGCOLOR="#FFFFFF">
<A HREF="car.jpg"><IMG SRC="car-sm.gif" WIDTH=90 HEIGHT=62></A>
</BODY>
Here the car.jpg is reduced it's size and saved as car-sm.gif. The smaller file car-sm.gif will be displayed as a link (with blue border). When you click on the thumbnail, the larger image car.jpg will be displayed.
Another way to link is to link not just to a page, but to a specific part of a page. Click here to be magically transported to where we first talked about URLs. Since it would be kind of hard to have you build an example, I'll just do the best I can to explain how it's done.
First start with the spot you want people to be transported to. Pick a word and wrap it in the <A> tags.
<A>Add</A> the URL and you're done!
Next give that spot a NAME.
<A NAME="top">Add</A> the URL and you're done!
What you have done is marked that spot. Now it can be referenced.
Now start building the link.
Click <A>here</A> to be magically transported...
Add the document to be referenced...
Click <A HREF="lesson04.html">here</A> to be magically transported...
And lastly, add the anchor NAME like so
Click <A HREF="lesson04.html#top">here to be magically transported...
Click here to be magically transported...
And that's all there is to it! Not exactly brain surgery is it?.
<--BACK
NEXT-->
|
