HTML5 Fundamentals
Which is the correct way to nest tags in HTML5? a)<p><b><i>Hello, World!</i></b></p> b)<p><b><i>Hello, World!</p></i></b> c)<p><b><i>Hello, World!</p></b></i> d)<p><b><i>Hello, World!</b></i></p>
<p><b><i>Hello, World!</i></b></p> When nesting HTML tags, the best practice is to close the tags in the reverse order they are opened.
How do developers properly add controls to an audio element? a)<audio controls="controls"> b)<audio control> c)<audio controls="on"> d)<audio controls="Play, Pause, Seeking, Volume">
A: (a) Controls can be added to an audio element in any of the following ways: <audio controls="controls"> <audio controls> <audio controls="">
What is the purpose of the flexbox properties in CSS? a)To display an element as a flexbox, allowing its size, and position adjust with the size of the viewport. b)To display an element as a flexbox, allowing the user to drag the edges of the box in and out to change its size. c)To display an element as a flexbox, allow it to be moved dynamically to any position on the page with very little additional code. d)To display an element as a flexbox, allowing the content of a paragraph element to wrap around adjacent images.
A: (a) Flexboxes are used in page layout and allow the box to adjust its size and position depending on the size of the viewport. In CSS3, attributes have been adjusted in the "display" property to make achieving a flexbox much simpler in modern browsers. Many new properties have been added such as: flex-order, flex-wrap, and flex-flow.
Which two of the following are correct uses of the <div> tag? (Choose two.) a)To add a drop shadow, background color, or a border to an item b)To position multiple unrelated items as a group c)To change the resolution of the display d)To contain copyright information at the bottom of the page e)To divide an object
A: (a) and (b) A <div> tag should be used to group non-related content, create page structure, add visual styles to a page, etc. However, it should not be used when a more semantic tag is available, such as the footer of a page or article.
"Which two of the following are methods used for drawing/animation? (Choose two.)" a)moveTo(): b)fillStyle(); c)tweenElement(); d)motionTween(); e)slideElement();
A: (a) and (b) The fillStyle(); method can be used in drawing. The moveTo(); method can be used to animate. The other options are not methods in HTML5. Using a canvas element, a developer can draw and animate drawings on a page. This allows for dynamic and interactive, graphical elements to be used as part of the user experience.
Which three of the following are true of Browser Cookies? (Choose three.) a)Cookies are used to store data on the user's computer b)Cookies set by one site can be retrieved by any other website c)Cookies can be updated by the site that set them d)Cookies are considered malware and should be avoided e)Cookies can be created and stored with JavaScript
A: (a), (c), and (e) Browser Cookies are used to store data (typically about a user) on the client computer. Cookies can be created and stored with JavaScript, they can also be updated by the website that set them. Cookies can be very useful when managing things like a shopping cart, persistent user data (user's first name for example), or time of last visit. Cookies are designed to only be retrieved by the site that set them, not other sites on the web. They are typically very small and limited in the type and scope of the data that can be stored.
Which three methods are used for localStorage and sessionStorage? (Choose three.) a)getItem(); b)synch(); c)removeItem(); d)refresh(); e)setItem(); f)retrieveItem();
A: (a), (c), and (e) There are many methods that can be used to manage the local and session storage objects. These include: setItem(), getItem(), removeItem(), and clear(). Through these methods, a developer is able to control the data being stored, retrieve the relevant information, and manage these storage objects.
What is the correct syntax for a CSS comment? a)<!--- Comment Goes Here --> b)/* Comment Goes Here */ c)// Comment Goes Here d)# Comment Goes Here #
A: (b) A comment is added to a CSS file with the "/*" identifier and a closing "*/". This serves as both a multi-line comment and a single-line comment.
What is the difference between an App Package and an App Container? a)The App Container is the entire app packaged into a single file. This process is similar to archiving a large number of files to transfer them to another person.The App Package is the memory space allocated at runtime for the app on the user's local machine. b)The App Package is the entire app packaged into a single file. This process is similar to archiving a large number of files to transfer them to another person.The App Container is the memory space allocated at runtime for the app on the user's local machine. c)App Package and App Container are synonyms. d)The App Package is the entire app packaged into a single file. This process is similar to archiving a large number of files to transfer them to another person. The App Container is a directory within the App Package that contains all resource files (Scripts, Stylesheets, Images, ect...) for the app.
A: (b) App Packages are created using an application development tool like Visual studio. These tools allow developers to write and test code during development and create distributable versions once testing has been completed. This makes distributing the app much simpler and creates a straightforward process for your end user. The App Container is allocated at runtime for the app being run. This gives the app its own memory space while it is running, which helps protect the operating system in the event of an app failing. The other advantage to an App Container is allowing the end user to easily and cleanly uninstall the app without leaving behind traces which could cause issues in the future.
What does the Blob interface in the File API provide access to? a)None of these b)Raw binary file data c)A list of all files in a given directory d)The file's metadata
A: (b) File API allows a program to upload files from local storage to the server without an extra plug-in. There are multiple interfaces that are used to achieve this: File, FileList, Blob, and FileReader.
Which of the following is the correct usage for the <figure> and <figcaption> tags? a) <figure> <img src="fig1.jpg" alt="Building Plans Fig. 1" /> </figure> <figcaption>Fig. 1 - Building plans for the new construction project downtown.</figcaption> b) <figure> <img src="fig1.jpg" alt="Building Plans Fig. 1" /> <figcaption>Fig. 1 - Building plans for the new construction project downtown.</figcaption> </figure> c) <img src="fig1.jpg" alt="Building Plans Fig. 1"> <figcaption>Fig. 1 - Building plans for the new construction project downtown.</figcaption> </img> d) <figure src="fig1.jpg" alt="Building Plans Fig. 1" /> <figcaption>Fig. 1 - Building plans for the new construction project downtown.</figcaption>
A: (b) The <figure> tag is semantic and defines an image figure on a page. Multiple images can be included in the figure. The optional <figcaption> tag allows a caption to be added to the figure. The <figcaption> tag can be either the first or last child of the parent figure tag.
Which is the correct syntax to round the corners of an element? a)border-radius: 15° b)border-radius: 15px; c)border-roundness: 15px; d)border: radius15°;
A: (b) The border-radius property is used to round the corners of an element. This can be done to all corners, or individual ones when adding the corner being rounded to the property like so: border-top-left-radius. These can be used in any combination. The value of the border-radius property should be either pixels or em, since this will allow most browsers to render the edge the same. The smaller the value, the less round the corner.
Which three of the following are hardware that can be accessed by an HTML5 application? (Choose three.) a)Car b)Camera c)GPS d)Thermometer e)Accelerometer f)Garage Door Opener
A: (b), (c), and (e) Using Javascript, it is possible to access multiple different types of hardware on the host machine. This can allow a developer to create an application that can interact directly with the local machine to achieve a more interactive user experience.
Which three methods return a node, or nodes, based on the arguments sent? (Choose three.) a)retrieveID() b)getElementByTagName() c)getElementByTagNameNS() d)retrieveElementID() e)retrieveTagName() f)getElementByID()
A: (b), (c), and (f) There are many ways to get the nodes in an HTML document for use in Javascript: -getElementById() returns the element matching the given ID. -getElementByTagName() returns the element(s) matching the given name(p, a, div, etc.). -getElementByTagNameNS() returns the element(s) matching the given namespace URI and tag name.
Application packaging is the process of grouping all files relevant to an application into a single package. What kind of tool is used to do this? a)Javascript b)WWAHost.exe c)App Development environments d)This is a native feature of HTML5
A: (c) "App Packages are created using an application development tool like Visual studio. These tools allow developers to write and test code during development, and create distributable versions once testing has been completed. This makes distributing the app much simpler, and creates a straightforward process for the end user."
What is the purpose of the multi-column layout property? a)To assist developers in creating multi-column designs for their websites. b)None of these c) To display content that is contained within one block element, in a multi-column view when the page loads. d)To replace tables.
A: (c) The Multi-column layout property allows a developer to designate a single block element as a multi-column element. This will separate the information in the box across the pre-determined number of columns automatically.
What Javascript object is used to read touch input? a)Canvas b)ClickMap c)Touchlist d)Screen map
A: (c) The ____"touchlist"____ contains all points of contact with the touch screen. Reading from this list allows a developers program to decide where on the screen the user has touched, and how. The touchlist contains many properties to help determine this such as the HTML element that was touched and the x and y coordinates of the touch (including three sets of these, one relative to the browser, one to the document, and one to the entire screen).
Which two of the following is true of SVG (Scalable Vector Graphics)? (Choose two.) a)SVG are created purely in XML, and so require very little bandwidth compared to an actual file b)SVG images are capable of being animated c)SVG are static and cannot be animated d)SVG cannot be directly embedded on a page e)SVG are created in JavaScript, so require larger bandwidth than an actual file
A: a and b SVG images are scalable to any screen size, and are an open standard. They are generated from XML and so are light on bandwidth, making them easy to change and maintain. Any element or attribute of an SVG can be animated. SVGs are zoomable, printable at high resolutions (due to being vector graphics), and can be indexed and search (due to being written in XML instead of rasterized as an image).
Which of the following is the correct syntax to retrieve the physical location of the user's device? a)var longitude = navigator.geolocation.getUserLong(); var latitude = navigator.geolocation.getUserLat(); b)navigator.geolocation.getCurrentPosition(); c)navigator.geolocation.getCurrentPosition( printMethod, errorMethod ); d)var location[ ] = navigator.geolocation.getUserLocation();
A: (c) The getCurrentPosition() method accepts a callback method that can be used to perform whatever logic the developer needs to do upon receiving the location. The second argument is used to define what happens when the location is unavailable, or when there is an error. An optional third argument allows the developer to define additional options for the method, such as the required accuracy of the location, the timeout of the method, and whether cached information is used. The getCurrentPosition() method required the end user's permission before it can be called. The user must explicitly allow the calling site access to the data.
Which of the following is the correct syntax for a pattern attribute on an input tag? a)pattern="password" b)None of these c)pattern="[A-z0-9]" d)pattern password
A: (c) The pattern attribute can accept any regular expression as its value. It is usable on any of the text-based input types (text, email, search etc.). The regular expression in the question will allow any combination of capital or lowercase letters, as well as numbers and some common symbols such as the underscore.
Which of the following is the correct usage for the <time> tag? a)The current time is <time value="getCurrentTime();" /> b)The current time is <time currentime /> c)The current time is <time datetime="2012-1- 1T12:54:22Z">12:54</time> d)All of these are correct.
A: (c) The tag is purely semantic and does not change anything in the display of the page. It also is not capable of getting the current time on its own. This tag is used to define a date or time on a page as such. This is helpful to search engines when trying to find the most recent article on a topic, and to ensure that the content on the page is well defined.
What is the programming term for isolating a small piece (or pieces) of data from a larger item? a)None of these b)Exclusion c)Parsing d)Elimination
A: (c) ___Parsing___ is a programming term for accessing a piece (or pieces) of data from a larger set (such as a string). This is useful when developers have a large amount of data (say, the innerHTML of a div) but only need the value of a certain inline element inside of that div.
Which two of the following is the correct syntax to hide a button using JavaScript with jQuery? (Choose two.) a)retrieveElementBy(id); b)hideButton(name); c)document.getElementByID(id).hide(); d)showButton(id); e)document.getElementByID(id).style.display="none"; f)getButton(name);
A: (c) and (e) The hide function is added with jQuery, a popular Javascript Library. These libraries can be added to the webpage through the use of a script tag. Once added, any methods available in these libraries can be used on the site. The style of an element is available through use of the DOM (Document Object Model). Using this, it is possible to show, or hide an element easily, just by changing it's display property. The hide() methods stores the previous display property when it is used, thus when an inline element is shown using the jQuery show() method, it returns to inline. When using the display property manually, the old setting is lost, and must be defined again manually.
As part of the debugging process, a programmer will usually use a validator to test their code. What does this accomplish? a)A validator is a testing environment used to validate the page visually. This allows the developer to catch any errors in the markup that will cause the page to render incorrectly. b)A validator checks over the page for any spelling or grammar errors in the content of the page, ignoring any markup. c)A validator is used to debug any scripting on the page. The advantage of the validator is allowing the code to stop at preset break points, and the manual inspection of variable values. d)A validator checks the markup used on the page for any errors or problems in your code. It does not, however, provide an environment to test the code itself.
A: (d) A Validator is used to check the markup of a page for any incorrect HTML. Common issues are unclosed tags, missing or incorrect properties, deprecated code, or improper use of elements.
What is the advantage of the AppCache? a)The AppCache is used to distribute the entire application to multiple different systems. b)The AppCache allows developers to share common code across projects, leading to faster development process due to not rewriting already existing methods. c)The AppCache is used to cache user information on the server to allow for faster server-side processing on subsequent user connections. d)The AppCache stores files on the user's local machine, causing them to load faster when called again. This also allows for the cached files to be accessed while the user is offline.
A: (d) AppCache is stored locally on the user's machine. This is done to reduce load times and provide more responsiveness for the user. This process also allows users to continue to use an application while offline.
Which is the correct method to define a block element as a grid? a)None of these b)show: grid; c)grid: true; d)display: grid;
A: (d) Grids can be block-level or inline and are used to help organize the layout of the site, without resorting to table formatting. Grid lines can be defined in CSS allowing the content of the page to align itself easily to these markers.
Which of the following items is not a valid input type? a)Email b)URL c)Button d)All of these are Valid
A: (d) There are many inputs types available in HTML5, including: button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week.
What is the correct syntax to use a non-web safe font on your site? a)All fonts used on a website must be Web Safe. b).font { font-face-src: url("Link to font"); } c)@font-style { src: url("Link to font"); } d)@font-face { font-family: Font Name; src: url("Link to font"); }
A: (d) With CSS3, developers can now use fonts that may not be included in all of the user's operating systems. Developers simply need to set up the font-face in the stylesheet, and then use it wherever needed.
Which of the following properties can be used to change the content of a div tag, obtained earlier in the code through the use of document.getElementById()? a) .node.Value b) .content c) .HTML d) .innerHTML
A:(d) The .InnerHTML property can be used to change, delete, or add to the contents of any accessible tag on the page. The value of this property can be treated like any string and can be appended to, removed from, or replaced entirely.
What is JQuery? a)A language specifically written to access databases b)Lightweight, "write less, do more" JavaScript library c)Java-based query language d)A vector-graphic language
Answer: B The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. The jQuery library contains the following features: HTML/DOM manipulation, CSS manipulation, HTML event methods, Effects and animations, AJAX, and Utilities
You want to create a CSS style that will modify the strong tag to apply blue color and add 60% transparency. Which of the following code fragments will do this? a)strong { color: rgba(0%,0%,100%,40%); } b)strong { color: rgba(0,0,255,60); } c)strong { color: rgba(0,0,255, 0.40); } d)strong { color: #0000ff, 60%; }
Answer: C RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object. An RGBA color value is specified with: rgba(red, green, blue, alpha). The color values is a number between 0 (black) and 255 (white). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). So, a 60% transparency would be represented by 40% opaque.
Which three file formats are supported by the <audio> element in HTML5? (Choose three.) a)WAV b)AVI c)AU d)MP3 e)OGG f)AIFF
Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg
What new feature in HTML5 allows you to manage the state of a session? a)Session Navigator b)Manage State Tool c)History API d)Session Tracker
History API The new History API focuses on giving Web applications the ability to "manage state," which means keeping track of the sequence of documents that make up a session's history. This lets you navigate the session history and persist state data—and deal with the URL properly.
Which two HTML5 tags will format text to be important? (Choose two.) a)<strong> b)<b> c)<em> d)<i> e)<p>
In HTML5 the "Emphasis" tag <em> has replaced the older "Italicize" tag <i> and the "Strong" tag <strong> has replaced the older "Bold" tag <b>. According to the HTML5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The HTML5 specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag. You can also use the CSS "font-weight" property to set bold text.
Which two of the following are new organization tags in HTML5? (Choose two.) a)<div> b)<head> c)<section> d)<body> e)<footer>
The <section> tag is used to define sections in a document (i.e. chapters, parts of a thesis, headers etc.). The <footer> tag is used to define footer of a document or section. This can be used to display copyright information, site maps, and anything else that would typically go at the end of a page or document."
Which two of the following can be read by the FileReader interface? (Choose two.) a)User Data b)Blob object c)File object d)List of Files e)File Properties
The FileReader interface provides methods to read the (C)File and (B )Blob objects.
When should you use the new HTML5 <canvas> tag? a)To draw graphics when you don't want to use scripting b)To draw graphics via scripting c)To create a white background d)To paint using your mouse
The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics
You want to publish an application to the Microsoft store. What should you do first? a)Write your app's description and take screenshots b)Choose and reserve your app name c)Submit your app to the Store d)Review the app requirements and developer agreement
The process for publishing an application to the Microsoft store is the following: 1. Review the app requirements and developer agreement. 2. Open a developer account. 3. Choose and reserve your app name. 4. Decide what age rating will apply to your app. 5. Choose your business model. 6. Determine the countries and regions in which you want to sell your apps. 7. Write your app's description and take screenshots. 8. Test your app using the Windows App Certification Kit. 9. Submit your app to the Store. 10. After your app is published, review metrics and reports to see how you can improve your app.
Which three of the following are included in the HTML 5 Family? (Choose three.) a)Silverlight b)HTML Markup c)JavaScript d)Java e)CSS f)SVG
The three primary technologies in the HTML5 family include: semantic HTML Markup, CSS (Cascading Style Sheets), and Javascript. Semantic markup defines the content of the page, allowing for CSS to define the styles (fonts, colors, backgrounds, etc.).
On a Windows touch device, in Mouse Pointer mode, which gesture serves the same purpose as a zoom out? a)Pinch b)Tap c)Swipe d)Hold
Zoom out: Pinch Zoom in: Move two fingers away from each other