Graphic Images
Bringing the Web to Life

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.

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 always the same. Here is its format:

<img src="iblogo_anim.gif">

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. iblogo_anim.gif is the name of the animated logo image above. Notice it follows the same naming convention as your page, a name (iblogo_anim), followed by dot, then the file type suffix (gif).

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. However, if you are too lazy to do even that, just click on the beautiful photo at right and we'll take you to a good place to start. Please keep in mind the rules of netiquette 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 photo above to look for free graphics, you saw the technique in action. Here is the HTML code used to do it:

<a href="http://www.i-us.com/clipsrch.htm"><img src="free_graphics.gif"></a>

As with text hyperlinks, observe the activation of the link as you move your mouse cursor over the image. It is worth mentioning at this point that hyperlinked images are, by default, surrounded by a border that designates the image as an active link. In most cases, this border can be rather annoying, but can be removed. You do it with the BORDER attribute of the IMG tag. To expand on the example above, here is the code to do it:

<img src="free_graphics.gif" border="0">

Borders don't have to be set to 0, you can even make them a large number like 20 to create a framing effect around 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.

Move on to Tutorial 6, Manipulating Images

Was this site useful to you?

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said.

The hierarchical menus were created using Peter Belesis' © Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

 

 

    

Site Map

 

 

 

 

 

Last night I played a blank tape at full blast. The mime next door went nuts.