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
Primer, 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.
OK, so every image is made of pixels.
This means that you can also
denote an image by number of pixels. For example, the
"sally.gif" image is 97 pixels high by 64 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 Netscape Navigator browser window.
Do that by choosing "OPEN FILE" under the FILE menu. When the picture pops up,
look at the title bar along the very top. the height and width should be there.
Of course you can also go out onto the Web and surf around for a
shareware graphics program. My personal favorite is Paint Shop Pro. You get it for free
for 30 days and then it's like $80 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 you want wide. The
"sally.gif" image is 64X97 pixels. If I want the image to appear
smaller, I will ask for the pixels to be smaller, say 30X55. If
I want it bigger, I would set the pixels larger, say 100X250.
Just remember form. If you make the image smaller or larger, you must keep the same
general square, rectangle, or whatever, form.
Of course, if
I want to, I can totally distort the picture.
Here's the coding:
<IMG HEIGHT="##" WIDTH="##" SRC="image.gif">
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 30X55:
This is 100X250:
This is 100X23:
The <HR> Flag
The WIDTH command also works on the <HR> command,
Except! You'll use percentages. Watch this:
<HR WIDTH="40%"> gives you this:
<HR WIDTH="64%"> gives you this:
You get the idea, yes?
That wraps it up. 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.
On to Primer
#7
Back to the HTML Goodies
Home Page
[Placement On The Page][Aligning Text With Images]
[Changing Image Size][The
<HR> Command]
