Class 1: Introduction to HTML: Tags, structure, forms, tables.

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It provides the basic framework for web pages by defining elements like headings, paragraphs, images, links, forms, and more using predefined tags. HTML is the foundation of websites, allowing browsers to interpret and display content. It works alongside CSS for styling and JavaScript for interactivity. Every webpage you see online begins with HTML, making it an essential skill for web development.

Structure of an HTML Document

An HTML document follows a standard structure to ensure browsers can properly interpret and display content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
  </head>
  <body>
    <h1>Welcome to HTML</h1>
    <p>This is a simple HTML document structure.</p>
  </body>
</html>
Explanation of the Structure:
  1. <!DOCTYPE html>: Declares the document as HTML5.
  2. <html>: The root element that wraps the entire content.
  3. <head>: Contains metadata (e.g., title, character encoding, styles, scripts).
  4. <meta>: Provides additional info like character set and viewport settings.
  5. <title>: Sets the page title displayed in the browser tab.
  6. <body>: Holds all visible content (e.g., headings, paragraphs, images).

Most Commonly HTML Tags and Structure:

1. Document Declaration
  • Tag: <!DOCTYPE html>
  • Declares the document type as HTML5.
2. HTML Structure Tags
  • <html>: Root element of the document.
  • <head>: Contains metadata about the document.
  • <body>: Contains the visible content of the web page.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Tags Example</title>
  </head>
  <body>
    <h1>Welcome to HTML</h1>
    <p>This is a simple webpage.</p>
  </body>
</html>
3. Head Section Tags
  • <title>: Specifies the page title.
  • <meta>: Provides metadata (e.g., charset, viewport).
  • <link>: Links to external resources (e.g., stylesheets).
  • <style>: Embeds CSS styles.
  • <script>: Embeds JavaScript code.

Example:

<head>
  <title>My Webpage</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
4. Text Content Tags
  • <h1> to <h6>: Headings.
  • <p>: Paragraph.
  • <br>: Line break.
  • <strong>: Bold text.
  • <em>: Italic text.
  • <blockquote>: Quotation.

Example:

<h1>Main Heading</h1>
<p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
<blockquote>This is a quote.</blockquote>
5. Links and Multimedia Tags
  • <a>: Anchor tag for links.
  • <img>: Displays images.
  • <audio>: Embeds audio files.
  • <video>: Embeds video files.

Example:

<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="Description">
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>
6. List Tags
  • <ul>: Unordered list.
  • <ol>: Ordered list.
  • <li>: List item.

Example:

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
</ol>
7. Table Tags
  • <table>: Table element.
  • <tr>: Table row.
  • <th>: Table header.
  • <td>: Table cell.

Example:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
</table>
8. Form Tags
  • <form>: Defines a form.
  • <input>: Input fields (text, password, email, etc.).
  • <textarea>: Multiline text input.
  • <button>: Button for actions.
  • <select>: Dropdown list.

Example:

<form action="/submit" method="post">
  <input type="text" name="username" placeholder="Enter username">
  <textarea name="message" rows="4" cols="50"></textarea>
  <button type="submit">Submit</button>
</form>
9. Semantic Tags
  • <header>: Defines the header section.
  • <footer>: Footer section.
  • <article>: Independent content.
  • <section>: Section of a document.
  • <aside>: Sidebar or additional content.
  • <nav>: Navigation links.

Example:

<header>
  <h1>My Website</h1>
</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>
<section>
  <h2>About Us</h2>
  <p>We provide web development services.</p>
</section>
<footer>
  <p>© 2025 My Website</p>
</footer>
10. Other Miscellaneous Tags
  • <div>: Generic container for content.
  • <span>: Inline container for text.
  • <iframe>: Embeds an external webpage.

Example:

<div class="container">
  <span>This is inline text.</span>
</div>
<iframe src="https://example.com" width="600" height="400"></iframe>

This list covers the most commonly used HTML tags and examples for each. Let me know if you’d like explanations for specific tags! 😊

Explanation of HTML Forms:

  1. <form>:
    • The <form> tag defines the start of a form and its attributes like action and method.
    • action: Specifies the URL where the form data will be sent after the form is submitted. In this case, the action is set to "/submit-login", meaning the data will be sent to that URL when the form is submitted.
    • method: Defines the HTTP method to be used when submitting the form. In this case, POST this means the form data will be sent as part of the request body (usually for sensitive information like passwords).
  2. <input>:
    • The <input> tag is used for various types of user input fields. Here are a few examples:
      • type="text": For entering text (used for the username).
      • type="password": For entering sensitive information like a password, which will hide the text.
      • type="checkbox": This creates a checkbox that can be checked or unchecked (used for the “Remember me” option).
    • name: The name attribute gives a name to the input field, which is used when sending the data to the server. For example, "username", "password", and "remember" are names for the respective input fields.
    • id: The id attribute is used to uniquely identify an element in the document. It’s also used with the <label> tag to associate a label with a specific input field.
    • placeholder: This attribute shows placeholder text inside the input field, giving the user a hint about what should be entered. For example, “Enter your username”.
    • required: This makes the field mandatory. The form will not submit if these fields are left blank.
  3. <label>:
    • The <label> tag defines labels for <input> elements. It improves accessibility and user experience by allowing users to click on the label to focus on the corresponding input.
    • The for attribute links the label to the id of the input field. For example, the label “Username” is linked to the input field with id="username".
  4. <button>:
    • The <button> tag is used to create a button that can trigger a form submission or other actions.
    • type="submit": This specifies that the button is used to submit the form.
  5. <textarea> (Not used in this example, but here’s an explanation):
    • The <textarea> tag is used for multi-line text input, such as a message or comment. It is typically used when more space is required for the user to input information.
    • It doesn’t have a type attribute, and its size can be adjusted with rows and cols attributes.
  6. <select> and <option> (Not used in this example, but here’s an explanation):
    • The <select> tag creates a dropdown list, and the <option> tags define the items in the dropdown list.
    • Example:
      html <select name="country"> <option value="usa">USA</option> <option value="canada">Canada</option> </select>
    • <select> creates the dropdown and <option> defines the individual choices that a user can select.

HTML Form Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form Demo</title>
</head>
<body>
    <h2>Login</h2>

    <!-- Form element starts here -->
    <form action="/submit-login" method="POST">

        <!-- Username input -->
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" required>
        <br><br>

        <!-- Password input -->
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" required>
        <br><br>

        <!-- Remember me checkbox -->
        <label for="remember">Remember me:</label>
        <input type="checkbox" id="remember" name="remember">
        <br><br>

        <!-- Submit button -->
        <button type="submit">Login</button>

    </form>

    <!-- Link to forgot password -->
    <p><a href="/forgot-password">Forgot your password?</a></p>
</body>
</html>

This should give you a good understanding of how a basic login form works and the purpose of each tag and attribute involved. Let me know if you’d like further clarification!

Explanation of Table Tags:

  1. <table>:
  • The main container for the table.
  • Attributes:
    • border: Specifies the border width (deprecated, use CSS).
    • cellpadding: Adds padding within table cells (deprecated, use CSS).
    • cellspacing: Defines the spacing between cells (deprecated, use CSS).
    • width: Sets the width of the table (deprecated, use CSS).
  1. <thead>:
  • Contains the header rows of the table.
  • Usually used for defining column headings.
  1. <tbody>:
  • Groups the body content (data rows) of the table.
  • Improves semantic clarity and accessibility.
  1. <tfoot>:
  • Contains footer rows, often used for summary or totals.
  • By default, it appears after <tbody> in the code but is often styled to display at the bottom of the table.
  1. <tr>:
  • Represents a table row.
  • Contains table cells (<th> or <td>).
  1. <th>:
  • Represents a table header cell.
  • Bold and centered by default (browser styling).
  • Attributes:
    • scope: Indicates whether the header applies to a row, column, or group (e.g., row, col).
  1. <td>:
  • Represents a table data cell.
  • Attributes:
    • colspan: Merges cells horizontally across some columns.
    • rowspan: Merges cells vertically across some rows.

Attributes in Action:

<tr>
    <td colspan="2">This cell spans two columns</td>
</tr>
<tr>
    <td rowspan="2">This cell spans two rows</td>
    <td>Row 1</td>
</tr>
<tr>
    <td>Row 2</td>
</tr>

This code demonstrates how to use colspan to merge two columns and rowspan to merge two rows.

Key Concepts:

  1. Semantics: Using <thead>, <tbody>, and <tfoot> enhances table structure and accessibility for screen readers.
  2. CSS Styling: Tables can be customized for borders, padding, and colors using CSS instead of inline attributes like border, cellpadding, and cellspacing.
  3. Attributes: Use colspan and rowspan for advanced table layouts where cells span across multiple rows or columns.

HTML Table Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Demo</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }
        tfoot td {
            font-weight: bold;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>HTML Table Demo</h1>
    <table>
        <!-- Table Header -->
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Age</th>
                <th>Country</th>
            </tr>
        </thead>

        <!-- Table Body -->
        <tbody>
            <tr>
                <td>1</td>
                <td>John Doe</td>
                <td>28</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Smith</td>
                <td>32</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Sam Brown</td>
                <td>45</td>
                <td>UK</td>
            </tr>
        </tbody>

        <!-- Table Footer -->
        <tfoot>
            <tr>
                <td colspan="4">Total: 3 rows</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

You learn the foundational building blocks of the web with HTML. This class covers essential tags, page structure, creating forms for user input, and designing tables for organizing data. By the end of this session, you’ll be able to structure a basic web page with proper semantic HTML.