Chapter 3

Download Report

Transcript Chapter 3 

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:
<body bgcolor=“black”>

Bgcolor values can also be expressed in
hexadecimal notation:
<body bgcolor=“#AA33CC”>
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:
<body background=“water.jpg”>

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:
<img src=“donut.gif”>

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:
<img src=“donut.gif”
align=“left”>
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:
<img src=“donut.gif”>

If you want to retrieve an image from a
different directory, you can add path
information to the file name:
<img src=“pix/donut.gif”>
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)
