Lesson 5




Now Lets Get Hyper!

A HYPERLINK, or LINK for short, is a navigation tool you can build into your page which enables your visitor to click on a word, phrase, or image, and be taken to the url you put into the link.

The first thing you need is the url, or Uniform Resource Locater, of the site you are linking to. The url is the address, that thing that usually begins with http !://

Next decide which word or phrase you want to use for a link. Maybe you know of a terrific on line service you can use to transfer graphics, and you want to recommend it to your visitors. Write a little blurb of Text that fit's into your web page.

 


Once you decide which word or words to use as the link place a set of link tags around that word.

Just a Reminder remove these   !  from any code you see here after you copy it and Pasted it into your note pad or the code will not work.

A link tag looks like this:

 
<!A href="URL"> TEXT </A>

In the case of Friends Win, the url is

 
"http://www.friendswin.com/?sponsor=2022"

So the tags would look like:

 
<!A href="http://www.friendswin.com/?sponsor=2022">
Friends Win</A>




You've probably noticed that links are underlined. You don't have to do anything to make them that way, your browser will automatically underline all links. (there are ways around that, but we'll cover them in later lessons.)

How About Email?

You can place a special link in your page that, when clicked, allows your visitor to email you. Do by placing a MAILTO value in your link tag.

 
<!A href="Mailto:me@myserver.com">


 Image Tags

 
<!IMG>

To place an image on your page, use the image tag. Like the font tag, the image tag requires attributes. Unlike the font tag, IMG is a stand alone tag which does not reqire a closing tag. You place the IMG tag where you want your image to appear. This takes a little practice, but in no time at all you'll be putting graphics and pictures on your page with your eyes closed.

I mentioned that the IMG tag uses attributes. Here are two attributes you'll need to know:

 
SRC and ALIGN

SRC stands for source. This attribute needs a value, so you'll use the url of the GIF or JPG file where your image is located.

 
<!IMG src="url">

Where the above example says "url", put the address where your image is stored. Don't forget to put quotation marks around the url. Usually when I have problems with a link or image it's because I forgot to put quotation marks, or mis-typed my url.

ALIGN dictates how you want your text to line up in relation to your graphic.

 
<!IMG src="url" ALIGN=top>

In the example above, I specified that I want the text I type right after the IMG tag to line up with the top of my graphic.



<!IMG src="url" ALIGN=middle>

If you use ALIGN=middle Your first line of text will start at the middle of your image.

 


If you want your text to line up with the bottom of your image, use this:

<!IMG src="url" ALIGN=bottom>



 This places my first line of text along the bottom of the image .

Positioning Your Image

If you only use the IMG tag, your image will usually end up on the left side of your screen. But what if you want your picture of Friends win on the right side of your Homepage? The answer is to use the align attribute.

 

To place your image along the right side of the page, you can use the ALIGN attribute again.

 
<!IMG src="url" ALIGN=right>

To place the image in the center of the page, use this;

 
<!IMG src="url" ALIGN=center>

Remember I said that you dont usually need an align attribute to place your image on the left? This is because most browsers will place it there by default. Not all do though, so to be safe, write your image tag like this if you're favoring the left hand side:

 
<!IMG src="url" ALIGN=left >

These are the basic methods of positioning images on a web page. There is a way to do this with a little more precision and control, but first you need to know how to make TABLES. Fortunately for you, That's exactly what our next lesson is about.

 

But First...
Lets combine the two concepts we have discussed by using an image as a link. We do this by NESTING an image tag inside a link tag. It'll look like this:

 
<!A href="http://www.friendswin.com/?sponsor=2022">
<!IMG src="http://www.friendswin.com/images/fwlogo2.gif" Border=0>
</A>

See how the IMAGE tag is neatly place inside the LINK tag? That's called nesting. Remember to put the address of the image inside the image tag, and the address of the page you're linking to inside the link tag. If you include the BORDER=0 attribute, like I did above, you'll lose the blue border around your image.


Thats It for Lesson 5 I hope that you find this one Useful???

The next lesson we will cover Tables I am sure you will like this.

Ya All Come Back Now Ya Hear !  :)

Can you tell I just watched the Beverly Hillbillies  :)

Just to help out a bit if you want to Join this FREE site It will help you practice what we learn here.



Main Forum

Main Thread


Lesson 2

Lesson 3

Lesson 4

Lesson 5

Lesson 6

 

Daniel

Wow - You got a few extra hits to these lessons this weekend eh!

Hi Neil

Yes we Have allot more traffic now.

Neil was nice enough to go and send a message to all his Friends here at Adland Pro and let them know about the Free HTML Lessons here.

Thank You for letting everybody in your Friends List know about the Free HTML Lessons.

We all appreciate it very much.

Daniel

ps- That FREE website you have there is GREAT.

I use mine as a splash page with ALL my biz links on it for traffic exchanges.... works well!

Everyone who checks it out will be able to use ALL that you arre teaching here in your forums in a very productive way.....

Here is Daniels link again -




I encourage you ALL to go get a FREE web page and come up with creative ways (thanks to Daniel) to place all your links on YOUR Free Web page... then advertise that link - lookers will see ALL you are doing with one click!

 You may find them joining more than one program!

Thanks again Daniel!

Neil

Thanks for the info.  It is a good refresher and a person can always learn a lot of things they don't already know.  I am also going to put a page on your other banner place.

Shirley Manion