Lesson 5 - Images

One picture is worth a thousand words, they say, but you have to be careful about pictures on a webpage. Pictures take a lot longer than words to load, and studies have determined that when people have to wait more than 13 seconds, they go through a personality change.

With that understanding, add pictures to your page.

First, you have to have the picture. There are several graphics galleries on the web that offer clipart free to webpage writers.

• Graphics Kingdom has lots of small icon-type graphics. Unfortunately, it has lots of advertising too. The tool pictures below came from their tool selection.
• Art by Cheryl has lots of free graphics, including Oriental graphics, bars, arrows and plants. The 2 flowers in the 2nd row are from her plant collection.
• Directory of Caricatures has over a thousand caricatures of people you know and love (hate, admire, worship, ridicule). The caricature on the extreme right in the 2nd row is Woody Allen (famous American actor and director) from their site.
• Shawn's Clipart & Webateria has outlandish cartoon drawings. The genetically-altered chicken and the bony hand in the bottom row are from this collection.

For practice on your own page, you can use one of these or go to one of the links above and find your own.

Before you can use the graphic on your webpage, you need to download it to your computer. Before you can download some graphics, you need to create a folder to keep all your HTML documents and image files together.

1. Get out of your browser, out of your text editing program, all the way back to your desktop. Create a new folder on the desktop (pull down the File option from the top horizontal menu bar and select New Folder). Name the folder csis6.
2. Put your HTML documents into that folder. This should include: firstpage.html, firstpage2.html, lists.html, and any other files you may have created.

Back to Top

Downloading Graphics

First, find a graphic you like. Then:

for PC users:

1. right click on the image.
2. Choose the Save Picture As or Save Image As option.
3. In the Dialog Box that pops up, choose your new csis6 folder to save in.
4. Name the image you're saving to something that you can remember. Some of the images you download will have a name like 178563AHt.gif -- you should rename that to cat.gif, or whatever the image is.

for MAC users:

1. click and hold on the graphic.
2. A popup window will give options to copy, download, etc. Choose the Download image to disk option.
3. In the Dialog Box that pops up, choose your new csis6 folder to save in.
4. Name the image you're saving to something that you can remember. Some of the images you download will have a name like 178563AHt.gif -- you should rename that to cat.gif, or whatever the image is.

File Names

Your image files should all end with either .jpg or .gif. These are the two formats that browsers will read. If your files aren't in either of these forms, you'll need to run them through a graphics program like Photoshop to change the format.

Back to Top

Copyright

Intellectual property is the same on the Internet as it is in other media. This means that almost everything is Copyright protected. It would be illegal to use whatever images you want in whatever way you want. Be sure that you have permission before using someone else's graphics. The legal expenses, fines, and penalties can ruin your life.

There are many archives that have hundreds of free images that you can use. All the graphics that have been given to you in the lessons come from free sites, so you don't have to worry about copyright infringement if you use them.

WARNING! WARNING!

If you create a folder as outlined above, and then use it to save all your HTML documents, graphics files, any cascading style sheets and Javascript files you'll be creating later, anything at all to do with your website, you will be a much happier web author. Many, many problems that people have with graphics are caused because the HTML document is not in the same place as the graphic file.

At this point, you should have images saved to your computer. Here's the code that you'll use for loading the images:

If your image and HTML document are in the same folder, you will code the image like this:

<img border="1" src="hand2.gif" alt="pointing finger" width="100" height="54">

And here's a breakdown of that line of code:

• <img> is the main image tag. It tells the browser that an image is being called up. This is one of those rare tags that does not need a closing tag.
• src="hand2.gif" is the attribute that tells where the source of the image is. In this case, it's the name of the hand icon from above.
• alt="pointing finger" is the attribute that sets the alternative text. There are browser readers that automatically read webpages for sight-impaired websurfers. When the reader gets to an image, it reads this alt tag.
• width="100" height="54" are the dimensions of the image. If you give these dimensions, your page will load faster, since the browser can set aside space for the image and go on with loading the text. Your reader can see the alt text at least while the browser goes back to load the images

Back to Top

Finding the Image Width and Height

The easiest way to find the dimensions of your image file is to load it into your browser.

From the browser, click on the File option from the top tool bar and highlight Open File. Then, choose your graphic file.

The image will appear all by itself in the browser, and way up at the top, in the title bar (remember where your title Acme Seed Company appeared?), the name of the image, plus the dimensions will be shown. In the case of the hand graphic, this would appear in your title bar:

hand2.gif 100x54 pixels

The width is always given first, and the height second.

Try this with the Seed Company. Here's the code, with the <img> tag in dark gray:

And here's what the page will look like:

Notice that the text is lined up with the bottom of the image, and after the first line, it swings under the image. This is the default alignment of images.

You can add an alignment attribute to your tag and get the hand placed over on the right side:

<img border="1" src="hand2.gif" alt="pointing finger" width="100" height="54" align="right">

And the page will look like this:

You can add more than one image on a line. Look at this added line of code in dark gray:

The website will look like this:

This is the end of Lesson 5. Please go to the next lesson.

Back to Top