1 / 11

The Web Wizard’s Guide to HTML

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

taran
Download Presentation

The Web Wizard’s Guide to HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Web Wizard’s 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 page’s background color: <body bgcolor=“black”> • Bgcolor values can also be expressed in hexadecimal notation: <body bgcolor=“#AA33CC”>

  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: <body background=“water.jpg”> • All background patterns are repeated like tiles to fill up a Web page’s background

  6. 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

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

  8. 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

  9. 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”>

  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 • 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)

More Related