3. Each of these mark examples contains an error. a. <input name= country value= Your country here. /> b. <checkbox name= color value= teal />

Size: px

Start display at page:

Download "3. Each of these mark examples contains an error. a. <input name= country value= Your country here. /> b. <checkbox name= color value= teal />"

Anabel O’Connor’
6 years ago
Views:

1 1. Decide whether each of these forms should be sent via the GET or POST method: A form for accessing your bank account online A form for sending t-shirt artwork to the printer A form for searching archived articles A form for collecting long essay entries 2. Which form control element is best suited for the following tasks? When the answer is input, be sure to also include the type. a. Choose your astrological sign from 12 signs b. Indicate whether you have a history or heart disease (yes or not) c. Write up a book review d. Select your favorite ice cream flavors from a list of eight flavors e. Select your favorite ice cream flavors from a list of 25 flavors 3. Each of these mark examples contains an error. a. <input name= country value= Your country here. /> b. <checkbox name= color value= teal /> c. <select name= popsicle > <option value= orange /> <option value= grape /> <option value= cherry /> <select> d. <input type= password /> e. <textarea name= essay height= 6 width= 100 >Your story.</textarea> 4. Convert the following HTML to XHTML: <HTML> <HEAD> <TITLE><Popcorn & Butter/TITLE> </HEAD> <BODY> <H1>Hot Buttered Popcorn</H1> <p><img SRC= popcorn.jpg ALT= bowl of popcorn WIDTH=250 HEIGHT=125</p> <H2>Ingredients</H2>

2 <UL> <LI>popcorn <LI>butter <LI>salt </UL> <H2>Instructions</H2> <p>pop the popcorn. Meanwhile, melt the butter. Transfer the popped popcorn into a bowl, drizzle with melted butter, and sprinkle salt to taste. </BODY> </HTML> 5. Identify the various parts of this style rule: blockquote {line-height: 1.5;} selector: value: property: declaration: 6. What color will paragraphs be when this embedded style sheet is applied to a document? Why? <style type= text/css > p {color: purple;} p {color: green;} p {color: gray;} </style> 7. Write style rules that makes each of the elements described below red (color: red). Write the selector as efficiently as possible. I ve done the first one for you. a. All text element in the document body {color: red;}

3 html head body title style h1 div id= intro div id= main p P class= special ul h2 p h2 P class= special img stong li li li strong b. h2 elements c. h1 elements and all paragraphs d. Elements belong to the class special e. All elements in the intro section f. strong elements in the main section 8. Which of these areas gets filled with a background color> a. The area behind the content b. Any padding added around the content c. Under the border d. The margin around the border e. All the above f. a and b g. a, b, and c 9. Which of these is not a way to specify the color white in CSS? a. #FFFFF b. #FFF c. rgb(255, 255, 255) d. rgb(ff,ff,ff) e. white

f. rgb(100%,100%,100%) 10. Match the pseudoclass with the elements it targets. a. a:link 1. Link that have already been clicked b. a:visited 2. Links that have not yet been visited c. a:hover 3.

All of the samples in the figure use the same source document consisting of one paragraph element to which some padding and a border have been applied. a. body {background-image: url(graphic.gif);} b.

4 f. rgb(100%,100%,100%) 10. Match the pseudoclass with the elements it targets. a. a:link 1. Link that have already been clicked b. a:visited 2. Links that have not yet been visited c. a:hover 3. Links that are in the process of being clicked d. a:active 4. A link with the mouse pointer over it 11. Match the following rules with their respective samples shown in the figures. All of the samples in the figure use the same source document consisting of one paragraph element to which some padding and a border have been applied. a. body {background-image: url(graphic.gif);} b. p {background-image: url(graphic.gif); background-repeat: no-repeat; background-position: 50% 0%;} c. body {background-image: url(graphic.gif); background-repeat: repeat-x;} d. p {background: url(graphic.gif) no-repeat right center;} e. body {background-image: url(graphic.gif); background-repeat: repeat-y;} f. body {background: url(graphic.gif) no-repeat right center;} 12. Which of the following is not true of floated elements? a. All floated elements behave as block elements b. Floats are positioned against the padding edge (just inside the border) of the containing element c. Inline elements flow around a float, but the element box is unchanged d. You must provide a width property for floated block elements

5 14. Match each layout type with the factor that determines the final size of the page area. a. The browser window Fixed-width layouts b. Font size Liquid layouts c. The designer Elastic layouts 15. Match each layout type with the unit of measurement used to create it. a. Ems Fixed-width layouts b. Pixels Liquid layouts c. Percentages and/or auto Elastic layouts 16. Match each layout type with its potential advantage. a. Predictable line lengths Fixed-width layouts b. No awkward leftover space Liquid layouts c. Predictable layout grid Elastic layouts 17. Match each layout type with is potential disadvantage. a. Uncomfortably long line lengths Fixed-width layouts

b. Images don t resize with page Liquid layouts c. Awkwardly short lines at large text sizes Elastic layouts 18. Match the style rules with their respective tables in the following figure. a. table {border-collapse: collapse;} td {border: 2px black solid;} b.

6 b. Images don t resize with page Liquid layouts c. Awkwardly short lines at large text sizes Elastic layouts 18. Match the style rules with their respective tables in the following figure. a. table {border-collapse: collapse;} td {border: 2px black solid;} b. table {border-collapse: separate;} td {border: 2px black solid;} c. table {border-collapse: separate; border-spacing: 2px 12px;} td {border: 2px black solid;} d. table {border-collapse: separate; border-spacing: 5px; border: 2px black solid;} td {background-color: #99f;} e. table {border-collapse: separate; border-spacing: 5px;} td {background-color: #99f; border: 2px black solid;} 19. Write two ways to get unordered list items to line up like a horizontal navigation bar.

CSS Selectors. element selectors. .class selectors. #id selectors

CSS Selectors. element selectors. .class selectors. #id selectors CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors