Basic Image Stuff

<img>This is the image data</img>

   Doesn't work that way. What you have to do is to save an image some place (either on a floppy disk, your hard drive or a web host ), and then make a reference to it in the tag.

Case in point:

<IMG src="https://htmlandbeyond.tripod.com/images/image.gif">

   Notice the way it's done. First you have the basic tag, IMG, to announce that what's next has something to do with images. Next you have an src, with stands for source, which tells the computer where to find the image. This is called an attribute, or property: It's a secondary information to the computer besides the basic tag. Attributes are sometimes necessary, like src, and are sometimes optional or downright useless.

   By the way, I'd just like to point out that although it's entirely possible to use a A:\ or C:\ source for an image, don't do it because it'll only work on your computer this way...

Image formats

   Now, as you may have seen, the test image that I'm using has a .gif extension. Gifs are widely used on the web, as well as Jpegs. In fact, they're the only accepted image formats on the web, not counting bitmaps which are never used anyways 'cause they're way too long to load. So I'm just gonna give you a lowdown of what you should know about each of these formats.

   Gifs are majorly used for icons and stylized text. They can be formatted to 2-color (monochrome), 256 colors (8-bit), or shades of grey (also 8-bit). They can be saved as interlaced gifs ( meaning they'll start out really blurry and become clearer as the entire image loads). They use transparency and can be animated. They use invariable compression that does not affect the display of the image. Their file extension is .gif.

   Jpegs are used 90% of the time for photos. They necessarily use 24-bit color. They use variable levels of compression. They can be saved as progressive images ( same effect as interlaced gifs). Their file extension is .jpg.

There are many places where you can get pictures and icons for free. Just follow this link for a Yahoo! listing of free clipart.

Image properties

• Src, well, you already know what that's for.
• Alt, for alternate, is the text that will show up before an image loads, and also the caption that will appear if you leave your mouse on the image. Very important to use if you have several large images, at least people will know what the images are about while they wait for them to load. The alt command is also what people with text only browsers will see instead of the image (The P.C. term for these people is browserly-challenged, but for the sake of clarity, I will refer to them from now on as cheap bastards.)
• The Height and Width attributes are always used together. They specify the dimensions of the image in pixels. Always use them as they greatly enhance loading time.

   There are other attributes of images that I will not mention for now as they are more or less relevant for now. If you use all of the stuff that I mentionned though, and you should, your image tag should look a little something like this:

<img src='https://htmlandbeyond.tripod.com/images/image.gif' width='200' height='50' alt='This is my test image'>