HTML5 Semantic Elements MCQ solution | TCS Fresco Play
Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.
Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).
All Question of the MCQs Present Below for Ease Use Ctrl + F with the question name to find the Question. All the Best!
If you found answer for any of the questions is wrong. Please do mention in the comment section, could be useful for others. Thanks!
_________________________
Read Also: HTML5 Semantic Elements Hands-on solution
Introduction to HTML5
HTML5 is a new standard of developing web and mobile applications. It offers some great features, which make applications more dynamic and interactive.
Let's get started by understanding what HTML5 is and the features it provides
Introduction to HTML5
Let's see a quick overview of the new features introduced by HTML5, and how it can help you in creating rich applications compatible with various browsers.
Things to Learn here
In this course you will learn the following:
New Semantic Tags
Form Input Controls
Basics of HTML5 Graphics
HTML5 Media Controls
Feature Detection using Modernizer
Widely used HTML5 API
HTML5 Page Basics
In this video, you will discover how to use basic tags such as doctype, head, title, body and meta tags for you to get started with developing a HTML5 webpage.
What happens if you view a new HTML5 form input type in an older browser
It does not show input
Which of the following input control represents a date (year, month, day) encoded according to ISO 8601 in Web Form 2.0?
date
What is the recommended method to detect browser compatibility for features
autometic
Which HTML5 tag would you use to define footer?
footer
What is the HTML5 Stack?
HTML5, CSS2, JavaScript
Which of the following tag represents an independent piece of content of a document in HTML5?
article
_________________
HTML5 Structural Elements
HTML5 defines a consistent set of elements for the common structural blocks that appear on web sites.
Some of them include the header, footer, section, article, aside, nav and so on. In this module, you will learn about these structural elements
Using Structural Elements
In this video, let's learn about the most commonly used structural/semantic tags - header, section, nav and footer that help in organizing the content on web pages and make the code more readable.
Choosing the Best Structural Element
There are a number structural elements that you could use while building an HTML5 page. But when to use what?
Create a Simple HTML5 Page
Now that you are aware of HTML5 Webpage components, it's time to practice!
Go ahead and try your code at codepen
Try it out - 1
Create an HTML5 Page with:
doctype defined as HTML
charset as "utf-8"
Title as "My HTML5 Webpage"
Header as "Welcome to My Webpage"
Try this exercise on codepen
Try it out - 2
Add the following navigation links to the Webpage:
Home
Blogs
Videos
About Me
Try it out - 3
Add a footer to the webpage with the text - "Copyright @ TCS 2016".
Read Also: HTML5 Semantic Elements Hands-on solution
Basic Template
If you have followed all the instructions, you should now have a basic web page which probably looks quite plain.
Don't worry. Your web page just needs some styles to spice it up. We'll take care of that later!
You can validate the technical quality of your webpage using W3C validator. This validation will check the website code and tells whether it follows all W3C standards.
Input Control Types
Now, let's start with form controls. Forms are an essential component in every aspect of web, designed to gather data.
This module will help you understand HTML5 forms and the new Input Control Types.
Input Control Types
HTML5 has added a number of new Input Types like email, color, date, etc. And New Form Elements like datalist, keygen, and output which simplify addition of some functionalities which in the past required a lot of JavaScript code.
Create a Registration Form
Now that you understand some of the amazing Input Controls introduced by HTML5, head out to codepen to try them out.
Start Coding!
Try it out - 1
Add a section in <body> of the page and create a simple registration form with the following input fields:
Name of input type text
E-mail Address of input type email
Date of Birth of input type date
Phone Number of input type tel
Website of input type url
Try this exercise on codepen.
Try it out - 2
Add a 'Country' field which is powered by a data list with values - India, United States, United Kingdom, Australia, and France.
With this, you should be able to see a drop-down of pre-defined options as you choose a country name in the registration form.
Try this exercise on codepen.
Read Also: HTML5 Semantic Elements Hands-on solution
______________________
Which of the following tags are no longer valid in HTML5?
align
What are the new form elements introduced in HTML5
datalist,keygen, output
Which of the following tags represents a section of document used for navigation?
nav
Which Semantic element is best suitable for content like blog post that is self contained, independent and can be republished?
article
Which of the following attribute triggers events when a form changes?
onformchange
HTML5 Multimedia
Web pages often comprise multimedia elements of different formats and types.
In this module, you will learn how to embed multimedia files in web pages and ensure they work on all browsers.
Audio
Embedding an HTML5 Audio Player is easy and simple to make. However, it's important to know that not all browsers support the same format.
Watch this video to know more!
Control Audio Elements
The audio element can be programmatically controlled from JavaScript code. Here is a sample code to add a Play button to control the audio file:
<audio id=""demo"" src=""audio.mp3""></audio>
<div>
<button onclick=""document.getElementById('demo').play()"">
Play the Audio </button>
</div>
Try it out
Embed an audio file on your HTML5 page with controls and do the following:
Play it automatically
Preload the audio
Run the audio in a loop
Try this exercise on codepen
Video
HTML 5 allows you to do is embed video players. A lot of people are leaning away from Flash and are using HTML 5.
This video teaches you the basic tags you need, to embed a video player.
Custom Video Player
Custom media controls can be created and styled to match the theme by using JavaScript, CSS and the HTMLMediaElement interface.
HTMLMediaElement interface defines a number of properties, methods, and events to gather information about the media elements and control their behavior.
Try-it-out
Embed a video in your HTML5 page with a width of '320' and height of '200' with controls displayed. Now, try to do the following:
Auto-replay the video
Preload the video
Display image while the video loads
Try this exercise on codepen.
Read Also: HTML5 Semantic Elements Hands-on solution
________________
The controls attribute adds audio/video controls like PLAY, PAUSE and VOLUME
true
Which attribute of the video tag specifies an image to be shown while the video is downloading?
poster
HTML5 audio tag has a number of attributes to control the look and feel and various functionalities of the audio player. Which of the following is not an attribute of HTML5 audio element?
stop
How do you embed a video player using
source
Audio element can be programmatically controlled from
JavaScript
HTML5 Graphics
SVG and Canvas are two impressive graphics features introduced by HTML5 to address a range of graphic scenarios on the modern web.
While each of them is worth a course by themselves, this module aims to provide a basic understanding of these elements.
What is HTML5 Canvas?
Canvas is an HTML5 element that offers a blank canvas to draw graphics. JavaScript code may access this area through a full set of drawing functions allowing for dynamically generated graphics.
You can create very promising animations or even interactive games using Canvas.
Introduction to HTML5 Canvas
HTML5 element 'Canvas' gives an easy and powerful way to draw graphics, make photo compositions and do simple animations using JavaScript. This video gives a brief introduction to the element 'Canvas'.
If you have trouble playing this video. Please download the root certificate and proxy certificate and install.
Try-it-out
Embed a Canvas of width 600 and height 400 in your HTML5 page.
Add a function draw() in your JavaScript file, to draw a red rectangle of width 200 and height 100 on the canvas, leaving a margin of 20 on both x axis and y axis.
Add a stroke using 'strokeRect' method.
Power of HTML5 Canvas
Here is a video that gives you a sneak peek into the animation capability of Canvas.
Also, Canvas is now being used for building some of the interactive games as well. Visit www.html5games.com to see some of the cool games created using HTML5.
Scalable Vector Graphics
Now, watch this video to learn about SVG, which is used to define vector based graphics on a web page.
Also, you will learn about the difference between Canvas, SVG, and when each of these should be used.
Read Also: HTML5 Semantic Elements Hands-on solution
Canvas and SVG
That was a high-level introduction to Canvas and SVG. They can be used to create different types of effects and animations.
We will explore these features in depth with more interesting examples in a separate course.
________________
Which of the following is true about 'canvas' tag in HTML5? (I) Easy way to draw graphics using JavaScript (II) Can be use to make Animations
both
SVG is mostly useful for vector type diagrams like
Charts and 2D Graphs
Which is best suited for applications with large rendering areas e.g.: Google maps?
svg
Which of the following is not true about SVG graphics?
Graphics in SVG are defined in XML XXX
Graphics in SVG are defined using Java script
HTML5 APIs
The HTML5 specification has added some useful features in new APIs.
In this module, we'll take a look at the most widely used HTML5 APIs that will help you create interactive websites, interact with a user’s device, and much more!
Modernizr
To start with, you will learn about the feature detection library "Modernizr" and how to use it to detect Browser Compatibility for various features.
Modernizr Under the Hood
Now that you know Modernizr is a cool library that tests and detects browser support for a particular feature, are you wondering how it really does all this?
Watch the next video to see how Modernizr works its magic.
What Does Modernizr Actually Do?
In this video, you will go through some of the functions in the Modernizr library and understand how the feature detection tests are done.
While it might take a lot of time to go through all functions of Modernizr, this video will give you a fair idea about how it works!
HTML5 APIs - UpNext
Over the next set of topics, we'll learn about the HTML5 APIs. While there are many other API's in HTML5, these are the most commonly used ones that one should be aware of.
WebStorage API
In this video, you will see web storage, various types of web storage, how to use it in applications and advantages of it in comparison to cookies.
Cache API
HTML5 presents application cache. In other words, a web application is cached with the help of a manifest file, to make the application accessible without an internet connection. Watch this video to know more!
Read Also: HTML5 Semantic Elements Hands-on solution
Web Worker
Web Workers offer uncomplicated ways for web content to run scripts in background threads without affecting the performance of the page.
Watch this video to learn why Web Workers are amazing!
Geolocation API
A lot of applications and websites include location-aware features like finding local businesses or showing users location on a map. Geolocation API helps in enabling such features.
File API
HTML5 ultimately offers a standard way to communicate with local files, through the File API specification. Here, File API is utilized to generate a thumbnail preview of images while the images are being uploaded, verify uploads mime type matches its file extension or restrict the size of an upload.
Final Note on APIs
Now, you have a fair idea about HTML5 API's. There is more to all these useful and powerful APIs.
To know more about these APIs, you should try it yourself. You'll be surprised at what you find while you experiment with APIs.
__________
Web Apps can start faster and work even if there is no internet connection when you use
app cashe
Which of the following new features of HTML5 can be used for long running tasks?
web worker
Which of the following statements about Modernizer is true?
It augments browser features to support HTML5
Which for the following API's can be used to suggest near by restaurants in a restaurant finder app?
geo
Data from Web Storage is sent to server with every request, giving a big advantage compared to Cookies.
false
Application Cache enables
Offline Browsing
Websites can store data on users computer using Web Storage. How is Web Storage different from Cookies?
More Secure
. If you do not put "", will HTML5 tags work
Yes, Browser automatically detects HTML and HTML5 tags will function properly
Read Also: HTML5 Semantic Elements Hands-on solution
Post a Comment