Login / Register
Follow Us
0
0
Register Free!
Register Free!
Online Mock Tests & Exam Preparation | Target Exams
Register Free Login
माध्यम चुनें / Select Medium:
Eng (English) Hindi (हिन्दी)
BSEB • कक्षा 8 • Computer Science • अध्याय 6
अनुमानित समय: 45 Mins
प्रगति: अध्ययनरत

हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML)

बिहार विद्यालय परीक्षा बोर्ड (BSEB) कक्षा 8 कंप्यूटर विज्ञान का अध्याय 6 'हाइपर टेक्स्ट मार्कअप लैंग्वेज (HTML)' विद्यार्थियों को वेब ऑथरिंग एवं डिजिटल दस्तावेज़ निर्माण की व्यावहारिक एवं सैद्धांतिक नींव प्रदान करता है। वर्ष 1989-1991 में स्विट्जरलैंड के सर्न (CERN) में सर टिम बर्नर्स-ली द्वारा आविष्कृत HTML आज वर्ल्ड वाइड वेब की वैश्विक आधारशिला है। यह कोई प्रोग्रामिंग भाषा नहीं है, बल्कि एक संरचनात्मक मार्कअप भाषा है जो टैग्स के माध्यम से वेब ब्राउज़र को यह निर्देश देती है कि टेक्स्ट, छवियाँ, सूचियाँ, हाइपरलिंक्स एवं डेटा टेबल्स को स्क्रीन पर किस प्रकार प्रस्तुत किया जाए। यह अध्याय मूलभूत टैग्स के कंकाल, कंटेनर बनाम रिक्त टैग्स, बॉडी एट्रिब्यूट्स, 1.6 करोड़ रंगों वाली हेक्साडेसिमल प्रणाली, सूचियों की विविधता, इमेज एकीकरण, एंकर नेविगेशन और colspan/rowspan आधारित टेबल संरचना का विस्तृत और प्रामाणिक अध्ययन प्रस्तुत करता है।

अध्याय CBT ऑनलाइन टेस्ट दें सभी अध्याय देखें
प्रस्तावना अध्याय अवधारणाएँ सिंटेक्स एवं प्रमुख कमांड हल उदाहरण सामान्य गलतियाँ अध्याय सारांश स्व-मूल्यांकन अभ्यास टेस्ट दें

यह अध्याय क्यों महत्वपूर्ण है

बिहार विद्यालय परीक्षा बोर्ड (BSEB) कक्षा 8 कंप्यूटर विज्ञान का अध्याय 6 'हाइपर टेक्स्ट मार्कअप लैंग्वेज (HTML)' विद्यार्थियों को वेब ऑथरिंग एवं डिजिटल दस्तावेज़ निर्माण की व्यावहारिक एवं सैद्धांतिक नींव प्रदान करता है। वर्ष 1989-1991 में स्विट्जरलैंड के सर्न (CERN) में सर टिम बर्नर्स-ली द्वारा आविष्कृत HTML आज वर्ल्ड वाइड वेब की वैश्विक आधारशिला है। यह कोई प्रोग्रामिंग भाषा नहीं है, बल्कि एक संरचनात्मक मार्कअप भाषा है जो टैग्स के माध्यम से वेब ब्राउज़र को यह निर्देश देती है कि टेक्स्ट, छवियाँ, सूचियाँ, हाइपरलिंक्स एवं डेटा टेबल्स को स्क्रीन पर किस प्रकार प्रस्तुत किया जाए। यह अध्याय मूलभूत टैग्स के कंकाल, कंटेनर बनाम रिक्त टैग्स, बॉडी एट्रिब्यूट्स, 1.6 करोड़ रंगों वाली हेक्साडेसिमल प्रणाली, सूचियों की विविधता, इमेज एकीकरण, एंकर नेविगेशन और colspan/rowspan आधारित टेबल संरचना का विस्तृत और प्रामाणिक अध्ययन प्रस्तुत करता है।

अध्याय रूपरेखा एवं प्रगति

1 वेब वास्तुकला, इंटरनेट की मूल बातें...
2 HTML टैग्स, तत्व, विशेषताएँ एवं मूल...
3 टेक्स्ट फ़ॉर्मैटिंग मास्टरक्लास: भौ...
4 पेज स्टाइलिंग, Body टैग के गुण एवं...
5 सूचियों की संरचना: क्रमबद्ध, अक्रमब...
6 मल्टीमीडिया एकीकरण: इमेज टैग, पाथ स...
7 हाइपरलिंक्स, एंकर नेविगेशन एवं HTML...

सम्पूर्ण सैद्धांतिक एवं वैचारिक अध्ययन

वेब वास्तुकला, इंटरनेट की मूल बातें एवं HTML दस्तावेज़ संरचना

मॉड्यूल परिचय: इंटरनेट, वेब की मूल बातें एवं HTML दस्तावेज़ संरचना

यह मॉड्यूल वेब पेज निर्माण के ऐतिहासिक उद्भव, सर टिम बर्नर्स-ली के युगांतरकारी योगदान, प्रोग्रामिंग भाषा और मार्कअप भाषा के मौलिक भेद तथा किसी भी मानक वेबपेज के अनिवार्य ढाँचे (कंकाल) का गहन विश्लेषण प्रस्तुत करता है।

1. HTML एवं वर्ल्ड वाइड वेब (WWW) का ऐतिहासिक उद्भव

वर्ष 1989 में ब्रिटिश वैज्ञानिक सर टिम बर्नर्स-ली (Sir Tim Berners-Lee) ने जिनेवा (स्विट्जरलैंड) स्थित यूरोपीय परमाणु अनुसंधान संगठन (CERN) में कार्यरत रहते हुए वर्ल्ड वाइड वेब (WWW) का आविष्कार किया था। उनका मुख्य उद्देश्य दुनिया भर के विभिन्न विश्वविद्यालयों में फैले उच्च-ऊर्जा भौतिक वैज्ञानिकों के शोध पत्रों, आँकड़ों एवं आरेखों को इंटरनेट के माध्यम से सरलतापूर्वक आपस में जोड़ना था। इस उद्देश्य की पूर्ति हेतु उन्होंने तीन प्रमुख तकनीकों की रचना की:

  • HTTP (हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल): वह नेटवर्क संचार प्रोटोकॉल जो यह नियंत्रित करता है कि क्लाइंट ब्राउज़र वेबपेज की मांग कैसे करेगा और वेब सर्वर उसे इंटरनेट पर कैसे भेजेगा।
  • URL (यूनिफ़ॉर्म रिसोर्स लोकेटर): इंटरनेट पर किसी भी वेबपेज, छवि या दस्तावेज़ का अद्वितीय वैश्विक पता (जैसे: https://www.targetexams.com)।
  • HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज): विभिन्न कंप्यूटरों एवं ऑपरेटिंग सिस्टमों पर टेक्स्ट, ग्राफिक्स एवं लिंक्स को एक समान प्रदर्शित करने वाली सार्वभौमिक मार्कअप भाषा।

2. HTML क्या है? नाम का संपूर्ण विश्लेषण

HTML का पूरा नाम HyperText Markup Language (हाइपरटेक्स्ट मार्कअप लैंग्वेज) है। इसे समझने के लिए इसके दो प्रमुख भागों का विश्लेषण आवश्यक है:

1. हाइपरटेक्स्ट (HyperText): सामान्य मुद्रित पुस्तक का पाठ रेखीय (Linear) होता है, जहाँ पाठक को अनिवार्य रूप से पृष्ठ 1 के बाद पृष्ठ 2 और फिर पृष्ठ 3 पढ़ना पड़ता है। इसके विपरीत, हाइपरटेक्स्ट एक अरेखीय (Non-linear) डिजिटल पाठ है जिसमें इलेक्ट्रॉनिक लिंक्स (हाइपरलिंक्स) अंतर्निहित होते हैं। किसी हाइपरलिंक पर क्लिक करते ही पाठक तुरंत उसी पेज के किसी अन्य भाग, उसी वेबसाइट के दूसरे पेज या दुनिया के किसी भी कोने में स्थित सर्वर के वेबपेज पर पहुँच जाता है।

2. मार्कअप लैंग्वेज (Markup Language): HTML कोई प्रोग्रामिंग भाषा (जैसे C++, Python, या Q-Basic) नहीं है। प्रोग्रामिंग भाषाओं में गणितीय तर्क, चर (Variables), शर्तें (IF-THEN) और लूप्स (FOR-NEXT) होते हैं जो एल्गोरिदम को निष्पादित करते हैं। HTML में कोई गणना या तार्किक निर्णय नहीं होता। यह एक मार्कअप भाषा है, जिसका अर्थ है कि यह विशेष संकेतों (Tags) का उपयोग करके सामान्य पाठ को 'मार्क' (चिह्नित) करती है ताकि वेब ब्राउज़र यह समझ सके कि कौन सा हिस्सा मुख्य शीर्षक है, कौन सा पैराग्राफ है, कहाँ चित्र लगाना है और कहाँ तालिका बनानी है।

3. टेक्स्ट एडिटर बनाम वेब ब्राउज़र

वेबपेज के निर्माण एवं उसे देखने के लिए दो अलग-अलग सॉफ्टवेयर टूल्स की आवश्यकता होती है:

सॉफ्टवेयर वर्ग मुख्य कार्य एवं भूमिका प्रमुख उदाहरण
टेक्स्ट एडिटर (Text Editor) कच्चा HTML कोड टाइप करने और सोर्स फाइल बनाने के लिए। फाइल को अनिवार्य रूप से .html या .htm एक्सटेंशन के साथ सेव किया जाता है। नोटपैड (Notepad), नोटपैड++, सबलाइम टेक्स्ट, वीएस कोड।
वेब ब्राउज़र (Web Browser) HTML कोड को पढ़कर (Parse करके) उसे स्क्रीन पर सुंदर स्वरूपित वेबपेज के रूप में प्रदर्शित करता है। ब्राउज़र में टैग्स स्वयं छिप जाते हैं और केवल उनका प्रभाव दिखाई देता है। गूगल क्रोम (Google Chrome), मोज़िला फ़ायरफ़ॉक्स, माइक्रोसॉफ्ट एज, सफ़ारी।

4. HTML दस्तावेज़ का मूलभूत कंकाल (Structure)

प्रत्येक मानक HTML वेबपेज का एक अनिवार्य ढाँचा होता है, जो मुख्य रूप से Head (शीर्ष भाग) और Body (मुख्य पृष्ठ भाग) में विभाजित होता है:

<!DOCTYPE html>
<html>
  <head>
    <title>बिहार बोर्ड कक्षा 8 कंप्यूटर विज्ञान</title>
  </head>
  <body>
    <h1>HTML अध्ययन में आपका स्वागत है</h1>
    <p>यह सामग्री वेब ब्राउज़र के मुख्य कैनवास पर दृश्यमान होगी।</p>
  </body>
</html>

मूलभूत कंकाल टैग्स की विस्तृत व्याख्या:

  • <!DOCTYPE html>: यह ब्राउज़र को सूचित करता है कि यह दस्तावेज़ आधुनिक HTML5 मानकों के अनुसार लिखा गया है। यह कोई HTML टैग नहीं बल्कि एक निर्देश (Declaration) है।
  • <html> ... </html>: यह रूट (Root) एलिमेंट है जो पूरे वेबपेज को अपने अंदर समाहित करता है। वेबपेज का समस्त कोड इन्हीं दोनों टैग्स के बीच लिखा जाता है।
  • <head> ... </head>: इसमें दस्तावेज़ का मेटाडेटा (Metadata), कैरेक्टर एन्कोडिंग और शीर्षक रहता है। हेड भाग की सामग्री कभी भी वेबपेज के मुख्य कैनवास पर सीधे दिखाई नहीं देती।
  • <title> ... </title>: यह <head> के अंदर लिखा जाता है। इसके अंदर लिखा गया टेक्स्ट ब्राउज़र के टैब बार, टाइटल बार और बुकमार्क में दिखाई देता है।
  • <body> ... </body>: यह वेबपेज का वास्तविक दृश्यमान कैनवास है। उपयोगकर्ता को स्क्रीन पर दिखने वाली प्रत्येक वस्तु—पैराग्राफ, हेडिंग्स, चित्र, सूचियाँ, लिंक्स एवं टेबल्स—इसी बॉडी टैग के अंदर लिखी जाती है।

HTML टैग्स, तत्व, विशेषताएँ एवं मूलभूत टेक्स्ट संरचना

मॉड्यूल परिचय: HTML टैग्स, तत्व, विशेषताएँ एवं मूलभूत टेक्स्ट संरचना

इस मॉड्यूल में हम HTML के व्याकरणिक नियमों, कंटेनर बनाम एम्प्टी टैग्स के भेद, एट्रिब्यूट सिंटेक्स, व्हाइटस्पेस नियम, हेडिंग पदानुक्रम (h1 से h6), पैराग्राफ, लाइन ब्रेक एवं क्षैतिज रेखा (hr) के उपयोग का व्यावहारिक अध्ययन करेंगे।

1. कंटेनर टैग्स (युग्मित) बनाम एम्प्टी टैग्स (रिक्त/एकल)

HTML के सभी टैग्स कोणीय कोष्ठकों (Angle Brackets: < और >) के बीच लिखे जाते हैं। कार्यप्रणाली के आधार पर इन्हें दो स्पष्ट श्रेणियों में बाँटा गया है:

कंटेनर (युग्मित / Paired) टैग्स

इनमें एक आरंभिक टैग (Opening Tag: <tag>) और एक समापन टैग (Closing Tag: </tag>) होता है। समापन टैग में फॉरवर्ड स्लैश (/) लगा होता है। ये अपने अंदर टेक्स्ट या अन्य तत्वों को समाहित करते हैं।

<p>यह एक कंटेनर पैराग्राफ है।</p>
<h1>मुख्य शीर्षक</h1>
<b>बोल्ड टेक्स्ट</b>

एम्प्टी (रिक्त / एकल / Void) टैग्स

इन टैग्स के अंदर कोई टेक्स्ट नहीं होता, इसलिए इनका कोई समापन टैग नहीं होता। ये स्वतंत्र निर्देशों या वस्तुओं का प्रतिनिधित्व करते हैं।

<br> (नयी पंक्ति शुरू करने हेतु)
<hr> (क्षैतिज रेखा खींचने हेतु)
<img> (चित्र प्रदर्शित करने हेतु)

2. टैग एट्रिब्यूट्स (विशेषताएँ) का सिंटेक्स

एट्रिब्यूट्स (Attributes) किसी HTML तत्व को अतिरिक्त निर्देश एवं प्रारूपण मान प्रदान करते हैं। एट्रिब्यूट को हमेशा केवल आरंभिक टैग (Opening Tag) के अंदर लिखा जाता है। इसका मानक प्रारूप नाम-मान (Name-Value) होता है:

<tagname attribute_name="value"> सामग्री </tagname>

उदाहरण: <p align="center">केंद्रित पाठ</p>। यहाँ p टैग है, align एट्रिब्यूट का नाम है और center उसका मान (उद्धरण चिह्नों में) है।

3. महत्वपूर्ण सिंटेक्स एवं पार्सिंग नियम

  • केस इनसेंसिटिविटी (Case Insensitivity): HTML में बड़े अक्षर (UPPERCASE) और छोटे अक्षर (lowercase) समान माने जाते हैं। <HTML> और <html> में कोई अंतर नहीं है। परंतु आधुनिक W3C मानक छोटे अक्षरों (lowercase) के प्रयोग की ही अनुशंसा करते हैं।
  • व्हाइटस्पेस संकुचन नियम (Whitespace Collapsing): HTML में यदि आप नोटपैड में 10 बार स्पेस दबाएँ या 5 बार Enter दबाएँ, तो वेब ब्राउज़र उन सभी खाली स्थानों को सिकोड़कर केवल एक स्पेस में बदल देता है। नयी पंक्ति के लिए <br> या पैराग्राफ हेतु <p> का प्रयोग अनिवार्य है।
  • LIFO नेस्टिंग नियम (Last In, First Out): जो टैग सबसे अंत में खोला जाएगा, वह सबसे पहले बंद होना चाहिए। सही क्रम: <p><b><i>पाठ</i></b></p>। गलत क्रम: <p><b><i>पाठ</b></i></p>।

4. हेडिंग पदानुक्रम: <h1> से <h6>

HTML में 6 स्तरों की हेडिंग्स होती हैं। हेडिंग्स ब्लॉक-लेवल तत्व हैं, जो स्वतः ऊपर और नीचे खाली स्थान (मार्जिन) जोड़ती हैं:

  • <h1>: प्रथम स्तर की हेडिंग — सबसे बड़ा एवं सबसे गाढ़ा फॉन्ट आकार। यह वेबपेज के मुख्य शीर्षक हेतु प्रयुक्त होता है।
  • <h2>: द्वितीय स्तर की हेडिंग — प्रमुख अनुभागों के उपशीर्षक हेतु।
  • <h3>: तृतीय स्तर की हेडिंग — उप-विषयों के विभाजन हेतु।
  • <h4>: चतुर्थ स्तर की हेडिंग — छोटे समूह शीर्षकों हेतु।
  • <h5>: पंचम स्तर की हेडिंग — लघु वर्गीकरण हेतु।
  • <h6>: षष्ठम स्तर की हेडिंग — सबसे छोटी हेडिंग, जो सामान्य टेक्स्ट से भी आकार में छोटी किंतु बोल्ड होती है।

5. पैराग्राफ (<p>), लाइन ब्रेक (<br>) एवं हॉरिजॉन्टल रूल (<hr>)

पैराग्राफ (<p> ... </p>): यह टेक्स्ट के अनुच्छेदों को घेरता है। ब्राउज़र स्वतः इसके ऊपर और नीचे मार्जिन छोड़ता है। align एट्रिब्यूट द्वारा टेक्स्ट का संरेखन बाएं (left), केंद्र (center), दाएं (right) या दोनों तरफ बराबर (justify) किया जा सकता है।

लाइन ब्रेक (<br>): यह एक एम्प्टी टैग है जो बिना पैराग्राफ जितना बड़ा अंतर छोड़े अगली पंक्ति से टेक्स्ट शुरू करता है। कविता, पता या गीतों की पंक्तियों के लिए यह अनिवार्य है।

हॉरिजॉन्टल रूल (<hr>): यह एक एम्प्टी टैग है जो पेज पर क्षैतिज रेखा खींचकर विषयों को अलग करता है। इसके प्रमुख एट्रिब्यूट्स हैं:

  • size="pixels": रेखा की मोटाई निर्धारित करता है (उदा. size="5")।
  • width="pixels या %": स्क्रीन पर रेखा की चौड़ाई निर्धारित करता है (उदा. width="50%" आधी स्क्रीन तक)।
  • color="color_name या hex": रेखा का रंग बदलता है।
  • noshade: रेखा की छाया हटाकर उसे ठोस समतल रेखा बनाता है।
  • align="left|center|right": रेखा का संरेखन तय करता है।

टेक्स्ट फ़ॉर्मैटिंग मास्टरक्लास: भौतिक एवं तार्किक शैलियाँ

मॉड्यूल परिचय: टेक्स्ट फ़ॉर्मैटिंग मास्टरक्लास: भौतिक एवं तार्किक शैलियाँ

यह मॉड्यूल वर्ण-स्तरीय स्वरूपण का गहरा अध्ययन कराता है: भौतिक बनाम तार्किक स्वरूपण का सैद्धांतिक अंतर, गणितीय घातांक (सुपरस्क्रिप्ट), रासायनिक सूत्र (सबस्क्रिप्ट), प्री-फॉर्मेटेड टेक्स्ट (

) एवं स्रोत कोड टिप्पणियों का महत्व।

1. भौतिक (Physical) बनाम तार्किक (Logical) फ़ॉर्मैटिंग टैग्स

HTML में टेक्स्ट के स्वरूपण हेतु दो प्रकार के दृष्टिकोण अपनाए जाते हैं:

क. भौतिक फ़ॉर्मैटिंग टैग्स (दृश्य उपस्थिति)

भौतिक टैग्स ब्राउज़र को केवल यह बताते हैं कि स्क्रीन पर टेक्स्ट दिखाई कैसा देना चाहिए। इनका कोई आंतरिक अर्थ या महत्व नहीं होता:

  • <b> ... </b>: टेक्स्ट को गाढ़ा (Bold) करता है।
  • <i> ... </i>: टेक्स्ट को तिरछा (Italic) करता है।
  • <u> ... </u>: टेक्स्ट के नीचे रेखा (Underline) खींचता है।
  • <s> ... </s> या <strike> ... </strike>: टेक्स्ट के बीच से क्षैतिज रेखा खींचकर उसे कटा हुआ (Strikethrough) दिखाता है।
  • <tt> ... </tt>: टाइपराइटर की तरह टेलीटाइप (Monospace) फॉन्ट में प्रदर्शित करता है जहाँ प्रत्येक अक्षर की चौड़ाई बराबर होती है।

ख. तार्किक फ़ॉर्मैटिंग टैग्स (अर्थ एवं पहुँच क्षमता)

तार्किक टैग्स टेक्स्ट के महत्व और अर्थ (Semantics) को स्पष्ट करते हैं। दृष्टिबाधित व्यक्तियों हेतु उपयोग किए जाने वाले 'स्क्रीन रीडर' सॉफ्टवेयर इन टैग्स को पहचानकर अपनी आवाज़ का टोन और प्रभाव बदलते हैं:

  • <strong> ... </strong>: यह दर्शाता है कि टेक्स्ट अत्यधिक महत्वपूर्ण है। दिखने में यह बोल्ड होता है, किंतु यह सर्च इंजन और स्क्रीन रीडर को विषय के महत्व की सूचना देता है।
  • <em> ... </em>: यह बल दिए गए (Emphasized) पाठ को दर्शाता है। स्क्रीन रीडर इसे विशेष जोर देकर पढ़ते हैं।
  • <mark> ... </mark>: हाइलाइटर पेन की तरह टेक्स्ट की पृष्ठभूमि को पीला करता है।
  • <del> एवं <ins>: क्रमशः हटाए गए और नए जोड़े गए कानूनी या संपादित टेक्स्ट को दर्शाते हैं।

2. सुपरस्क्रिप्ट (<sup>) एवं सबस्क्रिप्ट (<sub>)

गणितीय समीकरणों में घात (Powers) और रसायन विज्ञान में अणु सूत्र लिखने हेतु अक्षरों को सामान्य रेखा से ऊपर या नीचे लिखना पड़ता है:

सुपरस्क्रिप्ट (<sup>)

टेक्स्ट को सामान्य बेसलाइन से थोड़ा ऊपर और छोटे आकार में प्रदर्शित करता है। बीजगणितीय घातों (Exponents) हेतु प्रयुक्त।

कोड: (a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>
आउटपुट: (a + b)2 = a2 + 2ab + b2

सबस्क्रिप्ट (<sub>)

टेक्स्ट को सामान्य बेसलाइन से थोड़ा नीचे और छोटे आकार में प्रदर्शित करता है। रासायनिक सूत्रों हेतु अनिवार्य।

कोड: 2H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O
आउटपुट: 2H2 + O2 = 2H2O

3. प्री-फॉर्मेटेड टेक्स्ट: <pre> टैग

जैसा कि हम जानते हैं, ब्राउज़र सामान्य टेक्स्ट में अतिरिक्त स्पेस और Enter को अनदेखा कर देता है। किंतु जब प्रोग्रामिंग कोड, कविता या आरेख प्रदर्शित करने हों, जहाँ प्रत्येक स्पेस और लाइन ब्रेक को सुरक्षित रखना आवश्यक हो, तब <pre> ... </pre> टैग का प्रयोग किया जाता है।

<pre> के अंदर लिखा गया टेक्स्ट ठीक वैसे ही स्पेस, टैब और नयी पंक्तियों के साथ फिक्स्ड-विड्थ कूरियर फॉन्ट में दिखता है जैसा नोटपैड में टाइप किया गया था।

4. HTML टिप्पणियाँ (Comments: <!-- ... -->)

टिप्पणियाँ वे निर्देश हैं जो कोड की व्याख्या हेतु लिखे जाते हैं। ब्राउज़र इन्हें पूरी तरह अनदेखा कर देता है और ये स्क्रीन पर कभी दिखाई नहीं देते:

<!-- यह एक टिप्पणी है। यह वेब ब्राउज़र के कैनवास पर कभी नहीं दिखेगी! -->

पेज स्टाइलिंग, Body टैग के गुण एवं रंग प्रणालियाँ

मॉड्यूल परिचय: पेज स्टाइलिंग, Body टैग के गुण एवं रंग प्रणालियाँ

इस मॉड्यूल में हम पूरे वेबपेज के दृश्य कैनवास को सजाने वाले <body> टैग के प्रमुख गुणों (पृष्ठभूमि रंग, वॉलपेपर इमेज, टेक्स्ट रंग, मार्जिन) तथा 1.6 करोड़ रंगों वाली हेक्साडेसिमल RGB रंग प्रणाली का विस्तृत अध्ययन करेंगे।

1. दस्तावेज़ कैनवास के रूप में <body> टैग

<body> टैग पूरे दृश्यमान ब्राउज़र क्षेत्र को नियंत्रित करता है। इसके आरंभिक टैग में एट्रिब्यूट्स जोड़कर हम पूरे वेबपेज की सामान्य दृश्य शैली (पृष्ठभूमि, डिफ़ॉल्ट टेक्स्ट रंग, विंडो के किनारे की दूरी) निर्धारित करते हैं।

2. Body टैग के प्रमुख एट्रिब्यूट्स की तालिका

एट्रिब्यूट का नाम स्वीकार्य मान (Values) कार्यप्रणाली एवं विवरण
bgcolor रंग का नाम या Hex कोड पूरे वेबपेज की ठोस पृष्ठभूमि (Background Color) का रंग तय करता है।
background चित्र का पाथ या URL पृष्ठभूमि में वॉलपेपर के रूप में कोई चित्र लगाता है। यदि चित्र छोटा हो, तो ब्राउज़र उसे टाइल्स की तरह दोहरा देता है।
text रंग का नाम या Hex कोड पेज के सामान्य अक्षरों और पैराग्राफ का डिफ़ॉल्ट रंग तय करता है।
topmargin / leftmargin पिक्सेल की संख्या विंडो के ऊपरी और बाएं किनारे से खाली जगह (मार्जिन) तय करता है (उदा. topmargin="20")।
link रंग का नाम या Hex कोड ऐसे हाइपरलिंक्स का रंग जिन्हें अभी तक क्लिक नहीं किया गया है (डिफ़ॉल्ट नीला: #0000FF)।
vlink रंग का नाम या Hex कोड क्लिक किए जा चुके (Visited) हाइपरलिंक्स का रंग (डिफ़ॉल्ट बैंगनी: #800080)।
alink रंग का नाम या Hex कोड सक्रिय (Active) लिंक का रंग जब माउस का बटन दबाया गया हो (डिफ़ॉल्ट लाल: #FF0000)।

3. हेक्साडेसिमल RGB रंग प्रणाली

HTML में सामान्य 16 रंगों के नाम (जैसे red, green, blue, yellow) स्वीकार्य हैं, किंतु सटीक पेशेवर रंगों के लिए RGB (रेड, ग्रीन, ब्लू) योगात्मक रंग मॉडल पर आधारित 6-अंकों वाले हेक्साडेसिमल कोड का उपयोग किया जाता है। इसके आगे हैश (#) चिह्न लगाना अनिवार्य है:

#RRGGBB   →   2 अंक लाल, 2 अंक हरा, 2 अंक नीला

हेक्साडेसिमल (Base-16) में अंक 0 से 9 और फिर अक्षर A से F (A=10, B=11, C=12, D=13, E=14, F=15) होते हैं। किसी रंग की न्यूनतम तीव्रता 00 (शून्य प्रकाश) तथा अधिकतम तीव्रता FF (पूर्ण 255 तीव्रता) होती है। तीनों चैनलों के संयोजन से कुल \(256 imes 256 imes 256 = 16,777,216\) (लगभग 1.67 करोड़) अद्वितीय रंग बनते हैं!

प्रमुख हेक्साडेसिमल रंग कोड:

  • #FF0000: पूर्ण लाल (Red=255, Green=0, Blue=0)
  • #00FF00: पूर्ण हरा (Red=0, Green=255, Blue=0)
  • #0000FF: पूर्ण नीला (Red=0, Green=0, Blue=255)
  • #FFFF00: पीला रंग (Red + Green = Yellow)
  • #FFFFFF: पूर्ण सफेद (तीनों रंगों की अधिकतम तीव्रता)
  • #000000: पूर्ण काला (तीनों रंगों की शून्य तीव्रता)

सूचियों की संरचना: क्रमबद्ध, अक्रमबद्ध, विवरण एवं नेस्टेड सूचियाँ

मॉड्यूल परिचय: सूचियों की संरचना: क्रमबद्ध, अक्रमबद्ध, विवरण एवं नेस्टेड सूचियाँ

यह मॉड्यूल HTML में व्यवस्थित डेटा प्रस्तुति की तकनीकों को समझाता है: बुलेटेड अक्रमबद्ध सूचियाँ (<ul>), क्रमांकित क्रमबद्ध सूचियाँ (<ol>), क्रमांकन प्रारूप एवं आरंभिक मान, बहु-स्तरीय नेस्टेड सूचियाँ तथा शब्दावली परिभाषा सूचियाँ (<dl>)।

1. सूचियों (Lists) का महत्व

लगातार लंबे अनुच्छेदों को पढ़ना उपयोगकर्ताओं के लिए उबाऊ होता है। सूचियाँ पाठ्य सामग्री को छोटे, पठनीय एवं सुव्यवस्थित बिंदुओं में बाँट देती हैं। HTML में तीन प्रमुख प्रकार की सूचियाँ होती हैं:

2. अक्रमबद्ध सूचियाँ (Unordered Lists: <ul> ... </ul>)

जब मदों (Items) का कोई विशेष कालानुक्रमिक या प्राथमिकता क्रम न हो (जैसे पाठ्यपुस्तकों की सूची या खाद्य सामग्री), तब अक्रमबद्ध सूची का उपयोग किया जाता है। इसमें प्रत्येक बिंदु के आगे एक बुलेट चिह्न होता है।

सूची को <ul> ... </ul> के बीच लिखा जाता है और प्रत्येक मद हेतु <li> ... </li> (List Item) टैग लगाया जाता है। type एट्रिब्यूट द्वारा बुलेट का आकार बदला जा सकता है:

  • type="disc": ठोस भरा हुआ काला गोल वृत्त (डिफ़ॉल्ट)।
  • type="circle": खोखला गोल वृत्त (Hollow circle)।
  • type="square": ठोस भरा हुआ चौकोर काला वर्ग (Square)।

3. क्रमबद्ध सूचियाँ (Ordered Lists: <ol> ... </ol>)

जब मदों का क्रम महत्वपूर्ण हो (जैसे किसी प्रयोग के चरण, मेरिट लिस्ट या व्यंजन विधि), तब क्रमबद्ध सूची का उपयोग किया जाता है। ब्राउज़र स्वतः इन पर संख्याएँ अंकित करता है।

यह <ol> ... </ol> के अंदर <li> द्वारा लिखी जाती है। क्रमांकन शैली को नियंत्रित करने वाले प्रमुख गुण:

एट्रिब्यूट सिंटेक्स क्रमांकन शैली परिणामी उदाहरण
type="1" सामान्य अरबी अंक (डिफ़ॉल्ट) 1, 2, 3, 4, 5...
type="A" अंग्रेजी के बड़े अक्षर (Uppercase) A, B, C, D, E...
type="a" अंग्रेजी के छोटे अक्षर (Lowercase) a, b, c, d, e...
type="I" रोमन के बड़े अंक (Roman Upper) I, II, III, IV, V...
type="i" रोमन के छोटे अंक (Roman Lower) i, ii, iii, iv, v...
start="n" क्रमांक का आरंभिक मान (हमेशा पूर्णांक संख्या में!) <ol type="A" start="4"> 'D' से शुरू होगा!
reversed उल्टी गिनती (Descending countdown) 5, 4, 3, 2, 1...

4. नेस्टेड सूचियाँ (Nested Lists)

जब किसी मुख्य सूची के किसी मद (<li>) के अंदर कोई दूसरी सूची (क्रमबद्ध या अक्रमबद्ध) समाहित कर दी जाती है, तो उसे नेस्टेड सूची कहते हैं। इसका उपयोग बहु-स्तरीय रूपरेखा, पाठ्यक्रम के अध्याय और मेन्यू तैयार करने में होता है। ब्राउज़र आंतरिक सूची को स्वतः थोड़ा दाईं ओर खिसका देता है।

5. परिभाषा / विवरण सूचियाँ (<dl>, <dt>, <dd>)

शब्दावली, शब्दकोश या प्रश्नोत्तरी (FAQ) तैयार करने हेतु परिभाषा सूची का प्रयोग किया जाता है। इसमें न कोई बुलेट होती है और न कोई संख्या:

  • <dl> ... </dl>: Definition List कंटेनर, जो पूरी परिभाषा सूची को घेरता है।
  • <dt> ... </dt>: Definition Term, जो उस शब्द या पद को दर्शाता है जिसकी परिभाषा देनी है (बाएं संरेखित)।
  • <dd> ... </dd>: Definition Description, जो उस शब्द का विस्तृत विवरण या परिभाषा प्रस्तुत करता है (स्वतः इंडेंटेड)।

मल्टीमीडिया एकीकरण: इमेज टैग, पाथ संरचना एवं एलाइनमेंट

मॉड्यूल परिचय: मल्टीमीडिया एकीकरण: इमेज टैग, पाथ संरचना एवं एलाइनमेंट

यह मॉड्यूल वेबपेज पर छवियों को जोड़ने की वैज्ञानिक विधि सिखाता है: एम्प्टी <img> टैग के गुण, आकार नियंत्रण, रिलेटिव बनाम एब्सोल्यूट डायरेक्टरी पाथ, वैकल्पिक टेक्स्ट (alt) की अनिवार्यता एवं टेक्स्ट रैपिंग एलाइनमेंट।

1. <img> टैग की क्रियाविधि

वेबपेज में चित्र कभी भी भौतिक रूप से HTML फाइल के अंदर संचित नहीं होते। HTML फाइल में केवल <img> टैग के रूप में एक पॉइंटर (संकेतक) होता है, जो ब्राउज़र को यह बताता है कि चित्र की फाइल कहाँ रखी है और उसे किस आकार में स्क्रीन पर लाना है। चूँकि इसमें कोई टेक्स्ट नहीं होता, इसलिए यह पूर्णतः एक एम्प्टी टैग है और इसका कोई समापन टैग (</img>) नहीं होता।

2. <img> टैग के प्रमुख एट्रिब्यूट्स

एट्रिब्यूट अनिवार्यता विवरण एवं कार्य
src अनिवार्य "Source" का संक्षिप्त रूप। यह चित्र का सटीक URL या लोकल कंप्यूटर पाथ बताता है (उदा. src="school_logo.png")।
alt अत्यंत आवश्यक "Alternative Text"। यदि नेटवर्क धीमा हो या चित्र का पाथ गलत हो, तो यह टेक्स्ट स्क्रीन पर दिखता है। दृष्टिबाधितों हेतु स्क्रीन रीडर इसे बोलकर सुनाता है।
width / height वैकल्पिक चित्र की चौड़ाई और ऊँचाई पिक्सेल में (उदा. width="300") या प्रतिशत में निर्धारित करता है।
border वैकल्पिक चित्र के चारों ओर बॉर्डर फ्रेम की मोटाई पिक्सेल में तय करता है।
align वैकल्पिक चित्र और उसके चारों ओर टेक्स्ट के प्रवाह का संरेखन: left, right (टेक्स्ट चित्र के चारों ओर लिपट जाता है) या top, middle, bottom।

3. रिलेटिव (Relative) बनाम एब्सोल्यूट (Absolute) पाथ

चित्र प्रदर्शित न होने का सबसे मुख्य कारण गलत पाथ लिखना होता है। पाथ दो प्रकार के होते हैं:

क. एब्सोल्यूट पाथ (पूर्ण वैश्विक पता)

यह इंटरनेट पर किसी छवि का पूर्ण वेब पता (URL) या लोकल कंप्यूटर की रूट ड्राइव का पूरा पता होता है:

<img src="https://www.targetexams.com/assets/img/logo.png" alt="पोर्टल लोगो">

ख. रिलेटिव पाथ (HTML फाइल के सापेक्ष पता)

यह बताता है कि चित्र की फाइल उस स्थान से कहाँ रखी है जहाँ वर्तमान HTML फाइल सेव है। वेबसाइट निर्माण में हमेशा रिलेटिव पाथ का ही प्रयोग किया जाता है ताकि पूरे प्रोजेक्ट फोल्डर को किसी अन्य कंप्यूटर पर ले जाने पर लिंक न टूटे:

  • src="photo.jpg": चित्र उसी फोल्डर में है जिसमें HTML फाइल है।
  • src="images/photo.jpg": चित्र वर्तमान फोल्डर के अंदर मौजूद images नामक सब-फोल्डर में है।
  • src="../photo.jpg": ../ का अर्थ है कि एक स्तर ऊपर पैरेंट फोल्डर में जाकर चित्र ढूँढना है।

4. वेब इमेज फाइल प्रारूप

  • JPEG / JPG: फोटोग्राफ और प्राकृतिक दृश्यों हेतु आदर्श। संपीड़न अच्छा होता है किंतु पारदर्शिता (Transparency) का समर्थन नहीं करता।
  • PNG: पारदर्शी पृष्ठभूमि और शार्प किनारों हेतु उत्तम। स्कूल के लोगो, आइकन और आरेखों हेतु सर्वश्रेष्ठ।
  • GIF: 256 रंगों तक सीमित। छोटे एनिमेटेड बैनर हेतु प्रयुक्त।

हाइपरलिंक्स, एंकर नेविगेशन एवं HTML टेबल्स मास्टरक्लास

मॉड्यूल परिचय: हाइपरलिंक्स, एंकर नेविगेशन एवं HTML टेबल्स मास्टरक्लास

यह मॉड्यूल वेब निर्माण के सर्वोच्च स्तंभों को पूर्ण करता है: एंकर <a> टैग द्वारा हाइपरलिंक वास्तुकला, बाहरी/आंतरिक एवं इन-पेज बुकमार्क नेविगेशन, ईमेल लिंक्स तथा तालिकाओं (<table>, <tr>, <th>, <td>, colspan, rowspan) की संपूर्ण इंजीनियरिंग।

1. हाइपरलिंक इंजन: एंकर टैग (<a> ... </a>)

वर्ल्ड वाइड वेब का असली सामर्थ्य हाइपरलिंक्स में निहित है। एंकर कंटेनर टैग (<a> ... </a>) किसी भी टेक्स्ट या चित्र को एक क्लिक करने योग्य लिंक में बदल देता है।

एंकर टैग में href (Hypertext REFerence) एट्रिब्यूट अनिवार्य होता है, जो गंतव्य स्थान का पता बताता है:

चार प्रमुख हाइपरलिंकिंग स्वरूप:

  1. बाहरी वेबसाइट लिंक्स (External Links): इंटरनेट पर किसी अन्य वेबसाइट से जोड़ना:
    <a href="https://www.targetexams.com" target="_blank">टारगेट एग्जाम्स पोर्टल पर जाएँ</a>
    विशेष ध्यान दें: target="_blank" लगाने से लिंक सीधे एक नए ब्राउज़र टैब में खुलता है!
  2. आंतरिक वेबपेज लिंक्स (Internal Links): अपनी ही वेबसाइट के किसी अन्य HTML पेज से जोड़ना:
    <a href="about.html">हमारे बारे में</a>
  3. इन-पेज बुकमार्क लिंक्स (Intra-Page Bookmarks): उसी वेबपेज के किसी अन्य अनुभाग पर तुरंत कूदने हेतु। लक्ष्य हेडिंग में id दी जाती है और लिंक में हैश (#) लगाया जाता है:
    लिंक: <a href="#module3">मॉड्यूल 3 पर जाएँ</a>
    लक्ष्य: <h3 id="module3">मॉड्यूल 3: टेक्स्ट फॉर्मेटिंग</h3>
  4. ईमेल लिंक्स (mailto): उपयोगकर्ता का ईमेल सॉफ्टवेयर खोलकर पूर्व-निर्धारित पते पर मेल तैयार करना:
    <a href="mailto:info@biharboard.ac.in">हमें ईमेल भेजें</a>

2. चित्र को हाइपरलिंक बनाना

किसी चित्र को क्लिक करने योग्य बटन बनाने के लिए <img> टैग को एंकर टैग के अंदर समाहित कर दिया जाता है:

<a href="index.html">
  <img src="home_icon.png" alt="होमपेज पर जाएँ" width="40" height="40" border="0">
</a>

3. HTML टेबल संरचना: पंक्तियाँ, हेडर एवं डेटा सेल

तालिकाएँ परीक्षा की अंकतालिका, कक्षा की समय-सारणी, वैज्ञानिक आँकड़ों और वित्तीय बजट को क्षैतिज पंक्तियों एवं ऊर्ध्वाधर स्तंभों (कॉलमों) में व्यवस्थित करती हैं।

तालिका के चार प्रमुख निर्माण खंड:

  • <table> ... </table>: पूरी तालिका की बाहरी सीमा निर्धारित करने वाला मुख्य कंटेनर।
  • <caption> ... </caption>: तालिका का मुख्य शीर्षक (Caption) लिखने हेतु।
  • <tr> ... </tr>: Table Row। तालिका में एक क्षैतिज पंक्ति बनाता है। सभी हेडर और डेटा सेल पंक्ति के अंदर ही लिखे जाते हैं!
  • <th> ... </th>: Table Header। कॉलम का शीर्षक कक्ष बनाता है। ब्राउज़र स्वतः इसमें लिखे टेक्स्ट को बोल्ड (गाढ़ा) और केंद्र में संरेखित करता है।
  • <td> ... </td>: Table Data। सामान्य आँकड़ा कक्ष बनाता है। ब्राउज़र स्वतः इसमें लिखे टेक्स्ट को सामान्य वजन में और बाएं संरेखित करता है।

4. तालिका के प्रमुख स्वरूपण एट्रिब्यूट्स

  • border="n": तालिका के चारों ओर बॉर्डर की मोटाई पिक्सेल में। यदि इसे न लिखा जाए, तो तालिका की ग्रिड रेखाएँ अदृश्य हो जाती हैं!
  • cellpadding="pixels": सेल की दीवार (बॉर्डर) और उसके अंदर लिखे टेक्स्ट के बीच की दूरी (आंतरिक पैडिंग) तय करता है।
  • cellspacing="pixels": पास-पास स्थित दो सेलों के बीच की दूरी तय करता है।
  • width="pixels या %": स्क्रीन पर तालिका की कुल चौड़ाई (उदा. width="80%")।
  • bgcolor="color": पूरी तालिका, किसी विशिष्ट पंक्ति (<tr bgcolor="...">) या व्यक्तिगत सेल (<td bgcolor="...">) की पृष्ठभूमि का रंग।

5. सेल विस्तार: Colspan एवं Rowspan

व्यावहारिक तालिकाओं में कई बार किसी सेल को कई कॉलमों या कई पंक्तियों में फैलाना पड़ता है:

क्षैतिज विस्तार: colspan="n"

किसी एक <th> या <td> को क्षैतिज रूप से n कॉलमों में फैला देता है। colspan="3" लगाने पर उस पंक्ति में आगे के दो <td> हटा दिए जाते हैं।

ऊर्ध्वाधर विस्तार: rowspan="n"

किसी एक सेल को नीचे की तरफ n पंक्तियों में फैला देता है। नीचे की संबंधित पंक्तियों में एक-एक सेल कम लिखा जाता है क्योंकि यह सेल उनका स्थान घेर लेता है।

प्रोग्रामिंग सिंटेक्स, स्टेटमेंट्स एवं भाषा अनुवादक नियम

HTML दस्तावेज़ कंकाल एवं टैग पदानुक्रम ढाँचा
यह ढाँचा किसी भी मानक HTML वेब दस्तावेज़ के अनिवार्य पदानुक्रम को व्यवस्थित करता है। यह दस्तावेज़ प्रकार की घोषणा (), रूट कंटेनर (), गैर-दृश्यमान मेटाडेटा भाग (), ब्राउज़र टैब शीर्षक (), और दृश्यमान मुख्य पृष्ठ कैनवास (<body>) के परस्पर संबंधों को स्पष्ट करता है ताकि ब्राउज़र बिना किसी त्रुटि के वेबपेज को प्रदर्शित कर सके।</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> 2 अंक एवं 3 अंक के प्रश्नों में HTML का मूल कंकाल कोड लिखने और head व body में अंतर स्पष्ट करने हेतु अत्यंत महत्वपूर्ण।</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">कंटेनर बनाम एम्प्टी टैग्स एवं LIFO नेस्टिंग सिद्धांत</div> <div class="f-val">यह व्याकरणिक ढाँचा HTML तत्वों को युग्मित कंटेनर टैग्स और एकल एम्प्टी टैग्स में वर्गीकृत करने के नियमों को औपचारिक रूप प्रदान करता है। यह आरंभिक और समापन टैग की आवश्यकताओं, फॉरवर्ड स्लैश के उपयोग और तत्वों को एक-दूसरे के अंदर सुरक्षित रूप से नेस्ट करने हेतु 'लास्ट इन, फर्स्ट आउट' (LIFO) स्टैक सिद्धांत की अनिवार्यता को सिद्ध करता है ताकि ब्राउज़र रेंडरिंग में किसी प्रकार का ओवरलैपिंग दोष उत्पन्न न हो।</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> टैग वर्गीकरण, टूटे हुए कोड में सिंटेक्स त्रुटियाँ ढूँढने और कंटेनर बनाम रिक्त टैग्स की परिभाषा में पूरे अंक दिलाने वाला ढाँचा।</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">भौतिक बनाम तार्किक टेक्स्ट फ़ॉर्मैटिंग वर्गीकरण</div> <div class="f-val">यह टाइपोग्राफी ढाँचा इनलाइन टेक्स्ट फ़ॉर्मैटिंग टैग्स को दृश्य उपस्थिति (भौतिक) और अर्थपूर्ण उपयोगिता (तार्किक) में विभाजित करता है। यह शुद्ध दृष्टि-आधारित शैलियों (बोल्ड, इटैलिक, अंडरलाइन, टेलीटाइप) की तुलना स्क्रीन रीडर्स एवं सर्च इंजनों द्वारा समझे जाने वाले तार्किक महत्व (strong, em, mark, del) से करता है तथा वैज्ञानिक सुपरस्क्रिप्ट एवं सबस्क्रिप्ट का मानक तय करता है।</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> <b> और <strong> में अंतर, <i> और <em> की तुलना तथा रासायनिक/गणितीय समीकरणों को HTML कोड में लिखने वाले प्रश्नों हेतु उपयोगी।</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">Body दृश्य स्टाइलिंग, हेक्साडेसिमल RGB रंग एवं मार्जिन मैट्रिक्स</div> <div class="f-val">यह तकनीकी डिज़ाइन ढाँचा HTML <body> टैग के संपूर्ण कैनवास गुणों को व्यवस्थित करता है। यह 16 मूल रंग नामों की तुलना 6-अंकों वाले हेक्साडेसिमल RGB रंग कोड (#RRGGBB) से करता है, 00 से FF तक तीव्रता के गणितीय आधार को समझाता है तथा स्क्रीन मार्जिन (topmargin, leftmargin) और हाइपरलिंक अवस्थाओं (link, vlink, alink) के विन्यास को स्थापित करके आकर्षक एवं पेशेवर वेबपेज तैयार करने में मदद करता है।</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> हेक्साडेसिमल रंग प्रणाली की कार्यप्रणाली, RGB मानों की गणना एवं Body टैग के प्रमुख गुणों को सूचीबद्ध करने वाले प्रश्नों में उपयोगी।</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">सम्पूर्ण सूची निर्माण निर्देशिका (UL, OL, नेस्टेड एवं DL)</div> <div class="f-val">यह संरचनात्मक सूचना ढाँचा HTML में अक्रमबद्ध (<ul>), क्रमबद्ध (<ol>) और विवरण (<dl>) सूचियों के निर्माण का मार्गदर्शन करता है। यह बुलेट आकारों (disc, circle, square), क्रमांकन प्रकारों (1, a, A, i, I), आरंभिक ऑफसेट (start='n') और बहु-स्तरीय नेस्टेड रूपरेखा तैयार करने की वैज्ञानिक पद्धति को औपचारिक रूप प्रदान करता है ताकि वेबसाइटों पर जटिल डेटा पदानुक्रम को स्पष्टता से दिखाया जा सके।</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> नेस्टेड सूचियों का कोड लिखने, रोमन अंकों में सूची बनाने और परिभाषा सूचियों के उपयोग से जुड़े 4 अंक के प्रश्नों हेतु आवश्यक।</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">इमेज एकीकरण, पाथ समाधान एवं पहुँच क्षमता प्रोटोकॉल</div> <div class="f-val">यह मल्टीमीडिया इंजीनियरिंग ढाँचा एम्प्टी <img> टैग के माध्यम से वेबपेज पर छवियों को जोड़ने के नियमों को नियंत्रित करता है। यह एब्सोल्यूट URL और रिलेटिव डायरेक्टरी पाथ (./, ../, images/) के अंतर को स्पष्ट करता है, पिक्सेल/प्रतिशत में आकार निर्धारण के नियम बताता है और दृष्टिबाधितों एवं टूटे हुए लिंक्स हेतु वैकल्पिक टेक्स्ट (alt) की अनिवार्यता स्थापित करता है।</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> 3 अंक के प्रश्नों में <img> टैग का सिंटेक्स, उसके प्रमुख एट्रिब्यूट्स और टूटे हुए चित्र पाथ को सुधारने में अनिवार्य।</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">एंकर हाइपरलिंक नेविगेशन एवं बुकमार्क वास्तुकला</div> <div class="f-val">यह नेटवर्किंग एवं हाइपरटेक्स्ट ढाँचा <a> एंकर तत्व के माध्यम से वेब नेविगेशन का औपचारिक नियमन करता है। यह 'href' एट्रिब्यूट द्वारा बाहरी वेबसाइटों, आंतरिक प्रोजेक्ट पेजों, मेलटो ईमेल ट्रिगर्स और दस्तावेज़ के आंतरिक अनुभागों पर कूदने वाले बुकमार्क लिंक्स (#id) के निर्माण की पूरी कार्यप्रणाली स्पष्ट करता है जिससे पाठक बिना किसी बाधा के संपूर्ण वेबसाइट में अरेखीय (Non-linear) रूप से भ्रमण कर सके।</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> हाइपरलिंक की परिभाषा, आंतरिक बनाम बाहरी लिंक का अंतर और चित्र को हाइपरलिंक बनाने के प्रश्नों हेतु महत्वपूर्ण।</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">HTML टेबल इंजीनियरिंग, पैडिंग/स्पेसिंग एवं सेल विस्तार</div> <div class="f-val">यह डेटा इंजीनियरिंग ढाँचा बहु-कक्षीय तालिकाओं के निर्माण के सिद्धांतों को नियंत्रित करता है। यह <table>, <caption>, <tr>, <th>, <td> के पंक्तिबद्ध पदानुक्रम को स्थापित करता है, सेलपैडिंग (आंतरिक दूरी) और सेलस्पेसिंग (कक्षों के बीच दूरी) के अंतर को रेखांकित करता है तथा क्षैतिज colspan और ऊर्ध्वाधर rowspan द्वारा जटिल तालिकाओं के निर्माण की तकनीक सिखाता है।</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> बोर्ड परीक्षा का सबसे महत्वपूर्ण 5-अंक का प्रश्न, जिसमें अंकतालिका या समय-सारणी का पूरा HTML कोड लिखने को कहा जाता है।</div> </div> </div> </div> <!-- Section 1.6: Solved Examples & Application Questions --> <div class="sm-section-card" id="examples"> <div class="sm-sec-head"> <i class="fa-solid fa-graduation-cap" style="color:#059669;"></i> <h2>अवधारणात्मक हल उदाहरण एवं अनुप्रयोग (Solved Examples)</h2> </div> <div class="sm-examples-list"> <div class="sm-example-item"> <span class="q-badge">उदाहरण 1</span> <div class="q-text">HTML में कंटेनर टैग्स (Container Tags) और एम्प्टी टैग्स (Empty Tags) में अंतर स्पष्ट कीजिए। प्रत्येक का एक वैध उदाहरण दीजिए।</div> <div class="sol-box"> <div style="font-weight:700;color:#15803d;margin-bottom:6px;"><i class="fa-solid fa-check-circle me-1"></i> विस्तृत समाधान / उत्तर:</div> <div style="font-size:14px;color:#1e293b;line-height:1.7;">HTML में टैग्स को उनकी संरचना के आधार पर दो वर्गों में बाँटा गया है: 1. कंटेनर (युग्मित) टैग्स: इन टैग्स में आरंभिक टैग (<tag>) और समापन टैग (</tag>) दोनों होते हैं। ये अपने बीच टेक्स्ट या अन्य तत्वों को समाहित करते हैं। उदाहरण: `<p>यह एक पैराग्राफ है।</p>` या `<h1>शीर्षक</h1>`। 2. एम्प्टी (रिक्त / एकल) टैग्स: इन टैग्स में केवल आरंभिक टैग होता है और कोई समापन टैग नहीं होता, क्योंकि ये किसी टेक्स्ट को नहीं घेरते। ये स्वतंत्र कार्य करते हैं। उदाहरण: `<br>` (लाइन ब्रेक) या `<hr>` (क्षैतिज रेखा)।</div> </div> </div> <div class="sm-example-item"> <span class="q-badge">उदाहरण 2</span> <div class="q-text">HTML टेबल में 'cellpadding' और 'cellspacing' एट्रिब्यूट्स के बीच क्या अंतर है? उदाहरण सहित समझाइए।</div> <div class="sol-box"> <div style="font-weight:700;color:#15803d;margin-bottom:6px;"><i class="fa-solid fa-check-circle me-1"></i> विस्तृत समाधान / उत्तर:</div> <div style="font-size:14px;color:#1e293b;line-height:1.7;">ये दोनों एट्रिब्यूट्स टेबल में रिक्त स्थान को नियंत्रित करते हैं, किंतु इनकी सीमाएँ भिन्न हैं: 1. Cellpadding (सेलपैडिंग): यह सेल की बाहरी दीवार (बॉर्डर) और सेल के अंदर लिखे टेक्स्ट के बीच की आंतरिक दूरी तय करता है। सेलपैडिंग बढ़ाने से सेल के अंदर टेक्स्ट को सांस लेने की जगह मिलती है और वह बॉर्डर से नहीं चिपकता। 2. Cellspacing (सेलस्पेसिंग): यह पास-पास स्थित दो अलग-अलग सेलों के बीच की बाहरी दूरी को तय करता है। सेलस्पेसिंग बढ़ाने से सेलों के बीच की ग्रिड का फासला चौड़ा हो जाता है। कोड सिंटेक्स: `<table border="1" cellpadding="10" cellspacing="5">` 10 पिक्सेल की आंतरिक पैडिंग और 5 पिक्सेल की कक्षीय दूरी बनाता है।</div> </div> </div> <div class="sm-example-item"> <span class="q-badge">उदाहरण 3</span> <div class="q-text">भौतिक फ़ॉर्मैटिंग टैग्स (Physical Tags) और तार्किक फ़ॉर्मैटिंग टैग्स (Logical Tags) में क्या अंतर है? <b> और <strong> टैग्स की तुलना करके समझाइए।</div> <div class="sol-box"> <div style="font-weight:700;color:#15803d;margin-bottom:6px;"><i class="fa-solid fa-check-circle me-1"></i> विस्तृत समाधान / उत्तर:</div> <div style="font-size:14px;color:#1e293b;line-height:1.7;"><ol> <li>भौतिक फ़ॉर्मैटिंग टैग्स (Physical Tags): ये ब्राउज़र को केवल यह निर्देश देते हैं कि स्क्रीन पर अक्षर दृष्टिगत रूप से कैसे दिखने चाहिए। इनका कोई अंतर्निहित तार्किक या अर्थपूर्ण महत्व नहीं होता। उदाहरणार्थ, <code><b></code> टैग केवल टेक्स्ट को बोल्ड (गाढ़ा) करता है, किंतु यह सर्च इंजन को उस शब्द के महत्व की कोई सूचना नहीं देता।</li> <li>तार्किक फ़ॉर्मैटिंग टैग्स (Logical Tags): ये टेक्स्ट की केवल दिखावट नहीं बल्कि उसके अर्थ, उद्देश्य और महत्व को परिभाषित करते हैं। उदाहरणार्थ, <code><strong></code> टैग यह दर्शाता है कि लिखा गया टेक्स्ट अत्यंत महत्वपूर्ण है। आधुनिक ब्राउज़र इसे भी बोल्ड दिखाते हैं, किंतु दृष्टिबाधितों के 'स्क्रीन रीडर' सॉफ्टवेयर इसे पहचानकर ऊँची और गंभीर आवाज़ में बोलकर इसका महत्व प्रकट करते हैं।</li> </ol> </div> </div> </div> <div class="sm-example-item"> <span class="q-badge">उदाहरण 4</span> <div class="q-text">निम्नलिखित दो सूचियों को वेबपेज पर प्रदर्शित करने हेतु संपूर्ण HTML कोड लिखिए: (क) भारत की तीन प्रमुख नदियों की क्रमबद्ध सूची, जो रोमन के बड़े अंक 'IV' से शुरू हो। (ख) बिहार की तीन प्रमुख फसलों की अक्रमबद्ध सूची, जिसमें चौकोर (Square) बुलेट हो।</div> <div class="sol-box"> <div style="font-weight:700;color:#15803d;margin-bottom:6px;"><i class="fa-solid fa-check-circle me-1"></i> विस्तृत समाधान / उत्तर:</div> <div style="font-size:14px;color:#1e293b;line-height:1.7;">दोनों सूचियों को प्रदर्शित करने हेतु संपूर्ण एवं मानक HTML कोड निम्नलिखित है: ```html <!DOCTYPE html> <html> <head> <title>सूचियों का प्रदर्शन

भारत की प्रमुख नदियाँ (क्रमबद्ध सूची)

  1. गंगा
  2. यमुना
  3. ब्रह्मपुत्र

बिहार की प्रमुख फसलें (अक्रमबद्ध सूची)

  • धान (चावल)
  • गेहूँ
  • मक्का
```
उदाहरण 5
एक HTML कोड स्निपेट लिखिए जो 'bihar_monument.jpg' नामक चित्र को 350 पिक्सेल चौड़ाई और 2 पिक्सेल बॉर्डर के साथ प्रदर्शित करे, उसका वैकल्पिक टेक्स्ट 'बिहार का ऐतिहासिक स्मारक' हो, तथा उस चित्र पर क्लिक करने पर 'https://tourism.bihar.gov.in' वेबसाइट एक नए ब्राउज़र टैब में खुले।
विस्तृत समाधान / उत्तर:

चित्र को नए टैब में खुलने वाले बाहरी हाइपरलिंक में बदलने के लिए &lt;img&gt; टैग को target="_blank" युक्त &lt;a&gt; एंकर टैग के अंदर रखा जाता है:

&lt;a href="https://tourism.bihar.gov.in" target="_blank"&gt;
  &lt;img src="bihar_monument.jpg" 
       alt="बिहार का ऐतिहासिक स्मारक" 
       width="350" 
       border="2"&gt;
&lt;/a&gt;

तत्वों की व्याख्या:

  1. &lt;a href="..." target="_blank"&gt;: पर्यटन पोर्टल का गंतव्य लिंक, जहाँ target="_blank" ब्राउज़र को नए टैब में पेज खोलने का निर्देश देता है।
  2. &lt;img src="..." ...&gt;: चित्र को जोड़ने वाला एम्प्टी टैग, जिसमें आवश्यक alt, width एवं border एट्रिब्यूट्स लगे हैं।
उदाहरण 6
कक्षा 8 की परीक्षा परिणाम तालिका (3 पंक्तियाँ और 3 कॉलम) तैयार करने हेतु मानक HTML कोड लिखिए। पहली पंक्ति में तीनों कॉलमों को 'colspan' द्वारा जोड़कर केंद्र में 'कक्षा 8 अर्धवार्षिक अंकतालिका' शीर्षक होना चाहिए। दूसरी पंक्ति में 'क्रमांक', 'विद्यार्थी का नाम' और 'प्राप्तांक' के हेडर होने चाहिए। तीसरी पंक्ति में किसी एक छात्र का डेटा रिकॉर्ड हो। तालिका में बॉर्डर 2 पिक्सेल और सेलपैडिंग 8 पिक्सेल रखें।
विस्तृत समाधान / उत्तर:
निर्दिष्ट अंकतालिका तालिका का निर्माण करने वाला संपूर्ण HTML दस्तावेज़ निम्नलिखित है: ```html कक्षा 8 परीक्षा परिणाम

बिहार विद्यालय परीक्षा बोर्ड

वार्षिक शैक्षणिक मूल्यांकन
कक्षा 8 अर्धवार्षिक अंकतालिका
क्रमांक विद्यार्थी का नाम प्राप्तांक
101 आरव कुमार 94
``` प्रमुख संरचनात्मक विशेषताएँ: - `colspan="3"`: पहली पंक्ति में तीनों कॉलमों को क्षैतिज रूप से जोड़ देता है जिससे शीर्षक पूरी तालिका पर सुंदर रूप से फैल जाता है। - `border="2"` एवं `cellpadding="8"`: स्पष्ट बॉर्डर रेखा और अक्षरों के चारों ओर 8 पिक्सेल का आरामदायक स्थान प्रदान करता है।

सामान्य गलतियाँ एवं परीक्षक के जाल (Examiner Traps)

सामान्य भ्रम / गलत उत्तर

विद्यार्थी प्रायः रिक्त टैग्स के आगे समापन टैग लिख देते हैं, जैसे `
` के बाद `
` या `` के बाद `` लिखना।

सही वैज्ञानिक तथ्य

एम्प्टी टैग्स (जैसे `
`, `
`, ``, ``) के अंदर कोई टेक्स्ट नहीं होता, इसलिए इनका कोई समापन टैग नहीं होता। `
` या `` लिखना अमान्य HTML सिंटेक्स है।

सामान्य भ्रम / गलत उत्तर

विद्यार्थी टैग्स को मनमाने क्रम में बंद करते हैं, जैसे `

महत्वपूर्ण पाठ

` लिखना।

सही वैज्ञानिक तथ्य

HTML में LIFO (लास्ट इन, फर्स्ट आउट) नियम लागू होता है। जो टैग सबसे बाद में खोला गया है, उसे सबसे पहले बंद किया जाना चाहिए। सही नेस्टिंग: `

महत्वपूर्ण पाठ

`।

सामान्य भ्रम / गलत उत्तर

यह मान लेना कि cellpadding सेलों के बीच की दूरी तय करता है और cellspacing सेल के अंदर की दूरी तय करता है।

सही वैज्ञानिक तथ्य

सच्चाई इसके ठीक उलट है! `cellpadding` आंतरिक दूरी (टेक्स्ट और सेल बॉर्डर के बीच) तय करता है, जबकि `cellspacing` बाहरी दूरी (दो सेलों के बीच) तय करता है।

सामान्य भ्रम / गलत उत्तर

यह सोचना कि `src="photo.jpg"` लिखने से डेस्कटॉप पर रखा चित्र हमेशा आ जाएगा, या alt एट्रिब्यूट को गैर-जरूरी समझना।

सही वैज्ञानिक तथ्य

रिलेटिव पाथ केवल उसी फोल्डर में चित्र ढूँढता है जहाँ HTML फाइल रखी है। यदि चित्र 'images' फोल्डर में है, तो पाथ `src="images/photo.jpg"` होना चाहिए। साथ ही 'alt' दृष्टिबाधितों और टूटे लिंक हेतु अनिवार्य है।

सामान्य भ्रम / गलत उत्तर

हेक्साडेसिमल रंग को `bgcolor="FF0000"` या इन-पेज बुकमार्क लिंक को `` लिखना।

सही वैज्ञानिक तथ्य

हेक्साडेसिमल कोड के आगे हैश लगाना अनिवार्य है (उदा. `bgcolor="#FF0000"`), अन्यथा ब्राउज़र भ्रमित हो जाता है। इसी तरह इन-पेज बुकमार्क लिंक में आईडी के आगे हैश लगाना अनिवार्य है (उदा. `href="#sec1"`)।

अध्याय का सार संक्षेप एवं 10 मुख्य निष्कर्ष

मुख्य बिंदु 1
बिहार विद्यालय परीक्षा बोर्ड (BSEB) कक्षा 8 कंप्यूटर विज्ञान का अध्याय 6 'हाइपर टेक्स्ट मार्कअप लैंग्वेज (HTML)' वेब पेज निर्माण एवं डिजिटल दस्तावेज़ संरचना का एक अत्यंत व्यापक और व्यावहारिक पाठ्यक्रम प्रस्तुत करता है। सर टिम बर्नर्स-ली द्वारा 1989-1991 में सर्न में आविष्कृत HTML आधुनिक इंटरनेट और वर्ल्ड वाइड वेब का सार्वभौमिक आधार है। यह अध्याय विद्यार्थियों को शून्य से प्रारंभ करके मानक-अनुरूप वेबपेज बनाने के सभी सैद्धांतिक और कोडिंग सिद्धांतों में दक्ष बनाता है।
मुख्य बिंदु 2
विद्यार्थी सबसे पहले दस्तावेज़ के संरचनात्मक कंकाल का अध्ययन करते हैं—जिसमें गैर-दृश्यमान मेटाडेटा भाग () और ब्राउज़र के दृश्यमान कैनवास () का रूट के अंदर संयोजन सीखा जाता है। पाठ्यक्रम कंटेनर टैग्स (जैसे

,

-

, ) और एम्प्टी टैग्स (जैसे
,
, ) के व्याकरणिक भेद को दृढ़ता से स्थापित करता है। विद्यार्थी एट्रिब्यूट सिंटेक्स, केस इनसेंसिटिविटी, व्हाइटस्पेस संकुचन नियम और LIFO (लास्ट इन, फर्स्ट आउट) स्टैक नेस्टिंग का गहन अभ्यास करते हैं।
मुख्य बिंदु 3
पृष्ठ प्रस्तुति के अंतर्गत भौतिक फ़ॉर्मैटिंग (बोल्ड, इटैलिक, अंडरलाइन) और तार्किक फ़ॉर्मैटिंग (, ) के सैद्धांतिक अंतर को स्पष्ट किया गया है, साथ ही गणितीय घातों () और रासायनिक सूत्रों () का समाधान दिया गया है। बॉडी कैनवास के अनुकूलन में 1.67 करोड़ रंगों वाली हेक्साडेसिमल RGB प्रणाली (#RRGGBB), वॉलपेपर टाइलिंग और पिक्सेल मार्जिन का वैज्ञानिक विश्लेषण शामिल है।
मुख्य बिंदु 4
सूचनाओं को व्यवस्थित करने हेतु अक्रमबद्ध सूचियों (
    ), विभिन्न क्रमांकन प्रकारों एवं आरंभिक मानों वाली क्रमबद्ध सूचियों (
      ), नेस्टेड सूचियों और परिभाषा सूचियों (
      ,
      ,
      ) का निर्माण सिखाया जाता है। मल्टीमीडिया एकीकरण में टैग के माध्यम से रिलेटिव बनाम एब्सोल्यूट डायरेक्टरी पाथ और वैकल्पिक टेक्स्ट (alt) की पहुँच क्षमता को समझाया गया है।
मुख्य बिंदु 5
अध्याय के अंतिम चरण में वेब नेविगेशन और डेटा इंजीनियरिंग का मास्टरक्लास प्रस्तुत किया गया है। एंकर टैग () द्वारा बाहरी वेबसाइटों, आंतरिक पेजों, इन-पेज बुकमार्क (#id) और मेलटो ईमेल लिंक्स का निर्माण किया जाता है। तालिकाओं के निर्माण में , ,
, और के साथ-साथ सेलपैडिंग, सेलस्पेसिंग, क्षैतिज विस्तार (colspan) और ऊर्ध्वाधर विस्तार (rowspan) के व्यावहारिक अनुप्रयोग द्वारा वास्तविक परीक्षा अंकतालिकाएँ और समय-सारणी डिजाइन करने की पूर्ण क्षमता विकसित की जाती है।

स्व-मूल्यांकन अभ्यास (Check Your Understanding)

मूल वैचारिक स्पष्टता की जांच के लिए नैदानिक प्रश्न। पहले स्वयं हल करें, फिर उत्तर देखें।

1
HTML को 'प्रोग्रामिंग भाषा' न कहकर 'मार्कअप भाषा' क्यों कहा जाता है?
उत्तर एवं व्याख्या देखें
उत्तर: HTML को मार्कअप भाषा इसलिए कहा जाता है क्योंकि यह टैग्स के माध्यम से सामान्य टेक्स्ट को केवल चिह्नित (मार्क) करती है ताकि ब्राउज़र यह समझ सके कि उसे स्क्रीन पर कैसे दिखाना है। C++ या Q-Basic जैसी प्रोग्रामिंग भाषाओं के विपरीत, HTML में कोई गणितीय गणना, चर (Variables), तार्किक शर्तें (IF-THEN) या लूप्स नहीं होते हैं जो एल्गोरिदम चला सकें।
2
HTML दस्तावेज़ में चित्र जोड़ते समय एब्सोल्यूट पाथ और रिलेटिव पाथ में क्या अंतर होता है?
उत्तर एवं व्याख्या देखें
उत्तर: एब्सोल्यूट पाथ किसी फाइल का पूर्ण वेब पता (URL: जैसे https://site.com/pic.jpg) या कंप्यूटर की पूरी ड्राइव का पता होता है। रिलेटिव पाथ वर्तमान HTML फाइल के फोल्डर के सापेक्ष फाइल का स्थान बताता है (जैसे images/pic.jpg)। प्रोजेक्ट को किसी भी अन्य कंप्यूटर पर बिना लिंक टूटे चलाने हेतु रिलेटिव पाथ ही सर्वोत्तम माना जाता है।
3
निम्नलिखित HTML कोड स्निपेट में उपस्थित सभी सिंटेक्स त्रुटियों को पहचानकर सही कोड लिखिए: `

बिहार बोर्ड में स्वागत है



`
उत्तर एवं व्याख्या देखें
उत्तर: त्रुटियाँ एवं सुधार: 1. टैग नेस्टिंग का उल्लंघन:

को और से पहले गलत क्रम में बंद किया गया है। LIFO नियम के अनुसार पहले बंद होगा, फिर , और अंत में

। 2. एम्प्टी टैग का अमान्य समापन: `
` एक एम्प्टी टैग है, अतः इसका कोई क्लोजिंग टैग `
` नहीं हो सकता। संशोधित शुद्ध कोड: `

बिहार बोर्ड में स्वागत है


`
4
एक HTML कोड स्निपेट लिखिए जो कंप्यूटर मेमोरी उपकरणों की चार मदों वाली क्रमबद्ध सूची बनाए, जिसमें छोटे रोमन अंक (i, ii, iii, iv) हों तथा वह विशेष रूप से संख्या 3 (iii) से प्रारंभ हो।
उत्तर एवं व्याख्या देखें
उत्तर: कोड स्निपेट: `
  1. RAM
  2. ROM
  3. हार्ड डिस्क
  4. पेन ड्राइव
` (विशेष ध्यान: 'start' एट्रिब्यूट का मान हमेशा दशमलव पूर्णांक संख्या में ही दिया जाता है)।
5
HTML टेबल में 'colspan' और 'rowspan' की भूमिका समझाइए। दो कॉलमों को क्षैतिज रूप से जोड़ने वाले सेल का कोड स्निपेट लिखिए।
उत्तर एवं व्याख्या देखें
उत्तर: 1. 'colspan': एक ही पंक्ति में दो या अधिक क्षैतिज कॉलम कक्षों को मिलाकर एक चौड़ा कक्ष बनाता है। 2. 'rowspan': एक ही कॉलम में दो या अधिक ऊर्ध्वाधर पंक्ति कक्षों को नीचे की तरफ मिलाकर एक लंबा कक्ष बनाता है। Colspan का कोड स्निपेट: `
विद्यार्थी का पूरा नाम
आरव कुमार
`
अध्याय का अध्ययन पूर्ण हुआ?
अभ्यास के लिए तैयार?

ऑनलाइन CBT टेस्ट देकर तैयारी का मूल्यांकन करें

BSEB परीक्षा पैटर्न पर आधारित बहुविकल्पीय प्रश्नों का ऑनलाइन टेस्ट दें। तुरंत परिणाम, समय विश्लेषण और प्रत्येक प्रश्न का विस्तृत हल प्राप्त करें।

फाउंडेशन टेस्ट
15 MCQs • मूल अवधारणाएँ
एडवांस्ड टेस्ट
15 MCQs • HOTS और ट्रैप्स

कक्षा 8 Computer Science के सभी अध्याय

अध्याय 1: कंप्यूटर भाषा का परिचय (Introduction to Computer Language) अध्याय 2: डेटाबेस का परिचय (Introduction to Database) अध्याय 3: एमएस एक्सेस: डीबीएमएस (MS Access a DBMS) अध्याय 4: कंप्यूटर नेटवर्किंग (Computer Networking) अध्याय 5: फ्लैश का परिचय (Introduction to Flash) अध्याय 6: हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML) अध्याय 7: फॉर्म्स, क्वेरी एवं रिपोर्ट्स (Forms, Queries and Reports) अध्याय 8: क्यू-बेसिक (Q-Basic)

AI अध्ययन मित्र

त्वरित शंका समाधान

हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML) में कोई संदेह या प्रश्न है? हमारे AI अध्ययन मित्र से तुरंत समझें।

STAY UPDATED

Get the Latest Updates

New test series, syllabus updates, exam notifications and more.

Syllabus
Updates
Exam
Alerts
Study
Resources