HTML5 Interview Questions
HTML5 Interview Questions
1. What is the use of Canvas Element in HTML5?
HTML5 Canvas element can be used to draw graphics images on a web page by using javascript.
2. Can you give an example of Canvas element how it can be used?
<canvas id=“DGTCanvas” width=“500″ height=“400″>
</canvas>
<script type=“text/javascript”>
var DGTCanvas=document.getElementById(“DGTCanvas”);
var DGTText=DGTCanvas.getContext(“2d”);
DGTText.fillStyle=“#82345c”;
DGTText.fillRect(0,0,150,75);
</script>
This book is far better than any other learning material. It has very basic information that includes both HTML5 and CSS3 with sample code and comprehensive examples.
3. What is the purpose of HTML5 versus XHTML?
HTML5 is the next version of HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX. Instead of using those plugins, it enables browser to serve elements such as video and audio without any additional requirements on the client machine.
4. What is the difference between HTML and HTML5 ?
HTML5 is nothing more then upgraded version of HTML where in HTML5 supports the innovative features such as 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 elemenents.
5. WHAT are some other advantages of HTML5?
a) Cleaner markup than earlier versions of HTML
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.
6. What is the <!DOCTYPE>? Is it mandatory to use in HTML5?
The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. The <!DOCTYPE> tag does not have an end tag. It is not case sensitive.
The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag. As In HTML 4.01, all <! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).
7. What are the New Media Elements in HTML5?
New Media Elements in HTML5 are :
Tag
Description
<audio>
For multimedia content, sounds, music or other audio streams
<video>
For video content, such as a movie clip or other video streams
<source>
For media resources for media elements, defined inside video or audio
elements
<embed>
For embedded content, such as a plug-in
<track>
For text tracks used in mediaplayers
8. What is the major improvement with HTML5 in reference to Flash?
Flash is not supported by major mobile devices such as iPad, iPhone and universal android applications. Those mobile devices have lack of support for installing flash plugins. HTML5 is supported by all the devices, apps and browser including Apple and Android products. Compared to Flash, HTML5 is very secured and protected. That eliminates major concerns that we have seen with Flash.
10. What is the sessionStorage Object in html5 ? How you can create and access that?
The HTML5 sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. We can create and access asessionStorage, created “name” as session
<script type=“text/javascript”>
sessionStorage.name=“DGTECH”;
document.write(sessionStorage.name);
</script>
11. What is the full form of URI, URL, URN?
URI - Uniform Resource Identifier
URL - Uniform Resource Locator
URN - Uniform Resource Name
12. Write code for a html table that will have one row and one column?
<table>
<tr>
<td>
</td>
</tr>
</table>
13.Difference between GET and POST Metods
Difference Between GET and POST methods
GET:
1) Data is appended to the URL.
2) Data is not secret.
3) It is a single call system
4) Maximum data that can be sent is 256.
5) Data transmission is faster
6) This is the default method for many browsers
POST:
1) Data is appended to the URL.
2) Data is Secret
3) It is a two call system.
4) There is no Limit on the amount of data.That is characters any amount of data can be sent.
5) Data transmission is comparatively slow.
6) No default and should be Explicitly specified.
14.Why to specify the alt value in the img tag?
alt stands for alternate this means that for some reason if image can't be loaded on the page, the alt value will be displayed.
<img src="myimage.jpg" alt="this is my photo" title="click to go to my page" />
In the above code snippet when myimage.jpg is available on the web server, the image will be displayed and mouse ever on the image will show "click to go to my page" but in case myimage.jpg is not available on the server or by some reason it could't be rendered on the page, alt value (this is my photo) will be displayed in place of image. This hints the user that the picture that couldn't be loaded was my photo.
15. How to add javascript file reference in the web page?
We can use <script> tag to refer the .js file available on the server, we can not only refer only those file that are on our server but we cal also any .js file that is available on other server (on other domain.
<script src="/include/myjscode.js" type="text/javascript"></script>
It is always suggested to place the script tag inside <head></head>
16. How to display the web page icon in the browser?
By placing the link tag inside the <head></head and specifyrel value as "shortcut icon", you can display the page icon in the browser.
<link rel="shortcut icon" href="/images/myicon.gif" />
Here, you can either specify .gif, .jpg or .ico file, however many browser only support .ico file not .gif or .jpg file.
17. How to refer the .css file in the web page?
To refer .css file in the web page, use <link> tag. Generally it is suggested to keep this inside the <head></head> tag.
<link href="/css/mystyle.css" type="text/css" rel="stylesheet" />
Notice that the type attribute value should be "text/css" andrel attribute value should be "stylesheet".
18. How to write bulleted point in HTML?
To write bulleted point, use <li> under <ul> like following.
<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
</ul>
In this case Point 1, Point 2 and Point 3 will appear as bulleted point.
19. How to display numbered list in HTML?
To display numbered list, use <li> under <ol> tag like below
<ol>
<li>Point 1</li>
<li>Point 2</li>
</ol>
20. How to create a DropDown list box?
To create a dropdown list box in HTML, write following code
<select name="drop1" id="drop1">
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="0">All</option>
</select>
This will create a dropdown with two list item "item 1" and "item 2".
21. How to create a ListBox in HTML?
To create a list box, write following code
<select name="drop1" id="Select1" size="4" multiple="multiple">
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
This will create a listbox with 5 items. As multiple attribute value is specified as ="multiple" so it gives ability to select more than one item from the box by holding ctrl key or by dragging through items from the mouse.
22. Should we use table tag to design the layout of the webpage?
No, <table> tag is made for rendering the data in tabular format not to design the layout of the webpage, however this is massively used for the designer because its easy to use.
To design the layout we should use <div> and/or <span> along with css classes.
23. What is the code to write bulleted and numbered list in HTML.
To write bulleted list in the HTML, write following code:
<ul>
<li>fdasfadsf asdf</li>
<li>sfdafasdf</li>
<li>fdsafasfsa</li>
<li>fdsafsda</li>
</ul>
To write numbered list in the HTML, write following code:
<ol>
<li>fdasfadsf asdf</li>
<li>sfdafasdf</li>
<li>fdsafasfsa</li>
<li>fdsafsda</li>
</ol>
Notice the difference is only <ul> and <ol>. In the bulleted list, we need to use <ul> tag and in the numbered list we need to use <ol> tag.
24. What is <!DOCTYPE> defines in HTML?
Doctype defines as "document type declaration" (DTD).
All HTML pages should contain a <!DOCTYPE> declaration to define which HTML version we are using in our page. itgives important instruction to web browser about page's HTML version type. It also allows web validator to check the syntax of page.
25. How FontSize and Font Size is differ in HTML?
font size is an attribute that we used in font tag.
Ex : <font size="5"> use in font tag.
Where as font-size is an style property used for controls.
Ex : Font-Size="Small" use for style property For Controls.
26. How to forbid autocomplete for a form ?
use autocomplete="off"
27. What is the user of alt property in <img> tag?
The use of "alt" property of <img> tag is to display the alt value in case browser is unable to load the image so that the end user can understand what kind of image was actually there on the page that couldn't be loaded.
28. What is the use of title property of <img> tag?
The title property of <img> tag is used to describe about the image. The value of title property is displayed when the end user mouse over the image.
29. What should be the href property value of anchor tag in case we want to handle the click event
The href property of anchor tag should be "javascript:void(0)" when we want to handle the click event of the anchor tag. Many people keep href="#" that jump the screen to top when the link is clicked.
<a id="closeLink" href="javascript:void(0)"onclick="Clicked()" title="Whatever">Whatever link</a>
In other way we can also write like this
<a id="closeLink" href="javascript:Clicked()" title="Whatever">Whatever link</a>
30 What is SPA ?
Single Page application(SPA) is a web application or web site that fits on a single web page which provides a more fluid UX akin to a desktop application by loading all necessary code (using HTML, JavaScript, and CSS) with single page Load.
No comments: