Advanced HTML5 and CSS3

static

, which is the normal, or default, position of the element within a page;

HTML5 <keygen> RSA encryption

Adds security to a form through asymmetric encryption by creating a key-pair generator field in the formGenerates a key pair (one private key and one public key) upon form submissionThe public key is sent to the server, whereas the private key is stored on the local machine

The Word Wide Web is based upon which programming model?

An event-driven model

CSS Box Model

Content - Padding - Border - Margin

<button> element

The <button> element allows text and images to be placed within its tags; this feature distinguishes the <button> element from buttons created with the <input> element.

The HTML5 Drag-and-Drop API allows users to drag elements to another location on a Web page or to an external application. Which attribute enables an element to be moved?

draggable="true"

What Drag-and-Drop API method is called when a page element is dropped after being dragged?

drop()

<fieldset>

element is used to group elements so that related fields are placed together in a form. It creates a box around the related fields, which helps to group and separate them on the screen.

Validation

ensures that your code complies with standards.

To send the browser back one page in the user's browsing history using the HTML5 History API, you should use which method?

history.back()

Which History API method changes the URL in the browser window by adding a URL to the history stack?

history.pushState()

absolute

in which the element appears to float above the document and can be positioned as needed;

inherit

in which the element inherits its position from the parent element.

relative

in which the element is relative to others on a page;

fixed

in which the element remains in the same position when the page is scrolled;

The pattern attribute

is helpful for overcoming HTML5 browser support issues. Browsers treat any input type they do not support as text. If the pattern attribute is present, then the text input is still required to match the pattern.

The inset value

is optional and creates an inward shadow instead of an outward shadow.

blur value

is optional and specifies the distance of the shadow's blur.

v-shadow value

is required and specifies the vertical shadow position, also referred as y-offset.

onfocus event handler

is triggered when a user gives input or focus to a form element.

onblur event handler

is triggered when input focus is removed from a form element (e.g., when a user clicks the mouse button outside of a particular field).

The onmouseout event handler

is triggered when the mouse pointer leaves from a link, image or other visible element on a page.

The onclick event handler

is triggered when the user clicks on a link or form element.

The Geolocation API

is used to obtain geographic information about a user.

You are embedding audio in your HTML5 page and want to specify that the audio file should play over and over again without stopping.

loop="loop"

Casting errors

occur when an integer is changed into a character (or vice versa) inadvertently.

The abort event

occurs when the loading of an image object is stopped, triggering the onabort event handler.

The File API

provides a standard way to interact with files on the client machine using a Web browser. Create preview thumbnail images during image uploads

@fontface rule

rule allows developers to specify custom fonts for their Web page elements.

Jacoby wants to use CSS3 to apply a border to the bottom of the last paragraph in each <section> element on a Web page. Which selector should he use?

section p:last-of-type

Testing

shows you how your pages will perform on various platforms doing various tasks.

The CSS3 animation-name property

specifies the identifier for the @keyframes animation that binds it to a selector.

The CSS3 text-overflow property

specifies whether text that overflows the containing element should be clipped or indicated with an ellipsis.

The background-origin property

defines the location to which the background-position property should be relative.

The CSS3 background-clip property

determines whether the background extends into the border or not.

Which HTML structure element was designed to enclose Web site content such as company services, blogs, images and videos?

<article>

You suggest applying a feature that will activate the first required field on each form for input when the page loads,

<input type="text" name="firstname" autofocus>

internal style sheet

Embedding styles in an HTML page is useful when: you have styles that you want to apply consistently to an entire page but not necessarily more than one page; and you want to apply one or more styles on a single page that will override styles applied to the same element(s) by an external style sheet. To embed CSS in a single Web page as an internal style sheet, you add the <style> element to the <head> section of your HTML file. You then place your CSS declarations within the <style> </style> block.

You see a text box with Up and Down arrow buttons for a field requesting your number of years of experience. The field already shows the number 10, but you can change the number in the box by clicking the Up and Down arrows. Which HTML5 code was used to create this field on the form?

Experience: <input type="number" name="experience" min="0" max="40" value="10">

If you want a particular block-level element to always appear at the upper-right corner of the browser window, no matter how far down a user scrolls on the page, which type of CSS positioning should you apply?

Fixed

Which of the following includes the Transitional, Strict and Frameset "flavors"?

HTML 4.01

When you embed JavaScript within an HTML document, in what document sections can you add the script?

In the <head> and/or the <body> sections

Which guideline should you follow when developing inline validations to assist users by notifying them of their progress toward completion?

Include persistent messages that show success in fields.

Which technique is used to suggest and confirm answers while a user fills in a form?

Inline user validation

parseInt() method

Integer class method takes a String argument and returns its integer value. var versionNumber = "3x"; versionNumber = parseInt(versionNumber, 10)

@keyframes rules

It defines an animation and its position, and it is required.

What is the purpose of the W3C mobileOK Checker?

It validates Web site code for mobile friendliness.

Mobile Development tips

Minimize unnecessary formatting such as multiple fonts and colors or superfluous images. Do not use tables or frames in the page layout (which is now considered poor layout practice for full-size sites as well). Minimize the number of links that users must click to navigate the site.

CSS3 word-wrap property

Specifies that long words in a text area may be broken without a hyphen and wrap to the next line

The outline property draws a line around the outside of an element, beyond the border. What can you use to create space between the border and the outline of an element?

The CSS3 outline-offset property

<datalist>

The HTML5 <datalist> element provides an autocomplete feature to an associated <input> element. The datalist contains one or more <option> elements with values that are filtered and displayed as the user types in the input field.

'Required' Keyword for form

The HTML5 required attribute specifies that a field, such as an input field, must be completed before form submission. All you need to do is identify an <input> element with the keyword required, as follows: Your Name: <input type="text" name="name" required>

$ selector

The [attribute$="value"] selector matches all specified attributes that end with the specified value.

* Selector

The [attribute*="value"] selector selects every instance of a specified element whose specified attribute contains the specified substring value.

^ Selector

The [attribute^="value"] selector matches all specified attributes that begin with the specified value.

Which CSS3 animation property requires you to change the default value, otherwise no animation will occur?

The animation-duration property

Which value of the CSS3 box-shadow property specifies the shadow's size, but is optional?

The spread value is optional and specifies the shadow size.

What is the benefit of using the style guide?

To ensure that the site has visual consistency

Why would you use the for attribute with the HTML5 <output> element?

To specify the IDs of the elements whose values were used in the calculation

Which of the following was introduced in CSS3 version 3?

Transformations Transitions Animations

Manifest File

You can point HTML files that will be cached to the manifest file by including the manifest="filename.appcache" attribute in the tag, replacing filename with the actual name of the manifest file.

The CSS3 background-size property

allows background images to be resized, whereas before CSS3, background image size was largely dependent on the size of the original image.

The Drag-and-Drop API

allows users to move items on a Web page.

<legend> element

allows you to add a caption for a group of items created by the <fieldset> element.

Logic errors

are mathematical errors, casting errors, errors in proper command usage or errors in the structure of the script.

Run-time errors

are typically caused by improper use of commands.

Load-time errors (commonly called compiler or interpreter errors)

are typically syntax errors

attribute specifies that the video will automatically play immediately upon loading.

autoplay="autoplay"

Image/text align default

bottom align default

History API

can be used to control the browser history.

The CSS3 box-sizing property forces elements to fit an area in a certain way, such as allowing the border and padding to fit within the defined width of an element instead of expanding it.

content-box and border-box

null

user did not enter value