HTML Web Pages — Lesson
1) Hook — The Magic Behind Your Favourite Bollywood Fan Site!
Imagine you want to create a simple webpage to share all the latest updates about your favourite Bollywood star, say Shah Rukh Khan. You want to add his photos, some text about his movies, and maybe even links to his songs. How do you do that? This is where HTML comes in — it’s like the script for a Bollywood movie, telling the browser exactly how to show your content on the web!
2) Core Concepts — What is HTML and How Does It Work?
HTML stands for HyperText Markup Language. It is the language used to create web pages. Think of HTML as the skeleton of a webpage, giving it structure and meaning.
HTML uses tags to define different parts of the page. Tags are like Bollywood actors playing different roles — each tag has a specific job!
| Tag | Purpose | Example |
|---|---|---|
| <html> ... </html> | Defines the whole HTML document | <html>...</html> |
| <head> ... </head> | Contains meta info like the title | <head><title>SRK Fan Page</title></head> |
| <body> ... </body> | Contains the visible content | <body>Hello Fans!</body> |
| <h1> ... </h1> | Main heading | <h1>Welcome to SRK Fan Club</h1> |
| <p> ... </p> | Paragraph text | <p>King of Romance in Bollywood!</p> |
| <a href="URL"> ... </a> | Creates a hyperlink | <a href="https://www.srk.com">Official Site</a> |
Here is a simple example of a complete HTML page:
<html>
<head>
<title>SRK Fan Page</title>
</head>
<body>
<h1>Welcome to SRK Fan Club</h1>
<p>King of Romance in Bollywood!</p>
<a href="https://www.srk.com">Official Site</a>
</body>
</html>
3) Key Formulas/Rules
✔ Every HTML tag usually has an opening <tag> and a closing </tag>.
✔ The HTML document starts with <!DOCTYPE html> to tell the browser it’s an HTML5 page.
✔ The content inside <head> is not visible on the page but important for the browser.
✔ The visible content goes inside <body> tags.
✔ Use headings (<h1> to <h6>) to organize content by importance.
✔ Use <a href="URL">...</a> to create clickable links.
4) Did You Know?
Did you know that the first ever website was created by Tim Berners-Lee in 1991? It was a simple page explaining what the World Wide Web was — no Bollywood stars or cricket scores back then! Today, billions of HTML pages exist, including sites for cricket updates like ESPN Cricinfo and Bollywood news portals.
5) Exam Tips
- Always remember to close your tags. Forgetting a closing tag (</tag>) is a common mistake.
- Use proper nesting. For example, <b><i>text</i></b> is correct, but <b><i>text</b></i> is wrong.
- Practice writing simple HTML code by hand. Board exams may ask you to write or identify parts of HTML code.
- Know the purpose of common tags like <h1>, <p>, <a>, <img> (image tag), etc.
- Read questions carefully. Sometimes you may be asked to fix errors or add missing tags.
HTML Web Pages — Mcq
HTML Web Pages — Mnemonic
Mnemonic 1: "HTML का ABC" 📄💻
“Amazing Bollywood Code”
- A – Anchor Tag (<a>) for links, जैसे क्रिकेट में anchor batsman जो टीम को आगे बढ़ाता है। 🏏
- B – Bold Tag (<b>) जिससे text बोल्ड हो जाता है, जैसे सलमान खान का डायलॉग “Bhai Bold Hai!” 💪
- C – Container Tag (<div>) जो बाकी सबको रखता है, जैसे एक फिल्म का सेट जहां सब कलाकार रहते हैं। 🎬
Mnemonic 2: "HTML Tag Ka Jadoo" ✨
“Head, Tail, Middle” — याद रखो ये तीन पार्ट्स!
- Head (<head>) – जैसे क्रिकेट में कप्तान, जो प्लान बनाता है। यहाँ meta info और title रखो। 🏏👑
- Tail (</html>) – मैच का अंत, जो सब कुछ बंद करता है। जैसे मैच खत्म होने पर ‘Game Over’! 🎉
- Middle (<body>) – असली खेल, जहाँ सब content आता है। जैसे फिल्म का main scene! 🎥
Mnemonic 3: Hindi Rhyming Trick for HTML Tags 🎶
“Head mein Title, Body mein Style, Anchor lagao, Link mile mile!”
- Head में Title (पेज का नाम)
- Body में Style (जैसे रंग, फॉन्ट)
- Anchor (<a>) लगाओ, लिंक बनाओ और वेबसाइट पे घूमो!
Mission: Master This Topic!
Reinforce what you learned with fun activities
Ready to Battle? Test Your Knowledge!
Practice MCQs, build combos, climb the leaderboard!
Start Practice