HTML5 Semantic Elements_FP Hands_On Solutions
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>
