Basic HTML
आप HTML (HyperText Markup Language) के सभी basics सीखेंगे। यहाँ आपको HTML का इतिहास, editors, tags, attributes और elements का एक brief overview मिलेगा। आप समझेंगे कि HTML कैसे एक web page का structure तैयार करता है और browser को content display करने के निर्देश देता है।
(01)🔹 HTML का Introduction (परिचय)
[i] Full Form: HTML का पूरा नाम HyperText Markup Language है।
[ii] Purpose: इसका उपयोग web pages को design और create करने के लिए किया जाता है।
[iii] Structure: यह सिर्फ पेज का structure तय करता है, सजावट नहीं।
[iv] Nature: HTML एक markup language है, कोई programming language नहीं।
[v] Building Blocks: इसमें tags का इस्तेमाल होता है।
[vi] Compatibility: यह सभी आधुनिक web browsers में काम करता है।
[vii] Media Support: यह text, images, links, audio, और video को support करता है।
[viii] Learning Curve: इसे सीखना और समझना बहुत easy है।
[ix] Importance: यह web development की basic foundation है।
[x] Definition: "HTML is the skeleton of a web page."
(02)🔹 HTML की History (इतिहास)
[i] Creator: HTML को Tim Berners-Lee ने बनाया था।
[ii] Birth: इसे पहली बार 1991 में दुनिया के सामने पेश किया गया।
[iii] Early Days: इसके first version में बहुत ही कम tags थे।
[iv] Main Goal: इसका मुख्य उद्देश्य वैज्ञानिकों के बीच documents share करना था।
[v] Evolution: समय के साथ इसके कई versions आए जैसे HTML 2.0, 3.2, और 4.01।
[vi] HTML 4: इस version ने web में tables और forms की शुरुआत की।
[vii] The Revolution: HTML5 को 2014 में release किया गया, जो आज का standard है।
[viii] Modern Features: HTML5 ने native audio, video, और semantic tags को जोड़ा।
[ix] Present Day: आज हर आधुनिक website HTML5 पर ही टिकी है।
[x] Conclusion: "HTML made the internet popular and global."
(03)🔹 HTML Editor (सॉफ्टवेयर)
[i] Need: HTML कोड लिखने के लिए हमें एक editor की जरूरत होती है।
[ii] Function: Editor हमें कोड write, edit, और save करने में मदद करता है।
[iii] Extension: HTML फाइल को हमेशा .html extension के साथ save करना चाहिए।
[iv] For Beginners: विंडोज में Notepad एक simple editor है।
[v] For Professionals: VS Code (Visual Studio Code) सबसे बेहतरीन और लोकप्रिय editor है।
[vi] Syntax Highlighting: अच्छे editors कोड के रंगों को अलग-अलग दिखाते हैं (highlighting)।
[vii] Debugging: इसमें errors को खोजना और सुधारना बहुत आसान होता है।
[viii] Live View: आजकल के editors में live preview की सुविधा भी मिलती है।
[ix] Speed: यह developer की productivity को कई गुना बढ़ा देता है।
[x] Pro Tip: "VS Code is currently the gold standard for writing HTML."
(04)🔹 HTML Tag (टैग क्या है?)
[i] Unit: Tag, HTML का सबसे smallest part होता है।
[ii] Brackets: टैग हमेशा angle brackets < > के अंदर लिखा जाता है।
[iii] Skeleton: Tags ही पूरे web page को एक structure देते हैं।
[iv] Format: इसमें एक opening tag और एक closing tag होता है।
[v] Void Tags: कुछ tags self-closing होते हैं, जिन्हें बंद करने की जरूरत नहीं होती।
[vi] Instruction: एक tag ब्राउज़र को instructions देता है कि content क्या है।
[vii] Example 1: <h1> का इस्तेमाल बड़ी headings के लिए होता है।
[viii] Example 2: <p> का इस्तेमाल paragraphs के लिए किया जाता है।
[ix] Example 3: <br> का इस्तेमाल लाइन बदलने (line break) के लिए होता है।
[x] Mantra: "A tag is the building block of any website."
(05)🔹 HTML Attributes (विशेषताएं)
[i] Extra Info: Attributes हमें tags के बारे में extra information प्रदान करते हैं।
[ii] Placement: ये हमेशा टैग के opening part के अंदर ही लिखे जाते हैं।
[iii] Structure: इसमें हमेशा एक name और एक value होती है।
[iv] Quotes: एट्रिब्यूट की value को हमेशा double quotes " " में रखा जाता है।
[v] href: इसका उपयोग links बनाने के लिए किया जाता है।
[vii] src: इसका उपयोग images का source (location) बताने के लिए होता है।
[vii] style: इससे हम टैग्स में सीधा CSS (design) जोड़ सकते हैं।
[viii] id: यह किसी element को एक unique identification देता है।
[ix] class: इससे हम एक जैसे तत्वों का एक group बना सकते हैं।
[x] Role: "Attributes make simple tags more powerful and functional."
(06)🔹 HTML Elements (एलिमेंट)
[i] Complete Set: Opening tag + Content + Closing tag मिलकर एक element बनाते हैं।
[ii] Actual Content: एक element ही वह हिस्सा है जो असली web content दर्शाता है।
[iii] Text: पेज पर दिखने वाला हर शब्द किसी न किसी element का हिस्सा है।
[iv] Media Elements: Image, Video, और Audio भी HTML elements ही हैं।
[v] Heading Element: जैसे <h1>This is a Heading</h1> एक पूरा एलिमेंट है।
[vi] Paragraph Element: टेक्स्ट को पैराग्राफ में दिखाने के लिए इसका इस्तेमाल होता है।
[vii] Empty Elements: कुछ elements में content नहीं होता, जैसे <br>।
[viii] Void Nature: <hr> और <img> भी empty elements की श्रेणी में आते हैं।
[ix] Nesting: Elements के अंदर दूसरे elements डालना Nesting कहलाता है।
[x] Definition: "An element is a complete, standalone unit of an HTML document."
(07)🏗️ Practical Lab (Pure English Code)
जैसा कि आपने निर्देश दिया था, कोडिंग ब्लॉक का सारा content English में है:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Professional Webpage</title>
</head>
<body style="font-family: sans-serif; background-color: #eef2f3; padding: 20px;">
<header style="text-align: center; background-color: #34495e; color: white; padding: 15px;">
<h1>HTML Mastery Course</h1>
<p>Your journey to becoming a Web Developer starts here.</p>
</header>
<main style="background: white; margin-top: 20px; padding: 20px; border-radius: 8px;">
<h2 style="color: #2980b9;">Introduction to Pro Dev Code</h2>
<p>In this lesson, we are exploring <b>Tags</b>, <b>Attributes</b>, and <b>Elements</b>.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUtZpN98d0PyhpwSckaxtwC9ogGCIBHuVsRMqqrH5E6CI6xYN6gx4arMtXTB2quPQoxnqzXafcE8Q0NWRLH0nraRO8PhJQ7QecbFpihKGp3R0d9dg2mwgMF_BW7gq95auOQ_Sh3KVy4ton2tFpERPPt757WRIejUZWgR5v8diqyItcF3o/s1600/android-chrome-192x192.png" alt="Tech Icon" style="border: 2px solid #ccc;">
<br><br>
<a href="https://prodevcode.blogspot.com/" target="_blank" style="color: #e74c3c; font-weight: bold;">
Click Here to Learn More
</a>
</main>
<footer style="text-align: center; margin-top: 30px; font-size: 0.9em; color: #7f8c8d;">
<p>© 2026 Learning Portal | Built with HTML5</p>
</footer>
</body>
</html>
.png)
Comments
Post a Comment