The Web Wizards Guide to HTML

1
The Web Wizards Guide to HTML

• Chapter Three
• Colors, Patterns, and Inline Graphics

2
Chapter Objectives

• Demonstrate how to add colors to a Web page
• Explain how to add background patterns
• How how to add images to a Web page
• Explain the use of relative addresses for image
  files
• Investigate the interplay between design
  decisions and bandwidth consumption

3
Background Colors

• The bgcolor attribute inside the body tag is used
  to specify a Web pages background color
• ltbody bgcolorblackgt
• Bgcolor values can also be expressed in
  hexadecimal notation
• ltbody bgcolorAA33CCgt

4
Web-safe Colors

• Different computers and computer monitors may
  display the same hexadecimal color very
  differently
• 216 color codes are safe in the sense that they
  are displayed identically or almost identically
  on all computers

5
Background Patterns

• The background attribute inside the body tag is
  used to specify a background pattern
• ltbody backgroundwater.jpggt
• All background patterns are repeated like tiles
  to fill up a Web pages background

6
Inline Images

• The src attribute inside the img tag is used to
  add an image to a Web page
• ltimg srcdonut.gifgt
• GIF and JPG are the most commonly used file
  formats for inline images browsers only
  recognize GIF, JPG, and PNG image formats

7
Image Attributes

• The align attribute positions the image and
  enables text to flow around an image
• The height and width attributes scale the image
  to any size you like
• The alt attribute allows you to describe the
  image in text for browsers that cant display the
  image

8
Flowing Text

• Use the align attribute to make text flow
  alongside an image
• ltimg srcdonut.gif alignleftgt
• positions the image on the left side of the page
  and allows text to run down its right side

9
Relative Paths

• The src attribute for an image file retrieves
  images from the same directory as the HTML file
  containing the img tag
• ltimg srcdonut.gifgt
• If you want to retrieve an image from a different
  directory, you can add path information to the
  file name
• ltimg srcpix/donut.gifgt

10
Bandwidth Limitations

• Image files consume more bandwidth than text
  files
• Users who access the Internet via telephone lines
  will have to wait for image files that are 100KB
  or larger
• Whenever possible, use image files no larger than
  30-40KB

11
Battling Bandwidth Limitations

• Always specify height and width attributes for
  all your images so the browser can work around
  each image while it is downloading
• Dont put any large images at the top of a Web
  page
• Use interlaced GIFs and progressive JPGs
• Use the 1x1 image trick (with caution)