HTML Lesson: Day #5

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

Placing An Image On Your 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 because you're starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now you're going to place an image.

At this point in your HTML career, it's a good idea for you to place whatever images you are going to use in the same place as your web pages. That means place the image right on the same floppy disc, or in the same hard drive directory, as the page that will call for it. There's more on that coming up in HTML Lesson Day #7. But for now, just store everything together in the same place.

Here's the format for placing an image:

<IMG SRC="image.gif">

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

Here's What's Happening

Image Formats

There are three basic formats you will find on the World Wide Web. Each is denoted to the browser by a different suffix. Remember that "name.suffix" discussion from BHS HTML Lesson Day #1?

Where Do I Get Images For My Page?

They are literally everywhere. The Dreamsites - Web site design services links you to many sites with images and backgrounds for free, and there are other sites out there that offer just as many. Plus, since you've been surfing, you've seen hundreds of images already. If you see something on someone's page that you really like, ask to use it. Don't just take it. That's not right and could be against copyright law. Ask. You'll probably get the image. In no time you'll have a slew to use on your page.

Activating An Image

Okay, this gets a little fancy. In HTML Lesson Day #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 we're going to set it up so an image becomes clickable or "active." The viewer would click on the image, instead of on blue words, to make the hypertext link. I'll make a link to the Buffalo High School HTML home page using the image above.

Here's the format:

<A HREF=""><IMG SRC="anikokosax.gif"></A>

Look at it again. See what happened? I placed an image flag where I would normally have placed words. Here's what you get with that format. Lay your pointer on the image, but don't click. You'll see the entire image is active:

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

To make the border disappear, you again turn to a trusty attribute, a command inside of a command.

Here's the format:

<IMG BORDER="0" SRC="anikokosax.gif">

See what I did? I added an attribute that denoted that the border should be 0. You can go the other way too if you'd like. Make it BORDER="55" if you want. It'll just make a huge border. Note that the number 0 is in quotes. It is an attribute, after all.

Here's what you get using BORDER="0":

Again, lay your pointer on the image without clicking. You'll see that it is active but doesn't carry that annoying blue border.

And that brings this to a close. Tomorrow you'll deal almost exclusively with attributes in order to manipulate your images. You'll truly impress your friends with this one.

Placing Images What's Happening Image Formats Where To Get Images Activating Images

Back Next