Scribd Logo
Upload

Welcome to Scribd!

  • 62 views

    Program No:01 Date:11-10-2022 Develop A HTML5 Document To Create A Registration Form As Shown Below

    Uploaded by

    Gagan K. M
    The document provides code to create an HTML registration form with input fields for name, contact number, email, website, date of birth, ability to learn new technology, and time of registration. The form includes labels and placeholders for each field.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Program No:01 Date:11-10-2022 Develop A HTML5 Document To Create A Registration Form As Shown Below

    Uploaded by

    Gagan K. M
    62 views13 pages
    The document provides code to create an HTML registration form with input fields for name, contact number, email, website, date of birth, ability to learn new technology, and time of registration. The form includes labels and placeholders for each field.

    Original Description:

    Online Manga Selling Web Application

    Original Title

    WT-A

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides code to create an HTML registration form with input fields for name, contact number, email, website, date of birth, ability to learn new technology, and time of registration. The form includes labels and placeholders for each field.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    62 views13 pages

    Program No:01 Date:11-10-2022 Develop A HTML5 Document To Create A Registration Form As Shown Below

    Uploaded by

    Gagan K. M
    The document provides code to create an HTML registration form with input fields for name, contact number, email, website, date of birth, ability to learn new technology, and time of registration. The form includes labels and placeholders for each field.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 13

    PROGRAM NO:01 DATE:11-10-2022

    Develop a HTML5 document to create a Registration Form as shown


    below:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    fieldset{
    width: 500px;
    }
    #op{
    width: 300px;
    }
    </style>

    DEPARTMENT OF COMPUTER APPLICATION 1


    </head>
    <body>
    <form action="">
    <fieldset>
    <legend>Regestration Form</legend>
    <table border="1" width="100%">
    <tr>
    <td><label for="">First name</label></td>
    <td><input type="text" id="op" placeholder="Please enter your name"></td>
    </tr>
    <tr>
    <td><label for="">Last name</label></td>
    <td><input type="text" name="" id="op" placeholder="Please enter your last
    name"></td>
    </tr>
    <tr>
    <td><label for="">Contact number</label></td>
    <td><input type="text" name="" id="op" placeholder="Please enter your contact
    number"></td>
    </tr>
    <tr>
    <td><label for="">Email</label></td>
    <td><input type="text" name="" id="op" placeholder="Please enter your
    email"></td>
    </tr>
    <tr>
    <td><label for="">Website</label></td>
    <td><input type="text" name="" id="op" placeholder="Please enter your
    website url"></td>
    </tr>

    DEPARTMENT OF COMPUTER APPLICATION 2


    <tr>
    <td><label for="">Date of birth</label></td>
    <td><input value="2001-12-31" type="date" name="" id=""
    placeholder="Please enter your last name"></td>
    </tr>
    <tr>
    <td><label for="">Ability to learn new technology</label></td>
    <td><input min="1" max="5" step="1" type="range" name="" id=""></td>
    </tr>
    <tr>
    <td><label for="">Time of regestration</label></td>
    <td><input type="time" value="00:00" name="" id="" placeholder="Please
    enter your last name"></td>
    </tr>
    <tr>
    <td colspan="2" align="left"><button>Submit</button></td>
    </tr>
    </table>
    </fieldset>
    </form>
    </body>
    </html>

    DEPARTMENT OF COMPUTER APPLICATION 3


    OUTPUT

    DEPARTMENT OF COMPUTER APPLICATION 4


    PROGRAM NO:02 DATE:17-10-2022

    Develop a HTML5 document to create a ‘No Parking’ sign as shown below.

    (use canvas element)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #mycanvas{
    border: 1px solid red;
    }
    </style>
    <script>
    function load() {

    DEPARTMENT OF COMPUTER APPLICATION 5


    var c = document.getElementById("mycanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(250,250,90,0, 2*Math.PI);
    ctx.strokeStyle = "red";
    ctx.font="130px Arial";
    ctx.fillText("P",210,300);
    ctx.moveTo(190,183);
    ctx.lineTo(318,310);
    ctx.lineWidth=5;
    ctx.stroke();
    ctx.font="80px Arial";
    ctx.fillText("No",205,140);
    ctx.font="60px Ariel";
    ctx.fillText("Parking",160,400);
    }
    </script>
    </head>
    <body onload="load();">
    <canvas width="500px" height="500px" id="mycanvas"></canvas>
    </body>
    </html>

    DEPARTMENT OF COMPUTER APPLICATION 6


    OUTPUT

    DEPARTMENT OF COMPUTER APPLICATION 7


    PROGRAM NO:03 DATE:09-11-2022

    Create an HTML5 document which will play an audio and video. Note:
    Both the audio and video should be auto played and should have full
    controls and both should play in loop.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    video{
    width: 400px;
    height: 400px;
    }
    </style>
    </head>

    DEPARTMENT OF COMPUTER APPLICATION 8


    <body>
    <h1>Audio file with attribute</h1>
    <audio autoplay controls loop src="/audiovideo/Wannabe_(Sped_Up)(256k).mp3">
    <source src="/audiovideo/Wannabe_(Sped_Up)(256k).mp3" type="audio/ogg">
    <source src="/audiovideo/Wannabe_(Sped_Up)(256k).mp3" type="audio/ogg">
    Your browser does not support audio tag
    </audio>
    <br>
    <h1>Video file with attributes</h1>
    <video autoplay controls loop src="/audiovideo/VID-20220802-WA0013.mp4">
    <source src="/audiovideo/VID-20220802-WA0013.mp4" type="video/ogg">
    <source src="/audiovideo/VID-20220802-WA0013.mp4" type="video/ogg">
    Your browser does not support video tag
    </video>
    </body>
    </html>

    DEPARTMENT OF COMPUTER APPLICATION 9


    OUTPUT

    DEPARTMENT OF COMPUTER APPLICATION 10


    PROGRAM NO:04 DATE:23-11-2022

    Create an HTML5 documents to draw a bezier curve and a quadratic


    curve using canvas element. Note: Must use color input for the stroke
    style, that is, if user changes the color in web page, the curve with selected
    color should be drawn. For line thickness range input must be used i.e.,
    when range value changes curve line thickness must change.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <form action="" method="get" id="frm1">
    Select Color:
    <input type="color" id="col" onchange="draw()">

    DEPARTMENT OF COMPUTER APPLICATION 11


    <br>
    Select Thickness:
    <input type="range" value="2" onclick="draw()" id="ran">
    <br>
    </form>
    <br>
    <canvas id="myCanvas" width="400" height="400" style="border:1px solid red ;">
    Your browser does not support canvas tag</canvas>
    <script>
    function draw(){
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.strokeStyle=document.getElementById("col").value;
    ctx.lineWidth=document.getElementById("ran").value;
    ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.bezierCurveTo(20,100,200,100,200,20);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.quadraticCurveTo(200,300,300,200);
    ctx.stroke();
    }
    </script>
    </body>
    </html>

    DEPARTMENT OF COMPUTER APPLICATION 12


    OUTPUT

    DEPARTMENT OF COMPUTER APPLICATION 13

    You might also like