HTML5 interview questions Part -3

1. Ques: What is HTML Local Storage ?
Answer:
With local storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server request. HTML5 Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.


2. Ques: What is the Geolocation API and why would you use it?
Answer:
HTML Geolocation API is used to get the geographical position of a user.Since this can compromise privacy, the position is not available unless the user approves it.

The HTML5 Geolocation API allows users to share their location with a website. This is a useful feature that asks a user permission to share their latitude and longitude with the app to receive the benefits of location-aware features, such as the ability to present the landing page of the business closest to the user’s location.

HTML5 interview questions Part 2

1. Ques: What are the new APIs provided by the HTML5  standard ?
Answer:
The HTML 5 standard comes with a new APIs.

• Media API
• Text Track API
• Application Cache API
• User Interaction
• Data Transfer API
• Command API
• Constraint Validation API
• History API

2. Ques:  How can  use Audio in HTML5 ?

Answer:

 HTML5 embedding audio files following way. Supported audio formats are MP3, Wav and Ogg.

<audio controls>

  <source src="moviessong.mp3" type="audio/mpeg">

  <embed height="60" width="100" src="horse.mp3">

</audio>

3. Ques:  How can  use Video in HTML5 ?

Answer:

 HTML5 embedding Video files following way. Supported video formats are MP4, WebM and Ogg.

<video width="500" height="400" controls>


  <source src="movies.mp4" type="video/mp4">


  Your browser does'nt support video embedding feature.


</video>




4. Ques: What are “web workers”  in  HTML5?
Answer:
A web worker is a script that runs in the background (i.e., in another thread) without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background. Workers utilize thread-like message passing to achieve parallelism.
Unlike JavaScript the Web worker doesn't interrupt the user and the web page remain responsive because they are running tasks in the background.


5. Ques: What is use of HTML Canvas?
Answer:
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Ex:
<canvas id="newcanvas" width="300" height="100"></canvas>


6. Ques: What is a SVG?
Answer:
SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.


7. Ques: What is the difference between Canvas and SVG?
Answer:
 Difference between Canvas and SVG given as
Canvas 

• Canvas draws 2D graphics, on the fly (with a JavaScript). 
• Canvas is a javascript API for drawing vector graphics to a bitmap of a specific size.
• Pixel based (Dynamic .png)
• Single HTML element.(Inspect element in Developer tool. You can see only canvas tag)
• Modified through script only
• Event model/user interaction is granular (x,y)
• Performance is better with smaller surface, a larger number of objects (>10k), or both

SVG

• SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element. In SVG, each drawn shape is remembered as an object.
• SVG is a document format for scalable vector graphics.
• Shape based
• Multiple graphical elements, which become part of the DOM
• Modified through script and CSS
• Event model/user interaction is abstracted (rect, path)
• Performance is better with smaller number of objects (<10k), a larger surface, or both

8. Ques: What are the new input attributes in HTML5 ?

Answer:

Below are the new input attributes in HTML5 

• AutoFocus
• Form
• FormMethod
• FormNoValidate
• Height and Width
• Min and Max
• Placeholder
• Required

9. Ques: What methods are used to draw straight line using canvas?

Answer:

Below are the list of methods used to draw straight line 

• moveTo(a,b)
• lineTo(a,b)
• stroke()

10. Ques: What is HTML5 Application Cache ?

Answer:

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

Application cache gives an application three advantages:

• Offline browsing - users can use the application when they're offline
• Speed - cached resources load faster
• Reduced server load - the browser will only download updated/changed resources from the server

HTML5 interview questions Part 1

1. Ques: What is HTML5?
Answer:
HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. It's actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things happen.

HTML5 has new features like Drawing, Animation, Video and Audio etc. It is used to solve some common structural problems encountered with HTML 4.1. It gives more flexibility to both the web developers, the web designers and enables more exciting and interactive websites in addition to more powerful and efficient applications.

HTML5 brings a whole new dimension to the web world. It can embed video on the web-pages without using any special software like Flash. Firefox, Chrome, Opera, Safari and Internet Explorer all support <! doctype html>.


2. Ques:  What are the new features in HTML5 ?
Answer:
Following are new features in HTML5

• Local storage.
• New form controls like calendar, date, time, email, URL and search etc.
• canvas element is provided for 2D drawing.
• video and audio elements for media playback.
• New elements are provided. For e.g. article, header, footer, nav, section.

3. Ques: What are the various elements provided by HTML5 for media content?

Answer:

audio - It defines sound content.

video - It defines a video. 

source - This tag defines the source of video and audio.

embed - It provides a container for an external application. 

track - It defines text tracks for video and audio.

4. Ques:  What are the diffrent types of storage in html5 ?
Answer:
HTML5 offers two new objects for storing data on the client

LocalStorage – stores data with no time limit
<script type=“text/javascript”>
localStorage.lastname=“ZAG”;
document.write(localStorage.lastname);
</script>
SessionStorage – stores data for one session.The data is deleted when the user closes the browser window.
<script type=“text/javascript”>
sessionStorage.lastname=“ZAG”;
document.write(sessionStorage.lastname);
</script>


5. Ques: Differentiate between Canvas and SVG ?
Answer:
Differences between Canvas and SVG are given bellow

• Canvas is resolution dependent while SVG is not.
• Canvas does not provide any support for event handlers while SVG does.
• Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.
• Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.

6. Ques: What are the new input types provided by HTML 5 for forms ?

Answer:

New input types for forms provided by HTML 5 are given bellow

• color – Used for fields that should contain color.
• date – Allows the user to select a date.
• datetime - Allows the user to select a date and time (with time zone).
• datetime-local - Allows the user to select a date and time (without time zone).
• email - Used for input fields that should contain an e-mail address.
• month - Allows the user to select a month and year.
• number - Used for input fields that should contain a numeric value. Restrictions on type of numbers accepted can be set.
• range - Used for input fields that should contain a value from a range of numbers. Restrictions on type of numbers accepted can be set here as well.
• search - Used for search fields.
• tel - Defines a field for entering a telephone number.
• time - Allows the user to select a time.
• url - Used for input fields that should contain a URL address.
• week - Allows the user to select a week and year.

7. Ques: What is HTML5 Web Storage?
Answer:
With HTML5, it is possible for the web pages to store the data locally in the user's browser. This web storage is much faster and secured than the cookies. Also, a larger amount of data can be stored without causing any adverse effect to the performance of the website.
The data here is not included with every server request. It is used ONLY when it is asked for. It is only that particular web page that can access the data stored by itself.


8. Ques: What is the use of Canvas element in HTML5?
Answer:
The canvas element is used to draw graphics by making use of JavaScript. It is defined with the <canvas> tag. We write the following code.
This tag is nothing but a container for graphics. We need to use a script to provide the structure or shapes of the graphics.

We can have multiple Canvas elements in one HTML page.
The real power of the Canvas element is the scripting for which use JavaScript.
For the complete functionality of the HTML5 Canvas tag, we require an API which is made by writing JavaScript code that provides access to Canvas element functionality.