http://www.globalguideline.com/forum/topic-1211-html5-interview-questions-and-answers-page-1.html
http://www.codeproject.com/Articles/586359/Topplus10plusHTMLplus5plusInterviewplusQuestions
HTML 5 Points
Is HTML Case Sensitive – No, HTML is Case Insensitive is most cases.\
How do you comment in Html: <!– [enter comment] –>
-<!docType> declaration change
-Meta declaration change
New Tags – Audio, Video, Canvas(scripting)
- What are the different types of storage in HTML 5?
HTML 5 has the capability to store data locally. Previously, it was done with the help of cookies. The exciting thing about this storage is that it’s fast as well as secure.
There are two different objects which can be used to store data:
- localStorage object stores data for a longer period of time even if the browser is closed.
- sessionStorage object stores data for a specific session.
There are a number of new form elements that have been introduced in HTML 5 as follows:
- datalist
- datetime
- output
- keygen
- date
- month
- week
- time
- number
- range
- url
- What are the new APIs provided by HTML 5 standard?
HTML 5 standard comes with a number of new APIs. Few of them are as follows:
- Media API
- Text Track API
- Application Cache API
- User Interaction
- Data Transfer API
- Command API
- Constraint Validation API
- History API
- And many more….
10. What is the difference between HTML 5 Application Cache and regular HTML Browser Cache?
One of the key features of HTML 5 is “Application Cache” that enables us to make an offline version of a web application. It allows to fetch few or all of website contents such as HTML files, CSS, images, JavaScript, etc. locally. This feature speeds up the site performance. This is achieved with the help of a manifest file defined as follows:
<!doctype html><html manifest=”example.appcache”>…..</html>
As compared with traditional browser caching, it’s not compulsory for the user to visit website contents to be cached.
Q 1- What is the difference between HTML and HTML5?
Ans: 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
CSS 3 –
How to link a external CSS file: <link rel=”stylesheet” type=”text/css”
href=”styles.css”>
Css comments: // is single line, /* */ is multi line
http://ldopensource.wordpress.com/2013/04/21/ui-interview-questiions-answers-html5-and-css3/
Case Sensitive – Supposed to be Case insensitive, but in some browsers and for unique identifiers, things are quirky
Questions: 1 what is the difference between CSS and CSS3?
Answers: 1 CSS3 is upgraded version of CSS with new future like Selectors, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout, User Interface etc.
Questions: 2 List out CSS3 modules
Answers: 2 below are the listed major modules
• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface
Questions: 3 what new futures added in CSS3 for Borders and how Browser Support it?
Answer: 3 following border futures added
• border-radius
• box-shadow
• border-image
And all modern Browser Support it like below
Internet Explorer 9 supports border-radius and box-shadow
Firefox requires the prefix -moz- for border-image.
Chrome and Safari requires the prefix -webkit- for border-image.
Opera requires the prefix -o- for border-image.
Questions : 4 How you will create Rounded Corners using css3
Answer : 4 We have to create a class like below
<style>
.roundc{
border:2px solid #ff0000;
border-radius:25px;
background:#dddddd;
width:300px;
-moz-border-radius:25px; /* Firefox */
-webkit-border-radius:25px; /* Chrome and Safari */
-o-border-radius:25px; /* Opera */
}
</style>
and we have to add this class where we want the round corner like in below div
<div class=”roundc” > this is the round corner by css3 </div>
This is the div and round corner by css3
Questions : 5 how we create border using images by CSS3
Answers : 5 By using border-image: property of css3 we can create a border using images like below
.roundpcds
{
border-image:url(borderpcds.png) 30 30 round;
-moz-border-image:url(borderpcds.png) 30 30 round; /* Firefox */
-webkit-border-image:url(borderpcds.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(borderpcds.png) 30 30 round; /* Opera */
}
.stretchPcds
{
-moz-border-image:url(borderpcds.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(borderpcds.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(borderpcds.png) 30 30 stretch; /* Opera */
border-image:url(borderpcds.png) 30 30 stretch;
}
Questions : 6 How you will create Box Shadow and text Shadow using CSS3 Answers : 6 Like below we can create Box Shadow using CSS3 .boxshadowpcds
{
box-shadow: 10px 10px 5px #ccccc;
}
.textshadowpcds
{
text-shadow: 5px 5px 5px #FF0000;
} and then need to use these class boxshadownpcds ,textshadowpcds
Questions : 7 What is the CSS3 The background size Property
Answers : 7 The background-size property specifies the size of the background image.
As we know Before CSS3, the background image size was find out by the real size of the image. In CSS3 it is possible to specify the size of the background image, which allows you to re-use background images in different ways.
.pcdsbp1
{
background: url(background.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px; /* or we can do background-size:100% 100%;*/
background-repeat :no-repeat;
}
Questions : 8 What is the word wrap / word wrapping in CSS3 ?
Answers : 8 to Allow long words to be able to break and wrap onto the next line in css3 we used word-wrap property like below class
.wordwrappcds{word-wrap:break-word;}
Questions: 9 what is the CSS3 animation?
Answers: 9
when the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
• Specify the name of the animation
• Specify the duration of the animation
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
MEDIA Query
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
