Tutorial 3 Vocabulary | Tutorial 3 Quick Check Questions
| absolute unit | One of the five standard units of measurement: mm (millimeters), cm (centimeters), in (inches), pt (points), and pc (picas) |
| animated GIF | A GIF that displays an animated image - a series of still images shown quickly to give the appearance of motion |
| client-side image map | An image map stored locally on a user's computer or device |
| color value | A numeric expression that precisely describes a color in terms of the intensity of its red, blue, and green components |
| dithering | The process by which colors are combined to approximate a color not in the available palette. |
| dpi | The number of dots per inch in an output device |
| em unit | A relative unit based on the width of the uppercase letter M |
| ex unit | A relative unit based on the height of the lowercase letter x |
| Flash | A software program from Macromedia used to add animation and multimedia elements to Web sites |
| generic font | A general description of a font's appearance |
| GIF | Graphics Interchange Format |
| GIF89a | A GIF format that supports interlacing, transparency and animation |
| Graphics Interchange Format | A common Web image format that allows for animated images, transparent colors and interlacing. GIFs are limited to 256 colors and are most often used for graphics requiring few colors such as clip art |
| hanging indent | A negative indent in which the first line of text hangs to the left of a text block |
| hexadecimal | A number expressed in base 16 arithmetic |
| hotspot | An area within an image that accesses a link or performs an action when clicked or activated by a user |
| image map | An image containing hotspots at specific locations |
| interlaced GIF | A GIF in which the image is retrieved in stages, allowing a blurry version of the whole image to appear quickly and then become increasingly sharp as it is retrieved |
| interlacing | Refers to the way that graphics software saves a GIF file. Interlaced files are saved and retrieved in stages. |
| Joint Photographic Experts Group | A common Web image format, which supports 16.7 million colors and is most often used for photographic images |
| JPEG | Joint Photographic Experts Group |
| kerning | The amount of space between letters |
| leading | The amount of space between lines of text |
| Macromedia | The company that produces Flash |
| noninterlaced GIF | A GIF in which the image opens one line at a time, starting at the image's top and progressing to the bottom |
| palette | A selection of colors |
| pixel | A single dot on an output device, on a computer screen a pixel measures about 1/72 of an inch square |
| PNG | Portable Network Graphics |
| Portable Network Graphics | A common Web image format that supports animation, interlacing, multiple transparent colors, and 16.7 million colors, but is not well supported by older browsers |
| progressive JPEG | A JPEG that is rendered in progressive stages from blurry to sharp |
| relative unit | A measurement unit expressed relative to the size of a standard character |
| RGB triplet | The triplet of intensity values of a color's red, blue and green components |
| safety palette | A palette of 216 colors that is not dithered by any Web browser |
| scalable | A page that is rendered in the same way regardless of the size of a user's browser window |
| Scalable Vector Graphics | A common Web image format, supported by XML, in which line art is composed of mathematical curves and lines |
| server-side image map | An image map stored on a Web server |
| spacer | A transparent image that can be resized to aid in page layout |
| specific font | A particular font referenced in a Web page design, which a user sees only if it is installed on that user's output device |
| splash screen | The opening page of a Web site, usually displaying a animation or special effect designed to catch a user's attention |
| SVG | Scalable Vector Graphics |
| tiling | The process by which a space is filled up with an image by repeating the image in the vertical and horizontal direction |
| tracking | The amount of space between words |
| transparent color | A color that is not displayed when rendered by an output device |
| watermark | A fixed background image that does not scroll with associated foreground content |
| Web-safe colors | Colors that are not dithered by any Web browser |
| back to top | |
| Quick Check Questions | |
| 1. What style setting would you use to change the font color to yellow and the background color to the value (51,102,51)? | |
| color: yellow; background-color: rgb(51,102,51) | |
| 2. What are Web-safe colors and why would you use them in your Web pages? | |
| Web-safe colors are colors that will not be dithered by a Web browser limited to a 256-color palette. You would use them when you want to ensure that your colors appear correctly without browser modification on monitors that display only 256 colors. | |
| 3. What style setting would you use to display text in Courier New font or in any monospace font if that specific font is not available? | |
| font-family: Courier New, monospace | |
| 4. What style setting would you use to set the font size to 16 points? | |
| font-size: 16pt | |
| 5. What is the em unit, and why would you want to use it with your Web page text? | |
| The em unit is a relative unit of length equal to the width of the capital letter "M" in the browser's default font. Because the size is expressed relative to the default font size, text that is sized with the em unit is scalable and will appear correct relative to other text, no matter what font size has been set on the user's browser. | |
| 6. What is kerning, and what style setting would you use to set an element's kerning to 2em? | |
| Kerning refers to the amount of space between letters. To set the kerning to 2em, use the style letter-spacing: 2em | |
| 7. What style would you use to make text double spaced? | |
| line-height: 2 | |
| 8. What style settings would you use to create bold italic text? | |
| font-weight: bold; font-style: italic | |
| 9. What is the span element? | |
| The span element is a generic inline element used to contain or mark an inline content. | |
| 10. List three reasons for using the GIF image format instead of the JPEG format? | |
| Use GIF when you want to use a transparent color, when you want to create an animated image, and when your image is an illustration of 256 colors or less. | |
| 11. List three reasons for using the JPEG image format instead of the GIF format? | |
| Use JPEG for photographic images, for images that contain more than 256 colors, or when you need to reduce the file size through compression | |
| 12. What style floats an element on the left margin? What style prevents an element from being displayed until that margin is clear? | |
| float: left clear: left |
|
| 13. What style sets a 10-pixel margin above and below an element, and a 15-pixel margin to the left and right of the element? | |
| margin: 10px 15px | |
| 14. What attributes would you add to the <img/> tag to set the dimensions of the image to 200 pixels wide by 300 pixels high? | |
| width="200" height="300 | |
| 15. What style places the image file mark.jpg in an element's background, fixed at the top center with no tiling? | |
| background: url(mark.jpg) no-repeat fixed center top | |
| 16. If you need to support older browsers, what code would you enter to use the paper.jpg image file for the page background? | |
| <body background="paper.jpg"> | |
| 17. What is a hotspot? What is an image map? | |
| A hotspot is a defined area of an image that acts as a link. An image map lists the coordinates of the hotspots within the image. | |
| 18. What are the two types of image maps? | |
| server-side and client-side | |
| 19. What HTML tag would you use to define a rectangular hotspot with the upper-left edge of the rectangle at the point (5,20) and the lower-right edge located at (85,100) and with oregon.htm displayed when the hotspot is activated? | |
| <area shape="rect" coords="5,20,85,100" href="oregon.htm"/> | |
| 20. What HTML tag would you use for a circular hotspot centered at (44,81) with a radius of 23 pixels to be linked to la.htm? | |
| <area shape="circle" coords="44,81,23" href="la.htm"/> | |
| 21. What HTML tag would you use for a hotspot that connects the points (5,10), (5,35), (25,35), (30,20), and (15,10) and that you want linked to hawaii.htm? | |
| <area shape="poly" coords="5,10,5,35,25,35,30,20,15,10" href="hawaii.htm"/> | |
| 22. What HTML tag would you use to assign an image map named States to westcoast.gif"? | |
| <img src="westcoast.gif" usemap="#States"/> | |