HTML5 advanced Interview question and answers

HTML5.0 Advanced

What are the rules established for HTML5?

Some rules for HTML5 were established:
• New features should be based on HTML, CSS, DOM, and JavaScript
• Reduce the need for external plugins (like Flash)
• Better error handling
• More markup to replace scripting
• HTML5 should be device independent
• The development process should be visible to the public

WHAT IS THE DIFFERENCE BETWEEN HTML5 APPLICATION CACHE AND REGULATE HTML BROWSER CACHE?

The new HTML5 specification allows browsers to prefetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the sites performance, though you are of course using bandwidth to download those files initially.

Explain the difference between HTML and HTML5?

HTML5 is nothing more then upgraded version of HTML where in HTML5 Lot of new future like Video, Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local SQL Database added so that no need to do external plugin like Flash player or other library.

What are the new APIs provided by the HTML 5 standard? Give a brief description of each

• The canvas element: Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition.
• Timed media playback
• Offline storage database
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME type and protocol handler registration

WHAT ARE THE DIFFERENT TYPES OF STORAGE IN HTML5?

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>

WHAT ARE THE NEW APIS PROVIDED BY THE HTML 5 STANDARD? GIVE A BRIEF DESCRIPTION OF EACH?

The canvas element: Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition.
• Timed media playback
• Offline storage database
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME type and protocol handler registration

WHAT OTHER ADVANTAGES DOES HTML5 HAVE?

a) Cleaner markup
b) Additional semantics of new elements like <header>, <nav>, and <time>
c) New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.

GIVE AN EXAMPLE OF NEW ELEMENTS IN HTML5 TO SUPPORT MULTIMEDIA AND GRAPHICS?

January 26, 2013   admin   No comments

HTML5 introduced many elements such as , instead of to support multimedia.

What is HTML5 Geolocation?

HTML5 Geolocation is used to locate a user’s position
The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.

HTML5 – Using Geolocation

Use the getCurrentPosition() method to get the user’s position.
The example below is a simple Geolocation example returning the latitude and longitude of the user’s position:
Example
<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“
Longitude: ” + position.coords.longitude;
}
</script>

What’s so different about HTML5?

There are a couple of great new approaches that are taking place in the HTML5 description.
1. The Rise of WebApps
2. More descriptive semantics
3. Richer Media Elements
The Rise of WebApps
First, the language is being built around WebApps…small focused applications that can run on a browser or as a mobile application. The new version of HTML has features like offline storage or the ability to handle data even when the app is no longer connected to the internet, geo-location or the ability to detect and work with the location of the user as well as excellent rich media support…providing easy to implement audio and video elements.
More descriptive semantics
The original goal of HTML was to develop a language that could describe the structure of a document. As the web grew, developers realized that oftentimes they were describing the same types of elements. For example…a header, a footer, nav, articles, sections, etc. HTML5 recognizes where the language has developed and incorporates those elements into the language with new tags for that type of content.
Richer Media Elements
One of the great new improvments in HTML5 is the development of rich media tags like audio and video. Fully programmable with JavaScript, these tags offer incredible ease of use while also offering powerful flexibility through extensive access to media elements through programming

Why not HTML5?

I wish we could all be using HTML5 today, but the reality is that there are a few problems that prevent the language from use in modern websites.
1. Browser Support            2. The Language is a Spec           3. Media Licensing Issues
Browser Support
The main problem with HTML5′s acceptance is that only modern browsers support it. By modern, I mean almost everything except for Internet Explorer. The new version…IE9 offers excellent support, but as of this writing it’s not quite out of beta. Even if it were, the majority of people will still use older versions of IE for quite some time. There are things you can do to make the language play nice with older browsers, but none of them are perfect.
The Language is a Spec
Another problem is that although parts of the language are very stable, the language itself is considered a work in progress, so technically, any of the elements could change at any time. The language is not expected to be completed for several years, which complicates things further. Thankfully, a lot of the language is considered stable and ready to use. I think it’s such a great move forward, that you should develop a Graceful Degradation approach to writing your HTML. That simply means writing HTML that will work with older browsers, but will offer users with more modern browsers an enhanced experience.
Media Licensing Issues
Another ugly fact about HTML5 is that because of licensing issues, rich media has to be compressed in multiple formats in order to be compatible with most browsers. So you’ll probably use something like mp3 audio for webkit browsers (safari, chrome), and ogg for mozilla (firefox) browsers. It involves a bit more work and it is a pain, but hopefully those issues will be resolved soon.

List out the advantages of HTML5?

The top 5 from some web research would appear to offer the following HTML5 features;
1. Mutuality
2. Cleaner mark-up / Improved Code
3. Improved Semantics
4. Elegant forms and web apps
5. Offline Application cache

List out the new tags with example in HTML5?

To convert your PSD into HTML5 first you need to know about the basic structure, the basic
structure include tags and HTML5 introduces a whole set of new elements that make it much easier to structure pages. Here you get knowledge of main six tags used in HTML5.
1. Header Tag
<header>
<h1>Header in HTML5</h1>
<p>By HTLM5Arena</p>
</header>
This way you can use header tag. The header element represents the header of a section.
Which contain logo, top navigation, search section etc. So the div id=”header” is replaced by
<header> tag.
2. Nav Tag
Here it is same like div id=”navigation”, changed and introduced as <nav> the navigation
pages will come here in this tag. Which include ul and li of different properties. See the use
of <nav> in below example.
<nav>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/products”>Products</a></li>
<li><a href=”/services”>Services</a></li>
<li><a href=”/about”>About</a></li>
</ul>
</nav>
3. Article Tag
The article element represents an independent section of a document, page or site. Mainly use for content like news articles, blog articles, forum posts, individual comments etc. Same like div
you can give id to article tag.
<article id=”article_01″>
<header>
<h4><a>Comment #1</a>
by <a href=”http://HTML5Arena.com/”>HTML5Arena Team</a></h4>
<p><time date>15 April, 2011at 24:20</time>
</header>
<p>Very helpful article is here!</p>
</article>
4. Section Tag
<section>
<h1>Any level of heading</h1>
rest of the content
</section>
Generally people think <section> is used to wrap the content but it is wrong.
The section element represents a generic document or application section…
For content wrap we can use div.
5. Aside Tag
The aside element is generally used for marking up sidebars and content that is tangentially related to the content around it. Below is the example of aside tag.
<aside>
<h1>Archives</h1>
<ul>
<li><a>March 2011</a></li>
<li><a>April 2011</a></li>
</ul>
</aside>
6. Footer Tag
The footer element represents the footer for the section it applies to. Footer typically contains information about its section such as writer name, links of its useful documents, copyright data.
<footer>© 2011 All rights reserved.</footer>

What is Canvas?

Canvas is a element of HTML5 which uses JavaScript to draw graphics on a web page. A canvas is a rectangular area. Each and every pixel of it can be controlled by us. There are several methods for drawing paths, boxes, circles, characters, and adding images by using canvas.

How to write Canvas?

To add canvas tag to our HTML document we need id, width and height. Below is the example how to write a basic canvas tag to your HTML document.
<canvas id=”myFirstCanvas” width=”100″ height=”100″></canvas>

How canvas work with Javascript?

Canvas element can not draw anything, the drawing is done in Javascript only. The Javascript use the id to reach the particular canvas. The below is the small example which shows how Javascript work with canvas.
<!DOCTYPE HTML>
<html>
<body>
<canvas id=”myFirstCanvas” width=”100″ height=”100″ style=”border:2px solid #000000;”>
</canvas>
<script type=”text/javascript”>
var c=document.getElementById(“myFirstCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FFF000″;
cxt.fillRect(0,0,100,125);
</script>
The fillStyle method makes it yellow, and the fillRect method specifies the shape, position, and size.
Coordinates – X and Y
The fillRect method above had the parameters (0,0,100,125). This means: Draw a 100×125 rectangle on the canvas, starting at the top left corner (0,0). The canvas’ X and Y coordinates decide the position of drawings on the canvas.
Good Examples of canvas to start learning
Example 1:
<!DOCTYPE HTML>
<html>
<body>
<canvas id=”myFirstCanvas” width=”200″ height=”100″ style=”border:1px solid #999999;”>
</canvas>
<script type=”text/javascript”>
var c=document.getElementById(“myFirstCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#000000″;
cxt.beginPath();
cxt.arc(50,18,18,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>

Example 2:
<html>
<body>
<canvas id=”myFirstCanvas” width=”300″ height=”150″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>
<script type=”text/javascript”>
var c=document.getElementById(“myFirstCanvas”);
var cxt=c.getContext(“2d”);
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,”#FF0000″);
grd.addColorStop(1,”#FFF000″);
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,100);  </script>  </body>   </html>