Top 10 Frequentyle Asked Html5 Interview Questioons With Answers for Exprience

Spread the love


1)can we set multiple background images using css:
-yes we can set multiple background images using css3

<style>
#set-img{
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
</style>

 

2)What is the major difference between HTML and HTML5?

What is the major difference between HTML and HTML5?

What is the major difference between HTML and HTML5?

-No need to define Doc Type in html5
-No need to define type of script imported script like

<script type="text/javascript" src="js/jquery.min.js"></script>(In html4)
<script src="js/jquery.min.js"></script>(In HTML)

 

-HTML Geolocation feature added to extracting current location of user
Ex

<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var myLatlng = new google.maps.LatLng(pos.lat,pos.lng);
var geocoder;
var marker;
var infowindow = new google.maps.InfoWindow({
maxWidth:350
});
</script>

 

-added animation support in html5.
-drag and drop facility available for images.

3)Which are New Element Added in html5
<article>,<aside> ,<bdi> ,<details> ,<dialog>,<figcaption>,<figure>,<footer>,<header>,<main>,<mark>,<menuitem> ,<meter> ,<nav> ,<progress> ,<rp> ,<rt> ,<ruby>,<section> ,<summary> ,<time>,<wbr>

4)How to write Conditional CSS block using css3:
– Using media Query of css3 we can write conditional css block statements.

@media screen and (max-width: 480px) {
p {
font-size: 12px !important;
}
h1,h2,h3 {
font-size:14px !important;
}
}
@media screen and (max-width: 320px) {
#contact_but {
margin-top: 2% !important;
}
h1,h2,h3 {
font-size:14px !important;
}
}

 

5)How to HTML elements at center point of screen
<div></div>

<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>

 



6)what is the Difference between html controls and html tag
Html Tag’s:
– <p>Welcome To geekBaba </p>
in above example “<p>” and “</p>” are the html tag’s.
Html Controls:
– <p>Welcome To geekBaba </p>
in above example “<p>Welcome To geekBaba </p>” is the html control.

7)What’s is HTML5 Web Workers
Html5 Web workers are javascript running in the background without affecting the performance of the page.its run independently without depends on other resources or script.

8) which purpose keyframes used :
keyframes used to setting animation affect on page using

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}

/* Standard syntax */
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}

 

9)What’s is Bootstrap:
Bootstrap is open sources frameworks for front end designs.it is pre formatted css structures of html elements.using bootstrap we can set attractive looks and feels to html elements

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Simple Bootstrap Code | Geek Baba</title>
  </head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
  <body>
  <!-- Start Footer Section -->
    <footer>
      <div class="container">
       <div class="row footer-widgets" style="margin-bottom:-2%;">
         <!-- Start Subscribe & Social Links Widget -->
          <div class="col-md-3 col-xs-12">
           <div class="footer-widget social-widget">
                  <!-- your content here --> 
            </div>
          </div>
          <div class="col-md-5 col-xs-12">
            <div class="footer-widget social-widget">
               <!-- your content here --> 
          </div>
          </div>
          <div class="col-md-4 col-xs-12">
            <div class="footer-widget contact-widget">
               <!-- your content here --> 
            </div>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>

 

10)What is resultaioin in chrome developer tool for ipad?
ans 768px * 1024px;

11)what is pseudo elements in css3?
Ans- it is generally used for defining speacial state of an element.it chage appareance of html elemnt when user visirted ,clicked,foucous out or hover mouse on this element

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</body>
<a href="geekbaba.org">Visit To GeekBaba</a>
</html>

 

You May Like Also :

Leave a Reply

Your email address will not be published. Required fields are marked *

Geekbaba.org - Hot News ,Tutorials,Tips & Tricks,Entertainment,Sports,Business World. © 2017