Chapter 1: Introduction to HTML 🚀
Mentor's Note: HTML is the foundation of the entire internet. Every website you visit, from Google to Instagram, is built using these basic tags! 💡
🌟 The Scenario: The House Skeleton 🦴
Imagine you are an architect building a new house in Surat.
- The Logic: Before you paint the walls (CSS) or install the lights (JS), you need to build the Skeleton. You need to decide where the Roof (
<head>) goes and where the Rooms (<body>) are. 📦 - The Result: You have a strong structure that stays standing. This is exactly what HTML does for a website. ✅
📖 Concept Explanation
1. What is HTML?
HTML stands for HyperText Markup Language. It is NOT a programming language; it is a Markup Language used to describe the structure of web pages.
2. What are Tags?
Tags are the "bricks" of HTML. They usually come in pairs:
- Opening Tag:
<p>(Start of a paragraph) - Closing Tag:
</p>(End of a paragraph)
3. Basic Document Structure
Every HTML document has four mandatory parts:
<html>: The root container.<head>: Contains hidden info like the page title.<title>: The name shown on the browser tab.<body>: The visible part of your website.
🎨 Visual Logic: The HTML Hierarchy
💻 Implementation: Your First Webpage
- HTML5
{/* 🛒 Scenario: Building a simple home page */}
{/* 🚀 Action: Using basic tags */}
<html>
<head>
<title>My First Site</title>
</head>
<body>
<h1>Welcome to VD Computer Tuition! 🎓</h1>
<p>I am learning <b>HTML</b> today. It is fun!</p>
</body>
</html>
{/* 🛍️ Outcome: A webpage with a big title and a sentence. */}
🧠 Step-by-Step Logic
- Start 🏁
- Open the
<html>tag. - Add the
<head>for settings. - Define the
<title>. - Open the
<body>for content. - Use
<h1>for important headings. - Use
<p>for normal text. - Close all tags in reverse order.
- End 🏁
📊 Sample Dry Run
| Tag | Visual Effect | Location |
|---|---|---|
<title> | Name on Browser Tab 🏷️ | Browser Top |
<h1> | Big, Bold Text 🖋️ | Page Content |
<p> | Normal Size Text 📖 | Page Content |
🧪 Interactive Elements
Try It Yourself
Hands-on Exercise
Task: Create a simple HTML page that displays your Favorite Food as a heading and a short description of it as a paragraph.
Hint: Use <h1> and <p>. 💡
Quick Quiz
- What is the full form of HTML?
- A) High Text Machine Language
- B) HyperText Markup Language
- C) Hyperlink Tool Main Language
- D) Home Tool Markup Language
Answer: B - HyperText Markup Language.
💡 Board Exam Focus (GSEB Std 10) 👔
- Important: In the theory exam, you will often be asked which tag is used to display the title of the page.
- Answer: The
<title>tag, which must be inside the<head>section.
💡 Pro Tip: "Design is not just what it looks like and feels like. Design is how it works." - Steve Jobs