Scribd Logo
Upload

Welcome to Scribd!

  • HTML Program 02

    Uploaded by

    Parth Abnave
    6 views6 pages
    The document demonstrates how to add a button on top of an image within a container using CSS positioning properties. It includes HTML markup with an image, button, and container div. Styles are applied to position the button absolutely in the center of the image and set other button properties.

    Original Description:

    Original Title

    HTML PROGRAM 02

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document demonstrates how to add a button on top of an image within a container using CSS positioning properties. It includes HTML markup with an image, button, and container div. Styles are applied to position the button absolutely in the center of the image and set other button properties.

    Copyright:

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

    HTML Program 02

    Uploaded by

    Parth Abnave
    The document demonstrates how to add a button on top of an image within a container using CSS positioning properties. It includes HTML markup with an image, button, and container div. Styles are applied to position the button absolutely in the center of the image and set other button properties.

    Copyright:

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

    PROGRAM

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img {
    width: 100%;
    }
    </style>
    </head>
    <body>
    <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
    <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
    </body>
    </html>

    OUTPUT
    PROGRAM
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-
    scale=1"> <style>
    .container
    position: relative;
    width: 100%;
    max-width: 400px;
    }
    .container img {
    width: 100%;
    height: auto;
    }
    .container .btn { position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate (-50%,-50%);
    color: white;
    background-color: #555; font-size: 16px; padding: 12px 24px;
    border: none;
    cursor: pointer; border-radius: 5px; text-align: center;
    }
    .container .btn:hover {
    background-color: black;
    }
    </style>
    </head> <body>
    <h2>Button on Image</h2> <p>Add a button to an image:</p>
    <body>
    <h2>Button on Image</h2> <p>Add a button to an image: </p>
    <div class="container">
    <img src="img_snow.jpg" alt="Snow" style="width: 100%"> <button
    class="btn">Button</button>
    </div>
    </body> </html>

    OUTPUT
    PROGRAM
    <!DOCTYPE html>
    <html>
    <frameset cols=",,,"> <frame src="../file_path/frame_1.html"> <frame
    src="frame_2.html"> <frame src="frame_3.html"> <frame
    src="frame_4.html"> </frameset>
    </html>

    OUTPUT
    PROGRAM
    <!DOCTYPE html>
    <html>
    <style>
    table, th, td {
    border:1px solid black;
    }
    </style>
    <body>
    <h2>Tables in HTML</h2>
    <table style="width: 100%">
    <tr>
    <th>Name</th>
    <th>RollNo</th>
    </tr>
    <tr>
    <td>Jason</td>
    <td>28</td>
    </tr>
    <tr>
    <td>Yadav</td>
    <td>22</td>
    </tr>
    <tr>
    <td>Abdul</td>
    <td>25</td></tr>
    </tr>
    <tr>
    <td>Abdul</td>
    <td>25</td></tr>
    </tr>
    </table>
    </body>
    </html>

    OUTPUT

    You might also like