Brief Description Objectives Materials and Resources Activity Description Internet Resources

Brief Description

    The Web is a graphical environment, but most of what is available on the Web is textual. This activity helps you add graphical elements to your Web pages. Everything from photographs of your favorite pet, to diagrams or cartoons can be placed on your Web page and this activity helps you add these visual elements to your HTML files.

Objectives

• Learn about various image file formats for the PC and Macintosh.
• Learn how to create image files and put them into your Web pages.
• Learn where on the Internet to find interesting image files.

Materials and Resources

    In developing our lessons and activities, we made some assumptions about the hardware and software that would be available in the classroom for teachers who visit the LETSNet Website. We assume that teachers using our Internet-based lessons or activities have a computer with the necessary hardware components (mouse, keyboard, and monitor) as well as a World Wide Web browser. In the section below, we specify any "special" hardware or software requirements for a lesson or activity (in addition to those described above) and the level of Internet access required to do the activity.

1. Special hardware requirements: none.
2. Special software requirements: none.
3. Internet access: Medium-speed (28,800 BPS via phone) or higher.

Activity Description

    The Web is graphical, and people usually want to add images or graphics to their Web pages. This activity describes how you can add images and graphics to your HTML files and where you can locate images to download.

• The Web supports the following graphic and image file formats:
  • JPEG=Joint Production Experts Group (good for photographs)
  • GIF=Graphics Interchange Format (good for cartoons, icons, and graphics)
  • MPEG=Motion Picture Experts Group (video)

• Adding Image Files to Your Web Pages: Use the <IMG> HTML tag to insert an image or icon into your Web page. The <IMG> syntax is <IMG SRC="imagefilename" ALT=" alternate expression" ALIGN="alignment value"> Where imagefilename is the name of the image (graphic) file, alternate expression is the expression which will be used in place of a picture if the viewer is not capable of displaying images, and alignment value can be Top, Middle, or Bottom of the page.

  The IMAGE command identifies the position of an image file in an HTML document. The <IMG> tag allows for the fact that not all viewers are capable of displaying images and allows associated text to be align vertically along the side of the picture. <IMG SRC="coffeemug.gif" ALT="Morning Martini" ALIGN="middle">Is rendered: Morning Martini!

• Creating Image Files: If you have a digital camera attached to your computer, you can easily create photographs. Use the accompanying camera software to capture an image and save it in either GIF or JPEG format for use on the Web. For example, the Connectix QuickTake digital video camera includes software - QuickPict - to capture images which can be saved as JPEG files.

• Locating Image Files on the Internet: Use the Internet Resources below to find interesting image files on the Internet. Download the image files and you can easily add them to your HTML files. You can also use one of the graphical utility programs to convert your graphic images to either JPEG or GIF format if you have them in a non-Web file format (PICT, BMP, etc.).

Internet Resources

• Free Bullets, Bars, Buttons, Backgrounds, & Bingbats
  [http://www.ccnet.com/~elsajoy/free.html]
  Lots of downloadable images and icons.

• Victor Engel's Color Palette
  [http://www.onr.com/user/lights/netcol.html].
  Information on Web page color palettes and how to use color on Web pages.

• YAHOO Clip Art Index
  [http://www.yahoo.com/Computers_and_Internet/Multimedia/Pictures/Clip_Art/]
  A long list of links to clip art on the Web.

• YAHOO Graphic Utilities
  [http://www.yahoo.com/Computers_and_Internet/Software/Graphics/]
  A list of graphic software available on the Web.

Graphic Utility Programs

• Graphics Viewers, Editors, Utilities and Info
  [http://www2.ncsu.edu/bae/people/faculty/walker/hotlist/graphics.html]
  An extensive list of graphic utility software.

• GraphicConverter (Macintosh)
  [http://www.monterey.edu/~netcom/Jump-Start/NFgraphic.html]
  A powerful Macintosh-based graphic utility.

• LView Pro (Windows)
  [http://mirror.wwa.com/mirror/busdir/lview/lview.htm]
  A powerful Windows-based graphic utility.

Back to Basic HTML Module