The Web Wizard’s Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics.
11
The Web Wizard’s The Web Wizard’s Guide to HTML Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics
-
Upload
julian-harvey -
Category
Documents
-
view
219 -
download
0
Transcript of The Web Wizard’s Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics.
The Web Wizard’s The Web Wizard’s Guide to HTMLGuide to HTMLChapter Three
Colors, Patterns, and Inline Graphics
Chapter ObjectivesChapter Objectives
Demonstrate how to add colors to a Web page
Explain how to add background patternsHow how to add images to a Web pageExplain the use of relative addresses for
image filesInvestigate the interplay between design
decisions and bandwidth consumption
Background ColorsBackground 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 ColorsWeb-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 PatternsBackground 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 ImagesInline 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 AttributesImage 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 TextFlowing 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 PathsRelative 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 LimitationsBandwidth 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 LimitationsBattling 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 JPGsUse the 1x1 image trick (with caution)
