HTML Part 4

(See 03-21-13 for HTML Part 3)

 

Everyone worries about their image. Artists do too. And when they get on the Internet, they have dozens of images to worry about. Putting an image on a Web page is one of the simplest tricks in HTML. You simply tell the browser the name of the image, what type of image it is, and if it's not in the same folder, where that image is. The tag is simply "IMG," which, as one might guess, stands for image, while "SRC" stands for source. The file name should then follow, such as "paintings/masterpiece.jpg" or if it's out there somewhere on the Internet (as sometimes happens) the title inside the quotation marks would, be an entire URL ending with the title of the image file. Images on the Internet are usually jpg files for good color resolution and detail or gif files for lower resolution, fewer colors, smaller files, and quicker loading (such as buttons, banners, or logos). However any type image file may be used provided there is a corresponding file with the exact same title (which is case sensitive) stored somewhere the browser may access it (preferably in the same folder as the HTML file).

Okay, that will get you an image on a Web page which is a little like turning a bull loose in a china shop. Next we need to learn to control it. First we need to give it a title in case, horror of horrors, it somehow fails to load. We use the "ALT" attribute to do this, adding ALT="My greatest masterpiece." This would follow the above image tag inside the same < and > marks. This title is useful for slow loading images to give the viewer something to read over and over again until the picture arrives. It used to be important for "text only" browsers but since the last one of those was long ago consigned to the Smithsonian, that's of little consequence now.

Now that we've given our raging bull a name, we must confine it to a certain size. This is done by telling the browser, in pixels, how big to make the picture. One inch equals 96 pixels, by the way. We would simply assert WIDTH="600" HEIGHT="400" right after the ALT tag still inside the same set of < >. To avoid image distortion, be sure to keep the width to height ratio the same as that of the original image (3:2 in this case). The thing to remember here is to keep the image on file about the same size as called for in the HTML file. If the image on file is smaller than what's called for, the resolution of the page image suffers, and if it is larger, the loading time will be greater than necessary. The actual size the artist chooses to use would be determined by the amount of detail in the picture and the page layout itself. With today's broadband, downloading time is not the constant consideration it once was.

And finally, training the bull, in effect, telling him "where to go," involves the attributes ALIGN="left" (default) ALIGN="center", or ALIGN="right". These also are placed inside the image tag, usually at the end, and are pretty self-explanatory; but are best used with a healthy dose of trial and error in that text placement may be influenced by their use. (One rule to always remember is that anything immediately following the "=" symbol should always be within quotation marks.) Thus, the complete image tag would read:

This, of course, only covers the horizontal placement of the image and there are, indeed, instructions for vertical alignment but they are so complex and so seldom used today they are no longer important enough to be worth learning. Vertical control especially, and indeed, horizontal image placement as well, is almost always handled by the use of TABLES. And they will not be the subject of our next learned discourse. Instead, we'll deal with LINKS. Golf anyone?