HTML Basics to Advanced - Video Tutorial

Introduction

Instructor: श्रध्दा
Purpose: Learn HTML from basic to advanced levels.
For Beginners: Students with no prior coding/development knowledge.
Course Structure: Divided into four levels with two major project ideas.
Resources: All code and notes available in the description box.
Requirements: Laptop and other resources as needed.

Course Levels Outline

Level 1: Basic HTML concepts and tags.
Level 2: Detailed HTML tags and attributes.
Level 3: Page layout and semantic HTML elements.
Level 4: Advanced elements like forms, lists, and tables.

Tools and Text Editors

Online Text Editors: Accessible and free.
Text Editors: Visual Studio Code (VS Code).
Installation Steps: Download and install VS Code from the official site.
Extensions: Live Server (for real-time updates).
Importance: Provides a robust environment for writing and testing code.

Basic HTML Document Structure

DOCTYPE Declaration: <!DOCTYPE html> specifies HTML5 version.
HTML Tag: Contains all webpage content.
Head Tag: Metadata, title, styles, and scripts.
Body Tag: Actual content visible on webpage.

Example Boilerplate Code: HTML

<!DOCTYPE html>
<html>
    <head>
        <title>My First Page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>

Key HTML Elements

Headings and Paragraphs

Headings (h1 to h6): Defines different levels of headings.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs: Defines a paragraph.
```
<p>This is a paragraph.</p>
```

Links and Images

Anchor Tag: Creates hyperlinks.

<a href="https://www.google.com">Google</a>

Image Tag: Embeds images.

<img src="image.jpg" alt="A Description of Image">

Lists

Ordered List (ol): Numbered items.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Unordered List (ul): Bullet points.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Tables

Table Structure: Using <table>, <tr>, <th>, and <td>.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>24</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
    </tr>
</table>

Forms

Form Tag: Used to collect user inputs.

<form action="submit.php" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <input type="submit" value="Submit">
</form>

Semantic HTML Elements

Headers and Footers

Header: Contains introductory content or navigation links.

<header>
    <h1>My Website</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
    </nav>
</header>

Footer: Contains footer content.

<footer>
    <p>Contact: email@example.com</p>
</footer>

Sections and Articles

Section: Thematic grouping of content.

<section>
    <h2>Section Title</h2>
    <p>Content within a section.</p>
</section>

Article: Independent, self-contained content.

<article>
    <h2>Article Title</h2>
    <p>Article content...</p>
</article>

Projects and Assignments

Project 1: Portfolio

Create portfolio pages for education, experience, and projects.
Include internal links for navigation.

Project 2: Resource Website for College Students

Implement sign-up forms.
Include various resources such as coding videos and important links.
Create tables to organize topics.
Make the site interactive using all learned techniques.

Conclusion

HTML Mastery: Continuously practice and refer to notes.
Next Steps: Learn CSS and JavaScript to enhance your skills.

HTML Basics to Advanced Video Course