HTML Basic Tutorial 6

"There is no future in any job. The future lies in the man or woman who holds the job!"

Design by Serenity's Graphics and My Arts Desire

Basic HTML: Tutorial #6

Manipulating Images -- Just as I thought a tutorial, Tutorial #3, was required explaining how to manipulate text, I also think one is needed on how to manipulate images. Believe it or not, manipulating images is easier than manipulating text. So, here we go.

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 Tag on a page, the image will pop up hard left.

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 described in Tutorial #3.

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 we do the same thing here? Why yes, it could.

Here's the format:

<IMG ALIGN="right" SRC="image.gif">

Here's what you get using "thankyou.gif" in place of "image.gif":

Aligning Text With Images

Images don't always stand alone. You will often want text alongside them. Here you will ALIGN text along the top, the middle, or the bottom. Again, you'll use the ALIGN="--" attribute with one of these three: "top", "middle", or "bottom".

Here are the formats:

<IMG ALIGN="top" SRC="../colors/thankyou.gif"> text text text

<IMG ALIGN="middle" SRC="../colors/thankyou.gif"> text text text

<IMG ALIGN="bottom" SRC="../colors/thankyou.gif"> text text text

And here's what it all looks like:

This is text ALIGN="top"

This is text ALIGN="middle"

This is text ALIGN="bottom"

You may notice that using the top, middle, and bottom attributes only allows for one line of text and then the rest jumps down below the image.

Here's the trick to solving that. Don't use the top, middle, or bottom attribute unless you only want one line of text. If you want text to wrap around the image, use ALIGN="left" and ALIGN="right".

Even if the image is already to the left, use the ALIGN="left" attribute anyway. It allows the text to wrap around the image fully. Try it, it's quite a clever little deal.

Two At Once?

But what if you want only one line of text to come out of the middle of the image, and you want the image aligned to the right? Can you use two ALIGN="--" attributes in the same image? No.

You set the text coming out of the middle using the ALIGN="middle" attribute in the IMG Tag. Then you set the image and its text to the right by surrounding the two items with the <P ALIGN="right"> and </P> commands.

Are you starting to see how a Tag does only one thing? If you want two effects placed on one item, you're going to have to use two different sets of Tags.

Changing Image Size

To begin this discussion, let me state that images on a computer are not like photographs. Computer images are made up of a lot of little colored dots. They're known as picture elements or "pixels" for short. So, just remember that during this part of the Tutorial, numbers refer to pixels rather than inches, or centimeters, or whatever. When I say pixels, I'm talking little colored dots.

Every image is made up of pixels. The more pixels per inch the image has the better, and more detailed, the image will appear. Of course, that also means the image will take up a whole lot more bytes on your hard drive. You're going to find that most images on the Web are 72 and 100 pixels per inch. Yes, there are other settings, but 72-100 is a good trade-off between loss of detail and bytes required.

Okay, so every image is made of pixels. This means that you can also denote an image by number of pixels. For example, the "thankyou.gif" image is 62 pixels high by 202 pixels wide. How do I know that? I have an expensive graphics program that tells me so. How would you know? Without a specific program, you wouldn't. You'll have to play around with the numbers in these commands a little bit, but it's easy to do.

You might also want to open the image by itself in the browser window. Do that by choosing OPEN (FILE) under the FILE menu and Browse (look for the image on your harddrive). When the picture pops up, using Netscape, look at the title bar along the very top. The height and width should be there. With Internet Explorer you can right-click on the image and select Properties and view the image's size in that way.

Of course, you can also go out onto the Web and surf around for a shareware graphics program. My personal favorite is PaintShop Pro. You get it for free for 30 days and then it's like $99 or so to get it for good.

Here's what you do. Denote to the image command how many pixels high by how many pixels wide you want. The "thankyou.gif" image is 62 X 202 pixels. If I want the image to appear smaller, I will ask for the pixels to be smaller, say 31 X 101. If I want it bigger, I would set the pixels larger, say 93 X 303. Just remember form. If you make the image smaller or larger, you must keep the same general square, rectangle, or whatever, form or the image will become "distorted"!.

Of course, if I want to, I can totally distort the picture. Here's the coding:

Notice the HEIGHT and WIDTH attributes nestled right where the ALIGN command went before. You will replace the "##" with a number of pixels for height and width. Here are the three examples:

This is normal size:	This is 101 X 31:
This is 303 X 93:	This is 90 X 55:

The <HR> Tag

The WIDTH command also works on the <HR> command, except you'll use percentages most of the time, but you can specify the command in pixels also.

Watch this:

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

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

You get the idea, yes?

That wraps it up for the Tutorial #6 session. Try these in the comfort of your own home under the supervision of an adult. If you are an adult, then find a kid who can program the VCR to help you along. (Ok, I'm no comedian, so I'll keep my day job!)

You Can Do This!

On to Tutorial #7

"There is no future in any job. The future lies in the man or woman who holds the job!"

Home Graphics Portfolio About Me Books This and That Medicine Bags Links