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 described here. A good general guide to basic graphics, even if it's old, is the Web Design Group's Image Use on the Web, and there are other useful sites linked under the Resources tab.

Graphic Properties

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

• If you want your inline image to align with the top, middle, or bottom of the text on either side of it, insert a style attribute into your img tag that looks like this: style="vertical-align:middle" (or you can substitute top, bottom, or a variety of other values; see this W3Schools chart for what's possible)
• If you want your text to wrap around an image, a very useful technique, the magic style value is float: style="float:right" (or float:left)

Note that both of these methods of alignment used to be accomplished with a simple align="xxx" attribute. Browsers might 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 image—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.)

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!

Size attributes—height and width—used to be good additions 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, so I can't really offer much advice. Just keep this in mind; look for explanations under the Resources tab.

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

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

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.

The current generation of styles offers spectacular graphicseffects, like 2D and 3D transforms, that I'm not familar with. 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. (But there are many other formats that are now accepted by browsers; check out the list at W3Schools.)

But what's the difference between the basic ones? Some general rules of thumb:

Use GIF for:

• simple graphics using 256 or fewer colors
• if text is part of the graphic (it might look better as a GIF)
• if you want to make the graphic's background color transparent
• if you want the graphic to be animated (see the box below)

Use JPG for:

• images with many colors/shades (such as photographs)
• an image needing a lot of compression

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.

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 primary use is for readers using text-only browsers, including those with text-to-speech capabilities. These users need be given a description of your image, plus any important information it might contain (such as a link).  
• If a user's connection speed is slow, at least they'll have an idea what kind of image they're waiting to see
• If you made a mistake in typing your src= filename, at least the reader will have some idea of what the graphic was supposed to show

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 older article from the Web Design Group—"Use of ALT texts in IMGs"—still has some useful, common-sense tips on writing alt attribute text.

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.

Animated files used to have to be GIFs, but now there are more flexible APNG files (Animated Portable Network Graphics). So you might very well see both.

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 Cnet.) 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:  

The current generation of styles offers animation effects built into styles, making simple animations really easy, supposedly, but I have no experience with these effects. . 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: