Chapter 8 Graphics and Color

Download  file with answers

Not a member!

Create a FREE account here to get access and download this file with answers

---

 

Chapter 8: Graphics and Color

TRUE/FALSE

1. When using the GIF file format, the more colors you use, the greater the compression and the smaller the file size.

 

2. Animated GIFs require a special plug-in for viewing.

 

3. When an image is compressed for the JPG format, some color information is discarded.

 

4. PNG’s lossless format results in compressed 8-bit images that are larger in file size than GIF.

 

5. SVG graphics are scalable to different display resolutions and can be printed on high-resolution printers.

 

6. JPG files use an interlacing format.

 

7. By definition, is a replaced element in HTML.

 

8. elements should not contain width and height attributes.

 

9. If a browser does not know the width and height values of an image, it must download the image before displaying the rest of the page.

 

10. By default, the background color of any element is transparent.

 

MULTIPLE CHOICE

1. The color depth of GIF is ____ bit.
a. 4 c. 16
b. 8 d. 32

 

2. The ____ format lets you store multiple images and timing information about the images in a single file.
a. SVG c. GIF
b. JPG d. PNG

 

3. The ____ format is best for photographs or continuous-tone images.
a. GIF c. SVG
b. JPG d. PNG

 

4. One useful feature of ____ is its built-in text capabilities for image indexing, allowing you to store a string of identifying text within the file itself.
a. GIF c. PNG
b. JPG d. SVG

 

5. ____ is a language for describing two-dimensional graphics using XML.
a. PNG c. GIF
b. JPG d. SVG

 

6. ____ graphics represent images as geometrical formulas.
a. Pixel c. Vector
b. Raster d. Geometrical

 

7. The ____ attribute of the tag displays an alternate string of text instead of an image if the user has a text-only browser or has graphics turned off.
a. height c. title
b. src d. alt

 

8. The ____ attribute of the tag specifies the URL of the graphic file you want to display.
a. height c. title
b. src d. alt

 

9. The ____ property is the equivalent CSS property for the align attribute.
a. float c. padding
b. border d. margin

 

10. An image’s default hypertext border appears ____ before you click the image.
a. black c. purple
b. blue d. red

 

11. To remove the hypertext border from an image, add a(n) ____ attribute with the border property set to “none”.
a. border c. markup
b. img d. style

 

12. You can align text along an image border using the ____ property.
a. align c. vertical-align
b. valign d. border

 

13. The float property can be used to float an image to the ____ of text.
a. top or bottom c. left or right
b. left or top d. right or bottom

 

14. You can use the CSS ____ property to increase the white space around an image.
a. white-space c. border
b. margin d. vertical-align

 

15. Your computer monitor displays color by mixing the three basic colors of light: ____.
a. red, yellow, and blue c. red, green, and yellow
b. magenta, green, and cyan d. red, green, and blue

 

16. Your monitor can express a range of intensity for each color channel, from ____ (absence of color) to ____ (full intensity of color).
a. 0; 255 c. 0; 1000
b. 255; 0 d. -255; 255

 

17. If your users have a(n) ____-bit color display, they can appreciate the full color depth of your images.
a. 4 c. 16
b. 8 d. 24

 

18. ____ occurs when the browser encounters a color that it does not support.
a. Withering c. Banding
b. Dithering d. Truncating

 

19. The ____ non-dithering colors that are shared by PCs and Macintoshes are called the Web palette or browser-safe colors.
a. 64 c. 216
b. 128 d. 256

 

20. CSS lets you specify color values in one of ____ ways.
a. two c. four
b. three d. five

 

21. Hexadecimal numbers are a base-____ numbering system.
a. 8 c. 16
b. 10 d. 24

 

22. Hexadecimal values are always preceded by a(n) ____.
a. # c. %
b. $ d. &

 

23. The default color for an active link is ____.
a. blue c. purple
b. red d. green

 

24. The ____ property lets you specify which image to display in the background.
a. background-position c. background-image
b. background-repeat d. background

 

25. The ____ property lets you control the tiling of background images across the document or element background.
a. background-position c. background-image
b. background-repeat d. repeat

 

COMPLETION

1. GIF uses a(n) “____________________” compression technique, meaning that no color information is discarded when the image is compressed.

ANS: lossless

PTS: 1 REF: 338

2. Using ____________________ areas allows you to create graphics that appear to have an irregular outside shape, rather than a rectangular shape.

ANS: transparent

PTS: 1 REF: 339

3. The ____________________ graphics format represents images pixel by pixel for the entire image.

ANS: raster

PTS: 1 REF: 343

4. The element needs only the ____________________ attribute for the image to be displayed in the browser.

ANS: src

PTS: 1 REF: 347

5. You should add ____________________ around your images to reduce clutter and improve readability.

ANS: white space

PTS: 1 REF: 356

6. The amount of data used to create color on a display is called the ____________________.

ANS: color depth

PTS: 1 REF: 358

7. Unlike dithering, ____________________ is an effort to match the closest colors from the GIF’s palette to the original colors in the photo.

ANS: banding

PTS: 1 REF: 359

8. In color theory, a pure color is called a(n) ____________________.

ANS: hue

PTS: 1 REF: 361

9. A(n) ____________________ color scheme uses the colors that are located next to each other on the color wheel.

ANS: analogous

PTS: 1 REF: 363

10. A(n) ____________________ is a common printing effect where the background color, which is normally white, and the text color, which is usually black, are reversed.

ANS: reverse

PTS: 1 REF: 373

ESSAY

1. Describe the GIF, JPG, and PNG file formats.

ANS:
GIF: The Graphics Interchange Format (GIF) is designed for online delivery of graphics. GIF uses a “lossless” compression technique, meaning that no color information is discarded when the image is compressed.

The color depth of GIF is 8 bit, allowing a palette of no more than 256 colors. The fewer colors you use, the greater the compression and the smaller the file size. The GIF file format excels at compressing and displaying flat (unshaded) color areas, making it the logical choice for line art (simple drawings) and color graphics. Because of its limited color depth, however, GIF is not the best file format for photographs or more complex graphics that have gradations of color, such as shadows and feathering.

With GIF files you can choose one color in an image to appear as transparent in the browser. The background color or pattern of the page will show through the areas in the image that you have designated as transparent. Using transparent areas allows you to create graphics that appear to have an irregular outside shape, rather than a rectangular shape.

You can create transparent areas using a graphics editor. When you choose the transparent color, all pixels of that color in the image let the background color show through.

The GIF format lets you store multiple images and timing information about the images in a single file. This means that you can build animations consisting of multiple static images that change continuously, creating the illusion of motion. You can create animated GIFs by using a variety of both shareware and commercial software. Animated GIFs were very popular in the earlier days of the Web, but they have gone out of favor in modern Web design.

When you create a GIF animation, you can determine the time between frames and the number of times the animation plays. The final GIF animation file is a single file whose name ends in the .gif extension.

JPG: The Joint Photographic Experts Group (JPG, sometimes called JPEG) format is best for photographs or continuous-tone images. JPGs are 24-bit images that allow millions of colors. Unlike GIFs, JPGs do not use a palette to display color.

JPGs use a “lossy” compression routine specially designed for photographic images: when the image is compressed, some color information is discarded, resulting in a loss of quality from the original image. Because the display device is a low-resolution computer monitor, the loss of quality is not usually noticeable. Furthermore, JPG’s faster download time compensates for its loss of image quality.

Using Adobe Photoshop or other imaging software, you can translate photographic images into the JPG format. When you create the JPG file, you can balance the amount of compression versus the resulting image quality manually. The Photoshop Save for Web & Devices dialog box is the tool you use in Adobe Photoshop to adjust quality and find the estimated download time.

PNG: The Portable Network Graphics (PNG) format is designed specifically for the Web. PNG is a royalty-free file format that is intended to replace GIF. This lossless format compresses 8-bit images to smaller file sizes than GIF. PNG supports greater color depths than GIF, so it supports 8-bit indexed color, 16-bit gray scale, and 24-bit true-color images. Even though PNG supports 24-bit color, its lossless compression routine does not compress as efficiently as JPG, so it is not the best choice for photographic images.

PNG supports transparency and interlacing, but not animation. (Interlacing is the gradual display of a graphic in a series of passes as the data arrives in the browser.) One useful feature of PNG is its built-in text capabilities for image indexing, allowing you to store a string of identifying text within the file itself.

PTS: 1 REF: 338 | 342

2. How is the element used in HTML? Describe each attribute associated with the element.

ANS:
By definition, is a replaced element in HTML, meaning that the browser replaces the element with the image file referenced in the src attribute. The browser treats the image as it treats a character; normal image alignment is to the baseline of the text. Images that are within a line of text must have spaces on both sides or the text will touch the image.

The element needs only the src attribute for the image to be displayed in the browser, though using only the src attribute is not good coding practice. The tag should always contain additional attributes shown in the following code sample.

 

The alt attribute displays an alternate string of text instead of an image if the user has a text-only browser or has graphics turned off.

The height attribute specifies the height of the image in pixels.

The src attribute is the only required attribute. The src attribute specifies the URL of the graphic file you want to display; as with any URL, the path must be relative to the HTML file.

The title attribute specifies a string of text that provides information about the image; visual browsers display the contents of the title attribute as a ToolTip or ScreenTip (a pop-up window that appears when the user pauses the pointing device over an object); an audio browser could speak the title information.

The width attribute specifies the width of the image in pixels.

PTS: 1 REF: 346 | 347

3. Describe the processes of removing the hypertext border from an image, aligning text and images, and adding white space around images.

ANS:
Removing the Hypertext Border: When you create a hypertext image, the browser’s default behavior is to display the hypertext border around the image. This border appears blue before—and purple after—you click the image. In a well-designed site, this border is unnecessary because users often use their mouse to point to each image to see whether the hypertext cursor appears. Another reason to abandon the display of hypertext borders is that their color may not complement your graphic.

To remove the hypertext border, add a style attribute with the border property set to “none”, as seen in the following example:

 

Aligning Text and Images: You can align text along an image border using the vertical-align property. The default alignment of the text and image is bottom-aligned, which means the bottom of the text aligns with the bottom edge of the image. You can change the alignment by using either the top or middle values.

Adding White Space Around Images: Add white space around your images to reduce clutter and improve readability. The default spacing is very close to the image.

Use the CSS margin property to increase the white space around an image. The margin property lets you add margins on all four sides or to individual sides of an image. The following code shows an image with a 20-pixel margin on the left, top, and bottom sides, floating to the left of text.

img.left {
float: left;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

You also can add white space into the graphic itself using graphic-editing software.

PTS: 1 REF: 353 | 357

4. What is dithering? Why does it occur? How does it differ from banding and how can you control it?

ANS:
The browser must mix its own colors when you display a 24-bit image on an 8-bit monitor, or when you use a file format that does not support 24-bit color. Because the 8-bit monitor has fewer colors to work with (256, to be exact), the browser must try to approximate the missing colors by creating colors from the ones the browser already has. This type of color mixing is called dithering. Dithering occurs when the browser encounters a color that it does not support, such as when you try to turn a 24-bit photographic image into an 8-bit, 256-color image. Dithered images often appear grainy and pixelated. The dithering is most apparent in gradations, feathered edges, or shadows.

Unlike dithering, banding is an effort to match the closest colors from the GIF’s palette to the original colors in the photo. When you create a GIF, you can choose whether or not to use dithering. A nondithered image is smaller than one that uses dithering, but the banding may create an unacceptable image. JPGs, when viewed on an 8-bit or 16-bit display, dither to the closest colors. Photos are best saved as JPGs, even when viewed at a lower color depth, because the dithering creates a more acceptable image.

One way to control dithering is to create images that use nondithering colors. The 216 nondithering colors that are shared by PCs and Macintoshes are called the Web palette or browser-safe colors. The nondithering palette applies only to GIF or 8-bit PNG, not to 24-bit JPG. Most Web-capable graphics programs include the Web palette colors. If you do create graphics for the Web, avoid trouble by using the Web palette as your color palette for all flat color areas of your graphics.

PTS: 1 REF: 358 | 359

5. How are color names, RGB color values, and hexadecimal color values used?

ANS:
Using Color Names: The color name values let you quickly state color using common names. Although the color names are easy to use, they allow only a small range of color expression. To use a wider variety of available color, you must use a more specific value, such as RGB or hexadecimal.

Using RGB Color Values: The RGB color model is used to specify numeric values that express the blending of the red, green, and blue color channels.When you specify RGB values, you are mixing the three basic colors to create a fourth color. Each of the three color channels can be specified in range from 0 to 100%, with 0 representing the absence of the color, and 100% representing the full brilliance of the color. If all three values are set to 0, the resulting color is black, which is the absence of all color. If all three color values are set to 100%, the resulting color is white, which is the inclusion of all colors.

The syntax for specifying RGB is the keyword rgb followed by three numerical values in parentheses—the first for red, the second for green, the third for blue.The following rule states a percentage RGB value:

p {color: rgb(0, 100%, 100%);}

RGB color values can be specified as an integer value as well. The integer scale ranges from 0 to 255 with 255 equal to 100%.The following rules specify the same color:

p {color: rgb(0%, 100%, 100%);} /* percentages */
p {color: rgb(0, 255, 255);} /* integers */

Using Hexadecimal Color Values: HTML uses hexadecimal numbers to express RGB color values, and you can use them in CSS as well. Hexadecimal numbers are a base-16 numbering system, so the numbers run from 0 through 9 and then A through F. When compared to standard base-10 numbers, hexadecimal values look strange because they include letters in the numbering scheme. Hexadecimal color values are six-digit numbers; the first two define the red value, the second two define the green, and the third two define the blue. The hexadecimal scale ranges from 00 to FF with FF equal to 100%. Hexadecimal values are always preceded by a pound sign (#).The following rules specify the same color:

p {color: #00FFFF;} /* hexadecimal */
p {color: rgb(0%, 100%, 100%);} /* percentages */
p {color: rgb(0, 255, 255);} /* integers */

PTS: 1 REF: 365 | 366