Pic Post

By now you know enough to write a very nice, text-based home page, but it is the ability of the Web to provide pictures, technically called images, graphics, or sometimes icons, that has made it so popular. In this Primer, youll learn how place an image on your page and also how to turn an image into a link to another page.

The command to place an image is constant. You will use the same format every time. Now might be a good time to talk about where to store everything on your web server because youre starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now youre going to place an image.

At this point in your HTML career, its a good idea for you to place whatever images you are going to use in a subdirectory called "images". That means place the image in a directory (to be called "images") under the directory where your web pages are located (which would be the "root" directory for your site). Theres more on that coming up in Primer #7.

By replacing "image.gif" with "homepage.gif", one of my own graphics, you get this...

There are four basic formats you will find on the Web. Each is denoted to the browser by a different suffix. Remember that "name.suffix" discussion from Primer #1?

The format was invented by Compuserve and its very popular. The reason is that its a simple format. Its a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your televisions picture is created much the same way. Browsers can handle this format quite easily.

Someone always writes to me to tell me that .gif images also use compression. Yes, they do, but only when they are first created into that format. After that, no compression. JPEG, on the other hand, uses compression throughout its life to fold up smaller than it really is.

They are literally everywhere. There are plenty of sites out there that offer tons of free images. Plus, since youve been surfing, youve seen hundreds of images already. If you see something on someones page that you really like, ask to use it. Dont just take it. Thats not right and could be against copyright law. Ask. Youll probably get the image. In no time youll have a slew to use on your page. One great place to start is our own FreeDigitalPhotos.net, which has literally hundreds of thousands of images for use on your web pages.

Okay, this gets a little fancy. In Primer #4, I showed you how to create a hypertext link. What it did was create blue words on your page so someone could click on them and then jump to another site. Well, here were going to set it up so an image becomes clickable or "active." The viewer would click on the image, instead of on the hyperlinked words, to make the hypertext link. Ill make a link to my home page using the image above. Heres the format:

Look at it again. See what happened? I placed an image tag where I would normally have placed words. However, in case the image isnt visible for any reason Ive added some alternate text stating where the link goes.

Heres what you get with that format. Lay your pointer on the image, but dont click. Youll see the entire image is active:

Neat, huh? But whats with that new border around the image? Thats what happens when you activate an image. It attempts to turn blue, or whatever color the page is set to, like the wording its replacing, so it places whats known as a "border" around the image. Some people like it. I dont, and I know how to get rid of it.

To make the border disappear, we need a tiny bit of inline CSS (Cascading Style Sheets). This used to be done using the Border attribute, but thats unfortunately no longer with us...

Again, lay your pointer on the image without clicking. Youll see that it is active but doesnt carry that annoying blue border.

And that brings this to a close. The next lesson will deal almost exclusively with attributes you will use in order to manipulate your images. Youll truly impress your friends with this one.