Basics of HTML

Graphics

I have to issue this disclaimer with regard to graphics: I have had only minimal training, and exhibit little facility, with graphics programs and in other "artistic" areas as well.

I share with you here what I have learned in doing what I have done with graphics on the web, but none of these accomplishments are very sophisticated. Sometimes they look o.k., but even then I'm often not sure why they do. I urge you to consult real experts in this area with any questions that range much beyond what is here. A good general guide to basic graphics is the Web Design Group's Image Use on the Web, and there are other useful sites linked under the Resources tab.

Graphic Properties

Size attributes—height and width—are useful to add to your img tags. As with alts, they can go in any order within the brackets. This will tell your reader's browser the size of the space to reserve for the image, since images usually take longer to load than text. Their values should be given in pixels. Important NOTE: given the expanding plethora of devices, with different sized windows, that are being used to see webpages now, it's often useful now NOT to specify the size of an image in the HTML. This allows it to shrink on a tiny screen. I'm just learning about this kind of web development, and will write more about it once I understand it better. But for now, just keep this in mind; or look for explanations under the Resources tab.

Here's how an img tag with these attributes specified would look to display this graphic note:

<img src="note.gif" alt="note" height="32" width="32" />

Remember that the attributes can be listed in any order.

NOTE: Although it is very tempting to use these attributes to resize images, it's considered quite bad form to do so. Particularly if the original image is large. The browser will save the smaller space for it, but it will still have to download the large image. Which, of course, can take a long time.

Resize your images in a graphics program (Gimp is a good free one), not in your img tag!

Some more useful attributes can allow you to set the position of an image relative to surrounding text, and add or eliminate borders around your images.

Note that both of these methods of alignment used to be accomplished with a simple align="xxx" attribute. Browsers will still display img tags with this syntax properly, but it's not compliant with current standards.

If you want an image to be a link, or part of a link, but don't want the default blue border to show up around it—or, alternatively, if you want to put a border around an exclamationimage—use the border value in a style attribute. style="border:0" will keep a border from being drawn around the image. Typing style="border:5px solid red" would put a 5-pixel-wide solid red border around the image, like the one on the right. (You might still see borders being specified in the old, non-compliant manner, with a border attribute and a value in number of pixels.)

In displaying the graphic above, in addition to bordering it and making it float to the right, I also set it apart from the surrounding text with 3 pixels of white space above and below it. This is usually a good idea when surrounding an image with text. It keeps things from looking too crowded. 

You put the space in with a style attribute like this: style="margin:3px"

Since only one number is given, all the margins will be the same. If you want top and bottom margins to be different, or if you want a different margin on each of the four sides, check this W3Schools chart for how to list your numbers. (The "old" way of specifying white space around an image was done with hspace (for horizontal space) and vspace (for vertical space) attributes.)

So there are a lot of different attributes that can be attached to the same img tag. Remember that the order of the attributes doesn't matter. You can also string several style values together, too.

new!The next generation of styles (CSS3) offers spectacular graphicseffects, like 2D and 3D transforms. Check out these links at W3Schools

Graphic Formats

Taking into account the disclaimer above, I can pass along a couple of tips concerning graphics formats. The big two for web display are GIF and JPG. What's the difference?

Some general rules of thumb:

Use GIF for:

Use JPG for:

You can always use a graphics program (like Gimp) to save an image as both formats and see which looks better (and often there won't be any difference.) 

Grabbing Graphics

It's easy to download images from the web, although it's not always an ethical thing to do.

To copy an image from the web, simply right click when the cursor is on the graphic, and choose "Save image" or "Copy image," depending on your browser.

An image downloaded from the web is of course already in a browser-compatible format. Just be sure when you save this "borrowed" image that you keep the extension of the filename (probably .gif or.jpg) the same, even if you rename the file. It's also nice to give credit to the source of the graphic.

star

To avoid copyright issues, or other breaches of ethics, copy images from a clip art web site, Creative Commons site, or some other site where content is freely available, rather than from commercial sites.

Invisible Graphics

One of the most useful graphics in my collection is never seen on a computer screen. 

It's a tiny transparent gif I call shim.gif.

I can make it any size I want without worrying about distorting its features (and it's the only graphic I will recommend resizing with style size attributes).

You can use "shims" to put space between graphics easily (without Styles positioning—see the Styles tab) and it can make sure "empty" table cells keep the dimensions I want.

Use any graphics program that allows you to set transparency values to create this useful little critter.

Alternatives and Animations

There is one attribute you should always add to the basic <img src="xxx" /> tag that places an image on your page. W3Schools even goes so far as to call it "required."

This is the alt attribute. It specifies an alternate text for an image, if the image cannot be displayed.

Why is this so important?

The alt attribute can be placed in any position within the brackets of the img tag. Doing this for purely decorative elements, such as a divider bar, is a simple courtesy to text-only readers—they don't have to worry that they're missing something important. When adding an alt attribute for a decorative, non-substantive, graphic, just make it empty: alt=""

This somewhat dated article from the Web Design Group—"Use of ALT texts in IMGs"—still has some useful, common-sense tips on writing alt attribute text.

line

You can "borrow" animated gif files from other websites just as you would static images. (See the Grabbing graphics box above.) Just be aware that since these consist of several images stacked together, the files can be large.

Remember that animated files must be GIFs!

To construct an animation, you have to make a series of still graphics first. Vary each one just a little so that when they are displayed in sequence, there is apparent motion. Then use an animator program (you can find some free ones at Tucows) to put them into a stack and save them as one animated GIF.

Voila! Depending on your artistic talent, you could come up with one like this: animated graphic 

new!The next generation of styles (CSS3) offers animation effects built into styles, making simple animations really easy. Check it out at W3Schools

Graphics Credit

The handsome graphic line, not to mention the energetic dancing spot and the other cute images, came from Realm Graphics, a nice free graphics site.

Last updated:

Back to kathyamen.net