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.
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" graphic1 pixel by 1 pixel,
with no contentand 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:
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."
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".
Then, practice creating empty space in a document using this "empty image".
(A14.1) Read pages 159160 (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!