Font size
WorksheetsAdvanced Web Design
Total questions: 100
Worksheet time: 22hrs 21mins
Which of the following organizations was founded to help speed up the development of HTML?
Open Source Foundation (OSF)
None of the above
WHATWG
W3C
Internet Now (INOW)
Which of these is credited as being initially responsible for creating CSS?
Tim Berners-Lee
All of the above
None of the above
Web Hypertext Application Technology Group (WHATG)
Worldwide Web Consortium
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?
Incorrect CSS Syntax
The style rule may be non-existent
The style may have been overridden by another style
All of the above
None of the above
If a browser displays the literal HTML code when a web page is loaded, which of the following is the likely reason?
The file was not saved as an HTML file
There is a syntax error in the HTML code
All of the above
There is a bug in the browser
The file may be corrupted
If a web page displays the way its author intended it to, then we know its HTML and CSS syntax are correct.
True
False
Which of the following practices can be helpful in ensuring that opening HTML tags have a matching closing tag?
Writing tags in uppercase
Indenting nested tags
Writing tags in lowercase
All of the above
None of the above
Using relative path names for resources that belong to a website is usually a good practice.
True
False
The values "rect", "circle", and "poly" are associated with which of the following attributes?
Area
Shape
None of the above
coords
map
When defining an image map, more than one area element can be nested inside a map element.
True
False
If nothing appears on a web page where you expected an image to be displayed, which of the following is the likely reason?
The image file is not on the server's file system
Incorrect HTML syntax may have caused the browser to ignore the img tag
An incorrect path name may have been specified
The file name may have been spelled incorrectly
All of the above
Which of the following file names is not commonly used to store the code for a website's home page?
default.html
home.html
index.html
index.htm
In practice, there are really only one or two ways to organize a website.
True
False
The design mechanism that helps users move around a website is called a __________ system.
FAQ
Wireframe
Navigation
Breadcrumbs
A __________, which shows where elements will appear on a web page, is a useful design tool when you are thinking about individual page design.
Navigation System
Site Plan
Site Map
Storyboard
Which of the following navigation bar labels is not a good choice?
Buy Accessories
Buy Motorcycles
Buy Cars
Buying Bicycles
A __________ is a good way to document the organization and page hierarchy of a website.
Navigation Bar
Site Map
FAQ Page
Graphical Image
Which of the following is not a website design principle?
Begin coding your web pages as soon as possible
Follow user interface conventions
Make your site perform well
Make your site easy to use
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?
Site Map
Breadcrumbs
None of the above
Navigation Bar
Even before users visit a website, they have expectations about where certain page elements should be located.
True
False
A site's __________ describes where files, like images and HTML files, are located on a computer's file system.
File Structure
Site Map
Wireframe
Navigation System
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.
True
False
Which of the following is not true?
HTML5 provides features that allow a visitor to edit the content of a web page
The contenteditable attribute can be applied to virtually any block of text to enable editing of that text
Any changes to text made by a visitor will usually be lost when the visitor leaves the page
Hyperlinks can safely be contained in editable text blocks
Which of the following page elements are often used together?
Dfn
Pre
Code
All of the above
Which of the following are semantic page elements?
Header
Aside
Section
Sidebar
Which of the following statements is not true?
The summary element enables displaying a shortened summary of a larger body of content
The summary element should be nested inside the details element
The details element should be nested inside the summary element
None of the above
The HTML spellcheck attribute will correct a user's spelling mistakes.
True
False
What happens to any text enclosed within meter tags if a browser does not implement the meter element?
The text will be ignored
The text will be displayed
The browser will issue an error message
None of the above
The div element is a semantic page element.
True
False
Which of the following is not true about HTML5 semantic page elements?
They provide layout possibilities that did not exist in earlier versions of HTML
They can be nested inside one another
Their use is recommended but not mandatory
They give more meaning to a page layout
The time page element automatically uses a computer's internal clock to get the current time.
True
False
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 __________.
At Rules
inline rules
media specifications
none of the above
In a document tree, a child element can have more than one direct parent.
True
False
When it comes to inheritance, a web browser looks at a web page in the form of a ___________.
All of the above
Set of nested HTML tags
Document Tree
Site Map
A __________ allows you to chain simple selectors together in order to accomplish more advanced styling.
macro selector
pseudo-class
combinator
pseudo-element
__________ has to do with how properties apply to nested page elements.
Precedence
Nesting Order
Specificity
Inheritance
A page element that is contained in one or more elements is called a __________ element.
ancestor
sibling
descendant
child
A __________ represents content that is part of another HTML element and that can be styled independently from the rest of that element.
selector
combinator
psuedo-class
psuedo-element
__________ involves how browsers decide which styling rule to use if more than one rule can be applied to a page element.
Inheritance
Nesting Order
Precedence
Specificity
Which of the following is an example of a child combinator?
article ~p { background-color: red; }
article +p { background-color: red; }
article >p { background-color: red; }
article p { background-color: red; }
Styling the second paragraph in every article element on a web page is an example of selective styling based on __________.
surrounding
context
attributes
media
The image-opacity property is used to change the opacity of an image.
True
False
Which of the following text-shadow properties are not optional?
color
x-offset
blur-radius
none of the above
Which of the following properties are used to add a drop shadow to a non-text page element?
box-shadow
shadow
image-shadow
text-shadow
Which of the following properties are used to round the corners of a page element?
border-radius
corner-radius
radius
radius-element
Which of the following transformations are possible with CSS?
rotate
translate
skew
scale
Which of the following are the minimum that must be specified for a CSS animation?
duration
keyframe name
direction
timing function
A value of zero for the opacity property corresponds to complete transparency.
True
False
A CSS transition can move a page element from its original location to a second and third location.
True
False
Which of the following are not valid gradient types?
Circular Gradient
Linear Gradient
Diagonal Gradient
Radial Gradient
Which, if any, of the following differentiates a CSS animation from a CSS transition?
Animations can alter more than one element property, transitions cannot
Animations can move an element to many more locations than a transition can
Animations can rotate elements, transitions cannot
None of the above
The best way to center a page element with CSS is to set its left and right margins to "center".
True
False
This property is transparent and can have no color or decorative characteristics.
Content Area
Padding
Border
None of the above
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.
Fixed
Static
Absolute
Relative
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.
Fixed
Absolute
Relative
Static
This type of positioning is the default positioning.
Static
Relative
Absolute
Fixed
Block elements are stacked on top of each other when a browser renders a web page.
True
False
The declaration right: -10px; will place an element 10 pixels to the right of its containing element.
True
False
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?
180
260
250
170
In the Box Model, what is the area immediately surrounding a page element's content called?
Padding
Margin
Content Area
Border
This type of positioning locks an element's location, and the other page elements will flow as if the element didn't exist.
Relative
Static
Absolute
Fixed
What is the value of 864 pixels expressed in ems?
50 em
54 em
64 em
60 em
The max-width property is used to make media flexible.
True
False
The __________ tag is used to specify media queries in an external style sheet.
None of the above
Style
Link
Media
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.
True
False
Which of the following is the key to making a page layout fluid and keeping page elements displayed in the same proportions?
Using percentages for page element widths
Using max-width with a value in pixels
Specifying that page elements take up 100 percent of available width
None of the above
Which of the following is not a component of responsive web design?
Flexible Media
Styling By Content
Media Queries
Fluid Layouts
Modern strategies for designing responsive web pages start by designing page layouts for the largest display devices and then designing for progressively smaller devices.
True
False
Which of the following attributes are used to selectively load an external style sheet based on a media query?
only
media
@media
link
Which of the following attributes should be used to specify that the viewport width and the device width should be equal?
set-width
initial-scale
only
content
Width, device-height, and orientation are examples of this.
Properties
CSS attributes
Media Query
Media Features
To embed a JavaScript program in an HTML file, you use the __________ tag.
script
js
embed
action
JavaScript can be used for stand-alone applications that run in their own web page.
True
False
JavaScript is a _-side technology
server
client
data
web
Java and JavaScript refer to the same programming language.
True
False
JavaScript has __________ looping constructs.
1
2
3
4
JavaScript functions can be passed values and can return values.
True
False
Which of the following defines calculate as a JavaScript function?
var calculate = function();
var calculate = function()
var calculate : function();
calculate = function()
How many ways are there to include comments in a JavaScript program?
1
4
3
2
Which of the following is used to display output information?
alert() function
prompt() function
$() function
None of the above
Which of the following types of applications is JavaScript not used for?
data validation
image swaps
server-side data handling
image rollovers
When page elements overlap, the __________ property can be used to change the order of overlap.
z-index
overlap
float
depth
The __________ property is used to specify how much space there is between columns in a multi-column page layout.
column-gap
column-padding
column-space
padding
A flexible box may be a good choice when you want to accomplish which of the following?
Layout simple page content in a single row.
Layout simple page content in a single column.
Multi-row and multi-column page layout.
All of the above
The align-items property is used to specify how elements will be aligned along the main axis of a flexible box.
True
False
Which of the following properties, when used, would be the equivalent of a "bring to front" and "send to back" feature?
depth
z-index
float
none of the above
The __________ property is used to set up a flexible box.
flex
display
flex-box
flexible
Which of the following properties would be used to set the number of columns in a multi-column layout?
column
num-columns
cols
column-count
The __________ property is used to prevent floating.
nofloat
clear
none
none of the above
The layout properties for page elements displayed in a flexible box are specified in their parent element.
True
False
For doing very complex multi-column page layout, which of the following properties would be the best choice?
colspan
align
float
flex
The target area on a web page that a user can drag an element to is often called a __________.
end state
drop zone
event handler
none of the above
The __________ is a feature of HTML5 that provides a standard way for websites to access and display location-specific data using JavaScript.
Google Maps
WebWorkers API
Geolocation API
None of the above
Image elements are usually draggable by default.
True
False
The Document Object Model (DOM) is an internal representation of how browsers view a web page.
True
False
To make a page element draggable, which function is called?
makeDraggable()
setDraggable()
preventDefault()
draggable()
Only a single event handler can be associated with a page element.
True
False
Examples of these include onmouseout and onclick.
event handlers
drag actions
drop actions
function callbacks
Which of the following is required in order to do an image swap using JavaScript?
The images to be swapped must be named
The images to be swapped must be associated with a defined drop zone
The images to be swapped must be draggable
All of the above
This occurs when a user hovers a mouse over a page element or clicks on a button.
event handler
image swap
event
function callback
Which of the following statements is false?
JavaScript code can be located within HTML tags
JavaScript code can be located in a style sheet
JavaScript code can be located within script tags
JavaScript code can be located in an external JavaScript file
