Main Page. VBA, ASP, Visual Basic 6.0, and VB.net. Visual C++, C#, C++, C. HTML and maybe javascript. Forum,Games and Jokes, other stuff. Submit a Tutorial Today!

Links: Your Friend and Images: A Pain in Your Ass.

In this part of the tutorial, I will assume that you already know how to create a basic web page from scratch, mess around with text, and you know how to do a comment (<!-to start one, and --> to end one). Since that has been addressed, let's get to learning some more HTML crap.

In this lesson, you're going to be taught how to use links. This is probably one of the most important lessons in this tutorial. Well, I'm going to stop talking about this crap, and get to the lesson.

Links

A link is easy to create. To create a link, you want to use the <A></A> tags. The <A> tag has three attributes, the common href attribute, the second most common target attribute, and the one attribute I had to look up, name.

Here's an example:
<A href="banana.html">Banana Pudding is great to eat on cold, rainy days.</A>

This is what it looks like:
Banana Pudding is great to eat on cold, rainy days.

Note: In frames, you can use the target attribute to have the link open up the page in a certain frame. This will be covered more in the frames section. Also, you can use target with a "_new" value to open the link in a new window.

There are also different ways of doing the first link, so you can travel up and down in your folders to view a web site.

If you want to go down a folder in a link, in the HREF attribute, type in "thefolderyouwanttogodownto/banana.html". If you want to go up a folder in a link put this in the HREF attribute, "../banana.html".

This is how you create an external link. There are actually four types of links, but this kind is the most popular. The other two types are internal links and external links with a link to a part of a page.

To create a bookmark in a part of your page (This is how you mark the part of your page to link to):
<A name="internal">Banana Rama!</A>

To link to that:
<A href="#internal">Go to Banana Rama!</A>

To link to an internal link on an external page (wow, that sounds confusing):
<A href="http://www.someplace.com/owow/owow.html#thenameoftheinternallink"> Banana Rama!</A>

The # in the href attribute tells the browser that the area you are linking to is internal.

To link to an e-mail address, so when you click on it you can send an email do this:
<A href="mailto:thenameoftheemail@theemailaddress.com">

That's it. There is all you need to put links on anything be it images, text, or most anything. In HTML, there are only two things that usually are used with linking, images and text. Later in the lesson, we'll put some <A></A> tags around an image and have fun with that.

Images

An image is almost like the <FONT> tag with all its attributes and that crap, but it can be mastered just as easily as its <FONT> brother can. The <IMG> tag does not have a closing tag, and has five main attributes. They are src (which means source in case you didn't know), width, height, border, and alt. Src is the source file of the image that you are using. Width how wide the image you are using is. Height is how tall the image is. Border is used when you give an image a link, so that the image won't have a blue border around it. Alt stands for Alternate Viewing Text, and it is used as tooltip text (for those of you VBers out there) or it is used to stand for the image when the viewer is using a text-based browser and can't see images (Believe it or not, some people actually use them).

To create an image:
<IMG src="banana.gif" height="30" width="30" border="0" alt="It's a picture of a banana (pic)">

You can also have the image specify its own height and width by doing this instead:
<IMG src="banana.gif" border="0" alt="It's a picture of a banana (pic)">

Now that you hopefully have the <IMG> and <A> tags down, let's combine the two together to get what a lot of newbie, beginner, HTML programmers want to do, make an image with a link on it.

To make an image that is a link:
<A href="banana.html"><IMG src="banana.gif" border="0" alt="It's a picture of a banana (pic)"></A>

Activity: Make a page with 4 images. The first image should have height and width defined. The second image should have no height or width. The third should be a link to another page but have no alternate text. The fourth should include an internal link and alternate text.

<-Previous Lesson Next Lesson ->
  

Binary Central by Anman: "http://www15.brinkster.com/anman/"