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!

_________________________

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".

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.

______________________

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:

<div>

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.

________________

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.

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!

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

MNC Answers

HTML5 Semantic Elements MCQ solution | TCS Fresco Play

Post a Comment

Azure Virtual Machines MCQs Solution | TCS Fresco Play

Node.Js Essentials Hands-On Solutions | TCS Fresco Play

Python 3 Functions and OOPs MCQs Solution | TCS Fresco Play

List of Fresco Play courses with MCQ and Hands-on | TCS Fresco Play

Artillery - API Freighting MCQs Solution | TCS Fresco Play

MNC Answers