Home

Basics

Using Flags

More Text Flags

Placing Images

Colors

Backgrounds

Linking Pages

Tables

Getting Online

HTML Basics, Tips and Tricks
by Fox Bautista

PLACING IMAGES

The command to place an image is constant. You'lll 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. Later, to be more organized, you'll want to organize your files into different directories. But for now, just store everything together in the same place. Here's the format for placing an image:

<IMAGE SRC="filename.gif"> (or .jpg, or .bmp)

By replacing "filename.gif" with "image.gif", the filename of one of my own little pics, you get this...

Here's what happening:

1. IMG stands for "image." It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image flag.
2. SRC stands for "source." This again is an attribute, a command inside a command. It's telling the browser where to go to find the image. Again, it's best for you to place the images you want to use in the same directory as the page. This way you can call for the image by name alone. If you start to place your images all over the place, you'll have to start adding directories and sub-directories to the SRC attribute. At this point, that may be too confusing, so let's not. Just place the image in the same place as the HTML document that will call for it, and then call for the image by name alone. You can get fancy later. Right now, let's just get it to work.
3. filename.gif is the name of the image. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).

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.

1. .gif : This is pronounced "jif" or "gif" (hard "G") depending on how you want to say it. I say "gif", along with the rest of the web design people I know. This is an acronym for Graphics Interchange Format. ÊÊÊÊÊThe format was invented by Compuserve and it's very popular. The reason is that it's a simple format. It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily.
2. .jpeg or .jpg (pronounced "j-peg"): There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format. The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it folds it up and puts it away. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. Cool trick, huh? It saves on hard drive space, but also tends to require a bit of memory on your part to unfold the image. JPEG is best for photographs, to preserve their image quality.
3. .bmp (pronounced "bimp"): This is a "bitmap." You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example. Even though Internet Explorer will allow you to place an image as a BMP, I wouldn't. No other browsers will be able to display it. Plus, it isn't compressed, so it's going to take up a lot more space. Go with .gif or .jpg.

Getting Images for Your Page

Free website graphics are literally everywhere. www.clipart.com is a good place to start, and you can find many others just by running a web search (try "website graphics" as your key words). 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 you could be violating copyright law (yikes!). Just ask. You'll probably get the image. In no time, you'll have a truckload of 'em to use on your page.

Placement On The Page

First let's worry about placing the image somewhere on the page. The default is justified to the left. If you write an image flag on a page, the image will pop up right on theleft. If you want to have an image placed in the center of the page, you might be able to guess at this point that you'd use the <CENTER> and </CENTER> commands that we just covered. But how do we get the image to the right of the page? Well, how did we get text to the right? By adding the attribute ALIGN="--" to the <P> command, right? Could it be possible to do the same thing here? Why yes, it could. Here's the format:

<IMAGE SRC="image.gif" ALIGN="right"> (now look over there to the right!)

And if you want it centered, it's <IMAGE SRC="image.gif" ALIGN="center">

Changing Image Size

Computer images are made up of lots of little colored dots. They're known as picture elements, or "pixels" for short. The numbers that we're about to use in our flags refer to pixels rather than inches, or centimeters, or whatever. To change size, we have to denote how many pixels high, and how many pixels wide, we want the image to be displayed.

The pic "image.gif" is 57 pixels high and 57 pixels wide. Let's say I wanted to make it a little taller. Say... 77 by 77 pixels. I say <IMAGE SRC="image.gif" HEIGHT="77" WIDTH="77">, and I get this:

You can play around with the HEIGHT and WIDTH to make pictures as big or small as you please. Just be careful with the number values that you set, because you might end up distorting the image like this:

<IMAGE SRC="image.gif" HEIGHT="67" WIDTH="83">

Of course, if you want to be funny, you can distort the image on purpose. Oh, and did you know the WIDTH command also works on the <HR>command? The only difference is that you use percentages (%). Watch:

<HR WIDTH="40%"> gives you this:

And that's how to play around with images. See ya in the next tutorial: Colors (this one's short and sweet)