HTML5, 20 Lessons to Successful Web Development (2015)
Answers to the Self-Test Questions
This appendix contains the answers to all the questions posed at the end of the lessons in this book. To ensure you have understood everything, try to refrain from checking these answers until you have attempted to answer all the questions in a lesson.
If you don’t know an answer, try to find it in the book before you look here if you can, as this will help you to remember it next time.
Lesson 1 Answers
1. The acronym HTML stands for HyperText Markup Language.
2. A web browser is used by someone surfing the Internet to view content that is sent by web servers.
3. The acronym HTTP stands for HyperText Transfer Protocol. This is the method used for transferring unencrypted web documents from a server to a browser (HTTPS is used for transferring encrypted documents).
4. A web proxy fetches data from a web server on behalf of a web browser. Generally, proxies store local copies of web data in a cache, and then serve up the copies to a web browser to provide faster response.
5. HTML documents often have the file extension .html or simply .htm.
6. A 404 page is so called because 404 is the HTTP error code returned by a web server when a document cannot be located, so “not-found” pages are often referred to as 404 pages.
7. An IP address is a set of numbers allocated to each unique Internet-connected device. A domain is an alphanumeric string used to refer to an IP address in a more memorable fashion. For example, at the time of writing, instead of remembering and entering http://74.125.224.72, you can simply type http://google.com into a browser.
8. A query string is a set of alphanumeric data after a URL that starts with a ? character. This data may contain form input that is being sent to a web server via a Get request.
9. An HTML tag is the name of an element enclosed within angle brackets, such as <i>, which represents italic text. Many tags also have matching closing tags such as </i>, which turns italics off again. Some tags such as <img> do not have a matching closing tag because they are self-closing (empty).
10. A tag attribute is additional data supplied to a tag, such as the URL of the image in <img src=’myimage.jpg’>. Here src is the attribute name and myimage.jpg is its value.
Lesson 2 Answers
1. The declaration <!DOCTYPE html> should be at the start of all HTML5 documents.
2. The <html> and </html> tags are used to contain HTML. The <html> element represents the root of an HTML document.
3. The <head> tag is used (along with </head>) to denote a document’s head section, which includes items such as its title.
4. To title a document, place the title between <title> and </title> tags.
5. The <title> tag should appear within <head> and </head> tags.
6. To denote the body of an HTML document, place it within <body> and </body> tags.
7. CSS rules should be placed within <style> and </style> tags in the <head> section.
8. You include a style sheet in an HTML document using the <link> tag, with appropriate attributes.
9. To embed JavaScript into an HTML document, place it between <script> and </script> tags.
10. You can run an external JavaScript file from an HTML document by calling it up from a <script> tag with its location provided as the value for its src attribute. You will also need a </script> tag following.
Lesson 3 Answers
1. To place a comment in an HTML document, preface it with the characters <!-- and follow it with -->. Whatever is between these strings will not display.
2. A <div> element occupies a rectangular area in a web browser which, by default, extends to the browser’s right-hand edge, and is often used as a container for groups of objects (such as creating a newspaper-style column). A <span> element flows with text and is intended mainly for adjusting the styling of text.
3. The six pairs of tags you can use to create different levels of headings are <h1> and </h1> for the largest size of heading, through <h6> and </h6> for the smallest.
4. To denote the start and end of a paragraph, you use the <p> and </p> tags.
5. To issue a line break in an HTML document, use the <br> tag.
6. To format HTML text in bold without using CSS, place it within <b> and </b> tags.
7. To display italic text in HTML, place it within <i> and </i> tags.
8. To display text in italics with CSS, you can place a rule inline, like this: <span style=’font-style:italic;’>Italic text</span>, or you can create a class in the <style> section of a document, such as .italic { font-style:italic; }. You can then apply this class as follows: <span class=’italic’>Italic text</span>.
9. To make an element display as line-through using CSS, you can use an inline rule such as: <span style=’text-decoration:line-through;’>Line-through</span>, or you can create a class in the <style> section of a document, such as .line { text-decoration:line-through; }. You can then apply this class as follows: <span class=’line’>Line-through</span>.
10. The term deprecated is applied to parts of HTML that should no longer be used and may become obsolete and removed from HTML at a later date—the developers of HTML are giving you warning that you should stop using such deprecated tags now while they still work, and that you shouldn’t wait until they stop working, because your documents may then break if you don’t update them in time.
Lesson 4 Answers
1. The <font> tag supports manipulating fonts with HTML.
2. The color attribute of the <font> tag is used to change color. For example: <font color=’green’>Green text</font>.
3. To change the face of a font, use the face attribute. For example: <font face=’Arial’>Arial text</font>.
4. To change a font’s size in HTML, use the size attribute. For example: <font size=’6’>Size 6</font>.
5. To change the background of a document’s body without using CSS, you can apply a value to its bgcolor attribute, in the following manner: <body bgcolor=’black’>.
6. The hexadecimal number #FF0000 is red, #FFFFFF is white, and #888888 is mid-grey.
7. To change font face using CSS, you can apply a style, either with a class or an ID, or inline like this: <span style=’font-family:Arial;’>Arial font</span>.
8. To display images in HTML, use the <img> tag, like this: <img src=’photo.jpg’>.
9. In HTML you can left-align an element such as an image by applying a value to its align attribute such as left, right, or center, like this: <img src=’photo.jpg’ align=’left’>.
10. The CSS way of left-aligning an element is to use the float rule, like this: <img src=’photo.jpg’ style=’float:left’>, or by applying a class, or an ID using this rule, and so on.
Lesson 5 Answers
1. You begin an ordered list with the <ol> tag, and close it with </ol>.
2. You denote a list element by placing it within <li> and </li> tags.
3. Unordered lists are specified in HTML with the <ul> and </ul> tags.
4. To change the start value of an ordered list, you apply a value to its start attribute. For example: <ol start=’20’>.
5. To change the bullet type of an unordered list, apply the value disc, circle, or square to its type attribute, like this: <ul type=’square’>. To change the case of an alphabetic ordered list, apply either A or a to its type attribute, or apply either I or i to change a roman numeral list, like this <ol type=’A’>, or this <ol type=’i’>.
6. Definition lists use the <dl> and </dl> tags, in conjunction with <dt> and </dt>, and <dd> and </dd>.
7. HTML tables are created with the <table> and </table> tags.
8. Table rows are created with <tr> and </tr> tags, table data cells with <td> and </td> tags, and table heading cells with <th> and </th> tags.
9. To add a caption to an HTML table, place the caption text between <caption> and </caption> tags, right after the <table> tag.
10. The two attributes that allow cells to spread out over more than one row or column are rowspan and colspan. For example: <td rowspan=’2’>.
Lesson 6 Answers
1. To preface secure Internet URLs, you use the https://prefixinalink (as long as the target web server supports secure web pages).
2. You can access a subfolder called folder from the root of mydomain.com using the URL http://mydomain.com/folder/.
3. To link to the website mydomain.com in HTML, you would use the following syntax: <a href=’http://mydomain.com’>Click here</a>.
4. To link to the root of the current domain, simply use the relative URL / in a link, like this: <a href=’/’>Home</a>.
5. To make a destination URL from a hyperlink load into a different frame or window, apply a value to the target attribute of the link, as follows: <a href = ’http://mydomain.com’ target = ’otherframe’>Click me</a>. To always open a link in a new window (or tab if the user has this setting), assign the value _blank to target.
6. To hyperlink directly to a section within a web document, first create an anchor to that place like this: <a name=’subsection’></a>, and then you can link to the HTML immediately following this anchor as follows: <a href=’#subsection’>Click me</a>. If you are not linking to the current page, also include the other page’s URL, like this: <a href = ’http://mydomain.com/news.htm#subsection’>Clickme</a>.
7. To create an HTML form, use the <form> and </form> tags.
8. To request a single text input line from a user, you can use an <input> tag from within a form, like this: <input type=’text’ name=’firstname’>.
9. To provide more than a single line of space to input text, you can use a <textarea> tag, like this: <textarea name=’bio’ cols=’40’ rows=’5’></textarea>. This creates an input box with five lines of 40 characters per line.
10. To embed another document, you can use an iframe, like this: <iframe src=’http://othersite.com/news.html’></iframe>.
Lesson 7 Answers
1. In conjunction with an <img> tag, the <map> tag is used to create an image map, consisting of one or more areas within the map defined by <area> tags.
2. To denote text as a citation, place it within <cite> and </cite> tags.
3. To change the direction of text flow from left-to-right to right-to-left, use the following HTML: <bdo dir=’rtl’>, and use </bdo> when done.
4. The Mark of the Web is a use that Microsoft’s Internet Explorer browser makes of HTML comments to set the security level of a document.
5. To display text as if it has been deleted, use HTML such as the following: <del>deleted text</del>.
6. To display text as if it has been inserted, use HTML such as the following: <ins>inserted text</ins>.
7. To display text in a superscript font, place it within <sup> and </sup> tags, like this: July 23<sup>rd</sup>.
8. A good way to display short quotations is between the <q> and </q> tags.
9. Long quotations can be displayed by placing them within <blockquote> and </blockquote> tags.
10. To display preformatted text in which the spaces and line feeds in the HTML are kept, enclose the relevant section within <pre> and </pre> tags.
Lesson 8 Answers
1. To create an HTML5 canvas, you use the <canvas> and </canvas> tags.
2. In non-HTML5-compatible browsers, <canvas> tags are ignored, and any text or HTML placed inside the tags is displayed.
3. Once an HTML element has been given an ID, it can be referenced from JavaScript by passing that ID to the getElementById() function.
4. GPS stands for Global Positioning System.
5. Local Storage is a new HTML5 technology that is superior to cookies in that it provides far greater storage space and much easier access.
6. The tags <audio> and <video> have been added to HTML5 to handle multimedia.
7. To allow fallback to Flash for playing media, you can pull in a player using the <embed> and </embed> tags.
8. Microdata is the new HTML5 technology that helps to provide additional information about the contents of a document by describing its parts very precisely.
9. With HTML5, programmers can now offload background JavaScript tasks to web workers, which are then maintained automatically by the browser.
10. MIME used to stand for Multipurpose Internet Mail Extensions, but that has since changed to Multipurpose Internet Media Extensions (more simply referred to as Internet Media Types these days).
Lesson 9 Answers
1. The DOM is the Document Object Model used by HTML and consists of all the elements and sub-elements as objects and properties that can be accessed from JavaScript.
2. To change a web document’s title, you can assign a new value to the document.title property, like this: document.title = ’New title’.
3. You can create a JavaScript object from an HTML element by giving the element a unique ID, which you can then pass to the getElementById() function, which will return an object based on that element.
4. A canvas must be given an ID in order for JavaScript to access it, like this: <canvas id=’mycanvas’></canvas>. This ID will generally be turned into an object by the getElementById() function.
5. You can access an object’s style properties from JavaScript by appending .style. to the object, followed by the property’s name to be read or set, like this: object.style.width = ’100px’.
6. The purpose of the O() function is to be a typing shortcut because it is much shorter than document.getElementById(), and it supports the passing of either an ID or an object.
7. The purpose of the S() function is to provide quick and easy access to an object’s style properties, either by an element’s ID or by object.
8. In order for drawing functions to operate correctly on a canvas, it is first necessary to create a 2D context object from the canvas, like this: context = canvas.getContext(’2d’). This context object has properties and methods that are used to write to and read from the canvas.
9. To copy canvas data into an image, you can use the toDataURL() function, which extracts all the image data from a canvas and reformats it in such a way that it can be directly provided as the value for the src attribute of an image.
10. To create a single-line comment in JavaScript, place the character pair // before the code to be commented out.
Lesson 10 Answers
1. You create a filled rectangle using the fillRect() function. For example, the following draws a square that is 100 pixels wide and 100 pixels high at the top left of the canvas: context.fillRect(0, 0, 100, 100).
2. To change the fill color, assign a value to the fillStyle property. For example: context.fillStyle = ’green’.
3. To draw a clear rectangle, you can use the clearRect() function, like this: context.clearRect(0, 0, 100, 100).
4. To draw a rectangular outline, use the strokeRect() function, in this manner: context.strokeRect(0, 0, 100, 100).
5. Use the createLinearGradient() function to create a linear gradient, like this: gradient = context.createLinearGradient(0, 0, 100, 100).
6. Use the createRadialGradient() function, like this: gradient = context.createRadialGradient(100, 100, 0, 100, 100, 50) to create a radial gradient.
7. To specify the colors in a gradient, use the addColorStop() function, like this: gradient.addColorStop(0, ’yellow’).
8. To use an image for a pattern fill, call the createPattern() function, like this: pattern = context.createPattern(image, ’repeat’).
9. The four different types of pattern fill are repeat, no-repeat, repeat-x, and repeat-y, which are passed as string values in the second argument to the createPattern() function.
10. To ensure an image has been loaded before you use it, you must attach a function to the image object’s onload event. Place the code that uses this image in the function.
Lesson 11 Answers
1. To choose the font for writing to a canvas, you assign values to the font property, like this: context.font = ’16px Times’.
2. To write outlined text to a canvas, you call the strokeText() function, like this: context.strokeText(’Text’, 100, 100).
3. The relative measurement units supported by the canvas are em, ex, px, and %.
4. The fixed measurement units supported by the canvas are in, cm, mm, pt, and pc.
5. You write filled text to a canvas with the fillText() function, like this: context.fillText(’Text’, 100, 100).
6. To center-align text on a canvas, you would use a command such as this: context.textAlign = ’center’.
7. The full list of values supported by the textAlign property includes start, end, left, right, and center.
8. To change the horizontal line about which text will be based, assign a value to the textBaseline property, like this: context.textBaseline = ’top’.
9. The values supported by the textBaseline property are top, middle, alphabetic, hanging, and bottom.
10. You can determine the width in pixels that a text-writing call will require by calling the measureText() function. The width property of the object it returns contains the text width.
Lesson 12 Answers
1. You can change the width of subsequent lines drawn on the canvas by assigning a value to the lineWidth property, like this: context.lineWidth = 8.
2. To change the way lines start and end, assign any of the values butt, round, or square to the lineCap property, like this: context.lineCap = ’round’. To change the way lines join to each other, assign any of the values round, bevel, or miter to the lineJoin property, like this:context.lineJoin = ’bevel’. To extend the limit of mitered line joins, you can assign a numeric value to the miterLimit property, like this: context.miterLimit = 7.
3. To start and end a path, call the beginPath() and closePath() functions of the canvas context.
4. To move the drawing position of a path without creating a line, use the moveTo() function, like this: context.moveTo(100, 100).
5. To create a line within a path, you can use the lineTo() function, like this: context.lineTo(100, 100).
6. To apply a path to the canvas as a line, use the stroke() function, like this: context.stroke(). To apply a path to the canvas as a filled area, use the fill() function, like this: context.fill().
7. To draw an outlined rectangle, call the strokeRect() function, like this: context.strokeRect(0, 0, 100, 100). To draw a filled rectangle, call the fillRect() function, like this: context.fillRect(0, 0, 100, 100).
8. You can create all or part of a circle using the arc() function, like this (which creates a circle): context.arc(100, 100, 50, 0, Math.PI * 2).
9. To create an arc from one point to another based on imaginary tangents, call the arcTo() function, like this: context.arcTo(0, 0, 100, 0, 100).
10. To create a curve that is modified by one imaginary attractor, you can call the quadraticCurveTo() function, passing the coordinates of the attractor and destination, like this: context.quadraticCurveTo(0, 0, 100, 100). To create a curve that is modified by two imaginary attractors, call the bezierCurveTo() function, passing the two sets of attractor coordinates and the destination, like this: context.bezierCurveTo(0, 0, 0, 100, 100, 100).
Lesson 13 Answers
1. To draw an image to the canvas, you use the drawImage() function, like this: context.drawImage(image, 20, 20).
2. To resize an image when it is drawn, you can add an additional pair of arguments to the drawImage() function for its new width and height in pixels, like this: context.drawImage(image, 20, 20, 100, 100).
3. To ensure that an image is ready for use before drawing, attach a function to the image object’s onload event, and place your image-using code in that function.
4. To easily copy one portion of a canvas to another, use the canvas itself as the image, like this: context.drawImage(canvas, 200, 200).
5. The four properties used to add and modify shadows underneath drawn objects are shadowOffsetX, shadowOffsetY, shadowBlur, and shadowColor.
6. To grab all the image pixel data from an image into a form that is editable, you can call the getImageData() function, in this way: imagedata = context.getImageData(0, 0, 100, 100).
7. Once image data has been grabbed from a canvas and placed in an object, the object’s data sub-object is an array containing the pixel data.
8. The four components of each pixel are its red, green, blue, and alpha transparency values. These appear sequentially in image data, with four elements to a pixel.
9. The function used to write image data to the canvas is putImageData(), like this: context.putImageData(imagedata, 0, 0).
10. To create a new object containing blank image data, you can call the createImageData() function, as in this example: imagedata = createImageData(320, 240).
Lesson 14 Answers
1. To change the type of compositing used to draw to the canvas, assign one of the following values to the globalCompositeOperation property: source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, darker, copy, or xor, like this: context.globalCompositeOperation = ’lighter’.
2. To set the transparency of future drawing operations, assign a value between 0.0 (fully transparent) and 1.0 (no transparency) to the globalAlpha property, like this: context.globalAlpha = 0.3.
3. To change the scale for future drawing operations, call the scale() function, in the following manner (which scales horizontal values up by 50 percent, and vertical ones down by 50 percent): context.scale(1.5, 0.5).
4. You can easily resume previous settings after changing the scaling one or more times by first calling save(), like this: context.save(), issuing all your scaling and drawing commands, and then calling restore(), like this: context.restore() to return scaling to its previous state.
5. To rotate the angle of future drawing operations, call the rotate() function, like this (which rotates by 90 degrees): context.rotate(Math.PI/2).
6. There are 2 × π radians (or just over 6) in 360 degrees, and one radian is about 57 degrees. The best way to use radians is as fractions and multiples of Δ. One degree is Δ / 180, and the value of Δ is about 3.1415927, but you can use the JavaScript alternative of Math.PI so that you don’t have to remember the value. Conversion between the two can be achieved in JavaScript as follows: radians = Math.PI / 180 * degrees.
7. To move the origin of future drawing operations from its default location at 0,0, call the translate() function, like this: context.translate(100, 100).
8. To rotate an object around its center before drawing it to the canvas, first call the translate() function to move the origin, passing the center of where you intend to place the object as a pair of coordinates. Next, issue the call to rotate(), and then draw the object on the canvas with its top-left corner 50 percent of its width to the left of the new origin, and 50 percent of its height up from the new origin. For example, if the object is a square that is 100 pixels wide and high, the destination location should be at -50,-50 (since the new origin is at the object’s center).
9. You can scale, rotate, and skew all at the same time by using the transform() function, like this: context.transform(1.5, 0.5, 0.5, 1.5, 10, 10).
10. To create absolute transformations (as opposed to relative ones from the current transform settings), you can call the setTransform() function, which is the same as transform() except that the scaling and other factors are first reset before the supplied values are applied.
Lesson 15 Answers
1. The most common form of geolocation positioning hardware is called GPS (for Global Positioning System). It uses a number of orbiting satellites to triangulate a device’s location very accurately, including height above sea level.
2. To determine whether a browser supports geolocation, test whether the type of the geolocation property is a value of undefined (if so, geolocation is not available), like this: if (typeof navigator.geolocation == ’undefined’) ….
3. To request location data from a browser, call the getCurrentPosition() function, passing it the names of two functions—one to be called if permission to access the user’s location is granted, the other to be called if it isn’t, like this:navigator.geolocation.getCurrentPosition(granted, denied).
4. If the user grants permission for you to access their location, the data will be supplied to the function you created to receive it in the form of a position object. This object will have two properties for the latitude and longitude: position.coords.latitude and position.coords.longitude.
5. If the user doesn’t grant permission to access their location, an error object is supplied to the function you created to handle this instance. This object will have a code property containing a number between 1 and 4 indicating the error type.
6. The API at https://maps.googleapis.com/maps/api/js?sensor=false will give you access to Google Maps if you supply it as the value to the src attribute of a <script> tag.
7. To pass the latitude and longitude to display to the Google Maps API, you should supply them as arguments to the LatLng() function, like this: new google.maps.LatLng(lat, long).
8. The Google Maps zoom property accepts values between 1 for fully zoomed out, and 20 for fully zoomed in.
9. The types of Google Maps that can be displayed are satellite, road map, or hybrid, by attaching one of the constants SATELLITE, ROADMAP, or HYBRID to the MapTypeId object, like this: google.maps.MapTypeId.HYBRID.
10. IP addresses are not a very accurate form of geolocation for a number of reasons, including the fact that an IP address can apply to a proxy server anywhere in the world. But even if not, a local ISP might share the same IP numbers among its customers over a wide geographical area. At best, IP numbers should be used to offer just a hint as to a user’s very rough location when a better location method is not available.
Lesson 16 Answers
1. To provide access to typing into an input field without the user first having to click it, use the autofocus attribute, like this: <input type=’text’ name=’name’ autofocus=’autofocus’>.
2. You can allow previous values that have been entered for the current input field’s name to be selected by the user with the autocomplete attribute, like this: <input type=’text’ name=’name’ autocomplete=’on’>.
3. The list attribute supplies a list id to an input from which a selection can be made by the user, like this: list=’items’. The list itself should be a collection of <option> elements inside a <datalist> element given the id name supplied as the value for the list attribute, like this:<datalist id=’items’>.
4. To set minimum and maximum limits for an input, assign values to the min and max attributes, like this: <input type=’number’ name=’age’ min=’13’ max=’99’>.
5. To enable uploading of more than one file at a time via a form, use the multiple attribute, like this: <input type=’file’ name=’files’ multiple=’multiple’>.
6. You can place text in an empty input field to prompt the user for the type of input expected, by assigning that text to the placeholder attribute, like this: <input type=’text’ name=’username’ placeholder=’Enter Username’>.
7. To ensure that an input must be completed before a form is submitted, you use the required attribute, like this: <input type=’password’ name=’pass’ required=’required’>.
8. The attribute pattern=’[\w]{5,10}’ tells the web browser not to allow the form to be submitted unless this input field consists of between 5 and 10 (inclusive) uppercase and/or lowercase letters, and/or digits, and/or the underline character (\w means any word character).
9. You can offer a color picker in an input (in browsers that support it) by using an input type of color, like this: <input name=’background’ type=’color’>.
10. You can call up a calendar date picker in an input (in browsers that support it) by using an input type of date, like this: <input name=’meeting’ type=’date’>.
Lesson 17 Answers
1. Local storage is a better solution than cookies because it provides over a thousand times the storage capacity per domain, and it is easily accessed as key and value pairs.
2. You can determine whether local storage is available in a browser by testing the type of the localStorage object, like this: if (typeof localStorage == ’undefined’). If it is undefined, then local storage is not available.
3. To store an item of local storage data, use the setItem() function, like this: localStorage.setItem(’key’, ’value’).
4. To retrieve an item of local storage data, use the getItem() function, like this: value = localStorage.getItem(’key’).
5. To remove an item from local storage, use the removeItem() function, like this: localStorage.removeItem(’key’).
6. To clear all the data relating to your domain in local storage, use the clear() function, like this: localStorage.clear().
7. To post a message to another document loaded into the browser, call the postMessage() function, like this: window.postMessage(’Message text’, ’http://domain.com’).
8. To listen for messages from other loaded documents, attach a function to the onmessage event of the window, like this: window.onmessage = function(event) {}. Within the curly braces you can access event.data to read the message.
9. To ensure that you post messages only to the documents you want to receive them, pass the correct domain as the second argument to postMessage().
10. To ignore any message received from documents from which you do not wish to receive them, discard those that do not originate from your domain by checking the origin property of the onmessage event object, like this: if (event.origin == ’http://domain.com’).
Lesson 18 Answers
1. To embed audio in an HTML5 document, you use the <audio> tag.
2. The four types of audio format supported by HTML5 browsers are AAC, MP3, PCM, and OGG Vorbis.
3. To ensure that your audio will play on all major browsers and platforms, you need to provide your audio in two formats. One of these should be OGG Vorbis, and the other can be either AAC or MP3.
4. The purpose of the <source> tag is to offer an audio file to the browser. If the browser supports the audio type and it is the first audio file supported, then it will be selected for playing.
5. For playing audio, the <source> tag requires two attributes to be supplied to it: the URL of the audio file in the src attribute, and the type of the audio file in the type attribute, like this: <source src=’music.mp3’ type=’audio/mpeg’>.
6. To make audio play on page load, supply the autoplay attribute to the <audio> tag, like this: <audio autoplay>.
7. You can control whether or not the audio controls are displayed by either including or omitting the controls attribute from the <audio> tag, like this: <audio controls>.
8. To set a piece of audio to play over and over, add the loop attribute to the <audio> tag, like this: <audio loop>.
9. To cause audio to begin loading even before the user selects Play, add the preload attribute to the <audio> tag, like this: <audio preload>.
10. You can support older browsers that do not recognize HTML5 audio by embedding a Flash audio player within the <audio> and </audio> tags. HTML5 browsers will ignore it, while older ones will ignore the <audio> tags and will run the Flash plug-in.
Lesson 19 Answers
1. To embed video in an HTML5 document, you use the <video> tag.
2. The three types of video format supported by HTML5 browsers are MP4/H.264, OGG/Theora, and WebM/VP8.
3. To ensure that your video will play on all major browsers and platforms, you need to provide your video in two formats. One of these should be MP4, and the other should be OGG.
4. The purpose of the <source> tag is to offer a video file to the browser. If the browser supports the video type and it is the first video file supported, then it will be selected for playing.
5. For playing audio, the <source> tag requires two attributes to be supplied to it: the URL of the video file in the src attribute, and the type of the video file in the type attribute, like this: <source src=’video.mp4’ type=’video/mp4’>.
6. To make video play on page load, supply the autoplay attribute to the <video> tag, like this: <video autoplay>.
7. You can control whether or not the video controls are displayed by either including or omitting the controls attribute from the <video> tag, like this: <video controls>.
8. To set a video’s width and height, assign values to the width and height attributes of the <video> tag, like this: <video width=’640’ height=’480’>.
9. To display an image of your choice as a placeholder for where the video will play, use the poster attribute in the <video> tag, like this: <video poster=’myimage.jpg’>.
10. You can support older browsers that do not recognize HTML5 video by embedding a Flash video player within the <video> and </video> tags. HTML5 browsers will ignore it, while older ones will ignore the <video> tags and will run the Flash plug-in.
Lesson 20 Answers
1. Microdata makes text that is easily understandable by people due to context equally understandable to machines, by explaining each part.
2. Two attributes used to denote microdata are itemtype for the type of microdata, and itemprop for each property. Other microdata attributes include itemid, itemref, and itemscope.
3. Web workers are JavaScript programs that are set to work in the background under the control of the browser to undertake tasks separate from the main foreground program.
4. You create a new web worker by calling the Worker() function, passing it the URL of a JavaScript program to run, like this: worker = new Worker (’program.js’).
5. You receive messages from a web worker by attaching a function to the onmessage event of the worker object that is returned by the call to Worker(). The data property of the object passed to this function contains the message.
6. Offline web applications are online web applications that can also run offline because all their associated files get downloaded locally by the browser.
7. Offline web applications use the MIME type text/cache-manifest. When a web browser encounters a file of this type, it knows that it contains information about the files it should download to enable an app to run offline.
8. In order to implement drag and drop in a document, you need to attach handler functions to the ondragstart event of any object to be dragged. You must also attach to the ondragover and ondrop events of any element into which items can be dropped.
9. The purpose of calling the preventDefault() function in the drag-and-drop handlers is to override the default action of disallowing drag-and-drop operations, thus making these operations available.
10. The functions that handle the passing of dragged-and-dropped items are setData() and getData(), which are methods of the dataTransfer property of the events being handled.