HTML5 Semantic Elements_FP Hands_On Solutions
The Course I'd of HTML5 is 55186.
Note:- These Hands-on Solutions of Hacker rank is Education Purpose Only. Some Learning guys were stuck while completing the Hands-on. These Solutions will be helpful to you and learn technology properly.
1. Header
<!DOCTYPE html>
<html lang="en">
<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>
Welcome to My Webpage
</header>
</body>
</html>
2. Footer
<!DOCTYPE html>
<html lang="en">
<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 @ TCS 2016</p>
</footer>
</body>
</html>
3. Navigation
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="favicon.png" type="image/png">
<title> Destiny </title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">About Me</a></li>
</ul>
</nav>
</body>
</html>
4. Video:-
<!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>
<video width = "320" height = "200" autoplay>
<source src = "video.mp4" type = "video/mp4" />
Your browser does not support the element.
</video>
<video width = "320" height = "200" preload>
<source src = "video.mp4" type = "video/mp4" />
Your browser does not support the element.
</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>
5.Audio
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="favicon.png" type="image/png">
<title> Destiny </title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<audio controls="controls">
<source src="SampleAudio.mp3" />
</audio>
<audio controls preload="none">
<source src="SampleAudio.mp3" />
</audio>
<audio controls loop>
<source src="SampleAudio.mp3" />
</audio>
</body>
</html>
6. Canvas
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="favicon.png" type="image/png">
<title> Destiny </title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
margin: 40px;
background: #666;
}
#my_canvas {
background: #FFF;
border: #000 1px solid;
}
</style>
<script>
function draw() {
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.fillStyle = "white";
ctx.stokeStyle = "red";
ctx.fillRect(20, 20, 200, 100);
ctx.stokeRect(20, 20, 200, 100);
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="600" height="400"></canvas>
</body>
</html>
7. Registration Form
<!DOCTYPE html>
<html>
<head>
<link href="C:\Users\Projectuser\Desktop\ex.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>Registration Form</h1>
<div id="container">
<form>
<table>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>Date of Birth:</label>
</td>
<td>
<input type="date" placeholder="dd/mm/yyyy">
</td>
</tr>
<tr>
<td>
<label>country:</label>
</td>
<td>
<input id="select" list="countries">
<datalist id="countries">
<option value="India">
<option value="United States">
<option value="United Kingdom">
<option value="Austraila">
<option value="France">
</datalist>
</td>
</tr>
<tr>
<td>
<label>Phone number:</label>
</td>
<td>
<input type="tel">
</td>
</tr>
<tr>
<td>
<label>Email:</label>
</td>
<td>
<input type="email">
</td>
</tr>
<tr>
<td>
<label>website:</label>
</td>
<td>
<input type="url">
</td>
</tr>
</table>
</form>
</div>
<button type="submit">Submit</button>
</body>
<script>$('#date').datepicker({ dateFormat: 'dd-mm-yy' }).val();</script>
</html>
HTML5 Semantic Elements_FP Hands_On Solutions
Reviewed by TECH UPDATE
on
December 14, 2021
Rating:
Getting errors in all codes!!
ReplyDeleteHi, Updated please check now. Thanks
DeleteGetting errors
DeleteVideo creator and Registration Form Codes are getting Eroor can u please Update it broo
ReplyDeleteHi, Updated please check now. Thanks
DeleteHi, Updated please check now. Thanks
ReplyDeleteVideo creating code getting error bro
ReplyDeleteHi Updated, Please check now.
DeleteRest of the codes working fine
ReplyDeleteHi Updated, Please check now
DeleteCan u tell me registration code
DeleteI am getting error
Video creator, code still getting error
ReplyDelete4.Video:-
ReplyDeleteThe above Hands on is not working
Hi Updated
DeleteVideo Hands on is not working
ReplyDeleteHi, Updated
DeleteNot updated getting error
DeleteVideo Hands on not working
ReplyDeleteVideo player is getting error for me
ReplyDeleteHi Updated
DeleteGetting error video code
Deletecan u pls add the music player code as well
ReplyDeletePlease upload Final assignment ?
ReplyDeleteBro how can I install package in hacker rank
ReplyDeleteCan u help me out through this?
Hi bro registration form handson not working
ReplyDeleteYes not working
DeleteRegistration form code is getting error bro, rest of the code working fine
ReplyDeleteHello
ReplyDeleteHTML 5
I have one error
Attribute Error Module os has no attribute PathLike
Please tell me
getting error in Video code
ReplyDeleteGetting error
ReplyDeleteThis bObsweep reviews guide is going to take a look at the entire line of bObsweep robot vacuums in an effort to help you decide if Bob belongs in your home. bobsweep
ReplyDelete