Scribd Logo
Upload

Welcome to Scribd!

  • IT Practicals

    Uploaded by

    Atharva
    6 views23 pages
    The document contains examples of different types of HTML elements for embedding audio, video, images and forms. It includes examples of single and multiple audio/video elements with controls, an image map with different shaped clickable areas linked to other pages, basic forms with input fields and buttons, styled pages with lists and sections, and use of CSS for colors, fonts and layout.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains examples of different types of HTML elements for embedding audio, video, images and forms. It includes examples of single and multiple audio/video elements with controls, an image map with different shaped clickable areas linked to other pages, basic forms with input fields and buttons, styled pages with lists and sections, and use of CSS for colors, fonts and layout.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views23 pages

    IT Practicals

    Uploaded by

    Atharva
    The document contains examples of different types of HTML elements for embedding audio, video, images and forms. It includes examples of single and multiple audio/video elements with controls, an image map with different shaped clickable areas linked to other pages, basic forms with input fields and buttons, styled pages with lists and sections, and use of CSS for colors, fonts and layout.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 23

    Sop1- Single audio with controls

    <!Doctype html>
    <html>
    <body>
    <p>Audio samples</p>
    <audio controls>
    <source src="kesariya.mp3.mp3"
    type="audio/mp3">
    </audio>
    </body>
    </html>
    SOP2-Multiple audio with controls
    <!DOCTYPE HTML>
    <html>
    <body>
    <p>Audio samples</p>
    <audio controls autoplay>
    <source src="kesariya.mp3.mp3"
    type="audio/mp3">
    <source src="kesariya.ogg.ogg" type="audio/ogg">
    <source src="kesariya.opus.opus
    type="audio/opus">
    </audio>
    </body>
    </html>
    SOP3-Single video with controls
    <!DOCTYPE HTML>
    <html>
    <body>
    <video width="320" height="240" controls>
    <source src="Jogi.mp4.mp4" type="video/mp4">
    Your browser does not support the video tag
    </video>
    </body>
    </html>
    SOP4-Multiple video with controls
    <!DOCTYPE HTML>
    <html>
    <body>
    <video width="320" height="240" controls>
    <source src="Jogi.mp4.mp4" type="video/mp4">
    <source src=”Jogi.ogg” type=”video/ogg”>
    Your browser does not support the video tag
    </video>
    </body>
    </html>
    SOP4- Image map
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Image map</title>
    </head>
    <body>
    <h1>An example of Image map</h1>
    <img src="fatih-kgqu_qs3B78-unsplash.jpg"
    usemap="#test" alt="bricks" height="1550"
    width="1500">
    <map name="test">
    <area shape="rect" coords="10,15,100,50"
    alt="rect" href="first page.html">
    <area shape="circle" coords="50,120,50"
    alt="circle" href="second page.html">
    <area shape="poly"
    coords="200,50,150,100,250,100" alt="poly"
    href="third page.html">
    </map>
    </body>
    </html>
    First page
    <!doctype html>
    <html>
    <head>
    <title>first page</title>
    </head>
    <body>This is first page</body>
    </html>
    Second page
    <!doctype html>
    <html>
    <head>
    <title>second page</title>
    </head>
    <body>This is second page</body>
    </html>
    SOP6- FORM
    Home page-<!DOCTYPE HTML>
    <html>
    <head>
    <title>Travelling form</title>
    <link rel="stylesheet" type="text/css"
    href="style.css">
    </head>
    <body><form>
    Name of the traveller:<input type="text"><br><br>
    Date of travel:<input type="date"><br><br>
    Telephone number:<input type+"tel"><br><br>
    <input type="image" src="submit-button-png-.jpg">
    <a href="second page.html">Second page</a><br>
    </form>
    </body>
    </html>
    Second page-
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Additional Information</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <h2>Information of tour</h2>
    <ul>
    <li>Name of transporter-Air India</li>
    <li>Time-8:30 morning</li>
    <li>Seat no-B88</li>
    <li>Destination-Hong Kong</li>
    </ul>
    <a href="Home page.html">Home page</a><br>
    </body>
    </html>
    Style.css
    h2{color:maroon}
    body{background-color:yellow}
    SOP7-TOURIST PLACES
    <html>
    <head>
    <title> Tourist Place </title>
    <style>
    section{background-color:orange;width:50%;height:50%;
    float:left;color:black;font-size:30px;outline-style:solid;}
    aside{background-color:pink;width:50%;height:50%;
    float:right;color:black;font-size:30px;outline-style:solid;}
    </style>
    </head>
    <body>
    <header style="background-color:lightgreen;color:black;text-
    align:center; height:30%;width:100%;font-size:50px;outline-
    style:solid">Tourist places
    </header>
    <header>
    <section>
    <b> City </b>
    <ol>
    <li> Pune </li>
    <li> Banglore </li>
    <li> Hyderabad </li>
    <li> Delhi </li>
    </ol>
    </section>
    <aside>
    <p> Tourist places in Pune </p>
    <ul>
    <li> Shaniwarwada </li>
    <li> Sinhgad </li>
    <li> Kelkar Museum </li>
    </ul>
    </aside>
    </header>
    </body>
    </html>

    You might also like