Ultimate HTML Guide

1. Introduction to HTML

What is HTML? HTML stands for HyperText Markup Language. It is the standard language used to create web pages.

Why Learn HTML? HTML is the backbone of the web. Every website you visit is built using HTML.

Basic Structure of an HTML Document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

2. HTML Elements and Tags

Common HTML Tags:

<h1> to <h6>: Headings
<p>: Paragraph
<a>: Anchor (links)
<img>: Image

Attributes: Provide additional information about an element.

<a href="https://www.example.com">Visit Example</a>

3. Working with Text

Headings and Paragraphs:

<h1>Main Heading</h1>
<p>This is a paragraph.</p>

4. Links and Images

Creating Hyperlinks:

<a href="https://www.example.com">Visit Example</a>

Adding Images:

<img src="https://via.placeholder.com/150" alt="Sample Image">

5. HTML Forms

Form Structure and Detailed Explanation:

HTML forms are used to collect information from users. Forms can contain various types of input controls like text fields, password fields, checkboxes, radio buttons, dropdowns, and buttons. Each control has attributes such as name, id, required, and value to define its behavior and how data is submitted.

<!-- A complete registration form example -->
<form action="/submit-form" method="post">
    <h3>Registration Form</h3>

    <!-- Text Input: collects the user's full name -->
    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" name="fullname" placeholder="Enter your full name" required><br><br>

    <!-- Email Input: used for collecting email address -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="example@domain.com" required><br><br>

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

    <!-- Radio Buttons: allows selection of one gender -->
    <label>Gender:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br><br>

    <!-- Checkboxes: allows multiple skill selections -->
    <label>Skills:</label>
    <input type="checkbox" id="html" name="skills" value="HTML">
    <label for="html">HTML</label>
    <input type="checkbox" id="css" name="skills" value="CSS">
    <label for="css">CSS</label>
    <input type="checkbox" id="js" name="skills" value="JavaScript">
    <label for="js">JavaScript</label><br><br>

    <!-- Dropdown Menu: select a country -->
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="">--Select--</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
    </select><br><br>

    <!-- Submit Button: sends form data to the server -->
    <button type="submit">Register</button>
</form>

6. Tables

Creating Tables with Detailed Structure:

HTML tables are structured using <table>, with rows defined by <tr>, headers by <th>, and data cells by <td>. You can enhance the layout using colspan (merges columns) and rowspan (merges rows).

<!-- Example of a detailed employee table with colspan and rowspan -->
<table border="1" cellpadding="5" cellspacing="0">
    <caption><strong>Employee Directory</strong></caption>
    <tr>
        <!-- Row with merged cell for Name and Department and separate headers for contact info -->
        <th rowspan="2">Name</th>
        <th colspan="2">Contact Info</th>
        <th rowspan="2">Department</th>
    </tr>
    <tr>
        <!-- Second row for subdivided Contact Info -->
        <th>Email</th>
        <th>Phone</th>
    </tr>
    <tr>
        <td>Alice Johnson</td>
        <td>alice@example.com</td>
        <td>+123456789</td>
        <td>Marketing</td>
    </tr>
    <tr>
        <td>Bob Smith</td>
        <td colspan="2">Not Available</td>
        <td>IT</td>
    </tr>
    <tr>
        <!-- Rowspan used for Name and Department to span across two rows -->
        <td rowspan="2">Carlos Lee</td>
        <td>carlos@example.com</td>
        <td>+987654321</td>
        <td rowspan="2">Finance</td>
    </tr>
    <tr>
        <td colspan="2">Additional details not listed.</td>
    </tr>
</table>

7. Multimedia in HTML

Embedding Audio:

<audio controls>
    <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Embedding Video:

<video controls width="320" height="240">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

8. Advanced HTML Concepts

HTML5 New Features:

<article>: Independent content
<section>: Section of a document

9. Practice Exercises

Beginner Exercise

Create a simple HTML page with a heading, paragraph, and image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is my first HTML page.</p>
    <img src="https://via.placeholder.com/150" alt="Sample Image">
</body>
</html>