The address for this web page is: http://www.onemathematicalcat.org/day_14_resizing_images.htm
On to the next lesson! Back to the COURSE SYLLABUS

14. RESIZING IMAGES

(How do you like the "flashing border" on the table? Yet another example of the neat stuff that you can do with JavaScript!)

INDEX CARD #14:

RESIZING IMAGES (14a)

The WIDTH and HEIGHT attributes in the <IMG> tag indicate the dimension of the image, in pixels.
By specifying image width and height, the browser can "leave space" for the image as it lays out the page; the graphic is put in place when it arrives. (You can get the "natural" width and height of an image from any graphics editor; try something like "image properties.") Without width and height values, the page must be re-displayed when the graphics finally arrive.
If the width and height attributes differ from the actual image dimensions, the browser will resize the graphic. Image quality may not be very good; better to resize images in a graphics program.

<IMG SRC="tigger.gif">
 
width×height = 64×50

<IMG SRC="tigger.gif" WIDTH=128 HEIGHT=50>

Using an "EMPTY" Image for Spacing (14b)

You can achieve special effects by taking an "empty" graphic—1 pixel by 1 pixel, with no content—and re-sizing it as desired.
VIEW the source code for this page to see that (almost) "invisible space" in the amounts of 20, 15, 10, and 5 pixels has been inserted between the following horizontal rules:

This word

and this word have 25 pixels of (almost) "invisible space" inserted between them.

NOTE: If the image is the same color as the background, or if it is transparent, then it won't show. Here, I wanted you to see the (almost) "invisible space."

Printable version of Index Card 14a

Printable version of Index Card 14b

WORKSHEET #14:

(W14.1) Finish up the tutorial located at: http://www.cwru.edu/help/introHTML/toc.html (link is no longer valid) Read the "Conclusion" section, and look over the Appendices, Glossary, and Index. (You'll get some interesting historical perspective in the process!) That will finish the "Introduction to HTML" tutorial.
There are two other tutorials in the sequence, which will be covered in future lessons.
(W14.2) Download this "empty image" gif file onto your own computer: This "black box" is the empty image! (It has a big black border, just so you can see it!)
- Downloading an image on a PC: right-click on the image, select "Save Picture As...", navigate to the desired folder on your computer, and click "Save".
- Downloading an image on a MAC: Visit the MAC TIP!
Then, practice creating empty space in a document using this "empty image".

ASSIGNMENT #14:

(A14.1) Read pages 159–160 (from "Specifying Width and Height" up to "Vertical Alignment") in the Weasel Book.
(A14.2) Use a graphics editor to create and save an "empty image." Do something like this: create a NEW image; set its properties to be 1 pixel by 1 pixel; save it as "empty_image.gif".
Use this "empty image" to practice getting special spacing effects!