> HTML5 Semantic Elements_FP Hands_On Solutions - TECH UPDATE
Home / FRESCOPLAYTFACTOR / HTML5 Semantic Elements_FP Hands_On Solutions / HTML5 Semantic Elements_FP Hands_On Solutions

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>
HTML5 Semantic Elements_FP Hands_On Solutions HTML5 Semantic Elements_FP Hands_On Solutions Reviewed by TECH UPDATE on December 14, 2021 Rating: 5

You May Also Like

31 comments:

  1. Unknown15 December 2021 at 02:39

    Getting errors in all codes!!

    ReplyDelete
  2. Unknown15 December 2021 at 23:25

    Video creator and Registration Form Codes are getting Eroor can u please Update it broo

    ReplyDelete
  3. TECH UPDATE4 January 2022 at 07:12

    Hi, Updated please check now. Thanks

    ReplyDelete
  4. Unknown5 January 2022 at 02:18

    Video creating code getting error bro

    ReplyDelete
  5. Unknown5 January 2022 at 02:20

    Rest of the codes working fine

    ReplyDelete
    Replies
    1. TECH UPDATE14 January 2022 at 21:09

      Hi Updated, Please check now

      Delete
    2. Anonymous6 May 2022 at 08:00

      Can u tell me registration code
      I am getting error

      Delete
  6. Anonymous10 January 2022 at 10:25

    Video creator, code still getting error

    ReplyDelete
  7. Unknown12 January 2022 at 04:54

    4.Video:-
    The above Hands on is not working

    ReplyDelete
  8. Anonymous12 January 2022 at 04:56

    Video Hands on is not working

    ReplyDelete
  9. Anonymous14 January 2022 at 02:12

    Video Hands on not working

    ReplyDelete
  10. Unknown15 January 2022 at 07:46

    Video player is getting error for me

    ReplyDelete
  11. Unknown20 January 2022 at 12:11

    can u pls add the music player code as well

    ReplyDelete
  12. Unknown23 January 2022 at 00:05

    Please upload Final assignment ?

    ReplyDelete
  13. Unknown1 February 2022 at 04:52

    Bro how can I install package in hacker rank
    Can u help me out through this?

    ReplyDelete
  14. Anonymous10 March 2022 at 03:31

    Hi bro registration form handson not working

    ReplyDelete
  15. Anonymous3 May 2022 at 03:35

    Registration form code is getting error bro, rest of the code working fine

    ReplyDelete
  16. Technical information22 May 2022 at 07:02

    Hello

    HTML 5
    I have one error
    Attribute Error Module os has no attribute PathLike
    Please tell me

    ReplyDelete
  17. Anonymous18 July 2022 at 02:51

    getting error in Video code

    ReplyDelete
  18. Anonymous20 September 2022 at 03:24

    Getting error

    ReplyDelete
  19. zakkidua12 June 2023 at 05:55

    This 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

Subscribe to: Post Comments ( Atom )
Powered by Blogger.