Ross Sheppard High School
Computer Programming 10
Student Learning Guide
Adding Graphics to Your Web Page

1. As you have looked at other web pages, you probably noticed many of them had graphics, or illustrations, on them. In this project, you will learn how to place a graphic on your web page, how to use a graphic as a background for your web page, and how to use a graphic as an icon for a WWW link.

2. First of all, you need to know that all graphics (and text and other information for that matter) on the Internet are copyrighted material, and it is against the Copyright laws for you to use any of these without permission. However, there are many sites available that allow you to freely use their icons. In addition, it is considered acceptable to use a graphic as an icon in a link to another WWW site. For example, if you were to create a link to the NIKE web site, it is considered acceptable to use the NIKE logo in your link. However, it is unacceptable to use the NIKE logo in any other way without permission.

3. You must also understand that on World Wide Web pages, the graphics are not part of the page, but rather, are loaded into the browser by special tags placed in the Web page. This is unlike a word processor, in which the graphic becomes a part of the document. For this reason, you must always have the graphic available with your Web page.
   
   
4. When you are downloading and using graphics on your Web page, you should save them to the same folder that your index file is in.
   
   
5. It is considered poor Web page design to load a graphic using a URL link. This is because that method of loading a graphic would put addition, unnecessary traffic on another organization's Web server. Therefore, rather than using the Link tag <A HREF> tag to load a graphic, you should always use the Image Source tag <IMG SRC>.
   
   
6. In order to use a graphic, you must first have it available in the folder in which your web page is located. You can either draw a graphic of your own and save it to that folder, or you can get a graphic from the Internet.

7. As mentioned in #2 above, there are some web sites that have graphics available for public use. One such web site is called Icon Bazaar. Click on the link below to go there. When you are at Icon Bazaar, download three graphics that you like.
   
   
   Icon Bazaar
   www.iconbazaar.com
   
   
8. The tag used to place a graphic on your web page page is IMG SRC (image source), and the correct syntax is:
   
   <IMG SRC="file.gif">
   
   
9. Open your web page in NotePad. At an image source tag; you need to use the exact name of one of the images you downloaded. The graphic will show up on your web page at the point it is inserted in the text. In this example, it is placed directly under the BODY tag, but it could be placed anywhere on the page.
   
   
   
   Note the use of the quotation marks surrounding the file name.
   
   
10. Unless you specify something different, an image will display at the same size the artist created it. Sometimes, you may want to change that size. The size attribute tags are WIDTH and HEIGHT, and the value of the attribute is expressed in screen pixels. Your monitor is approximately 800 pixels wide. A graphic with a width of 50 pixels is about the same size as the picture on your student identification card.

11. The correct syntax for using the WIDTH and HEIGHT tags is:
    
    <IMG SRC="file.gif" WIDTH=50 HEIGHT=75>
    
    NOTE: You would replace "file" above with the name of your graphic file.
    
    The pixel bar below will help you understand the pixel measurement system:
    
    
    
    
12. Try changing the size of your graphic and then viewing it in Netscape.

13. You can add as many graphics to your web page as you wish, but you must consider the design and requirements of the web page.
    
    
14. It is possible to set the horizontal position of a graphic on your Web page using the Align tag. When aligning graphics, the Align tag must be included withing the <IMG SRC> tag. An example of such a tag is shown below:
    
    <IMG SRC="sheplogo.gif" ALIGN="RIGHT">
    
    
15. Add an additional graphic to your Web page that uses the right align tag.
    
    
16. Add another graphic to your Web page that is centered. To center a graphic, the Align tag within the graphic will not work. In this case, use the <CENTER> before the <IMG SRC> tag. Don't forget the </CENTER> tag after the graphic.

17. In addition to the right alignment tag within the image source, you can also use top, middle, and bottom to align text to the image. An example of this type of tag is shown below:
    
    <IMG SRC="sheplogo.gif" ALIGN="TOP">
    
    
18. The tag shown above will align the text with the top of the picture. Create three more graphics and appropriate text using each of the vertical alignment tags.
    
    
19. If you wish to add a graphic to a WWW link that you have on your web page, you simply use the IMG SRC tag within the ANCHOR tag. For example:
    
    
20. <A HREF="http://www.shep.net"><IMG SRC="sheplogo.gif">
    Ross Sheppard High School Home Page</A>
    
    
21. Try adding a graphic to one of your links. View the result in your browser.

22. Sometimes a graphic image won't display on a page, so as a good Web programmer, you must provide a text alternative so the user will know what image should have shown on the page. To add a text alternative, use the ALT tage within the image source tag as shown in the illustration below:
    
    <IMG SRC="sheplogo.gif" ALT=[Ross Sheppard High School Logo]>
    
    
23. For all images that you use on your Web pages, you are required to provide the text alternative.
    
    
24. Adding a graphic as the background to your web page is similar to changing the color. Note that you can use either a body background color or a body background image, but not both.

25. As with the body background color, the tag must appear directly underneath the opening HTML tag:
    
    <BODY BACKGROUND="file.gif">
    
    
26. Add a body background to your web page and then view it in your browser.
    
    REMEMBER: There can be only 1 body tag on a page.

27. Click here to see the marking guide for this project.
    
    
28. Save the project folder in your "Hand In" folder on your personal disk space so that this project can be graded.
    
    
29. In the next project, you will learn how to add animation to your web page.