HTML Tutorial: 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>

HTML Tutorial

Tuesday, December 17, 2024

HTML Basic Examples

1. Basic HTML Structure

2. Headings and Paragraphs

3. Links and Images

4. Lists (Ordered and Unordered)

5. Tables

6. Forms

7. Comments in HTML

No comments:

Post a Comment

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

Report Abuse

Labels