Tuesday, December 17, 2024

HTML Basic Examples

 

1. Basic HTML Structure

This is the foundation of any HTML document. It includes the essential elements such as the <!DOCTYPE>, <html>, <head>, and <body>.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a basic HTML page.</p>
</body>
</html>

2. Headings and Paragraphs

HTML provides six levels of headings (from <h1> to <h6>), and the <p> tag is used for paragraphs.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Headings and Paragraphs</title>
</head>
<body>
    <h1>Main Heading (H1)</h1>
    <h2>Secondary Heading (H2)</h2>
    <h3>Third Heading (H3)</h3>
    <p>This is a paragraph of text. HTML uses the <code>&lt;p&gt;</code> tag to define paragraphs.</p>
    <p>Another paragraph here.</p>
</body>
</html>

3. Links and Images

You can add hyperlinks using the <a> tag, and images using the <img> tag.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links and Images</title>
</head>
<body>
    <h1>HTML Links and Images</h1>

    <!-- Link -->
    <p>Visit <a href="https://www.example.com" target="_blank">Example Website</a></p>

    <!-- Image -->
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
</body>
</html>

4. Lists (Ordered and Unordered)

HTML supports both ordered lists (numbered) and unordered lists (bulleted).

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lists</title>
</head>
<body>
    <h1>HTML Lists</h1>

    <!-- Unordered List -->
    <h2>Unordered List</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <!-- Ordered List -->
    <h2>Ordered List</h2>
    <ol>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
    </ol>
</body>
</html>

5. Tables

HTML tables allow you to display data in rows and columns using the <table>, <tr>, <th>, and <td> tags.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table</title>
</head>
<body>
    <h1>HTML Table Example</h1>
    <table border="1">
        <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>
    </table>
</body>
</html>

6. Forms

HTML forms are used to collect user input. They typically use the <form>, <input>, <textarea>, and <button> elements.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form</title>
</head>
<body>
    <h1>HTML Form Example</h1>
    <form action="/submit_form" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

        <button type="submit">Submit</button>
    </form>
</body>
</html>

7. Comments in HTML

You can add comments in HTML code that are not visible in the browser.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Comments</title>
</head>
<body>
    <h1>HTML Comments Example</h1>
    <!-- This is a comment, it won't be displayed in the browser -->
    <p>This paragraph will be shown in the browser.</p>
    <!-- Comments can also be used to temporarily disable code -->
    <!-- <p>This paragraph is commented out.</p> -->
</body>
</html>
-
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

How can you refer to a CSS file in a web page?

 To refer to a CSS file in a web page, you use the <link> element inside the <head> section of the HTML document. Here's t...