Chapter 1: Introduction to HTML 🚀¶

GSEB Standard 10 Computer StudiesHTML Foundations

Recommended order: Std 10 overview -> Chapter 1 HTML Intro -> Lists and Tables -> C Intro

Best for: GSEB Std. 10 students starting web design basics

Prerequisites: None

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: 1. <html>: The root container. 2. <head>: Contains hidden info like the page title. 3. <title>: The name shown on the browser tab. 4. <body>: The visible part of your website.

🎨 Visual Logic: The HTML Hierarchy¶

graph TD
    A[html] --> B[head]
    A --> C[body]
    B --> B1[title]
    C --> C1[h1: Heading]
    C --> C2[p: Paragraph]
    C --> C3[img: Image]

💻 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