Virginia's HTML—Graphics

©2005, Martin Rinehart html-intro-07.html

Graphics used to be a mixed blessing. Pictures look great, but using them made pages take forever to load. Today we're living in a mostly broadband world and pictures are mostly a blessing. Still you should prefer small ones to large ones and courteously invite your viewers to "click here for a larger . . .".

Getting Graphics

Anyone with a digital camera can capture graphic images. Use the software that comes with the camera to save your images as ".gif" images—that stood for Graphic Image Format. These are generally the most compact and if you find a freeware graphics program you'll be able to select a color that you can make transparent.

If you have permission from the owner of a site, you can easily download any graphic image you see on the Web. For example, you can grab the small mug graphic that is my home page link (permission hereby granted) to start your collection.

First, make a place to store your graphics. The normal way to do this is to create a "/graphics" subdirectory under the website's root. In the example we've been working here, that's /vr-website-root/graphics.
Then you can point at any graphic (go ahead and point at my mug), right click and choose the "Save As ..." option.
Go ahead and save my mug icon as
/vr-website-root/graphics/small-mug.gif
Simple, isn't it?
Do NOT use this as a recipe to steal all the graphics on the Web. Email any webmaster (generally "webmaster@some-site.com" will work), compliment the site and then ask permission. You'll usually get it. Occasionally you'll get an "I'm sorry, can't give permission because . . .". Respect that and look elsewhere.
And DO get a graphics program and learn to use it. Adobe Photoshop is the standard among commercial graphic artists, but it's very expensive. Google for lightweight free versions if you don't intend to pursue a career in art.

By the way, the above points are just an ordered list with long list items. Thought you'd want to know.

Displaying Graphics

The basic image display tag is <IMG>. There isn't an "end image" tag. You use a src= attribute to tell the browser where to find the image. As with a link to an HTML page in your own site you give the relative path. Here's an example.

This is some blah, blah about a mug.

<IMG src="graphics/small-mug.gif">

That's a mug'o'java!

This is some blah, blah about a mug.

That's a mug'o'java!

Now would be a good time to put this mug up somewhere in virginia.html. Note that if you put it in a subdirectory one level below the root, use src="../graphics/small-mug.gif".

Other Attributes

Important, no fun detail: You should always use a border=0 (or some other width, if you prefer). All browsers except MSIE default to border=0. MSIE defaults to border=1. So if you want results your way in all browsers, never omit the border attribute. That said, let's have some fun.

You can align images in interesting ways.

<IMG align="right" border=0 src="graphics/small-mug.gif">
This is some blah, blah about a mug.

That's a mug'o'java!

This is some blah, blah about a mug.
That's a mug'o'java!

Most websites specify most images with border=0. Sometimes, though, you want a border.

This is some blah, blah about a mug.

<IMG src="graphics/small-mug.gif" border=3>

That's a mug'o'java!

This is some blah, blah about a mug.

That's a mug'o'java!

Images also should include an alt="text description of image" tag. There are browsers for the visually impaired that read the text to a listener. For a graphic, your alt= text will be read to the listener. A very important visually impaired thing is the Google web crawler. It can't view your image, but it can look at the alt= description and use it in indexing your page. And if you screw up your website and the browser can't find the graphic, it will show the alt= text instead of the graphic.

In the following example, notice that "small-mug.gif" has been mistyped "small-bug.gif."

This is some blah, blah about a mug.

<IMG src="graphics/small-bug.gif" alt="small image of a blue coffee travel mug">

That's a mug'o'java!

This is some blah, blah about a mug.

alt="small image of a blue coffee travel mug">

That's a mug'o'java!

Graphics as Hyperlinks

Some graphics serve as hyperlinks. For example, on my site that small mug is a link to the site's home page. How's that done?

Simple! An IMG is one of the many things that can be placed between <A> and </A> tags. I'd appreciate it if you made that mug on your site a link to my home page, this way:

To get to www.MartinRinehart.com click this mug.
<A href="http://www.MartinRinehart.com" target="_new">
<IMG src="graphics/small-mug.gif" border=0>
</A>

To get to www.MartinRinehart.com click this mug.

Note: When you use an image in a hyperlink it automatically gets a border. You need the border=0 attribute if you don't want a border.