wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Advanced Web Design

Total questions: 100

Worksheet time: 22hrs 21mins

Name
Class
Date
1.

Which of the following organizations was founded to help speed up the development of HTML?

a)

Open Source Foundation (OSF)

b)

None of the above

c)

WHATWG

d)

W3C

e)

Internet Now (INOW)

2.

Which of these is credited as being initially responsible for creating CSS?

a)

Tim Berners-Lee

b)

All of the above

c)

None of the above

d)

Web Hypertext Application Technology Group (WHATG)

e)

Worldwide Web Consortium

3.

If a CSS style rule was applied to content, but the content is not styled as expected, which of the following could be the cause?

a)

Incorrect CSS Syntax

b)

The style rule may be non-existent

c)

The style may have been overridden by another style

d)

All of the above

e)

None of the above

4.

If a browser displays the literal HTML code when a web page is loaded, which of the following is the likely reason?

a)

The file was not saved as an HTML file

b)

There is a syntax error in the HTML code

c)

All of the above

d)

There is a bug in the browser

e)

The file may be corrupted

5.

If a web page displays the way its author intended it to, then we know its HTML and CSS syntax are correct.

a)

True

b)

False

6.

Which of the following practices can be helpful in ensuring that opening HTML tags have a matching closing tag?

a)

Writing tags in uppercase

b)

Indenting nested tags

c)

Writing tags in lowercase

d)

All of the above

e)

None of the above

7.

Using relative path names for resources that belong to a website is usually a good practice.

a)

True

b)

False

8.

The values "rect", "circle", and "poly" are associated with which of the following attributes?

a)

Area

b)

Shape

c)

None of the above

d)

coords

e)

map

9.

When defining an image map, more than one area element can be nested inside a map element.

a)

True

b)

False

10.

If nothing appears on a web page where you expected an image to be displayed, which of the following is the likely reason?

a)

The image file is not on the server's file system

b)

Incorrect HTML syntax may have caused the browser to ignore the img tag

c)

An incorrect path name may have been specified

d)

The file name may have been spelled incorrectly

e)

All of the above

11.

Which of the following file names is not commonly used to store the code for a website's home page?

a)

default.html

b)

home.html

c)

index.html

d)

index.htm

12.

In practice, there are really only one or two ways to organize a website.

a)

True

b)

False

13.

The design mechanism that helps users move around a website is called a __________ system.

a)

FAQ

b)

Wireframe

c)

Navigation

d)

Breadcrumbs

14.

A __________, which shows where elements will appear on a web page, is a useful design tool when you are thinking about individual page design.

a)

Navigation System

b)

Site Plan

c)

Site Map

d)

Storyboard

15.

Which of the following navigation bar labels is not a good choice?

a)

Buy Accessories

b)

Buy Motorcycles

c)

Buy Cars

d)

Buying Bicycles

16.

A __________ is a good way to document the organization and page hierarchy of a website.

a)

Navigation Bar

b)

Site Map

c)

FAQ Page

d)

Graphical Image

17.

Which of the following is not a website design principle?

a)

Begin coding your web pages as soon as possible

b)

Follow user interface conventions

c)

Make your site perform well

d)

Make your site easy to use

18.

Which of the following is a common technique for telling website visitors where they are on the website, and where they have been, by displaying a series of links?

a)

Site Map

b)

Breadcrumbs

c)

None of the above

d)

Navigation Bar

19.

Even before users visit a website, they have expectations about where certain page elements should be located.

a)

True

b)

False

20.

A site's __________ describes where files, like images and HTML files, are located on a computer's file system.

a)

File Structure

b)

Site Map

c)

Wireframe

d)

Navigation System

21.

The small element is intended to be used instead of CSS to set off lengthy paragraphs of text that we want to display in smaller than normal font size.

a)

True

b)

False

22.

Which of the following is not true?

a)

HTML5 provides features that allow a visitor to edit the content of a web page

b)

The contenteditable attribute can be applied to virtually any block of text to enable editing of that text

c)

Any changes to text made by a visitor will usually be lost when the visitor leaves the page

d)

Hyperlinks can safely be contained in editable text blocks

23.

Which of the following page elements are often used together?

a)

Dfn

b)

Pre

c)

Code

d)

All of the above

24.

Which of the following are semantic page elements?

a)

Header

b)

Aside

c)

Section

d)

Sidebar

25.

Which of the following statements is not true?

a)

The summary element enables displaying a shortened summary of a larger body of content

b)

The summary element should be nested inside the details element

c)

The details element should be nested inside the summary element

d)

None of the above

26.

The HTML spellcheck attribute will correct a user's spelling mistakes.

a)

True

b)

False

27.

What happens to any text enclosed within meter tags if a browser does not implement the meter element?

a)

The text will be ignored

b)

The text will be displayed

c)

The browser will issue an error message

d)

None of the above

28.

The div element is a semantic page element.

a)

True

b)

False

29.

Which of the following is not true about HTML5 semantic page elements?

a)

They provide layout possibilities that did not exist in earlier versions of HTML

b)

They can be nested inside one another

c)

Their use is recommended but not mandatory

d)

They give more meaning to a page layout

30.

The time page element automatically uses a computer's internal clock to get the current time.

a)

True

b)

False

31.

An alternative to using separate external style sheets for different media types is to use a single style sheet in conjunction with one or more __________.

a)

At Rules

b)

inline rules

c)

media specifications

d)

none of the above

32.

In a document tree, a child element can have more than one direct parent.

a)

True

b)

False

33.

When it comes to inheritance, a web browser looks at a web page in the form of a ___________.

a)

All of the above

b)

Set of nested HTML tags

c)

Document Tree

d)

Site Map

34.

A __________ allows you to chain simple selectors together in order to accomplish more advanced styling.

a)

macro selector

b)

pseudo-class

c)

combinator

d)

pseudo-element

35.

__________ has to do with how properties apply to nested page elements.

a)

Precedence

b)

Nesting Order

c)

Specificity

d)

Inheritance

36.

A page element that is contained in one or more elements is called a __________ element.

a)

ancestor

b)

sibling

c)

descendant

d)

child

37.

A __________ represents content that is part of another HTML element and that can be styled independently from the rest of that element.

a)

selector

b)

combinator

c)

psuedo-class

d)

psuedo-element

38.

__________ involves how browsers decide which styling rule to use if more than one rule can be applied to a page element.

a)

Inheritance

b)

Nesting Order

c)

Precedence

d)

Specificity

39.

Which of the following is an example of a child combinator?

a)

article ~p { background-color: red; }

b)

article +p { background-color: red; }

c)

article >p { background-color: red; }

d)

article p { background-color: red; }

40.

Styling the second paragraph in every article element on a web page is an example of selective styling based on __________.

a)

surrounding

b)

context

c)

attributes

d)

media

41.

The image-opacity property is used to change the opacity of an image.

a)

True

b)

False

42.

Which of the following text-shadow properties are not optional?

a)

color

b)

x-offset

c)

blur-radius

d)

none of the above

43.

Which of the following properties are used to add a drop shadow to a non-text page element?

a)

box-shadow

b)

shadow

c)

image-shadow

d)

text-shadow

44.

Which of the following properties are used to round the corners of a page element?

a)

border-radius

b)

corner-radius

c)

radius

d)

radius-element

45.

Which of the following transformations are possible with CSS?

a)

rotate

b)

translate

c)

skew

d)

scale

46.

Which of the following are the minimum that must be specified for a CSS animation?

a)

duration

b)

keyframe name

c)

direction

d)

timing function

47.

A value of zero for the opacity property corresponds to complete transparency.

a)

True

b)

False

48.

A CSS transition can move a page element from its original location to a second and third location.

a)

True

b)

False

49.

Which of the following are not valid gradient types?

a)

Circular Gradient

b)

Linear Gradient

c)

Diagonal Gradient

d)

Radial Gradient

50.

Which, if any, of the following differentiates a CSS animation from a CSS transition?

a)

Animations can alter more than one element property, transitions cannot

b)

Animations can move an element to many more locations than a transition can

c)

Animations can rotate elements, transitions cannot

d)

None of the above

51.

The best way to center a page element with CSS is to set its left and right margins to "center".

a)

True

b)

False

52.

This property is transparent and can have no color or decorative characteristics.

a)

Content Area

b)

Padding

c)

Border

d)

None of the above

53.

When this type of positioning is used, a element is taken out of the normal flow of a web page and is positioned at a specific location. The space the element would have occupied is used by the other page elements.

a)

Fixed

b)

Static

c)

Absolute

d)

Relative

54.

When this type of positioning is used, the space that would have normally been occupied by an element remains empty on the page and the other elements on the page are not rearranged to take up that space.

a)

Fixed

b)

Absolute

c)

Relative

d)

Static

55.

This type of positioning is the default positioning.

a)

Static

b)

Relative

c)

Absolute

d)

Fixed

56.

Block elements are stacked on top of each other when a browser renders a web page.

a)

True

b)

False

57.

The declaration right: -10px; will place an element 10 pixels to the right of its containing element.

a)

True

b)

False

58.

Consider the following CSS declarations: margin: 20px; border: 50px; padding: 10px;


If the content area for a page element takes up 100 pixels horizontally, how many total pixels does it take up horizontally accounting for these declarations?

a)

180

b)

260

c)

250

d)

170

59.

In the Box Model, what is the area immediately surrounding a page element's content called?

a)

Padding

b)

Margin

c)

Content Area

d)

Border

60.

This type of positioning locks an element's location, and the other page elements will flow as if the element didn't exist.

a)

Relative

b)

Static

c)

Absolute

d)

Fixed

61.

What is the value of 864 pixels expressed in ems?

a)

50 em

b)

54 em

c)

64 em

d)

60 em

62.

The max-width property is used to make media flexible.

a)

True

b)

False

63.

The __________ tag is used to specify media queries in an external style sheet.

a)

None of the above

b)

Style

c)

Link

d)

Media

64.

Responsive web design is a technique for ensuring that web page layouts look exactly the same regardless of the device used to display a page.

a)

True

b)

False

65.

Which of the following is the key to making a page layout fluid and keeping page elements displayed in the same proportions?

a)

Using percentages for page element widths

b)

Using max-width with a value in pixels

c)

Specifying that page elements take up 100 percent of available width

d)

None of the above

66.

Which of the following is not a component of responsive web design?

a)

Flexible Media

b)

Styling By Content

c)

Media Queries

d)

Fluid Layouts

67.

Modern strategies for designing responsive web pages start by designing page layouts for the largest display devices and then designing for progressively smaller devices.

a)

True

b)

False

68.

Which of the following attributes are used to selectively load an external style sheet based on a media query?

a)

only

b)

media

c)

@media

d)

link

69.

Which of the following attributes should be used to specify that the viewport width and the device width should be equal?

a)

set-width

b)

initial-scale

c)

only

d)

content

70.

Width, device-height, and orientation are examples of this.

a)

Properties

b)

CSS attributes

c)

Media Query

d)

Media Features

71.

To embed a JavaScript program in an HTML file, you use the __________ tag.

a)

script

b)

js

c)

embed

d)

action

72.

JavaScript can be used for stand-alone applications that run in their own web page.

a)

True

b)

False

73.

JavaScript is a _-side technology

a)

server

b)

client

c)

data

d)

web

74.

Java and JavaScript refer to the same programming language.

a)

True

b)

False

75.

JavaScript has __________ looping constructs.

a)

1

b)

2

c)

3

d)

4

76.

JavaScript functions can be passed values and can return values.

a)

True

b)

False

77.

Which of the following defines calculate as a JavaScript function?

a)

var calculate = function();

b)

var calculate = function()

c)

var calculate : function();

d)

calculate = function()

78.

How many ways are there to include comments in a JavaScript program?

a)

1

b)

4

c)

3

d)

2

79.

Which of the following is used to display output information?

a)

alert() function

b)

prompt() function

c)

$() function

d)

None of the above

80.

Which of the following types of applications is JavaScript not used for?

a)

data validation

b)

image swaps

c)

server-side data handling

d)

image rollovers

81.

When page elements overlap, the __________ property can be used to change the order of overlap.

a)

z-index

b)

overlap

c)

float

d)

depth

82.

The __________ property is used to specify how much space there is between columns in a multi-column page layout.

a)

column-gap

b)

column-padding

c)

column-space

d)

padding

83.

A flexible box may be a good choice when you want to accomplish which of the following?

a)

Layout simple page content in a single row.

b)

Layout simple page content in a single column.

c)

Multi-row and multi-column page layout.

d)

All of the above

84.

The align-items property is used to specify how elements will be aligned along the main axis of a flexible box.

a)

True

b)

False

85.

Which of the following properties, when used, would be the equivalent of a "bring to front" and "send to back" feature?

a)

depth

b)

z-index

c)

float

d)

none of the above

86.

The __________ property is used to set up a flexible box.

a)

flex

b)

display

c)

flex-box

d)

flexible

87.

Which of the following properties would be used to set the number of columns in a multi-column layout?

a)

column

b)

num-columns

c)

cols

d)

column-count

88.

The __________ property is used to prevent floating.

a)

nofloat

b)

clear

c)

none

d)

none of the above

89.

The layout properties for page elements displayed in a flexible box are specified in their parent element.

a)

True

b)

False

90.

For doing very complex multi-column page layout, which of the following properties would be the best choice?

a)

colspan

b)

align

c)

float

d)

flex

91.

The target area on a web page that a user can drag an element to is often called a __________.

a)

end state

b)

drop zone

c)

event handler

d)

none of the above

92.

The __________ is a feature of HTML5 that provides a standard way for websites to access and display location-specific data using JavaScript.

a)

Google Maps

b)

WebWorkers API

c)

Geolocation API

d)

None of the above

93.

Image elements are usually draggable by default.

a)

True

b)

False

94.

The Document Object Model (DOM) is an internal representation of how browsers view a web page.

a)

True

b)

False

95.

To make a page element draggable, which function is called?

a)

makeDraggable()

b)

setDraggable()

c)

preventDefault()

d)

draggable()

96.

Only a single event handler can be associated with a page element.

a)

True

b)

False

97.

Examples of these include onmouseout and onclick.

a)

event handlers

b)

drag actions

c)

drop actions

d)

function callbacks

98.

Which of the following is required in order to do an image swap using JavaScript?

a)

The images to be swapped must be named

b)

The images to be swapped must be associated with a defined drop zone

c)

The images to be swapped must be draggable

d)

All of the above

99.

This occurs when a user hovers a mouse over a page element or clicks on a button.

a)

event handler

b)

image swap

c)

event

d)

function callback

100.

Which of the following statements is false?

a)

JavaScript code can be located within HTML tags

b)

JavaScript code can be located in a style sheet

c)

JavaScript code can be located within script tags

d)

JavaScript code can be located in an external JavaScript file