1 HTML
What is WMV? What is its purpose? What is its file extension?
Developed by Microsoft for storing video on Windows. .wmv
What is MP4? What is its purpose? What is its file extension?
Developed by the Moving Pictures Expert Group. .m4a is audio only .mp4 may contain video.
<img>
Displays an image in a web page. No closing tag needed. Need 2 attributes: src attribute that specifies URL location & alt attribute provides text description to use as an alternative to displaying the image.
What is the purpose of the label tag?
Displays descriptive text associated with a specific widget. Has a for attribute whose value should match the id attribute for the widget being labeled.
Three entity formats for copy sign
Entity name © Decimal number © Hexadecimal number ©
What is the purpose of polyfill?
Fallback using JavaScript code that makes certain features of HTML5 work on browsers that do not natively support hose HTML5 features.
True or False: Browser fallbacks are only used to make new features work on old browsers.
False. Fallbacks are used to test features for proposed standards that would otherwise not work on any current browsers.
True or False: It is better to avoid new HTML5 elements and attributes because of incomplete support for some new HTML5 features.
False. Many HTML5 features are widely supported. Features that are not well-supported at present will become supported by new browsers.
True or False: The range and number widgets are interchangeable choices for entering numbers.
False. The range input allows fast selection of numbers and other values, but is imprecise. The number input allows for very precise input of values, but can be slower.
True or False: Having users enter dates, colors, email, and numbers using the specialized widgets is preferable when an appropriate widget is available.
False. The specialized widgets help ensure that input is valid and speed up the data entry process.
Every HTML5 document uses what 5 components?
<!DOCTYPE html> instructs web browser about what type of document follows. <html> opening and closing tags enclose everything, but the <!DOCTYPE html> declaration. <meta> specifies metadata, which is the data that describes the document's data. Required meta tag is <meta charset="UTF-8"> <title> encloses name of document. Title usually displayed in title bar of browser & is used by search engines & used for bookmarking.
What tags are necessary for adding an audio element to the HTML5 page?
<audio> and <source>. Source is nested in the audio tag. Uses attribute src. Audio tag can take attributes as well. controls, autoplay, loop, and muted
What is a table caption tag?
<caption> defines short descriptive text for a table. Must immediately follow the opening table tag. Browsers renders table caption centered above table.
What elements are used to embed audio or video in a web page?
<embed> <object> <!-- Embedded Flash --> <object type="application/x-shockwave-flash" data="4_colorb1.swf" width="520" height="358"> <param name="play" value="true"> <param name="menu" value="true"> <param name="scale" value="showall"> </object>
What tag is used to display a YouTube video?
<iframe> Allows a web page to be embedded in a rectabngular area of the current web page. Uses src attribute to specify URL.
What is the basic syntax for the range input picker.?What is its purpose? What are the three commonly used attributes for the range input?
<input type = "range"> Allows user to select a value by dragging a sliding control along the length of a line. min, max, and currently selected values.
What is the basic syntax for the color input picker?
<input type="color">
What is the basic syntax for the date input picker and what two attributes should it have?
<input type="date"> min: earliest date permitted. max: latest date permitted.
What is the basic syntax for the number input picker?
<input type="number"> Ensures user input is a valid number. Typically used with min and max attributes.
What is AAC? What is its purpose? What is its file extension?
Advanced Auto Coding. Designed to be successor of the MP3 format with better sound quality. .aac
What is a block tag?
Child to parent tag. Content tries to fill the width of the tag's parent container.
What happens when a user clicks the submit button in a form that uses GT method to contact server?
Collect all data from the form fields into a query string. Creates a URL with the server page and name=value pairs. (last=Conner&first=Sarah) Use newly creates URL to contact server using GET. (http://example.com/apply?last=Conner&first=Sarah) Display or update the web page using the response received from the server.
Explain how unordered lists work.
Collection of items, usually indented and shown using bullets. Surrounded by <ul> opening and closing tags. Each list item is surrounded by <li> opening and closing tags.
<section>
Collection of related paragraphs, images, and other content organized into such units as chapters, subchapters, tabbed content in a tabbed container, and numbered sections of a thesis.
<code>
Computer code
What is the purpose of the footer container?
Container for content descriptive information about the web page like author, copyright, or date modified
What is the purpose of the aside container?
Container for content not directly related to the main topic of a document
What is the purpose of the nav container?
Container for content relating to website navigation
What is the purpose of the section container?
Container for distinct parts of a document such as a chapter
What is the purpose of the header container?
Container for introductory content
What is the purpose of the article container?
Container for self-contained content that can be reused independently, such as a news article
What happens when user clicks the submit button in a form that uses the POST method?
Create query string from form data. Uses URL from the form's action attribute to contact server using an HTTP POST request. Sends the query string in the HTTP request message body.
Explain how the list box widget works.
Created by specifying a size with the select element's size attribute. Shows only the number of options specified by size attribute. If more options than size, add a scroll bar.
Explain how the button widget works.
Created using either <button> opening & closing tags or with <input type="button". <button> allows text & images to be displayed. <input type="button"> only allows text.
<br>
Creates a line break in a paragraph, such that the content after the line break appears on a new line. Does not need closing tag. Good practice to use <br> when line break is essential to the content such as lines in a poem or mailing address, and not just to add spacing for formatting web page.
<var>
Definition of a variable in a computer program. Italics
<cite>
Denotes a title, such as a book or song title. Italicized be default
<mark>
Denotes content that is important and should be semantically highlighted. Yellow background by default.
<p></p>
Denotes paragraph which is a basic unit of text in an HTML document. Browser visually separate paragraphs from other text with spacing above and below.
<u>
Denotes text that should appear differently from normal text, such as misspelled words. Underlined
What is QuickTime? What is its purpose? What is its file extension?
Developed by Apple. Plays in Macs, but plug-in support for Windows has been dropped. .mov
What is Flash? What is its purpose? What is its file extension?
Developed by Macromedia. Requires a plug-in to play. .swf .flv
What are the three popular image formats and what are their common uses?
Joint photographic experts group image format commonly used for digital photographs. Portable network graphics image format used for line art and screenshots or images requiring transparency. Graphics Interchange Format image format commonly used for simple animated images.
<kbd>
Keyboard input
What is a nested list?
List within a list item of another list. Entire nested list is indented and uses a different bullet.
What is a non-breaking hyphen?
Looks like a regular hyphen, but acts like normal character in the middle of a word. ‑
What is a non-breaking space?
Looks like a single space, but acts like a normal character in the middle of a word.
What does the pseudo-class selector do? How is it specified?
Matches elements based on user behavior or element metainformation. Specified with a colon character followed by pseudo-class name.
What does a descendant selector do? How is it specified?
Matches elements that are contained in other elements. Specified with a selector followed by a space and another selector.
What does an ID name selector do? How is it specified?
Matches elements that are contained in other elements. Specified with a hash character.
What does a class name selector do? How is it specified?
Matches elements that have specified class name. Specified with a period character followed by the class name.
What does an element selector do?
Matches elements with the specified element names.
What is an entity?
Mechanism for writing special characters or symbols in HTML
What is the purpose of fallback?
Mechanism that allows web page element to function correctly even if the browser does not support a particular element.
What JavaScript library is used to detect which features the browser does not support, and then load one or more polyfills to provide fallback mechanisms?
Modernizr
What is MIDI? What is its purpose? What is its file extension?
Musical Instrument Digital Interface. Main format for electronic music devices that store notes; does not contain sound. .midi .flv
Is there a case convention for tags?
No, but it is always good practice to use lowercase letters.
Does the <option> tag have to have a value attribute? Why?
No. If the <option> tag does not have a value, the browse will send the option text as the value.
What is Ogg? What is its purpose? What is its file extension?
Open container format developed by Xiph.Org Foundation. Supports audio and video. .ogg
What is WebM? What is its purpose? What is its file extension?
Open media format developed by Mozilla, Opera, Adobe, and Google for the web. .webm
What is an HTML comment? How is it denoted?
Portion of document that is not displayed by browser. Begins with <!-- and ends with --> Cannot put comments inside of comments.
Explain what the title attribute does for image tag
Provide title for image. Text will not be shown to user when image cannot be displayed. It is displayed in a popup when a user takes their mouse over to an image.
What is the purpose of the pattern attribute for HTML5 input?
Provides a patter (regular expression) that input must match.
Heading <h1>
Provides title for a section of content. Visually separated from other text by extra spacing and displayed with a different appearance. Good practice: wrap each subsection with <section> tags instead of relying on heading tags starting new implicit sections, and to label each section with a heading
Explain what the text area widget does and what are its attributes?
Input element allows user to enter multiple lines of text. rows and cols attributes to specify the initial size of the text area.
What is a non-breaking character?
Inter-word character that permits treating the words on both sides to be one word
What is a widget?
Interactive component that the browser uses to interact with a user.
What form of compression do each of the three popular image formats use? Number of bits to represent color?
JPEG uses lossy meaning some of the original picture information is lost. Quality lost not easily preceived by humans. PNG & GIF use lossless compression, meaning no image quality is lost. Necessary when a large number of adjacent pixels are the same color. JPEG and PNG are 24-bit. GIF is 8-bit.
What tags are needed to display a video element?
The <video> element displays a video in a web page. The <source> element is used in a <video> tag to specify the name of the video file to play.
What is the difference between a block tag and inline tag?
The block tag tries to fill the width of the tag's parent container. The inline tag tries to fill the minimum space possible in the tag's parent container.
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. Polyfills are usually implemented using a JavaScript library to make new features work on older browsers.
What is a fragment? How can a URL interact with the fragment?
URL can point to a section, or fragment, of a document by adding a hash tag and a fragment identifier at the end of the URL. Adding id attribute to any HTML tag creates a fragment identifier. (https://en.wikipedia.org/wiki/Computer_science#History)
Different web browsers support different audio formats. What can be done to accommodate that?
Use multiple <source> tags to supply alternate file formats.
What is WMA? What is its purpose? What is its file extension?
Windows Media Audio. Developed by Microsoft for Windows music players. .wma
What is W3C?
World Wide Web Consortium is the official organization that defines web standards including HTML & CSS.
Explain the 5 primary attributes for input tags.
type indicates what type of widget to display. Default is "text" if not specified. name allows server to identify which data came from which widget. id uniquely identifies the specific input tag to the browser. placeholder provides hint to user about information being requested. value allows the input to start with a default value.
Explain image attributes that affect image size and aspect ratio
width and height tell browser how many pixels the image should occupy. Aspect ratio is the ratio of the image width to image height. If aspect tratio is different than image tag's width & height attributes, browser will distort image to match attribute values.
<i>
Indicates text in an alternative voice, such as a word or phrase in a foreign language. Italics
How does the meta tag differ from other essential tags (2)?
<meta> tag uses an attribute to indicate character set. Tag attribute provides additional information about a particular tag and is included after tag name, but before the > in the opening tag. Format for attribute name="value" <meta> element that does not use a closing tag because it is a void element. Void element is an element that only needs an opening tag.
Explain how to create a drop-down menu & how it works.
<select> opening and closing tags create a drop down menu. Allows user to select one of several predefined values. <option> opening & closing tags create a value or option the user can select. Use the name attribute in the select tag to create name=value pairs. When user is not interacting with menu, the drop-down menu usually displays the selected option.
What are three optional table tags specificy each part of a table?
<thead> specifies table header. <tbody> specifies table body <tfoot> specifies table footer. They do not affect layout of table, but browsers may use tags to enable table body to scroll independently of the header and footer or to print the header & footer on each page of a multi-page table printout.
To accommodate binary data in form fields, what must be done? How?
A POST request can be split into many parts. An enctype attribute of "multipart/form-data" must be added to let the browser should know. Each input field is sent as a separate part of the HTTP request message.
What is the difference between an absolute URL and relative URL?
Absolute URL is a complete URL such http://example.com/test.html">test</a>. A relative URL specifies the relative path to the web resource with no scheme or hostname such as test.html. Relative URL refers to a HTML document on the same website and with the same path as the current HTML document.
Explain how a cell may span multiple columns or multiple rows.
Add colspan and rowspan attributes to either the header or datum tags.
What is the purpose of the input tag?
Allows user to enter info into a web page. Input tag cannot enclose any additional page content and does not have a closing tag.
What is the purpose of the form tag? What are its two primary attributes?
Allows web browser to send information from the user t the server. Action attribute indicates the URL where the form data should be sent. Method attribute indicates the HTTP request type. (GET or POST)
What is an element? What are tags?
An element is a single HTML structure. Elements are represented with HTML tags, which are markup instructions identified by an opening tag and closing tag.
<a>
Anchor tag defines a hyperlink. Three parts: opening <a> tag with href attribute, content displayed for the link, and the closing </a> tag. href attribute specifies the hyperlink's URL
What is a parent container?
Any container within which other containers are located
What is a container?
Any part of a web document body that has opening and closing tags.
<b>
Bold
How are whitespace characters interpreted by the browser?
Browser treat all sequences of whitespace as a single space between non-whitespace characters.
Explain how the checkbox widget works.
For the type attribute in the input tag, you set it to "checkbox." Allows users to check or select a value. For each checkbox selected, the browser sends the checkbox's name and value to the server. If the value attribute is not specified, the default value of "on" is sent. If a checkbox is not selected, the browser does not send anything to server. Good practice to use label elements with checkboxes so that the user can click the label to check and uncheck the associated checkbox.
What is the purpose of the div container?
Generic tag for creating block containers
What is the purpose of the span container?
Generic tag for creating inline containers
Explain what an HTML table is and its required tags.
HTML structure surrounded by <table> opening and closing tags that allows data to be organized in rows & columns. A cell is a location in table at specific row and column. <tr> opening and closing tags contains all the cells within a table row. <th> opening and closing tags create a new table cell containing table header information. Usually bold. <td> opening and closing tags create new table cell containing a table datum.
What is the purpose of the required attribute for HTML5 input?
Has no value. States input is required and field cannot be left empty.
What is HTML?
HyperText Markup Language is a textual language for creating web pages.
<em>
Indicates emphasized text. Italicized by default
Explain the target attribute
Indicates how the browser should display the link when clicked. _self is default. Browser will open link in same tab or window. _blank web browser will open link in new tab or window.
<strong>
Indicates strong importance. Bold by default
<samp>
Sample output from a computer
Explain how an ordered list works
Sequenced collection of items, usually indented and shown using numbers or letters, surrounded by the <ol> opening and closing tags. Each list item surrounded by <li> opening and closing tags.
What is the purpose of the step attribute?
Set amount by which value can change.
What is a query string?
Set of name=value pairs separated by the ampersand character.
Explain how the radio button widget works.
Set type attribute in input tag to "radio." Allows user to select exactly one value from possibly many values. Web browser groups radio buttons together with the same name attribute, where each possible value in a group has an associated input. When submitting a form, browser sends the selected radio button's name a& value attribute.
What is a browser plug-in?
Software that can properly read and interpret a file format that the browser cannot.
Explain how the password field widget works?
Specified with <input type="password" Allows user to enter a password without password contents being displayed on-screen. Using size attribute to limit the password field's width. Use maxlength attribute to limit the maximum number of characters user can enter.
What is MP3? What is its purpose? What is its file extension?
The sound portion of an MPEG file. Most popular format for music players. .mp3
What is a graphical hyperlink?
Uses an image inside a hyperlink instead of text.
What is Wave? What is its purpose? What is its file extension?
Waveform Audio File Format. Developed by Microsoft and IBM. Mainly for storing uncompressed audio on Windows. .wav
