Scribd Logo
Upload

Welcome to Scribd!

  • priya internship

    Uploaded by

    priyaqueencs43
    3 views4 pages

    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

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    3 views4 pages

    priya internship

    Uploaded by

    priyaqueencs43

    Copyright:

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

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample HTML Page</title>
    <style>
    /* CSS styles can be added here */
    body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
    }
    h1 {
    color: #333;
    }
    p {
    color: #666;
    }
    </style>
    </head>
    <body>
    <header>
    <h1>Welcome to My Sample Page</h1>
    <nav>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>
    </nav>
    </header>

    <section id="home">
    <h2>Home Section</h2>
    <p>This is the home section of the webpage.</p>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">
    </section>

    <section id="about">
    <h2>About Section</h2>
    <p>This section provides information about the webpage.</p>
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>
    </section>

    <section id="contact">
    <h2>Contact Section</h2>
    <p>Contact us using the form below:</p>
    <form action="#" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="4"
    required></textarea>
    <br>
    <button type="submit">Send</button>
    </form>
    </section>

    <footer>
    <p>&copy; 2024 Sample Page. All rights reserved.</p>
    </footer>
    </body>
    </html>

    This HTML document includes:

     Document structure (<!DOCTYPE html>, <html>, <head>, <body>)


     Meta tags (<meta>)
     Title (<title>)
     External stylesheet (<style>)
     Sections (<header>, <nav>, <section>, <footer>)
     Headings (<h1>, <h2>)
     Paragraphs (<p>)
     Lists (<ul>, <li>)
     Links (<a>)
     Images (<img>)
     Form (<form>, <input>, <textarea>, <label>, <button>)
     Comments (not explicitly shown in the code but can be added with <!-- comment -->)

    This example covers many common HTML tags used to create a basic webpage with sections,
    navigation, content, and a form for user interaction.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image and Table Example</title>
    <style>
    /* CSS styles for the table */
    table {
    width: 50%;
    border-collapse: collapse;
    margin: 20px 0;
    }
    th, td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    }
    th {
    background-color: #f2f2f2;
    }
    </style>
    </head>
    <body>
    <h1>Image and Table Example</h1>

    <h2>Sample Image:</h2>
    <img src="https://via.placeholder.com/300" alt="Placeholder Image"
    width="300" height="200">

    <h2>Sample Table:</h2>
    <table>
    <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    </tr>
    <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
    </tr>
    <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
    </tr>
    <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
    <td>Row 3, Cell 3</td>
    </tr>
    </table>

    <h2>Sample Text with Font Tag:</h2>


    <font color="blue">This text is blue.</font><br>
    <font color="red">This text is red.</font><br>
    <font color="green">This text is green.</font>
    </body>
    </html>

    Explanation of the HTML:

    1. Image Tag (<img>):


    o <img> tag is used to display an image.
    o src attribute specifies the URL of the image.
    o alt attribute provides alternative text for the image, useful for accessibility.
    o width and height attributes set the dimensions of the image.
    2. Table Tag (<table>):
    o <table> tag creates a table.
    o <tr> tag defines a row within the table.
    o <th> tag defines a header cell within a row.
    o tag defines a standard cell within a row.
    <td>
    oCSS is used to style the table (border-collapse, padding, text-align, etc.).
    3. Font Tag (<font>):
    o <font> tag is used to specify the font and color of text.
    o color attribute specifies the color of the text.

    In this example:

     An image placeholder (https://via.placeholder.com/300) is displayed using the


    <img> tag.
     A simple table with headers (<th>) and data cells (`<td

    You might also like