1. What is HTML?

HTML = HyperText Markup Language

👉 It is used to structure web pages

Think of HTML as:

🧱 The skeleton of a website
CSS = design 🎨
JavaScript = behavior ⚙️

🏗️ 2. Basic Structure of an HTML Page


<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>

    <h1>Welcome to My Website</h1>
    <p>This is my first webpage</p>

</body>
</html>

🏷️ 3. HTML Tags Explained

👉 HTML uses tags:


<tag>Content</tag>

Examples:


<h1>Heading</h1>
<p>Paragraph</p>

🔠 4. Headings & Paragraphs


<h1>Main Title</h1>
<h2>Sub Title</h2>
<p>This is a paragraph.</p>

🔗 5. Links


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

👉 href = where the link goes

🖼️ 6. Images


<img src="image.jpg" alt="My Image" width="200">

👉 src = image path
👉 alt = description

📋 7. Lists

Ordered List


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

Unordered List


<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

📊 8. Tables (VERY IMPORTANT FOR TEACHING)


<table border="1">
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Daniel</td>
    <td>80</td>
  </tr>
</table>

📝 9. Forms (REAL-LIFE USE 🔥)


<form>
  <label>Name:</label>
  <input type="text"><br><br>

  <label>Password:</label>
  <input type="password"><br><br>

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

🎨 10. Basic Styling (Intro to CSS inside HTML)


<p style="color: blue;">This is blue text</p>

📦 11. Div (Layout Container)


<div>
  <h2>Section</h2>
  <p>Content here</p>
</div>

🔥 12. Simple Project (CLASS WORK)

👉 Build a Student Profile Page


<!DOCTYPE html>
<html>
<head>
  <title>Student Profile</title>
</head>
<body>

<h1>My Profile</h1>

<img src="profile.jpg" width="150">

<p>Name: John Doe</p>
<p>Department: Computer Science</p>

<h2>Courses</h2>
<ul>
  <li>Web Design</li>
  <li>Programming</li>
</ul>

</body>
</html>

🧑‍🏫 13. Teaching Flow (FOR YOUR CLASS)

🟢 Day 1:

HTML structure
Tags & headings

🟡 Day 2:

Links & images
Lists

🔵 Day 3:

Tables
Forms

🔴 Day 4:

Mini project

🎯 14. Practice Tasks

Give your students:

Create a personal bio page
Build a timetable using table
Create a registration form
Add images and links

💡 PRO TIP

HTML is easy—but mastery comes from:
👉 Building real pages
👉 Combining with CSS + JavaScript

PALACE TECH HUB

Thursday, April 16, 2026

HTML TUTORIAL (BEGINNER → PRACTICAL)