Test 2 – Web DesignSpring 2017

No breaks are allowed while taking this 50-minute test. If you have an EMERGENCY SITUATION and need to leave, please let me know why you need to leave and leave your cell phone on the desk.

Student Name: ______Score______

PART 1. Multiple Choice ( 2 points each)

Page 1

  1. The ______element comprises a unit of content that is self-contained, such as an image, along with one option figcaption element.

a)photo

b)figure

c)picture

d)image

  1. Select the three most common methods of organizing websites.

a)horizontal, vertical, and diagonal

b)hierarchical, linear, and random

c)accessible, readable, maintainable

d)none of the above

  1. A(n) ______is a smaller version of a larger image, and is often linked to that larger image?

a)thumbnail

b)icon

c)favicon

d)wireframe

  1. Set list-style-type to the value ______to hide the display of the list markers on an ordered list.

a)no-display

b)none

c)hide

d)invisible

  1. A color scheme comprised of two colors opposite each other on the color wheel is called:

a)Complementary

b)Analogous

c)Primary

d)Secondary

  1. Which of the following configures a margin for an element with the following values: top margin 30 pixels, left margin 150 pixels, right margin 0 pixels, and bottom margin 0 pixels?

a) margin: 150px 20px 0 300px;

b) margin: top-30, left-150, right-0, bottom-0;

c)margin: 30px 0 0 150px;

d) none of the above

  1. Select the best description of “white space”.

a)The empty screen area around blocks of text and images

b)Choosing white rather than red for the background color a page

c)Configuring the color of the text to be white

d)None of the above

  1. The CSS Box Model has 4 parts. What is the area between the padding and margin called?

a)Content

b)White space

c)Border

d)Div

  1. To apply a style to one or more elements on a web page, configure a CSS ______.

a)group

b)id

c)class

d)None of the above

  1. Use the ______property to configure an image to use as a bullet point in an unordered list.

a)bullet-image

b)image-style

c)list-style-image

d)bullet-style-image

  1. The CSS to create the class called myfloat that floats to the right of the other page content, has a 10px margin, and a solid border is:

a).myfloat {
float:right; margin:10px; border: 1px solid #000000; }

b)#myfloat {
right:float: margin 10px; border: 1px solid #000000; }

c).myfloat {
float:right; 10px:margin; border: 1px solid #000000; }

d).myfloat {
float:right; margin:10px; border: on; }

  1. ______will cause an object not to display.

a)display: block;

b)display: 0px;

c)display: none;

d)display: hide;

  1. Choose the example below of a descendant selector that configures the anchor tags within the element assigned to an id named feature.

a)#feature a

b).feature a

c)a# feature

d)feature #a

  1. Choose the example below that applies multiple selectors to a style declaration.

a)p.li {color: #BB8E25;}

b)p li {color: #BB8E25;}

c)p# li {color: #BB8E25;}

d)p, li {color: #BB8E25;}

  1. Choose the example below that configures a comment in CSS.

a)a. <! The text !>

b)b. // The text //

c)c. /* The text */

d)d. < The text

  1. The CSS property for gradient is:

a)Background-picture

b)Background-image

c)Background-scheme

d)Background-attachment

  1. Which HTML5 element is used to configure the web page heading area? (This refers to the area that appears at the top in which you normally include such items as the logo, banner, possibly nav, etc.)

a)<head>

b)<h1>

c)<header>

d)<heading>

  1. The ______attribute of the anchor tag can cause the new web page to open in its own browser window.

a)target

b)window

c)id

d)href

  1. The ______pseudo-class can be used to modify the display of a hyperlink when a mouse pointer passes over it.

a):link

b):onclick

c):visited

d):hover

  1. The acronym SEO stands for:

a)Social Engineering Opportunity

b)Search Entails Optimizer

c)Social Engine Omission

d)Search Engine Optimization

Page 1

PART 2. Short Answers and Coding (4 points each)

(Note that I’m just jotting down the gist of each answer.)

  1. What is the function of the CSS clear property?

…terminate a float
  1. Name and describe one of the four principles of accessibility (WCAG.2.0).

One of these: Perceivable, Operable, Understandable, Robust.

e.g. understandable refers to ease of comprehending, how well the site is organized, and the use of error messages if in places where user might bet confused.

  1. Provide a definition OR give a code example of ARIA.

Provides methods to increase accessibility of webpages beyond the basic standards.
e.g. Role attribute to give landmarks for webpages.
  1. Which type of CSS positioning can be used to keep a footer, menu or other item in a steady spot?

Fixed.
  1. Write the CSS code to do the following to the anchors of an class called submenu:
    - remove the underlines
    - change the font color to #006400

(BE SURE to WRITE CLEARLY and use the EXACT SYNTAX. Partial credit is unlikely Also remember that that the element for anchor is <a>.)

.submenu a {
text-decoration: none;
color: #006400;
}

BONUS 5 points: Write the HTML code for a horizontal rule set at 60% width.

hr width="60%">

PART 3. Discussion Questions. Write answers below and on next page. (10 points each. )

  1. List two of the principles of visual design as discussed in Chapter 5. Then provide an example of how each of the two can be used in website design.
  2. List and describe two of the CSS debugging techniquesmentioned in Chapter 6. Only techniqueslisted in Chapter 6 will be accepted.
  3. (Part a) Carefully write the HTML code for inserting an image called roses.jpg, which is located in the images folder. The alternative text is “red roses”. (You may skip the width and height.)

(Part b) Also, why should you organize the files of a website using folders and subfolders?

  1. List and describe two SEO techniques based on the presentation on March 24th.

(Note that I’m just jotting down the gist of each answer.)

1. … Contrast, Repetition, Alignment, Proximity. E.g. using distinguishing colors is an example of contrast.
2. …Use temporary background colors; carefully proofread syntax; etc.
3. <imgsrc="images/roses.jpg" alt="red roses"
As websites become larger, it is increasingly important to set up files in a hierarchy of folders in order to manage and access them with efficiency.
4. e.g. Use meaningful <title> and headings; use meta tags for description, key words, etc.

Page 1