Blog

What is HTML 5?

HTML 5 they have made it all the more clear by making component names for those segments which makes your HTML more readable.

The following are more points of interest of the HTML 5 components which structure the page structure.

  • <header> – Represents header information of HTML.
  • <footer> – Footer segment of the page.
  • <nav> – Navigation components in the page.
  • <article> – Self-contained substance.
  • <section> – Used inside article to characterize segments or gathering substance into areas.
  • <aside> – Represent side bar substance of a page.
What is the major different of HTML and HTML5?

In HTML is nothing all the more feature where in Html5 Lot of new future such as Video, Audio, mp3, date select function, Canvas, placeholder , 2d, 3d Graphics, Local SQL Databases added with the no need  to external plug-in such as  Flash player and other library.

What is output element in HTML5?

Output element is required when you require calculating from two inputs to be summarized into a name. Case in point you have two textboxes and you need to include numbers from these textboxes and send them to a mark.

100+6=106

Below code of how to utilize output element with the HTML5

1
2
3
4
5
form onsubmit="return false"  &ouml;ninput="o.value = parseInt(a.value)
<input name="m" type="number"> +
<input name="n" type="number"> =
<output name="o"/>
</form>

You can likewise supplant “parseInt” with “valueasnumber” for effortlessness. You can likewise use “for” in the yield component for more intelligibility.

1
<output name="o" for="a b"></output>

What is canvas in HTML 5?

Canvas is a HTML area on which you can draw graphics.

1
2
3
4
<canvas id=""xCanvas"" height=""800""
width=""900"" style=""border: 1px">
</canvas>
&nbsp;

Get access to canvas area

To draw on the canvas area we have to first get reference of the connection segment. The following is the code for canvas segment.

1
2
var c=document.getelementbyid("xCanvas");
var ctx=c.getcontext("2d");

Draw the graphic

Presently once you have admittance to the setting article we can begin drawing on the connection. So first call the “move” strategy and begin from a point, utilization line system and draw the line and afterward apply stroke over it.

 What are selectors in CSS?

Selectors help to choose an element to which you need to apply a style. For instance underneath is a straightforward style called as ‘introduction” which applies red shade to background of a HTML element.

1
2
3
4
5
6
<style>
.introduction
{
background-color:red;
}
</style>

To apply the above “introduction” style to div we can utilize the “class” selector as demonstrated in the below figure.

1
2
3
4
<div class="intro">
<p>MSy name is Meraj Ansari.</p>
<p>I write Interview questions.</p>
</div>

How can you define that local storage concept in HTML 5?

Some time we use the local data store about the client locally store in computer. For instance we should say client has half-filled a long structure and abruptly the web association severs. So the client would like you to store this data by regional standards and when the web comes back. He might want to get that data and send it to the server for capacity.

How can we add and delete data from local storage?

Data is added to local storage utilizing “key” and “worth”. Beneath specimen code shows nation data “America” included with key quality “Key001”.

1
localstorage.setitem(&ldquo;key001&rdquo;,&rdquo;America&rdquo;);

To recover data from local storage we have to utilize “getItem” giving the key name.

1
var nation = localstorage.getitem(&ldquo;key001&rdquo;);

 

You can likewise store JavaScript object’s in the local storage utilizing the beneath code.

1
2
3
4
5
6
var nation = {};
country.name = &amp;ldquo;America&amp;rdquo;;
country.code = &amp;ldquo;i001&amp;rdquo;;
localstorage.setitem(&amp;ldquo;i110&amp;rdquo;, nation);
var country1 = localstorage.getItem(&amp;ldquo;i110&amp;rdquo;);
&nbsp;

Why is local storage not lifetime?

The local storage not a life time because it will be either the client clears it from the browser using the JavaScript code.

What do you mean by WebSQL?

WebSQL is a relation database at the customer browser side. It is a local RDBMS inside the browser on which you can fire SQL queries.

Can you decide that WebSQL a part of HTML 5 specification?

No, many people individuals mark it as HTML 5 yet it’s not part of HTML 5 specification.

What are “web workers”?

Web workers finally bring multi-threading to JavaScript.

A web worker is a script that runs out of sight without the page expecting to hold up for it to finish. The client can keep on collaborating with the page while the web worker runs out of sight. Workers use string like message going to accomplish parallelism.

How would you indicate the character set being utilized by a Html5 database? How does this vary from more established HTML guidelines?

In HTML5, the encoding utilized can be indicated with the charset characteristic of a <meta> tag inside the databases <head> component:

1
2
3
4
5
6
7
8
9
<!doctype html>
<html>
<head>
...
<meta charset="DTD-8">
...
</head>
...
</html>

This is a marginally more straightforward sentence structure from more seasoned HTML norms, which did not have the charset trait. For instance, a HTML 4.01 archive would utilize the <meta> tag as takes after:

1
2
3
4
5
6
7
8
9
<!doctype HTML PUBLIC "-/J2EE//DTD HTML 4.01//EN" "http://www.J2EEbrain.com/TR/html4/strict.dtd">
<html>
<head>
...
<meta http-equiv="Line Structure" line="text/html; charset=DTD-8"?
...
</head>
...
</html>

How to include feature video and audio in Html5?

The canvas component is utilized to draw representation pictures on a web page by utilizing javaScript like below:

We can include video feature in html5

1
2
3
4
<video width="430″ height="390″ controls="controls">
<source src="listenmusic.mp4″ type="video/mp4″/>
<source src="listenmusic.ogg" type="video/ogg"/>
</video>

Include audio like this

1
2
3
<audio controls="controls">
<source src="listenmusic.ogg" type="audio/ogg"/>
<source src="listenmusic.mp3″ type="audio/mpeg"/>

What is the different between HTML5 Application and general HTML browser store?

Html5 specification permits browsers to prefetch some or the greater part of a website possessions, for example, HTML records, pictures, CSS, JavaScript, et cetera, while the customer is joined. It is redundant for the client to have gotten to this substance at one time, for bringing this substance. At the end of the day, application store can prefetch pages that have not been gone by at all and are along these lines distracted in the customary browser reserve. Pre-fetching documents can accelerate the webpage’s execution; however you are obviously utilizing data transmission to download those records at first.

What are the various Types of Storage in HTML5?

Local storage – stores information with no time limit

1
2
3
4
<script type="text/javascript">
localstorage.lastname="BAG";
document.write(localstorage.lastname);
</script>

Session storage – stores information for one session.the information is erased when the client shuts the browser window.

1
2
3
4
<script type="text/javascript">
sessionstorage.lastname="zag";
document.write(sessionstorage.lastname);
</script>

What is the <!doctype> ? Is it important to use in Html5?

The <!doctype> is a guideline to the web program about what version of HTML the page is composed in. Also The <!doctype> tag does not have an end tag and It is not case touchy.

The <!doctype> affirmation must be the first thing in Html5 report, before the <html> tag. As In HTML 4.01, all <! DOCTYPE > assertions oblige a reference to a Document Type Definition (DTD), on the grounds that HTML 4.01 was focused around Standard Generalized Markup Language (SGML). WHERE AS Html5 is not focused around SGML, and thusly does not oblige a reference to a Document Type Definition (DTD).

What is the difference between SVG and other picture format?

  • SVG is a language for portraying two-dimensional vector representation in XML.
  • SVG remains for Scalable Vector Graphics
  • SVG is utilized to characterize vector-based illustrations for the Web
  • SVG characterizes the illustrations in XML design
  • SVG illustrations don’t lose any quality on the off chance that they are zoomed or resized
  • Each component and each characteristic in SVG records can be enlivened
  • SVG is a W3c suggestion

Advantages:

  • Advantages of utilizing SVG over other picture arrangements (like JPEG and GIF) are:
  • SVG pictures can be made and altered with any content manager
  • SVG pictures can be looked, listed, scripted, and compressed
  • SVG pictures are versatile
  • SVG pictures can be printed with high caliber at any determination
  • SVG pictures are zoomable (and the picture can be zoomed without corruption)

What is the major difference Transitional and Strict doctype?

Strict – This DTD contains all HTML components and properties, however does NOT INCLUDE presentational or expostulated components (like text style). Framesets are not permitted.

Transitional – This DTD contains all HTML components and properties, INCLUDING presentational and belittled components (like textual style). Framesets are not permitted.

What are the New Semantic/Structural Elements?

Html5 offers new components for better structure:

Tag and Description

  • <article>- Defines an article
  • <bdi>- Isolates a piece of content that may be organized in an alternate heading from other content outside it
  • <command>- Defines a charge catch that a client
  • <details>- Defines extra points of interest that the client can view or cover up
  • <dialog>-Defines a dialog box or window
  • <summary>- Defines an unmistakable heading for a <details> component
  • <figure>- Specifies independent substance, in the same way as outlines, charts, photographs, code postings, and so forth.
  • <figcaption>- Defines a heading for a <figure> component
  • <footer>- Defines a footer for a report or segment
  • <header>- Defines a header for a report or segment
  • <hgroup>- Groups a set of <h1> to <h6> components when a heading has different levels
  • <meter>- Defines a scalar estimation inside a known extent
  • <nav>- Defines route joins
  • <progress>- Represents the advancement of an assignment
  • <ruby>- Defines a ruby annotation (for East Asian typography)
  • <rt>- Defines a clarification/articulation of characters (for East Asian typography)
  • <rp>- Defines what to show in programs that don’t help ruby annotations
  • <section>- Defines an area in a record
  • <time>- Defines a date/time
  • <wbr>- Defines a conceivable line-break

What do you mean by New Media Elements in Html5? Is canvas component utilized as a part of Html5?

The following are the New Media Elements have included Html5

Tag and Description

  • <audio>- For multimedia substance, sounds, music or other sound streams
  • <video>- For feature a motion picture cut or other feature streams
  • <source>- For media assets for media components, characterized inside feature or sound components
  • <track>- For content tracks utilized as a part of mediaplayers

We can utilize Canvas component as a part of html5 like <canvas></canvas>

Why it is used sessionstorage Object in html5?  How to create and access?

The sessionstorage item stores the information for one session. The information is erased when the client shuts the program window. Like beneath we can make and access a sessionstorage here we made “name” as session

  • <script type=”text/javascript”>
  • name=”phpzag”;
  • </script>

What is the major difference between Html5 Application cache and normal HTML browser cache?

Html5 particular permits programs to pre-fetch some or the greater part of a site resources, for example, HTML documents, pictures, CSS, Javascript, etc, while the customer is joined. It is redundant for the client to have gotten to this substance long ago, for bringing this substance. As it were, application store can prefetch pages that have not been gone to at all and are in this manner inaccessible in the standard program reserve. Prefetching documents can accelerate the webpage’s execution; however you are obviously utilizing transmission capacity to download those records at first.

Why the new Apis is provided by the HTML 5 standards? Explain of each?

The canvas component: Canvas comprises of a drawable area characterized in HTML code with stature and width traits. JavaScript code may get to the range through a full set of attracting capacities like other regular 2D Apis, hence considering powerfully produced representation. Some foreseen employments of the canvas incorporate building charts, livelinesss, diversions, and picture structure.

  • Timed media playback
  • Offline stockpiling database
  • Document altering
  • Drag-and-drop
  • Cross-report informing
  • Browser history administration
  • MIME sort and convention hand

What are other advantages does HTML 5 have?

  • Cleaner markup
  • Additional semantics of new components like <header>, <nav>, and <time>
  • New structure info sorts and traits that will (and for Opera’s situation, do) take the bother out of scripting structures

What does a <hgroup> tag do?

The <hgroup> tag is utilized to gathering heading components.

The <hgroup> component is utilized to gathering a set of <h1> to <h6> components.

<hgroup><h1>hello</h1><h2>how r u?</h2></hgroup>

 

What is the status of the improvement of the HTML 5 standard?

HTML 5 is, no doubt created as the following real modification of HTML (Hypertext Markup Language), the center markup language. The Web Hypertext Application Technology Working Group (WHATWG) began deal with the detail under the name Web Applications 1.0.

What is the CSS box model in HTML 5?

The box model is a rectangular space around an HTML element which provides border, padding and margin.

Element Description
Border This element provides the maximum area in which the element will be collected. We can create the border invisible or visible define height and width etc.
Padding This element provides the spacing between border and the element.
Margin This element provides the spacing between border and any neighboring element.

For example the simple CSS code which provides a box with border, padding and margin values.

1
2
3
4
5
6
7
 
.box {
   width: 200px;
   border: 10px solid #99c;
    padding: 20px;
   margin: 50px;
}

What is the data list in HTML 5?

The data list element in HTML 5 helps to provide auto complete features in a textbox as shown below.

The HTML code for DataList features are:

1
2
3
4
5
6
7
8
<input list="City">
<datalist id="City">
<option value="Hyderabad">
<option value="Lucknow">
<option value="Indore">
<option value="Bangalore">
<option value="Agra">
</datalist>

Why is use column layout in CSS?

The CSS column layout helps you to divide your text into columns. For example, suppose the below magazine news, which is one big text, but we need to divide into the same three columns with a border in between.

To create a column layout, we need to define the following are:

  1. How many columns we want to divide the text into?

Specify number of columns we need to use column-count. The “Meraj” and “Ansari-column” needed for name and cast respectively.

-ansari-column-count:3; /* Name */-meraj-column-count:3; /* Meraj and Ansari */

column-count:3;

 

  1. How much gap we want to give between those columns?
1
2
3
-ansari-column-gap:40px; /* Name */
-meraj-column-gap:40px; /* Meraj and Ansari */
column-gap:20px;
  1. Do you want to draw a line between those columns, if yes how then much thick?
1
2
3
-ansari-column-rule:4px outset #ff00ff; /* Name */
-meraj-column-rule:4px outset #ff00ff; /* Meraj and Ansari */
column-rule:6px outset #ff00ff;

Combined with the complete code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.magazine
{
-ansari-column-count:3; /* Name */
-meraj-column-count:3; /* Meraj and Ansari */
column-count:3;
 
-ansari-column-gap:40px; /* Name */
-meraj-column-gap:40px; /* Meraj and Ansari*/
column-gap:20px;
 
-ansari-column-rule:4px outset #ff00ff; /* Name */
-meraj-column-rule:4px outset #ff00ff; /* Meraj and Ansari */
column-rule:6px outset #ff00ff;
}
</style>

 

What does fallback in the Application cache in HTML 5?

1
2
3
<a name="My name is Mr. Meraj Ansari>FALLBACK:
/home/ /homeoffline.html </a></pre>
<h2><a name=" My name is Meraj Ansari""></a>

What is the some new input attributes in HTML 5?

The various new form elements, including in HTML 5 are:

  • Datalist
  • number
  • url
  • email
  • range
  • output
  • time
  • keygen
  • datetime
  • month
  • week
  • date

What are the data attribute good for HTML 5?

The data attribute in HTML 5 provide assigns custom data to an element. The Data was built to store sensitive and private data that is attractive to an application or page, for which there are no other matching elements or attributes.

What is the major difference between HTML 5 interaction in Sencha and Twitter/Bootstrap?

The Sencha and Twitter/Bootstrap are both HTML development frameworks that integrate HTML 5, CSS3 and JavaScript. The basic difference is that in Sencha the three languages are all combined together in code and in Bootstrap HTML and CSS and decoupled.

Can you get the geographical position of a user in HTML 5?

Yes, the HTML 5 can get the location of a user with the use of Geolocation API (Application Programming Interface).

What does manifest file?

The Manifest file is a so simple text file that provides the browser what to cache and what cache and what not to cache:

CACHE MANIFEST- This file provides listed here is cached after they are downloaded for the first time.

NETWORK- Define files listed here require a connection to the server and never cached.

FALLBACK- Fallback provides files listed here specify fallback pages if a page is inaccessible.

Which tags are used for a multi-line text input control?

The textarea tag is used for a multi-line text input control.

What do you mean by a DTD?

Document type definition

If you use a heading tag in a document what does the web browser assumes?

The heading information is to appear on its own line.

What does the cellspacing attribute in HTML 5?

The cellSpacing provide the space between two cells.

Do all HTML tags always come in pair?

No, not all HTML tags come in pair. For example <img>, <br>

Why using frames in HTML 5?

Frames provide it easier to navigate through a site. The links that appear in the frame can display throughout the site.

How can I hide my source in HTML 5?

No, you cannot hide your source as it required by the browser to appear your document.

What is the use of SPAN in HTML 5?

The SPAN used for following reason:

  • Highlight the any color text
  • For including colored text
  • Adding for background image to text

What does a <hgroup> tag do in HTML 5?

The tag <hgroup> is used to group heading elements. The <hgroup> element is used to group a set of <h1> to <h6>.

For example:

1
2
3
4
<hgroup>
<h1> Hello Mr. Meraj Ansari</h1>
<h2>How are you?</h2>
</hgroup>

Leave a Reply