Web Site Building · Learning Basic HTML · Graphic Images

What this is about:

Quick, what is the HTML tag to create an anchored hyperlink on your page? Did you answer <A HREF>? Good for you, now let's move on. You are proficient at making a nice, text-based web page, but images, photography and art, are what really spice it up. You can even use graphic images as clickable hyperlinks.

Bring the Web to Life

Web 2.0 Icons

Images introduce whole new file types to your pages. So far, all we've dealt with are textual .html files. We also have to store the images in the home page folders. To learn more specifics about the different types of graphics files, take a peek at Basic Graphic Formatting elsewhere on this site. The HTML command tag to place an image on your page is img. Here is its format:

<img src="web2_icons.jpg">

IMG is merely an abbreviation for image. SRC is an attribute of the IMG tag and stands for SOURCE. It tells the browser where to find the image. For now, it's best to place the images you use in the same folder as the page files. That way you can refer to the image by name alone. If you put your graphic images all over the place, you end up having to point to sub-directories with the SRC attribute. web2_icons.jpg is the name of the image at right. Notice it follows the same naming convention as your page, a name (web2_icons), followed by dot, then the file type suffix (jpg).

Web2 Button

But, you ask, where can I get images for my web site? Well, the simple answer is make your own, and there are several tips for doing just that in the Graphics section of this site. But since you've been so nice, and stuck with us this far, we'll offer a few tips for obtaining free images from the WWW. The first idea is open your favorite search engine in your browser and key on "free graphics". There are thousands of links to excellent sites that have just what you need. Or, just click on the beautiful button at right and we'll take you to a good place to start. Please keep in mind the rules of artistic ownership and don't steal copyrighted work. Ask first, artists work very hard to develop their products, and their wishes should be respected.

Recall from the last lesson we activated links to other locations with the anchor tag. You can do the same thing with images. If you clicked on the button above to look for free graphics, you saw the technique in action. Here is the HTML code used to do it:

<a href="http://webclipart.about.com/mlibrary.htm"><img src="web2_button.jpg"></a>

The begin and end <A> anchor tag surrounds the <IMG> tag, activating that image as a hyperlink. As with text hyperlinks, observe the activation of the link as you move your mouse cursor over the image. Well, that does it for this tutorial, as always you should practice what you've learned. We'll still be here when you get back.


Proceed to HTML Basics Tutorial 6.

go to the next page

Return to HTML Basics Tutorial 4.

go to the next page