New Perspectives on HTML CSS and XML Comprehensive 4th Edition by Patrick Carey - Test Bank

Tutorial 3: Designing a Web Page with CSS TRUE/FALSE 1. To render a document, the device displaying the page needs a style sheet that specifies the appearance of each page element. ANS: T PTS: 1 REF: HTML 142 2. In every version of CSS, you apply a style rule containing a list of style properties to an element or a group of elements known as a selector. ANS: T PTS: 1 REF: HTML 144 3. One advantage of user-defined style sheets is that they make the Web more accessible to visually impaired users who may require larger fonts or the absence of clashing color schemes. ANS: T PTS: 1 REF: HTML 145 4. The exact order in which external style sheets and embedded style sheets are processed by the browser depends on the order in which they are listed within the HTML file. ANS: T PTS: 1 REF: HTML 149 5. The first style sheet interpreted by the browser is the one built in to the browser itself. ANS: T PTS: 1 REF: HTML 145 6. Styles set by the author of a Web page and stored in an internal style sheet are loaded after internal and user-defined style sheets. ANS: F PTS: 1 REF: HTML 146 7. Another type of style sheet created by a Web page author is an embedded style sheet, in which the styles are inserted directly within the body element of an HTML document. ANS: F PTS: 1 REF: HTML 148 8. Style sheets cannot be as long and complicated as HTML files. ANS: F PTS: 1 REF: HTML 151 9. A color value is an alphabetic expression that describes the properties of a color. ANS: F PTS: 1 REF: HTML 152 10. CSS also allows RGB values to be entered as hexadecimal numbers. ANS: T PTS: 1 REF: HTML 153 11. Saturation measures the intensity of the chosen color and ranges from 0% (no color) up to 100% (full color). ANS: T PTS: 1 REF: HTML 158 12. Web pages are unstructured documents in which elements are nested within other elements, forming a hierarchy of elements. ANS: F PTS: 1 REF: HTML 165 13. A generic font describes the general appearance of a typeface, but does not rely on a specific font definition. ANS: T PTS: 1 REF: HTML 171 14. Absolute measurements are appropriate when you know the physical properties of an output device and want to fix a size to a specific value. ANS: T PTS: 1 REF: HTML 174 15. The subscript and superscript styles lower or raise text vertically, as well as resize it. ANS: F PTS: 1 REF: HTML 183 16. List style types can be used with contextual selectors to create an outline style based on nested lists. ANS: T PTS: 1 REF: HTML 195 17. By default, browsers offset ordered and unordered lists from the surrounding text. ANS: T PTS: 1 REF: HTML 198 18. Links that are underlined or highlighted only when the mouse pointer hovers over the linked text display what is known as the hover over effect. ANS: F PTS: 1 REF: HTML 200 19. Without underlines, there is no visual clue that the links in the navigation list act as hypertext. ANS: T PTS: 1 REF: HTML 200 20. Good management skills are as crucial to good Web design as a well-chosen color or typeface. ANS: T PTS: 1 REF: HTML 210 MODIFIED TRUE/FALSE 1. CSS2 made it possible to create Web pages that had visually interesting and attractive designs and layouts._________________________ ANS: F, CSS1 PTS: 1 REF: HTML 143 2. Writing a style rule on a single line saves space, but entering each style property on a separate line often makes your code easier to read and edit. _________________________ ANS: T PTS: 1 REF: HTML 144 3. To import a style sheet, add the command =import url(url); to the style sheet file, where url is the URL of an external style sheet file. _________________________ ANS: F, @import url(url); PTS: 1 REF: HTML148 4. A decimal is a number expressed in base 16 rather than in the base 10 form we use every day. _________________________ ANS: F, hexadecimal PTS: 1 REF: HTML 153 5. An additional factor in applying a style sheet is that properties are passed from a parent element to its children in a process known as style inheritance. ANS: T PTS: 1 REF: HTML 150 6. One approach to retaining the consistency of Web page text is to use absolute units, which are expressed relative to the size of other objects within the Web page. _________________________ ANS: F, relative PTS: 1 REF: HTML174 7. Relative units define a font size using one of five standard units of measurement. _________________________ ANS: F, Absolute PTS: 1 REF: HTML 174 8. RGB triplets can describe 256^3 (16.7 million) possible colors, which is a greater number of colors than the human eye can distinguish. _________________________ ANS: T PTS: 1 REF: HTML 153 9. Hue measures the brightness of the color and ranges from 0% (black) up to 100% (white). _________________________ ANS: F, Lightness PTS: 1 REF: HTML 158 10. A parent element is an element that contains one or more other elements, which are child elements of the parent. _________________________ ANS: T PTS: 1 REF: HTML 165 11. A general font is a font that is identified by name, such as Times New Roman or Helvetica._________________________ ANS: F, specific PTS: 1 REF: HTML 171 12. A pixel is a relative unit because the actual rendered size depends on the density of the output device. _________________________ ANS: T PTS: 1 REF: HTML 175 13. Leading refers to the amount of space between characters, while tracking refers to the amount of space between words. _________________________ ANS: F, Kerning PTS: 1 REF: HTML 176 14. The @font-face rule is one example of a CSS @rule, which specifies a command or directive that controls how browsers interpret and run the contents of a CSS style sheet._________________________ ANS: T PTS: 1 REF: HTML 189 15. Structural pseudo-elements are used to classify items based on their locations within the hierarchy of page elements._________________________ ANS: F, pseudo-classes PTS: 1 REF: HTML 203 MULTIPLE CHOICE 1. The second version of CSS, CSS2, was introduced in 1998, expanding the language to provide styles to _________. a. set the font size, type, and other properties of Web page text c. specify background and foreground colors of different page elements b. apply a background image to any element d. position elements at specific locations on a page ANS: D PTS: 1 REF: HTML 143 2. A user could change the font size assigned to paragraph and heading text, set foreground and background colors, and specify whether or not to display _____ images. a. outline c. clip art b. inline d. graphic ANS: B PTS: 1 REF: HTML 145 3. An external style sheet is included by adding the link element <link href=”url” rel=”stylesheet” type=”text/css” /> to the document head, where ______is the URL of the external style sheet file. a. stylesheet c. url b. text/css d. href ANS: C PTS: 1 REF: HTML 146 4. The style sheet rules in a(n) ________ style sheet take precedence over any rules set in the browser’s internal style sheet or in a user-defined style sheet. a. internal c. embedded b. outside d. external ANS: D PTS: 1 REF: HTML146 5. The ______ statement must always come before any other style rules in the style sheet. a. @import c. !import b. @embed d. !embed ANS: A PTS: 1 REF: HTML 148 6. The @import rule has the same impact as adding multiple ____ elements to the HTML file. a. connection c. contact b. link d. integrated ANS: B PTS: 1 REF: HTML 148 7. Unlike an external style sheet, a(n) _______ style sheet is applied only to the Web page in which it is placed. a. linked c. embedded b. internal d. integrated ANS: C PTS: 1 REF: HTML 149 8. Inline styles are styles applied directly to specific elements using the style attribute <element style=”style rules”> … </element> where element is the HTML element and _______ are CSS styles applied to that element. a. style rules c. element style b. element d. style ANS: A PTS: 1 REF: HTML 149 9. If two style rules have equal specificity, and thus equal importance, then the one that is defined _____ in the style sheet is the one used. a. last c. second b. first d. third ANS: A PTS: 1 REF: HTML 150 10. An additional factor in applying a style sheet is that properties are passed from a parent element to its children in a process known as __________. a. style sheets c. style inheritance b. an embedded style sheet d. style link ANS: C PTS: 1 REF: HTML 150 11. Many Web browsers now include _______ tools to allow page designers to track each style back to its source. a. designer c. developer b. planner d. creator ANS: C PTS: 1 REF: HTML 150 12. Style comments can also be added to embedded style sheets as long as they are placed between the opening and closing <style> ______. a. markers c. links b. tags d. placeholders ANS: B PTS: 1 REF: HTML 151 13. Adding all three primary colors–red, green and blue–at maximum intensity produces the color _____, while adding any two of the three primary colors at maximum intensity produces the trio of complementary colors—yellow, magenta, and cyan. a. white c. lime b. blue d. black ANS: A PTS: 1 REF: HTML 152 14. Yellow has the triplet ____. a. (0, 0, 0) c. (0, 255, 255) b. (255, 255, 0) d. (255, 0, 255) ANS: B PTS: 1 REF: HTML 153 15. CSS allows RGB values to be entered as ____. a. decimals c. WYSIWYG values b. hexadecimals d. RBG values ANS: B PTS: 1 REF: HTML 153 16. In the hexadecimal system, 16 is expressed as ____. a. 1F c. 10 b. F d. 1 ANS: C PTS: 1 REF: HTML 153 17. In the hexadecimal system, 21 is expressed as ____. a. 1F c. 15 b. F d. F1 ANS: C PTS: 1 REF: HTML 153 18. CSS supports the ___ basic color names. a. 16 c. 256 b. 64 d. 216 ANS: A PTS: 1 REF: HTML 154 19. Color also evokes an emotional response, in which certain colors are associated with particular feelings or concepts, such as the color ____ for assertive, powerful, sexy, and dangerous. a. black c. blue b. orange d. red ANS: D PTS: 1 REF: HTML 155 20. Browsers recognize five ____ font groups. a. specific c. generic b. monospace d. designed ANS: C PTS: 1 REF: HTML 171 21. If you use a hexadecimal value for a color, you preface the hexadecimal string with a(n) ____. a. pound symbol c. question mark b. ampersand d. exclamation point ANS: A PTS: 1 REF: HTML 153 22. CSS supports styles to define both the text and ______ color for each element on your page. a. font c. style b. background d. forecolor ANS: B PTS: 1 REF: HTML 156 23. To set the foreground or text color of an element, use the following property: a. text: color; c. color: color; b. forecolor: color; d. backcolor: color; ANS: C PTS: 1 REF: HTML 156 24. ____ units define a font size using one of five standard units of measurement. a. Relative c. Standard b. Absolute d. Uppercase ANS: B PTS: 1 REF: HTML 174 25. ____ units express font size relative to the size of other objects within the Web page. a. Absolute c. Standard b. Relative d. Output ANS: B PTS: 1 REF: HTML 174 26. If an element contains 12pt text, a length of 2em equals ____. a. 24pts c. 4pts b. 12pts d. 2pts ANS: A PTS: 1 REF: HTML 174 27. A(n) ____ represents a single dot on the output device. a. element c. link b. icon d. pixel ANS: D PTS: 1 REF: HTML 175 28. The amount of space between pairs of letters is referred to as the ____. a. tracking c. kerning b. dithering d. pacing ANS: C PTS: 1 REF: HTML 176 29. ____ is the tint of the color and is based on the color’s location on the color wheel. a. Hue c. Lightness b. Saturation d. Darkness ANS: A PTS: 1 REF: HTML 158 30. ______ measures the intensity of the chosen color and ranges from 0% (no color) up to 100% (full color). a. Hue c. Lightness b. Saturation d. Darkness ANS: B PTS: 1 REF: HTML 158 31. ______ measures the brightness of the color and ranges from 0% (black) up to 100% (white). a. Hue c. Lightness b. Saturation d. Darkness ANS: C PTS: 1 REF: HTML 158 32. Graphic designers consider ____ easier to use because it allows you to guess at an initial color based on hue and then tweak the saturation and lightness values to fine-tune the final color. a. HTML c. HSL b. CSS d. HTM ANS: C PTS: 1 REF: HTML 159 33. _____ defines how much of the colors below the surface of the current object show through to affect its appearance. a. Clarity c. Lightness b. Saturation d. Opacity ANS: D PTS: 1 REF: HTML 159 34. The amount of space between words is called ____. a. kerning c. pacing b. tracking d. dithering ANS: B PTS: 1 REF: HTML 176 35. With semi-transparent colors, the final color rendered by a browser depends on the background color of the ______element. a. parent c. sibling b. child d. descendant ANS: A PTS: 1 REF: HTML 159 36. A technique known as ______ enhancement places code conforming to older standards before newer properties. a. color c. text b. progressive d. opacity ANS: B PTS: 1 REF: HTML 160 37. The color scheme that uses two hues close to one another on the color wheel in which one color is the dominant color and the other is a supporting color used only for highlights and nuance is _____. a. triad c. analogic b. tetrad d. monochrome ANS: C PTS: 1 REF: HTML 161 38. The default unit of length for kerning and tracking is the ____. a. pica c. point b. pixel d. inch ANS: B PTS: 1 REF: HTML 176 39. A _____ element is an element that contains one or more other elements, which are child elements. a. family c. parent b. sibling d. descendant ANS: C PTS: 1 REF: HTML 165 40. Two child elements that share the same parent are referred to as ______ elements. a. parent c. child b. sibling d. descendant ANS: B PTS: 1 REF: HTML 165 41. ____ is the space between lines of text. a. Tracking c. Leading b. Kerning d. Dithering ANS: C PTS: 1 REF: HTML 178 42. Extending the first line of text to the left of the text block creates a ____ indent. a. tracking c. leading b. kerning d. hanging ANS: D PTS: 1 REF: HTML 178 43. Each child element may contain children of its own and so forth down the hierarchy, creating a set of ______ elements that are all descended from a common parent. a. descendant c. parent b. child d. sibling ANS: A PTS: 1 REF: HTML 165 44. The style rule * {color: blue;} uses the asterisk (*) selector—also known as the ______ selector—to select all elements in the document. a. character c. wildcard b. text d. object ANS: C PTS: 1 REF: HTML 166 45. A typeface in which each character has the same width and is often used to display programming code is ______ a. monospace c. cursive b. serif d. fantasy ANS: A PTS: 1 REF: HTML 171 46. Two attributes, ______, are often key in targeting styles to a specific element or group of elements. a. id and char c. id and type b. id and class d. id and elem ANS: B PTS: 1 REF: HTML 168 47. One reason to use the class attribute is to assign the same _____ to multiple elements that belong to the same class. a. rule c. style b. format d. theme ANS: C PTS: 1 REF: HTML 168 48. A typeface that mimics handwriting with highly stylized elements and flourishes, best used in small doses for decorative page elements, is ______. a. serif c. fantasy b. monospace d. cursive ANS: D PTS: 1 REF: HTML 171 49. When referenced by the font-family property, a specific font refers to a font ______ that is stored on a user’s computer. a. definition c. format b. style d. color ANS: A PTS: 1 REF: HTML 171 50. A typeface in which a small ornamentation appears at the tail end of each character is _____. a. sans-serif c. monospace b. serif d. fantasy ANS: B PTS: 1 REF: HTML 171 51. A general rule for printing is to use ______ fonts for headlines and serif fonts for body text. a. serif c. monospace b. sans-serif d. cursive ANS: B PTS: 1 REF: HTML 172 52. One commonly used relative unit is the ____ unit. a. in c. em b. ft d. en ANS: C PTS: 1 REF: HTML 174 53. One of the great advantages of relative units like the em unit is that they can make your page ______, allowing the page to be rendered the same way no matter what font size is used by the browser. a. expandable c. flexible b. collapsable d. scalable ANS: D PTS: 1 REF: HTML 174 54. The size or _______of most output devices is typically expressed in terms of pixels. a. resolution c. density b. clarity d. scale ANS: A PTS: 1 REF: HTML 175 55. To prevent your browser from displaying address text in italic, you can set the font-style property to _____. a. bold c. semi-italic b. normal d. semi-bold ANS: B PTS: 1 REF: HTML 180 56. The _____ value of the vertical-align style aligns the bottom of the element with the bottom of the font of the surrounding content. a. baseline c. text-bottom b. bottom d. sub ANS: C PTS: 1 REF: HTML 183 57. In the preceding figure, the item number _____ displays the shortcut property. a. 1 c. 3 b. 2 d. 4 ANS: B PTS: 1 REF: HTML 184 58. In the preceding figure, the item number ____ sets the background color to dark and the text color to white or semi-transparent white. a. 1 c. 3 b. 2 d. 4 ANS: A PTS: 1 REF: HTML 184 59. The Web font format that supports Internet Explorer is _______. a. TrueType/OpenType c. Scalable Vector Graphics b. Embedded OpenType d. Web Open Font Format ANS: B PTS: 1 REF: HTML 185 60. The great advantage of a Web font is that it gives a designer control over the ______ used in a document. a. theme c. font b. style d. typeface ANS: D PTS: 1 REF: HTML 186 61. The CSS @rule that imports an external style sheet file located at ur1 is _______. a. @import url(url) media c. @namespace prefix uri b. @charset “encoding”;. d. @media media { styles } ANS: A PTS: 1 REF: HTML 189 62. The following are some errors that can cause your style sheets to fail, except for ______ a. missing semicolons c. missing curly braces b. missing colons d. typos ANS: B PTS: 1 REF: HTML 190 63. To display an ordered list with alphabetical markers such as A. Home B. Getting Started C. Scrapbooking Tips D. Supply List you would apply the following list style to the ol element: a. ol {list-style-type: lower-roman;} c. ol {list-style-type: upper-roman;} b. ol {list-style-type: upper-greek;} d. ol {list-style-type: upper-alpha;} ANS: D PTS: 1 REF: HTML 194 64. List style types can be used with contextual selectors to create a(n) _____ style based on nested lists. a. table c. hierarchy b. outline d. tree ANS: B PTS: 1 REF: HTML 195 65. The style rule ul {list-style-image: url();} displays items from ______ lists marked with the graphic image in the file. a. ordered c. unstructured b. unordered d. structured ANS: B PTS: 1 REF: HTML 196 66. Placing the marker inside of the block causes the list text to flow _____ the marker. a. inside c. over b. under d. around ANS: D PTS: 1 REF: HTML 198 67. ________effects can be created using pseudo-classes. a. Cascading c. Hover b. Rollover d. Link ANS: B PTS: 1 REF: HTML 200 68. A________ is a classification of an element based on its current status, position, or use in the document. a. psuedo-class c. psuedo-text b. psuedo-element d. psuedo-style ANS: A PTS: 1 REF: HTML 200 69. _______ are not elements that exist in the document hierarchy but rather are based on objects that exist in the rendered Web page. a. Psuedo-class c. Psuedo-code b. Psuedo-style d. Psuedo-element ANS: D PTS: 1 REF: HTML 204 70. One of the techniques to help manage your creations is: a. Use style comments throughout, especially at the bottom of the file. c. Keep your style sheets as small as possible, and break them into separate files if necessary. b. Divide your style sheet into sections, with comments marking the page headings. d. Choose several organizing schemes. ANS: C PTS: 1 REF: HTML 210 Case-Based Critical Thinking Questions Case 3-1 Art’s Woodworking Shop is trying to design a Web page with CSS. Art would like create the new design based on the latest elements and styles from HTML and CSS. He has created a few sample pages: ---describes the business and contact information P ---list of product descriptions C ---list of custom products 71. The first step is determine how to render the document. The style sheet used on the Web is the ______. a. HTML c. CSS b. W3C d. XHTML ANS: C PTS: 1 REF: HTML 142 TOP: Critical Thinking 72. The design applied to a Web site is usually a combination of several style sheets. Art has submitted three Web pages with style sheets. Art needs to remember the ____style sheet interpreted by the browser is the one built in to the browser itself. a. second c. first b. third d. last ANS: C PTS: 1 REF: HTML 145 TOP: Critical Thinking 73. Art’s product style sheets can be imported into a single sheet by adding the command _____ a. @import url (url1); c. @import url (); b. @import url (); d. @ (); ANS: B PTS: 1 REF: HTML148 TOP: Critical Thinking Case-Based Critical Thinking Questions Case 3-2 Terry is building a Web site and wants to have three main links called Home, Product Info, and Contact Us. She will create a hierarchy of page elements and revise the styles sheets. 74. Using Terry’s three pages, the Home page contains two _____ elements. a. child c. sibling b. parent d. descendant ANS: A PTS: 1 REF: HTML 165 TOP: Critical Thinking 75. Terry has decided to display the text of all h1 headings found within the page header in green. The style rule applied is _____. a. header h1 {shade: green;} c. header h1 {green: color;} b. header h1 {green: shade;} d. header h1 {color: green;} ANS: D PTS: 1 REF: HTML 165 TOP: Critical Thinking 76. To apply a style to all elements in a document, Terry would use the ____ selector. a. e c. * b. f d. + ANS: C PTS: 1 REF: HTML 167 TOP: Critical Thinking 77. If Terry decides to use _____ selector then all elements will belong to the main class. a. .main c. #intro b. d. a[href] ANS: A PTS: 1 REF: HTML 169 TOP: Critical Thinking Case-Based Critical Thinking Questions Case 3-3 Tim is creating a page to display his poker club’s set of rules. He has main categories and subcategories along with about a paragraph or more of explanation for each. 78. Tim should use what type of font for the categories and subcategories? a. serif c. sans-serif b. monospace d. fantasy ANS: A PTS: 1 REF: HTML 176 TOP: Critical Thinking 79. Tim wants to display the subcategories in capital letters but does not want them to appear more important than the main categories, so he wants small capital letters. Which style should he use? a. text-transform c. font-variant b. font-transform d. text-variant ANS: C PTS: 1 REF: HTML 181 TOP: Critical Thinking 80. Tim wants to align the top of the element with the top of the font of the surrounding content. Which value should he use? a. baseline c. top b. super d. text-top ANS: D PTS: 1 REF: HTML 183 TOP: Critical Thinking COMPLETION 1. An ____________________ style is a style that is applied directly to an element through the use of the style attribute. ANS: inline PTS: 1 REF: HTML 149 2. A color ____________________ is a numerical expression that precisely describes a color. ANS: value PTS: 1 REF: HTML 152 3. Each color is represented by a set of numbers called an RGB ____________________ that is based on the strength of its red, green, and blue components. ANS: triplet PTS: 1 REF: HTML 153 4. A(n) ____________________ is a number based on base-16 mathematics rather than the base-10 form that we use every day. ANS: hexadecimal PTS: 1 REF: HTML 153 5. The ________ color scheme uses two hues separated by 180° on the color wheel and is the most vibrant, offering the highest contrast and visual interest, but can be misused and might distract users from the page content. ANS: complementary PTS: 1 REF: HTML 161 6. Each child element may contain children of its own and so forth down the hierarchy, creating a set of _______ elements that are all descended from a common parent. ANS: descendant PTS: 1 REF: HTML 165 7. ____ matches any element in the hierarchy. ANS: * PTS: 1 REF: HTML 166 8. To apply a style based on the class value of elements, use either the .class or the ______ selectors, where class is the value of the class attribute and elem is the element name. ANS: PTS: 1 REF: HTML 170 9. A ______ font describes the general appearance of a typeface, but does not rely on a specific font definition. ANS: generic PTS: 1 REF: HTML 171 10. _______ is a typeface in which each character has the same width; it is often used to display programming code. ANS: Monospace PTS: 1 REF: HTML 171 11. _______units are units that are fixed in size regardless of the device rendering the Web page. ANS: Absolute PTS: 1 REF: HTML 174 12. To cope with the uncertainty about how their pages will be viewed, many Web page designers opt to use ______ units, which are expressed relative to the size of other objects within the Web page. ANS: relative PTS: 1 REF: HTML 174 13. The size or ______of most outp ut devices is typically expressed in terms of pixels. ANS: resolution PTS: 1 REF: HTML 175 14. Context is important when interpreting the effect of the ____________________ unit. ANS: em PTS: 1 REF: HTML 174 15. If you choose to make your pages scalable for a variety of devices and resolutions, you will want to express ______ and tracking values as percentages or in em units. ANS: kerning PTS: 1 REF: HTML 176 16. Another typographic feature that you can set is _____, which is the space between lines of text. ANS: leading PTS: 1 REF: HTML 178 17. You can use relative units to make a page ____________________, which allows the page to be rendered the same way no matter how a user’s output device is configured. ANS: scalable PTS: 1 REF: HTML 174 18. ____________________ is the process of passing down styles from the more general level to the more specific. ANS: Style inheritance PTS: 1 REF: HTML 150 19. Another style you can use to change the appearance of your text is________where the type values include none (for no decoration), underline, overline, and line-through. ANS: text-decoration: type; PTS: 1 REF: HTML 181 20. The style ____________________ is used to specify the font size in a style. ANS: font-size PTS: 1 REF: HTML 183 MATCHING Identify the letter of the choice that best matches the phrase or definition. a. color value g. relative units b. RGB triplet h. pixel c. style rule i. tracking d. absolute units j. kerning e. hexadecimal k. leading f. saturation l. scalable 1. Units expressed relative to the size of other objects within the Web page 2. Define a font size using one of five standard units of measurement 3. Contains a list of style properties to an element or a group of elements known as a selector 4. Represents a single dot on the output device 5. Measures the intensity of the chosen color 6. A numerical expression that precisely describes a color 7. A number expressed in the base-16 numbering system 8. Numbers that represent a color according to the strength of its red, green, and blue components 9. Refers to the amount space between words 10. A page is this when it uses relative units 11. Space between lines of text 12. The amount of space between characters 1. ANS: G PTS: 1 REF: HTML 174 2. ANS: D PTS: 1 REF: HTML 174 3. ANS: C PTS: 1 REF: HTML 144 4. ANS: H PTS: 1 REF: HTML 175 5. ANS: F PTS: 1 REF: HTML 158 6. ANS: A PTS: 1 REF: HTML 152 7. ANS: E PTS: 1 REF: HTML 153 8. ANS: B PTS: 1 REF: HTML 153 9. ANS: I PTS: 1 REF: HTML 176 10. ANS: L PTS: 1 REF: HTML 174 11. ANS: K PTS: 1 REF: HTML 178 12. ANS: J PTS: 1 REF: HTML 176 ESSAY 1. Explain the styles to change each of the following in HTML: kerning, tracking, leading, and indentation of the first line. ANS: Kerning refers to the amount of space between characters, while tracking refers to the amount of space between words. The styles to control an element’s kerning and tracking are letter-spacing: value; word-spacing: value; where value is the size of space between individual letters or words. You specify these sizes with the same units that you use for font sizing. The default value for both kerning and tracking is 0 pixels. A positive value increases the letter and word spacing, while a negative value reduces the space between letters and words. If you choose to make your pages scalable for a variety of devices and resolutions, you will want to express kerning and tracking values as percentages or in em units. Another typographic feature that you can set is leading, which is the space between lines of text. The style to set the leading value is line-height: size; where size is a specific length or a percentage of the font size of the text on the affected lines. If no unit is specified, most browsers interpret the number to represent the ratio of the line height to the font size. The standard ratio is 1.2:1, which means that the line height is usually 1.2 times the font size. By contrast, the style rule p {line-height: 2em;} makes all paragraphs double-spaced. A common technique for multi-line titles is to give title text more impact using large fonts and small line heights. An additional way to control text spacing is to set the indentation for the first line of a block of text. The style is text-indent: size; where size is a length expressed in absolute or relative units, or as a percentage of the width of the text block. For example, an indentation value of 5% indents the first line by 5% of the width of the block. The indentation value also can be negative, extending the first line to the left of the text block to create a hanging indent. PTS: 1 REF: HTML 176|HTML 178 TOP: Critical Thinking Tutorial 5: Working with Tables and Columns TRUE/FALSE 1. Each table in a Web page follows a basic structure consisting of the table element and a collection of table columns nested in the table element. ANS: F PTS: 1 REF: HTML 321 2. Tables are considered block-level elements. ANS: T PTS: 1 REF: HTML 321 3. The item shown in the accompanying figure is a Web table. ANS: T PTS: 1 REF: HTML 325 4. A Web table consists of a table element and a collection of table rows. ANS: T PTS: 1 REF: HTML 321 5. The number of columns in a Web table is determined by the maximum number of cells within each row. ANS: T PTS: 1 REF: HTML 325 6. The outside gridlines are not affected by a table’s border attribute; only the internal gridlines are changed. ANS: F PTS: 1 REF: HTML 325 7. Decreasing the width of a table’s border to 1 pixel will remove the border between the cells. ANS: F PTS: 1 REF: HTML 325 8. By default, tables will display without borders in a browser. ANS: T PTS: 1 REF: HTML 325 9. Alignment values of “left” or “right” place a table caption below the table to the left or right. ANS: F PTS: 1 REF: HTML 335 10. Only one caption is allowed per Web table. ANS: T PTS: 1 REF: HTML 333 11. By default, the caption appears directly above the table when creating a table caption. ANS: T PTS: 1 REF: HTML 335 12. The table header, table body, and table footer may all contain a different number of columns. ANS: F PTS: 1 REF: HTML 336 13. A single table can contain at most one <tbody> tag. ANS: F PTS: 1 REF: HTML 336 14. By using the <thead> and <tfoot> tags, the browser can be made to repeat those sections in a table that spans multiple pages. ANS: T PTS: 1 REF: HTML 336 15. The table marked 1 in the accompanying figure has a frame value of “border.” ANS: F PTS: 1 REF: HTML 350 16. The table marked 2 in the accompanying figure has a frame value of “above.” ANS: T PTS: 1 REF: HTML 350 17. The baseline option places the text near the bottom of the cell, but aligns the bases of each letter. ANS: T PTS: 1 REF: HTML 351 18. With the HTML border attribute, you can apply one set of borders to a Web table itself and another set of borders to the individual cells within the table. ANS: F PTS: 1 REF: HTML 353 19. When the width of the entire table is increased, the added space is divided evenly among the table columns. ANS: T PTS: 1 REF: HTML 363 20. Multi-column layouts are created with CSS3 by setting either the number of columns or the width of each column. ANS: T PTS: 1 REF: HTML 372 MODIFIED TRUE/FALSE 1. To create a table row, use the tag <th>content</th>. _________________________ ANS: F, <tr>content</tr> PTS: 1 REF: HTML 322 2. One difference between the <th> and <td> tags is that text formatted with the <th> tag is left-aligned within the cell. _________________________ ANS: F centered center-aligned PTS: 1 REF: HTML 323 3. Netscape horizontally aligns captions to the left or right above the table. _________________________ ANS: F Internet Explorer Opera PTS: 1 REF: HTML 335 4. The <thead> and <tfoot> sections must appear after any <tbody> sections in the table structure. _________________________ ANS: F, before PTS: 1 REF: HTML 336 5. By default, browsers display tables without table borders. _________________________ ANS: T PTS: 1 REF: HTML 325 6. Unformatted text is displayed by the browser in a monospace font in which each letter takes up the same amount of space. _________________________ ANS: F, Preformatted PTS: 1 REF: HTML 343 7. The cellspacing attribute controls the amount of space inserted inside table cells. _________________________ ANS: F between outside PTS: 1 REF: HTML 347 8. The width value for a single cell might be overridden by browsers if other cells in the column require a smaller width to display their content. _________________________ ANS: F, larger PTS: 1 REF: HTML 349 9. In a table frame, the sides that will have borders are specified. _________________________ ANS: T PTS: 1 REF: HTML 349 10. The default value for the frame attribute of the table tag is lhs. _________________________ ANS: F, box PTS: 1 REF: HTML 349 11. Only one caption is allowed per Web table and the <caption> tag must be listed directly before the opening <table> tag. _________________________ ANS: F, after PTS: 1 REF: HTML 333 12. The valign attribute can be applied to table rows, row groups, columns, and column groups to set the vertical alignment of several cells at once. _________________________ ANS: T PTS: 1 REF: HTML 351 13. The border-type style can be used to allow any table element to have a border. _________________________ ANS: F, border-collapse PTS: 1 REF: HTML 355 14. Table cells have the lowest precedence in Web table styles. _________________________ ANS: F, highest PTS: 1 REF: HTML 359 15. You can apply the table layout to other HTML elements by using the display style. _________________________ ANS: T PTS: 1 REF: HTML 369 MULTIPLE CHOICE 1. Like other block-level elements, you can ____ tables using the same styles you’ve already studied. a. float c. both a and b b. resize d. neither a nor b ANS: C PTS: 1 REF: HTML 321 2. Which of the following CANNOT be marked with an HTML table element? a. table header c. table row b. table column d. table caption ANS: B PTS: 1 REF: HTML 338 3. Tables are considered ____ elements. a. block-level c. high-level b. low-level d. inline-level ANS: A PTS: 1 REF: HTML 321 4. Enter ____ tags to identify text to be table headings. a. <tr> and </tr> c. <th> and </th> b. <td> and </td> d. <ht> and </ht> ANS: C PTS: 1 REF: HTML 323 5. Text formatted with the <th> tag is displayed in a(n) ____ font. a. italicized c. underlined b. boldface d. colored ANS: B PTS: 1 REF: HTML 323 6. Each row of a table is indicated using a two-sided ____ tag. a. <tr> c. <th> b. <td> d. <tl> ANS: A PTS: 1 REF: HTML 322 7. Data cells in a Web table are displayed using a ____ tag. a. <tr> c. <tl> b. <th> d. <td> ANS: D PTS: 1 REF: HTML 322 8. Within a table row, a two-sided ____ tag indicates the presence of individual table cells. a. <tr> c. <tc> b. <td> d. <th> ANS: B PTS: 1 REF: HTML 322 9. The number of columns is determined by the maximum number of ____ that are inserted within each row, according to the original HTML specifications. a. cells c. headers b. columns d. indices ANS: A PTS: 1 REF: HTML 325 10. If you have four <td> tags in each table row, that table has ____ columns. a. two c. four b. three d. six ANS: C PTS: 1 REF: HTML 325 11. By default, most table borders are displayed in two shades of ____ that create a three-dimensional effect. a. white c. gray b. black d. blue ANS: C PTS: 1 REF: HTML 327 12. In the <caption> tag, an alignment value of ____ places the caption below the table. a. below c. under b. bottom d. beneath ANS: B PTS: 1 REF: HTML 335 13. In the <caption> tag, an alignment value of ____ places the caption above the table. a. above c. top b. over d. central ANS: C PTS: 1 REF: HTML 335 14. HTML allows you to identify the different parts of your table using the ____ tags. a. <thead> c. <tfoot> b. <tbody> d. all of the above ANS: D PTS: 1 REF: HTML 336 15. The table header, table body, and table footer must all contain the same number of ____. a. columns c. rows b. styles d. indices ANS: A PTS: 1 REF: HTML 336 16. You reference columns individually using the ____ element. a. <col /> c. <colbody /> b. <colgroup /> d. <column /> ANS: A PTS: 1 REF: HTML 338 17. The ____ attribute can be used to specify the number of columns a colgroup references. a. id c. span b. div d. class ANS: C PTS: 1 REF: HTML 339 18. Preformatted text is displayed by the browser in a ____ font. a. decorative c. serif b. sans-serif d. monospace ANS: D PTS: 1 REF: HTML 343 19. A ____ table contains only text, evenly spaced on the Web page in rows and columns. a. columnar text c. preformatted text b. row-based d. graphical ANS: C PTS: 1 REF: HTML 343 20. You can use the ____ tag to display preformatted text. a. <pre> c. <format> b. <form> d. <preformatted> ANS: A PTS: 1 REF: HTML 343 21. Preformatted text is displayed by the browser in a ____ in which each letter takes up the same amount of space. a. monospace text box c. cell spacing text box b. monospace font d. cell spacing font ANS: B PTS: 1 REF: HTML 343 22. Text formatted with the ____ tag retains any white space you want to display on your Web page. a. <form> c. <pre> b. <sp> d. <preformat> ANS: C PTS: 1 REF: HTML 343 23. The ____ attribute controls the amount of space inserted between table cells. a. cellpadding c. cellspacing b. cellbetween d. cellborder ANS: C PTS: 1 REF: HTML 346 24. The default cellspacing value in most browsers is ____ pixel(s). a. 1 c. 4 b. 2 d. 5 ANS: B PTS: 1 REF: HTML 346 25. Cellpadding value is expressible in ____. a. pixels c. em b. cm d. All of the above ANS: A PTS: 1 REF: HTML 346 26. To control the space between the table text and the cell borders, add the ____ attribute to the table tag. a. cellspacing c. cellborder b. cellbetween d. cellpadding ANS: D PTS: 1 REF: HTML 346 27. A ____ cell occupies more than one row or column in a table. a. breadth c. spanning b. full d. columnar ANS: C PTS: 1 REF: HTML 327 28. There is no HTML attribute to change the ____ style, but many browsers allow you to change the color by adding the bordercolor attribute to the table element. a. border c. background b. frame d. cell ANS: A PTS: 1 REF: HTML 327 29. Spanning cells are created by inserting a ____ attribute in a <td> or <th> tag. a. rowspan or colspan c. cellspan or rowspan b. spanrow or spancol d. tdspan or trspan ANS: A PTS: 1 REF: HTML 327 30. To create a cell that spans two columns in a table, you enter the <td> tag as ____. a. <td rowspan>“2”> c. <td colspan>“2”> b. <td colspan=“2”> d. <td rowspan=“2”> ANS: B PTS: 1 REF: HTML 327 31. To create a cell that spans two rows in a table, you enter the <td> tag as ____. a. <td colspan>“2”> c. <td rowspan=“2”> b. <td rowspan>“2”> d. <td colspan=“2”> ANS: C PTS: 1 REF: HTML 327 32. To create a cell that spans two rows and two columns at the same time, you enter the <td> tag as ____. a. <td rows=“2” cols=“2”> c. <td span=“2,2”> b. <td rowspan=“2+2”> d. <td rowspan=“2” colspan=“2”> ANS: D PTS: 1 REF: HTML 327 33. One tip for the effective use of tables is to use cell ____ to keep the table content from appearing too crowded. a. padding c. kerning b. tracking d. spanning ANS: A PTS: 1 REF: HTML 346 34. The ____ attribute allows you to determine which sides of the table will have borders. a. rules c. frame b. box d. rhs ANS: C PTS: 1 REF: HTML 349 35. Which of the following is a table frame type? a. beneath c. top b. below d. center ANS: B PTS: 1 REF: HTML 350 36. Which of the following is a table frame type? a. null c. vsides b. rsh d. eborder ANS: C PTS: 1 REF: HTML 349 37. With the frame value ____, a border is drawn around all four sides of the table. a. box c. 4sides b. asides d. all ANS: A PTS: 1 REF: HTML 350 38. With the frame value ____, a border is drawn only above the table. a. top c. hsides b. above d. box ANS: B PTS: 1 REF: HTML 350 39. With the frame value ____, a border is drawn only below the table. a. under c. below b. beneath d. vsides ANS: C PTS: 1 REF: HTML 350 40. With the frame value ____, a border is drawn on the top and bottom sides of the table. a. rhs c. vsides b. lhs d. hsides ANS: D PTS: 1 REF: HTML 350 41. With the frame value ____, a border is drawn only on the left-hand side of the table. a. lhs c. left b. rhs d. vside ANS: A PTS: 1 REF: HTML 350 42. With the frame value ____, a border is drawn only on the right-hand side of the table. a. lhs c. right b. rhs d. hside ANS: B PTS: 1 REF: HTML 350 43. With the frame value ____, a border is drawn on the left and right sides of the table. a. lrhs c. vsides b. hsides d. both ANS: C PTS: 1 REF: HTML 350 44. With the frame value ____, no border is drawn around the table. a. null c. no b. none d. void ANS: D PTS: 1 REF: HTML 350 45. The table marked 7 in the accompanying figure has a frame value of ____. a. vsides c. border b. beneath d. none ANS: A PTS: 1 REF: HTML 350 46. The table marked 8 in the accompanying figure has a frame value of ____. a. vsides c. border b. beneath d. void ANS: D PTS: 1 REF: HTML 350 47. The table marked 1 in the accompanying figure has a rules value of ____. a. all c. rows b. cols d. void ANS: A PTS: 1 REF: HTML 350 48. The table marked 2 in the accompanying figure has a rules value of ____. a. all c. rows b. cols d. void ANS: B PTS: 1 REF: HTML 350 49. The table marked 3 in the accompanying figure has a rules value of ____. a. all c. rows b. groups d. void ANS: B PTS: 1 REF: HTML 350 50. The table marked 4 in the accompanying figure has a rules value of ____. a. full c. rows b. cols d. none ANS: D PTS: 1 REF: HTML 350 51. The ____ attribute lets you control how the internal table gridlines are drawn. a. rules c. gridlines b. grid d. lines ANS: A PTS: 1 REF: HTML 350 52. Given the syntax <table rules=“type”>, which of the following is a value for type? a. top c. bottom b. all d. All of the above ANS: B PTS: 1 REF: HTML 350 53. By default, cell text is placed ____. a. in the middle of the cell, aligned with the cell’s right edge b. in the middle of the cell, aligned with the cell’s left edge c. at the bottom of the cell, aligned with the cell’s right edge d. at the bottom of the cell, aligned with the cell’s left edge ANS: B PTS: 1 REF: HTML 351 54. Cascading Style Sheets included support for Web tables starting with ____. a. CSS1 c. CSS2 b. CSS3 d. CSS5 ANS: C PTS: 1 REF: HTML 353 55. To create a border using CSS, you use the ____ style. a. table-border c. border b. border-size d. border-type ANS: C PTS: 1 REF: HTML 353 56. The ____ style can be used to separate the table borders. a. border-separate c. border-width b. border-collapse d. border-type ANS: B PTS: 1 REF: HTML 355 57. To specify a distance of 3 pixels between cell borders, you enter ____. a. border-style: 3px c. border-collapse: 3px b. border-width: 3px d. border-spacing: 3px ANS: D PTS: 1 REF: HTML 355 58. If borders are collapsed and either border style is hidden, the collapsed border is ____. a. hidden c. 2px wide b. halved d. 1px wide ANS: A PTS: 1 REF: HTML 355 59. If neither border is hidden, the style of the ____ border takes priority over the ____. a. narrower, wider c. wider, narrower b. shorter, wider d. wider, longest ANS: C PTS: 1 REF: HTML 355 60. If the borders differ only in color, the color from the table object with the ____ priority is used. a. lowest c. first b. highest d. last ANS: B PTS: 1 REF: HTML 356 61. If two borders have the same width but different styles, ____ borders have the highest priority. a. Solid c. Dashed b. Groove d. Double ANS: D PTS: 1 REF: HTML 356 62. To set the color of a row, you use the ____ style. a. background-color c. color b. row-color d. col-color ANS: A PTS: 1 REF: HTML 360 63. Which of the following table styles has the lowest precedence? a. table cells c. table b. row groups d. column groups ANS: C PTS: 1 REF: HTML 359 64. Columns and column groups accept only four styles: border, background, ____, and visibility. a. color c. width b. height d. font-family ANS: C PTS: 1 REF: HTML 359 65. ____ supports caption-side values of left and right to place the caption directly to the left or right of a Web table. a. Chrome c. Safari b. Firefox d. Internet Explorer ANS: B PTS: 1 REF: HTML 367 66. Table ____ can contain any HTML elements including headings, lists, inline images, and even other tables. a. rows c. cells b. columns d. grids ANS: C PTS: 1 REF: HTML 341 67. ____ can be inaccessible to users with disabilities. a. Tables c. Borders b. Spans d. Stacks ANS: A PTS: 1 REF: HTML 341 68. With ____, you can apply the full range of CSS styles not available to columns and column groups. a. pseudo-code c. pseudo-classes b. pseudo-attributes d. pseudo-events ANS: C PTS: 1 REF: HTML 360 69. The equivalent HTML element to display: table-row is ____. a. tr c. thead b. tbody d. col ANS: A PTS: 1 REF: HTML 369 70. The equivalent HTML element to display: table-column is ____. a. td c. col b. th d. colgroup ANS: C PTS: 1 REF: HTML 369 Case-Based Critical Thinking Questions Case 5-1 Skylar is trying to build a table to display her inventory of the items she sells in her online software shop. She wants to display the cover, name, vendor, quantity in stock, and price for each item. 71. How many columns would Skylar's table need to have as a minimum? a. 2 c. 4 b. 3 d. 5 ANS: D PTS: 1 REF: HTML 322 TOP: Critical Thinking 72. Skylar would like to have borders just on the top and bottom; which style would do that? a. frame="rhs" c. frame="lhs" b. frame="hsides" d. frame="vsides" ANS: B PTS: 1 REF: HTML 350 TOP: Critical Thinking 73. Skylar would also like her header row to be blue. How would she accomplish that using a style? a. color="blue" c. header-color: blue b. background-color: blue d. thead-color: blue ANS: B PTS: 1 REF: HTML 359 TOP: Critical Thinking Case-Based Critical Thinking Questions Case 5-2 Boater’s Week is an online magazine. They like to host boat shows around town during the year to promote their magazine. Trevor is tasked with creating a table to list their boat show information which includes place, date & time, and a brief description of the event's activities. Trevor is using a Web site that is several years old that uses a table as a layout. Trevor wants to create a table layout that is more modern. He wants to enter the data for each boat show within one cell, therefore requiring a cell to occupy more than one column or row. 74. Trevor decides that the data needs to occupy more than one row or column. To this he must create a(n) ____ cell. a. spanning c. wider b. expanded d. taller ANS: A PTS: 1 REF: HTML 327 TOP: Critical Thinking 75. Trevor needs to add the attribute ____ to create a table cell that spans several columns. a. col = “columns” c. row = “rows” b. colspan = “columns” d. rowspan = “rows” ANS: B PTS: 1 REF: HTML 328 TOP: Critical Thinking 76. Trevor wants to create banded rows and columns. He wants the even rows to be yellow. To do that, he needs to use the ____. a. nth-of-type pseudo-code c. nth-of-type pseudo-class b. nth-of-type pseudo-color d. nth-of-type pseudo ANS: C PTS: 1 REF: HTML 362 TOP: Critical Thinking 77. If Trevor wanted to switch to a layout that was not based on a table, he could use which element and keep his background? a. <div> c. <span> b. <xmp> d. <pre> ANS: A PTS: 1 REF: HTML 369 TOP: Critical Thinking Case-Based Critical Thinking Questions Case 5-3 Santo has made a Web site to promote his soccer team. He wants to maintain a page where he can list the information about each of the soccer members. For each member, he likes to display a brief list of biographical information on the left and then their picture on the right. 78. How many columns will Santo most likely need in his table? a. 2 c. 5 b. 4 d. 8 ANS: A PTS: 1 REF: HTML 322 TOP: Critical Thinking 79. Santo wants the display the name of the team at the top of the table. Which element should he use to do this? a. tbody c. td b. caption d. colgroup ANS: B PTS: 1 REF: HTML 333 TOP: Critical Thinking 80. The first cell in the biographical information table has several styles applied to it. Santo would like to specify the background color of this cell, but is unsure which style to modify. Which table style has the highest precedence? a. rows c. table cells b. column groups d. table ANS: C PTS: 1 REF: HTML 359 TOP: Critical Thinking COMPLETION 1. Tables are considered ____________________-level elements. ANS: block PTS: 1 REF: HTML 321 2. The number of ____________________ is determined by the maximum number of cells within each row. ANS: columns PTS: 1 REF: HTML 325 3. The border attribute does not control the width of ____________________ gridlines. ANS: internal PTS: 1 REF: HTML 325 4. Tables are marked within a two-sided ____________________ tag that identifies the start and ending of the table structure. ANS: <table> table PTS: 1 REF: HTML 321 5. Cells that identify the contents of a row or column are called table ____________________. ANS: headers headings PTS: 1 REF: HTML 323 6. Most Web browsers display table data using unformatted text that is ____________________-aligned. ANS: left PTS: 1 REF: HTML 323 7. ____________________ cells are marked with the <td> tag and are used for any content that is not considered a heading. ANS: Data PTS: 1 REF: HTML 323 8. Most browsers display table headings in a(n) ____________________ font, centered within the table cell. ANS: bold boldface PTS: 1 REF: HTML 323 9. The <tbody>, <tfoot>, and <thead> tags contain collections of rows called ____________________ groups. ANS: row PTS: 1 REF: HTML 336 10. You can organize columns into ____________________ and format one or more entire columns with a single style declaration or attribute. ANS: groups column groups PTS: 1 REF: HTML 338 11. A preformatted text table normally is displayed using a(n) ____________________ font. ANS: monospace PTS: 1 REF: HTML 343 12. ____________________ tables use the same amount of space for each character just as it was typed in. ANS: Preformatted text PTS: 1 REF: HTML 343 13. By default, browsers set the cell spacing to ____________________ pixels. ANS: 2 two PTS: 1 REF: HTML 346 14. Cell ____________________ refers to the space between the cell contents and the cell border. ANS: padding PTS: 1 REF: HTML 346 15. If you want your table to fill the entire width of the display area, regardless of the resolution of the user’s monitor, you should set the width attribute to ____________________. ANS: 100% PTS: 1 REF: HTML 348 16. With the ____________________ and rules attributes, you can control how borders and gridlines are applied to the table. ANS: frame PTS: 1 REF: HTML 349 17. A(n) ____________________ specifies how the internal gridlines are drawn within a table. ANS: table rule PTS: 1 REF: HTML 350 18. One challenge associated with tables is that they can be ____________________ for users with disabilities. ANS: inaccessible PTS: 1 REF: HTML 341 19. One challenge associated with tables is that they can take longer to ____________________. ANS: render PTS: 1 REF: HTML 341 20. One challenge associated with table layouts is that they are ____________________ to revise. ANS: difficult complex PTS: 1 REF: HTML 341 MATCHING Identify the letter of the choice that best matches the phrase or definition. a. preformatted text g. spanning b. break-after h. cell spacing c. separate i. caption-side d. collapse j. column-gap e. frame k. center f. rules l. left 1. Displayed by the browser in a monospace font 2. Style value that causes borders to be combined 3. Style value that makes it so you can only apply borders to the table itself or to table cells 4. Type of cell that occupies more than one row or column in a table 5. Attribute that allows you to determine which sides of a table will have borders 6. The amount of space between table cells 7. Attribute that lets you control how internal table gridlines are drawn 8. Style that determines where the title of a table is displayed 9. The default alignment of a table heading 10. The default alignment of a table cell 11. Property used to set the space between columns 12. Property used to create a manual column break in CSS3 1. ANS: A PTS: 1 REF: HTML 343 2. ANS: D PTS: 1 REF: HTML 355 3. ANS: C PTS: 1 REF: HTML 355 4. ANS: G PTS: 1 REF: HTML 327 5. ANS: E PTS: 1 REF: HTML 349 6. ANS: H PTS: 1 REF: HTML 346 7. ANS: F PTS: 1 REF: HTML 350 8. ANS: I PTS: 1 REF: HTML 367 9. ANS: K PTS: 1 REF: HTML 351 10. ANS: L PTS: 1 REF: HTML 351 11. ANS: J PTS: 1 REF: HTML 372 12. ANS: B PTS: 1 REF: HTML 376 ESSAY 1. Explain what the <tbody>, <thead>, and <tfoot> tags are and how they are used. What kinds of tables use them most often? ANS: HTML supports three row groups: one to mark the header rows, another for the body rows, and a third for the footer rows. The syntax to create these three row groups is <table> <thead> table rows </thead> <tfoot> table rows </tfoot> <tbody> table rows </tbody> </table> where table rows are rows from the Web table. For example, the following code marks two rows as belonging to the table header row group: <thead> <tr> <th colspan=”2”>KPAF Programs</th> </tr> <tr> <th>Time</th> <th>Program</th> </tr> </thead> Order is important. The thead element must appear first, and then the tfoot element, and finally the tbody element. A table can contain only one thead element and one tfoot element, but it can include any number of tbody elements. The reason the table body group appears last, rather than the footer group, is to allow the browser to render the footer before receiving what might be numerous groups of table body rows. One purpose of row groups is to allow you to create different styles for groups of rows in your table. Any style that you apply to the thead, tbody, or tfoot element is inherited by the rows those elements contain. Row groups also are used for tables in which table body contents are made up of imported data from external data sources such as databases or XML documents. In those situations, a single table can span several Web pages, with different imported content displayed in the table body in each page but with the same table header and table footer bracketing each page of content. PTS: 1 REF: HTML 336 TOP: Critical Thinking 2. Describe how to use CSS to apply table styles to other Web page elements. ANS: First you determine the elements that you would like to have rendered like a table. Determine which table element will delimit the table. Then determine which elements should be rendered as table rows, followed by table cells. You can also define elements to be table headings, table groups, and table captions. The table styles are display styles. For example, to specify that an element should display like the table element, you would use display: table. The complete list of table display styles that you can use are: display: table, display: table-inline, display: table-row, display: table-row-group, display: table-header-group, display: table-footer-group, display: table-column. display: table-column-group, display: table-cell, and display: table-caption. Refer to Table 5-49 on page HTML 369. PTS: 1 REF: HTML 369 TOP: Critical Thinking 3. Briefly explain four challenges often associated with table-based Web page layout. ANS: 1. Tabular layouts violate the purpose of HTML. A basic philosophy of Web page design is that HTML code should indicate the structure of a document, but not how the document should be rendered by browsers. Tables take control of layout from style sheets, putting page design back into the HTML file. 2. Table layouts are difficult to revise. Imagine a complex table layout consisting of two columns with several levels of additional tables nested within each column. Now imagine having to revise that table structure, changing it into a three-column layout. This would not be an easy task because the page content would be intertwined with the page layout. Further, imagine the difficulty of having to repeat that design change for dozens of pages across a large Web site. By contrast, a layout created with a properly designed style sheet is much easier to maintain and revise because it is separate from the page content. 3. Tables take longer to render. Unless the size of every element in a table is specified, browsers need to first load the table content and then run algorithms to determine how to size each element of the table. This can be time-consuming for large, complex tables that involve many cells and nested elements. 4. Table layouts are code-heavy. Creating a visually striking table layout often requires several levels of nested table cells, rows, and columns. The ratio of HTML code to actual page content thus becomes more heavily weighted toward the HTML code, resulting in a document that takes longer to load and that can be difficult to interpret by people who need to edit the underlying code. 5. Tables can be inaccessible to users with disabilities. Aural or Braille browsers recite the Web page content line-by-line down through the file, but tables convey information both horizontally and vertically. The result is that information that is easily understood visually is unintelligible aurally. On the other hand, with style sheets an aural style could be designed that would better convey such information aurally. PTS: 1 REF: HTML 341 TOP: Critical Thinking