Home Yellow Pages Movies Classifieds Jokes Jobs Free Hosting Videos

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.

Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>

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:

Send me <A HREF="mailto:info@bizhat.com">Mail!</A>

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} -->

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!

Go to <A HREF="http://www.yahoo.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101></A>

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.
<A HREF="car.jpg"><IMG SRC="car-sm.gif" WIDTH=90 HEIGHT=62></A>

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-->

BizHat.com   Bookmark   Astrology   Chat Room   Classifieds   Computer   Downloads   Directory   Dating   Domain Tools   Education   eCards   Finance   Forums   Freelance Work   Free Hosting   Free Mail   Gallery   Games   Guest Book   Greeting Cards   Ham Radio   Health   Home Business   Hosting Tutorials   Hosting Directory   India   Jobs   Jokes   Kerala   Matrimonial   Music   Movies   News   News Letter   Recipes   Real Estate   Search   SMS   Tourist Guide   Top 100 Sites   Vote Us   Yellow Pages   Arthunkal Church   Site Map