Petersen Webmaster Club Lesson 5

Lesson 5 - Backgrounds and graphics
Putting graphics on your page.

OK! Ready for graphics!

Graphics are probably the most important component of the web page because they are what sets internet communication apart from print. From now on, it will be important to to have a good paint program to work with. Spend some time getting to know your paint program.
Graphics can be added to a simple HTML document in two ways: as a BODY Background, and as an Image. As background, the image is repeated by the browser until it fills the entire screen. Text and other graphics can be placed on top of the background. Images, on the other hand, are inserted right into the text with an Image tag. With some effort, they can be placed just about anywhere you want them.

Here is an example of a small graphic:
This graphic has been used as a background on the LisaClipArt page. See how it looks when it is repeated. On another page, a simple ABC graphic has been used to make a border. Check it out!

Background graphics are inserted into the BODY tag, like this:
<BODY Background="abcbg.gif">. Notice that the graphic is written as a file, and must have the file extension. It is put into quotes. If it is contained in a different folder, the entire path must be given. This graphic will now be repeated to fill the entire screen. (If a border is desired, the graphic should be 1024 pixels wide, and everything to the right of the border design should be a solid color.)

Images that are to be placed on the page go into the Image tag, like this: <IMG src="abcbg.gif">. This graphic will now appear once only, at the place in the text where this tag is inserted. Other attributes that go in the Image tag give the browser more information about the graphic. For example border, width, height, align, and alt (alternative text) are all important information about the graphic that should be included in the image tag.

5th Assignment:
Use background images and clipart on your page.

Time to start looking at source code! If you go to any web page, click the "View" menu on the taskbar and drop down to "Document Source" or "Source Code." Click on this to see the HTML code that the author used to create his or her page. Look carefully at the BODY tag for information on Backgrounds, and also look for IMG tags. Notice how these graphics fit into the page.

See some examples of graphics in the following web pages:
Melissa's first web page has four graphics. Use the "View" menu to see Melissa's code. Notice where the graphic images appear on the page.
Look at Melissa's page.

Melissa "grabbed" her graphics from the Internet. If you look at the clipart resources that the Webmaster Club has put together, you will see that there are many graphics available. Don't use graphics that people do not want to share. There are plenty that are OK to use. If you want to use a particular graphic from these sources, right-click on the image with your mouse, choose "save image," and then save it to your disc. You can rename the graphic if you wish.

The graphic tag looks like this: <IMG src="bearbook.gif" width="71" height="75">. IMG stands for image, src stands source, then in quotes there is the graphic file name with extension, and then the width and height are given in pixels. The image will appear on the page where this tag is placed. In addition, you can determine if the top, bottom or center of the image will align with the line of text. In the Image tag simply add align=top, align=center, or align=bottom. If you put nothing here, the browser will align the bottom of the image to the text by default.

Note: Be sure to put the graphic either in the same folder as the HTML document you plan to use it in, or create a special "Images" folder for your images within your HTML document folder. If you use an "images" folder [recommended], you will need to add the folder name to the Image tag. If Melissa's graphic were placed in an Images folder, her IMG tag would look like this: <IMG src="images/bearbook.gif" width="71" height="75">.
Lucas's first web page has a graphic background image that he made himself using a paint program. Use the "View" menu to see Lucas's code.
Lucas's page.

If you want your graphic to just be a border, like the "ABC" on the About Us page, then put your picture on the far left-hand side of a plain background that is 1024 pixels wide, but with the smallest height possible. The graphic will be endlessly repeated down the screen.

Images can really slow down the loading of your web page. Try to not to use too many graphics and keep them small. (Lucas's graphic is a little large.) Giving the width and height of the graphic in the Image tag will speed up the loading. (See Melissa's code.) We will learn more about getting the most out of graphics in later lessons. For now, if you are making your own, try to keep them less than 200 by 200 pixels, and the resolution does not need to be more than 72 ppi. If you are making a graphic, save it as a .gif image. If you have a photograph, use .jpg.
Lesson Index | Webmaster Club Main Page
Copyright ©2000, Marilyn Huffman. All rights reserved.