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>
Next Post Previous Post
No Comment
Add Comment
comment url