Well ladies and gentlemen...you are on your way to a rather nice looking webpage.

So far you should be able to

• Actually create the webpage and have it open in Internet Explorer...or any browser for that matter
• Customize the title of your webpage
• Format different types of text in your webpage
• Change the page's background color or image

If you can do these things, you are ready to move onto the fun stuff.

How many reader's would like to know how to make a link? What? All of you...well let me explain how then.

To make a hyperlink (a link that will take you to another webpage), you use the "a" tag. The a tag stands for anchor (if you are curious...don't ask me why ). And this is how you use it...



That code above would produce this:

Visit bfarber.com!

In this example, I have shown you two attributes of the tag..the first one is the href attribute. Notice it equals http://bfarber.com. This means that this link will point to bfarber.com. Also notice the target attribute. This attribute tells the browser how to open the link. It can be any one of the following:

• "_blank" = will open in a new window
• "_self" = will open in same frame as the link (we will get to frames later on )
• "_parent" = will open in the parent frameset
• "_top" = will open in the same browser window as the link is contained in (as opposed to opening a new window)

Two important notes on this...
#1) If no target attribute is specified, the default is "_top".
#2) All the target commands have a "_" (underscore) before the actual command itself..it's not a mis-spelling


When you make the hyperlink using the a tag, you can see that you have the ability to alter what should be displayed as a link. For example, using the above code, if you click on "Visit bfarber.com!" it will take you to bfarber.com. If you had preferred, you could have replaced "Visit bfarber.com!" with "http://bfarber.com" and then you would click on http://bfarber.com to be taken to that site (a good idea sometimes...especially on link pages...this let's the visitor know where the link will take them ).


Wow. Now you should be able to make basic hyperlinks that will take you from one page to another. Here's a hint....this is also used to make links from one of your own webpages to another (say, for example, if you have a home page and a personal page...you could use < a href="personalpage.html" >See my personal page< /a > and that would carry you over to personalpage.html as long as it's in the same directory as your index.html).


How much more fun could this be? Well, before you answer that question, let me now show you how to display images in your webpages!

This is probably the most important aspect of a webpage, and also probably the funnest tag to learn too. To display an image in a webpage, use an img tag like so:



One important difference you will notice about this tag off the bat is THERE IS NO END TAG. This is the first tag you will learn that doesn't have a closing tag....just what you see above.

Let's take a look at the attributes presented here...

• src = this defines the source of the image (or the URL if the image is not located on your own site)
• alt = This text is displayed if you mouse-over the image, and also if the image cannot display on a page (either due to a slow connection or if graphics are turned off on the visitor's browser)
• width = defines the width of the image...not required but recommended highly
• height = defines the height of the image...once again not required, but recommended

The only tags actually considered required in the image tag are src and alt (and you can even get away without the alt tag, but it's considered wrong to do this because many people turn images off in their browsers so that the pages load faster). The width and height are not required, but are recommended for the reason that if the image times out (for example, if someone visits your page but they have a slow dialup connection and it takes a long time for the page to load), then the image will show as a box with the alt text inside it. If you don't specify width and height attributes, then the box will be a small one...a default one. If you specify the width and height, then you will have the box with the red "X" still, but it will be the same size as the image would have been. This can be very important in your webpage's formatting.

For example...you webpage may look great if the image loads. Everything lines up perfectly. However if you don't specify any size attributes, if the image doesn't load it will display just a small box, and then your formatting will be off and the page won't look as intended.


I have only given you 2 tags in this portion of the tutorial, but these 2 tags are very important and very powerful ones...so play around with them and get to know how to use them and how they work.

There are many more attributes for these tags, but most you will not need to use...and the one's that you may wish to use will be presented later on in a quick tag list. So just get to know what's been presented, and as always if you have any questions feel free to visit our HTML forum.