The Web Wizard’s Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics

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

Background Colors The bgcolor attribute inside the body tag is used to specify a Web page’s background color: Bgcolor values can also be expressed in hexadecimal notation:

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

Background Patterns The background attribute inside the body tag is used to specify a background pattern: All background patterns are repeated like tiles to fill up a Web page’s background

Inline Images The src attribute inside the img tag is used to add an image to a Web page: GIF and JPG are the most commonly used file formats for inline images – browsers only recognize GIF, JPG, and PNG image formats

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 can’t display the image

Flowing Text Use the align attribute to make text flow alongside an image: positions the image on the left side of the page and allows text to run down its right side

Relative Paths The src attribute for an image file retrieves images from the same directory as the HTML file containing the img tag: If you want to retrieve an image from a different directory, you can add path information to the file name:

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

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 Don’t put any large images at the top of a Web page Use interlaced GIFs and progressive JPGs Use the 1x1 image trick (with caution)