Chapter Nineteen: Putting Images on Web Pages

Table
of
Contents:

Course Syllabus
Course Assignments and Due Dates
Tips and Tricks
Part One: Understanding The Internet

Chapter One: Definitions
Chapter Two: How the Internet is Changing the World

Part Two: Getting On The Internet

Chapter Three: Getting Connected
Chapter Four: Surfing the Net

Part Three: Communicating Over The Internet

Chapter Five: Internet Etiquette (Netiquette)
Chapter Six: Electronic Mail
Chapter Seven: Listserv
Chapter Eight: Usenet Newsgroups
Chapter Nine: Communicating in Real Time
Chapter Ten: Telnet

Part Four: Finding Things On The Internet

Chapter Eleven: Searching for Information
Chapter Twelve: Commonly Found Internet File Types
Chapter Thirteen: Downloading From the Internet
Chapter Fourteen: Bibliographic Style for Citing Internet Resources

Part Five: Creating Web Pages

Chapter Fifteen: Web Page Creation Strategies
Chapter Sixteen: Web Page Design
Chapter Seventeen: How HTML Works
Chapter Eighteen: Creating Your Web Page Resume
Chapter Nineteen: Putting Images on Web Pages
Chapter Twenty: Using Tables for Advanced Web Page Layout
Chapter Twenty-one: Making a Local Web and a Home Page
Chapter Twenty-two: Publishing Files on the World Wide Web

Part Six: Using Multimedia On The Internet

Chapter Twenty-three: How Web Browsers Do Multimedia
Chapter Twenty-four: Waveform Audio Recording

Part Seven: Planning For The Future Of The Internet

Chapter Twenty-five: Societal Issues
Chapter Twenty-six: Emerging Technology
Chapter Twenty-seven: How to Keep Up

Send E-Mail to Instructor
Internet Resources Home Page
After completing this chapter, you will be able to:

Download the shareware version of Paint Shop Pro for Windows or Graphic Converter for the Macintosh.

Convert images into a file format suitable for display on Web pages.

Resize and resample images to fit the layout of a Web page.

Adjust colors for optimum display performance on Web pages.

Understand the concept of a transparent GIF.

Know how to download a utility for creating transparent GIFs.

Paste an image onto a Web page.

Tile an image onto a Web page.

Backgrounds and Images
The use of backgrounds and images adds interest to an ordinary web page. Nearly every page on the WWW uses some form of graphics or pictures to spice up its site.
Where to Obtain Backgrounds and Images

From Internet sites which offer free graphics (Use Yahoo or another directory or search engine to find these sites.)
Create your own using Paintshop Pro, Adobe Photoshop or Illustrator, Microsoft Paint, Corel
Create yoru own using digital photography or a scanner
From a commercially produced CD or diskette containing non-copyrighted clip art images

Considerations

Make sure the background color or images do not obscure text or slow down the page's loading time
Use page images sparingly to avoid clutter
Use proper image file types: gif, jpg, jpeg
Keep individual image file sizes down to no more than 20k
If you resize image files, watch out for distortion
Provide alternative text for web surfers who have disabled image loading functions on their browser

Background Colors:

Use a hexadecimal color code (Example: #FF0000)
Use one of 16 Netscape default colors by name (black, navy, silver, blue, maroon, purple, red, fuschia, green, teal, lime, aqua, olive, gray, yellow, white)

HTML Coding for Background
<BODY BGCOLOR=#FF0000>
- <BODY BGCOLOR=RED>
- or to use a background image -
<BODY BACKGROUND="BACKGROUND.JPG">
HTML Coding for Images
<IMG SRC="IMAGE.GIF">
Providing Alternative Text for Images
<IMG SRC="IMAGE.GIF" ALT="IMAGE FILE">
Image Alignment and Placement on Web Page
You have several options for aligning images with text on your page. You can use a table to place an image in one cell and the accompanying text in an adjoining cell. You can also use the following HTML coding options:

<IMG SRC="IMAGE.GIF" ALIGN=LEFT> This coding would place the image on the left-hand side of the page with text wrapping around the side of the image on the right.

Other Possibilities include: RIGHT (Image appears on right, text on left)
TOP (Aligns image to the tallest item on the line)
TEXTTOP (Aligns image to the tallest text item on the line)
MIDDLE (Aligns bottom of line of text with middle of image)
ABSMIDDLE (Aligns middle of line of text with middle of image--use with small images)
BOTTOM (Aligns the bottom of line of text to the bottom of the image)
BASELINE (Same at BOTTOM>

You can also center your images on the page by using this coding: <CENTER><IMG SRC="IMAGE.GIF"></CENTER>

Sizing Images
If you don't wish to use a graphics program to resize your images, you can resize using HEIGHT and WIDTH HTML keywords as part of your coding. For example:
<IMG SRC="IMAGE.GIF" WIDTH=240 HEIGHT=260>
Remember, the number you use to define height and width refers to the number of pixels.
Online Resources:

Kodak: Photo CD Menu
ETC PhotoCD Catalogue
Digital Camera Manufacturers

Agfa Digital Imaging and Electronic Prepress Systems
Apple Computer
Canon Computer Systems Inc.
Casio
Welcome to Connectix
The World of EPSON
Welcome to Fuji Photo Film U.S.A., Inc.
Welcome to Eastman Kodak Company
Welcome To Nikon Inc.
Olympus America Inc.
Welcome to RICOH WWW Server
SONY
Internet Product Watch

Clip Art and Backgrounds

The Background Sampler
Jelane's Free Web Graphics
Imagine : Version 1.0
Hee Yun's Graphic Collection
Barry's Clip Art Server
The Graphic Station

Converting and Creating Images

Home of Jasc Software, Inc.
Graphic Converter (shareware)
GIF Construction Set
GIF Animator: Overview
GifBuilder
GIF Animation on the WWW
Optimizing Animated GIFs / GIF Animation - WebReference.com

Assignment to turn in for credit:
Create a new web page which includes the following elements: a background image, send email icon, an animated image, a transparent gif file. Give your file a name and htm extension, then attach it to an email and send all files to the instructor.
Submit your files

Go to:
Chapter Eighteen
Chapter Twenty