HTML5 Semantics Elements Hands-On Solutions

HTML5 Semantics Elements Fresco Play Hands-On Solutions

Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.

Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).

Course Path: Modern Web Development/WEB BASICS/HTML5 Semantic Elements

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->Install

Step 2: Run->Run

Step 3: Run Tests

1.Html5-header(15 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<title>Destiny</title>

</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>

</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>

<title>Destiny</title>

</head>

<body>

<footer>

<p>Copyright @ NOTES BEREAU</p>

</footer>

</body>

</html>

4.HTML 5 Registration(25 Min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<title>Destiny</title>

</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>

<title>Destiny</title>

</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>

<title>Destiny</title>

</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>

<title>Destiny</title>

</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>

If you have any queries, please feel free to ask on the comment section.

If you want MCQs and Hands-On solutions for any courses, Please feel free to ask on the comment section too.

HTML5 Semantics Elements Hands-On Solutions | TCS Fresco Play

Post a Comment

Node.Js Essentials Hands-On Solutions | TCS Fresco Play

Most Recent

Labels

Search This Blog

Most Viewed

Node.Js Essentials Hands-On Solutions | TCS Fresco Play

Azure Virtual Machines MCQs Solution | TCS Fresco Play

Python 3 Functions and OOPs MCQs Solution | TCS Fresco Play

Microsoft Teams MCQs Solution | TCS Fresco Play

Growth and Transformation Primer E0 MCQs Solution | TCS Fresco Play

Made with Love by

#buttons=(Accept !) #days=(20)

Contact form

HTML5 Semantics Elements Hands-On Solutions | TCS Fresco Play

You may like these posts

Post a Comment

#buttons=(Accept !) #days=(20)

Contact form