Top10 HTML5 hands-on Questions and Answers

  • by
html5

Please follow the below steps before Run Tests to run your code successfully otherwise you will face some server issues even Hands-On code is correct.
Step 1: Run->InstallStep 2: Run->RunStep 3: Run Tests

1.Html5-header(15 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<header>

<a><h1>WELCOME TO MY PAGE<h1></a>

</header>

</body>

</html>

2.HTML5 Navigation(20 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<nav>

<a>HOME</a> |

<a>Blog</a> |

<a>Videos</a> |

<a>About Me</a>

</nav>

</body>

</html>

3.Html5-footer(15 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<footer>

</footer>

</body>

</html>

4.H Registration(25 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

//write your code here

<h1>Registration Form</h1>

<form>

Name: <input type=”text”>

Date of Birth: <input type=”date”>

country: <input list=”country”>

<datalist id=”country”>

<option value=”India”>

<option value=”United States”>

<option value=”United Kingdom”>

<option value=”Australia”>

<option value=”France”>

</datalist>

Phone number: <input type=”tel”>

Email: <input type=”email”>

website: <input type=”url”>

</form>

</body>

</html>

5.Html5-Audio(20 Min)  | html5-music player


File Name: 
index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

// write your code

<audio controls>

<source src=”SampleAudio.mp3″ type=”audio/mpeg”>

</audio>

<audio controls preload=”none”>

<source src=”SampleAudio.mp3″ type=”audio/mpeg”>

</audio>

<audio controls loop>

<source src=”SampleAudio.mp3″ type=”audio/mpeg”>

</audio>

</body>

</html>

6. Create Video Player using HTML5(25 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

//write your code here

<video controls autoplay>

<source src=”video.mp4″ type=”video/mp4″>

</video>

<video controls preload=”none”>

<source src=”video.mp4″ type=”video/mp4″>

</video>

<video controls poster=”https://cdn12.picryl.com/photo/2016/12/31/lego-stones-plastic-education-8b9a7d-1024.jpg”>

<source src=”video.mp4″ type=”video/mp4″>

</video>

</body>

</html>

7. Draw Canvas in HTML5(25 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<link rel=”icon” href=”favicon.png” type=”image/png”>

<title>Destiny</title>

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<canvas id=”GFG”

width=”600″

height=”400″>

</canvas>

<script>

var x =

document.getElementById(“GFG”);

var ctx = x.getContext(“2d”);

ctx.strokeRect(20, 20, 200, 100);

ctx.stroke();

</script>

</body>

</html>

Leave a Reply

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