Web Development: Chapter 4

Which element can create a button with an image?

<button>

Which tag is a generic block tag without any implied meaning?

<div>

Which tag creates a text box widget?

<input>

Which tag creates a text area widget?

<textarea>

Define block.

A block tag's content tries to fill the width of the tag's parent container and can contain other block tags, inline tags, and text.

What does the <datalist> tag do?

A combo box is created with an <input> element, which creates the text box, and a <datalist> element, which provides the drop-down list options.

Define container.

A container is any part of a web document body that has opening and closing tags.

Define polyfill.

A fallback using JavaScript code that makes certain features of HTML5 (Ex: the date picker) work on browsers that do not natively support those HTML5 features.

What does <div> tag do?

A generic tag for creating block containers to facilitate managing page content and is the only block tag with no semantic meaning, unlike other block tags such as <p> and <table>.

Define fallback.

A mechanism that allows a web page element to function correctly even if the browser does not support a particular element.

Define parent container.

A parent container is any container within which other containers are located.

Define query string.

A set of name=value pairs separated by the ampersand character (&). Each name is specified as an attribute of the HTML field, and the value is the user-entered data.

Define escaped.

A special character such as the double quote can be escaped within a string by placing the backslash character (\) before the special character, causing that character to lose any special meaning.

Define checkbox.

A widget for input elements with the type attribute of "checkbox", which allows users to check, or select, a value.

Define password field.

A widget for input elements with the type attribute of "password", which allows users to enter a password without the password contents being displayed on-screen.

Define radio button.

A widget for input elements with the type attribute of "radio", which allows users to select exactly one value from possibly many values.

Define input picker.

A widget that allows the user to interactively pick a choice using a popup or other guided selection method.

What does the <iframe> element do?

Allows a web page to be embedded in a rectangular area of the current web page.

What does the <input> tag do?

Allows the user to enter information into a web page.

What does the <form> tag do?

Allows the web browser to send information from the user to the server.

Define boolean attribute.

An attribute that is true when present false when absent.

Define inline.

An inline tag's content tries to fill the minimum space possible in the tag's parent container and can only contain text or other inline tags.

Define text area.

An input element specified by <textarea> opening and closing tags that allows users to enter multiple lines of text.

Define text box.

An input element with the type attribute of "text" that allows users to enter a single line of text.

Define widget.

An interactive component (usually graphical) that the browser uses to interact with a user. Ex: Buttons, drop-down menus, and data entry fields.

What types of tags can be inside a block tag?

Both inline and block tags.

How is a list box widget created?

By specifying a size with the select element's size attribute.

What doe the <select> tags do?

Create a drop-down menu (or drop-down list), which allows users to select one of several predefined values.

What do the <option> tags do?

Create a value, or option, the user can select within a drop-down menu.

What does a <legend> tag do?

Defines a caption for a <fieldset>.

What does the <video> element do?

Displays a video in a web page.

What does the <label> tag do?

Displays descriptive text associated with a specific widget.

True or false: An <option> tag must have a value attribute.

False

True or false: Browser fallbacks are only used to make new features work on old browsers.

False

True or false: Buttons always submit form data to a server.

False

True or false: It is better to avoid new HTML5 elements and attributes because of incomplete support for some new HTML5 features.

False

True or false: Passwords from the password widget that are sent to the server using HTTP are safe from prying eyes.

False

True or false: The audio element's audio can always be paused by the user.

False

True or false: The range and number widgets are interchangeable choices for entering numbers.

False

What does a <fieldset> tag do?

Groups related form widgets together and draws a box around the related widgets.

What does the method attribute do?

Indicates the HTTP request type the browser will use to communicate with the server.

What does the action attribute do?

Indicates the URL where the form data should be sent.

What does the enctype attribute do?

Indicates the web browser should split a POST request into multiple parts, where each input field is sent as a separate part of the HTTP request message.

Does the HTML follow the developer guidelines for block-level and inline elements? <h1>Olympics</h1> <p>The <em>IOC</em> organises the modern Olympic Games and Youth Olympic Games, held in summer and winter, every four years. The first Summer Olympics organised by the IOC was held in Athens, Greece, in 1896</p>

No

Does the HTML follow the developer guidelines for block-level and inline elements? <h1>Olympics</h1><p>The IOC organises the modern summer and winter Olympic Games and Youth Olympic Games held every four years.</p>

No

Does the HTML follow the developer guidelines to always use closing tags and avoid self-closing tags? <address> John Smith <br /> 123 Main St. <br /> Anytown, USA </address>

No

Does the HTML follow the developer guidelines to always use closing tags and avoid self-closing tags? <div class="footer"> <p>This site is copyright 2016.</p>

No

Does the HTML follow the developer guidelines to always use closing tags and avoid self-closing tags? <ol> <li>Avatar <li>Titanic <li>Jurassic World </ol>

No

Does the HTML follow the developer guidelines to consistently indent nested elements? The all-time top grossing movies domestically<ol> <li>Avatar</li> <li>Titanic</li> <li>Jurassic World</li> </ol>

No

Does the HTML follow the developer guidelines to consistently indent nested elements? form> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="address">Address:</label> <input type="text" id="address" name="address"> <label for="city">City:</label> <input type="text" id="city" name="city"> </form>

No

Does the HTML follow the developer guidelines to provide labels and placeholders? <input type="text" name="favoriteSport" id="sport">

No

Does the HTML follow the developer guidelines to provide labels and placeholders? May we add you to our mailing list? <br> <label for="optInYes">Yes</label> <input placeholder="Add me" type="radio" name="optIn" id="optInYes" value="true"> <label for="optInNo">No</label> <input placeholder="Do not add me" type="radio" name="optIn" id="optInNo" value="false">

No

Does the HTML follow the developer guidelines to separate content from presentation and functionality? <button onclick="return process_data()">Process Data</button>

No

Does the HTML follow the developer guidelines to separate content from presentation and functionality? <html> <style>p { color: blue }</style> <body> <p>Once in a blue moon!</p> </body> </html>

No

Does the HTML follow the developer guidelines to use boolean attributes concisely? <button type="submit" disabled="">Submit</button>

No

Does the HTML follow the developer guidelines to use boolean attributes concisely? <div hidden="hidden">

No

Does the HTML follow the developer guidelines to use lowercase for tags and attributes? <H1>Table of Contents</H1>

No

Does the HTML follow the developer guidelines to use lowercase for tags and attributes? <img Src="https://apple.com/apple.jpg">

No

Which attribute must be set to create a text box widget?

No attribute

What types of tags can be inside an inline tag?

Only inline tags.

What does the <audio> element do?

Plays an audio file in a web page.

Define combo box.

The combination of a text box and drop-down menu into a single widget.

What is the width of a block tag?

The full width of the block's parent container.

What does the <span> tag do?

The generic tag for creating inline containers to facilitate managing content on the page.

Define submit button.

The web browser displays a submit button widget for an <input> tag with the type attribute of "submit", which sends the associated form's data to the server when clicked.

True or false: A <fieldset> can group drop-down menus, buttons, and other widgets.

True

True or false: A drop-down menu only allows one option to be selected.

True

True or false: A plug-in is often required to play media embedded in a web page using <embed> or <object>.

True

True or false: A polyfill is code that creates a browser fallback for a feature if the web browser does not support that feature.

True

True or false: Having users enter dates, colors, email, and numbers using the specialized widgets is preferable when an appropriate widget is available.

True

True or false: Multiple <source> tags can be used to specify different video formats.

True

True or false: Playing video uses significantly more network bandwidth than playing just audio.

True

True or false: Some plug-ins are not available for all web browsers.

True

True or false: The AAC and MP3 formats are supported by nearly all web browsers.

True

True or false: The audio element can play audio as soon as the audio file has downloaded to the browser.

True

True or false: The size of the video displayed by a video element is configurable.

True

Which quote guideline is violated? <a href="http://example.com" rel='nofollow'>

Use double quotes.

Which quote guideline is violated? <input type='text' name='zip'>

Use double quotes.

Which quote guideline is violated? <input type=checkbox checked>

Use quotes around attribute values.

What does the <source> element do?

Used inside the <audio> tag to specify an audio file to play.

How can a button widget be created?

Using the <button> opening and closing tags or with <input type="button">.

Does the HTML follow the developer guidelines for block-level and inline elements? <label for="city">City:</label> <input type="text" name="city" id="name">

Yes

Does the HTML follow the developer guidelines to always use closing tags and avoid self-closing tags? <p>We have updated our company logo to <img src="new-logo.jpg" alt="New company logo"> from the older logo of <img src="old-logo.jpg" alt="Old company logo"></p>

Yes

Does the HTML follow the developer guidelines to consistently indent nested elements? <tr> <td>Hematocrit</td> <td>34.9-44.5%</td> <td>38.8-50.0%</td> </tr>

Yes

Does the HTML follow the developer guidelines to separate content from presentation and functionality? <html> <link rel="stylesheet" href="main_style.css"> <body> <p>A page with style!</p> </body> </html>

Yes

Does the HTML follow the developer guidelines to use boolean attributes concisely? <select> <option selected>Pick an option below</option> <option>Lions</option> <option>Tigers</option> <option>Bears</option> <option>Oh, my!</option> </select>

Yes

What URL plays a YouTube video automatically?

autoplay=1

Which attribute inside the <label> tag is used to associate the label with a widget?

for

Which input element attribute limits the number of characters the user can type in a text box or password field?

maxlength

A browser that is only capable of playing MP3 audio will download which file? <audio controls> <source src="sound.ogg"> <source src="sound.mp3"> </audio>

sound.mp3

What <iframe> attribute indicates the URL of the web page to display in the iframe?

src