Scribd
Upload
306 views3 pages

HTML5 HandsOn

The document provides code samples for different HTML5 elements: 1) Header, navigation, and footer sections are defined with relevant tags. 2) Audio and video elements are included with controls, looping, and autoplay options. 3) A canvas element is used to draw shapes with JavaScript. 4) A registration form is created using input fields for name, date, email, phone and select options for country.

Uploaded by

Ankit Mathur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
306 views3 pages

HTML5 HandsOn

The document provides code samples for different HTML5 elements: 1) Header, navigation, and footer sections are defined with relevant tags. 2) Audio and video elements are included with controls, looping, and autoplay options. 3) A canvas element is used to draw shapes with JavaScript. 4) A registration form is created using input fields for name, date, email, phone and select options for country.

Uploaded by

Ankit Mathur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

----------------HTML 5 Header----------------------------

<!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
<header>WELCOME TO MY PAGE</header>
</body>
</html>

---------------------------------------------------------

----------------HTML 5 Navigation ----------------------------

<!DOCTYPE html>
<html>
<head>

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


</head>
<body>
<nav>
<a href="/html/">Home</a>
<a href="/css/">Blogs</a>
<a href="/js/">Videos</a>
<a href="/python/">About Me</a>
</nav>
</body>
</html>

---------------------------------------------------------

----------------HTML 5 Footer ----------------------------

<!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><a>Copyright @ TCS 2016 </a>></p>
</footer>
</body>
</html>

---------------------------------------------------------

----------------HTML 5 Audio ----------------------------


<!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">
</audio>
<audio controls preload="none">
<source src="SampleAudio.mp3">
</audio>
<audio controls loop>
<source src="SampleAudio.mp3">
</audio>
</body>
</html>

---------------------------------------------------------

----------------HTML 5 Video Player ----------------------------

<!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 width="320" height="200" controls autoplay>
<source src="video.mp4">
</video>
<video width="320" height="200" controls>
<source src="video.mp4" preload="none">
</video>
<video width="320" height="200" controls
poster="https://cdn12.picryl.com/photo/2016/12/31/lego-stones-plastic-education-
8b9a7d-1024.jpg">
<source src="video.mp4">
</video>
</body>

</html>

---------------------------------------------------------

----------------HTML 5 Canvas ----------------------------

<!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">
<script>
function draw() {
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 200, 100);
ctx.strokeRect(20, 20, 200, 100);
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="600" height="400"></canvas>
</body>
</html>

---------------------------------------------------------

----------------HTML 5 Registration Form ----------------------------

<!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
<form>
<header>
<h1>Registration Form</h1>
</header>

<label>Name:</label> <input type="text" name="firstname"/> <br>


<label>Date of Birth:</label> <input type="date" name="dob"/> <br>
<label for="country">country:</label>
<input list="country" name="country" id="country">

<datalist id="country">
<option value="India">
<option value="United States">
<option value="United Kingdom">
<option value="Australia">
<option value="France">
</datalist><br>
<label>Phone number:</label>
<input type="tel" name="phone"/> <br>
<label>Email:</label> <input type="email" id="email" name="email"><br>
<label>website:</label><input type="url" id="website" name="website"><br>
</form>
<input type="submit" value="Submit">
</body>
</html>

---------------------------------------------------------

You might also like