HTML5 Semantics Elements Fresco Play Hands-On Solutions
Disclaimer: The main motive to provide this solution is to help and support those who are unable to do these courses due to facing some issue and having a little bit lack of knowledge. All of the material and information contained on this website is for knowledge and education purposes only.Try to understand these solutions and solve your Hands-On problems. (Not encourage copy and paste these solutions)
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>
<p>Copyright @ test</p>
</footer>
</body>
</html>
4.HTML 5 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.HTML5-Video Player(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.HTML5 Canvas(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>
0 Comments