HTML और DHTML को तकनीकी और सरल शुद्ध हिंदी में नीचे क्रमानुसार समझाया गया है:
1. HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज)
HTML वेब विकास का आधार (Base) है। यह किसी भी वेबसाइट की संरचना या “कंकाल” तैयार करता है।
-
हाइपरटेक्स्ट: इसका अर्थ है वह टेक्स्ट जिसमें अन्य वेब पेजों के लिंक जुड़े हों।
-
मार्कअप: इसका अर्थ है ‘टैग्स’ का उपयोग करके सामग्री (Content) को व्यवस्थित करना।
मुख्य विशेषताएँ:
-
यह एक स्थिर (Static) भाषा है। एक बार पेज लोड होने के बाद, इसका कंटेंट अपने आप नहीं बदलता।
-
इसका उपयोग शीर्षक (Headings), अनुच्छेद (Paragraphs), चित्र और तालिकाओं (Tables) को दर्शाने के लिए किया जाता है।
2. DHTML (डायनामिक हाइपरटेक्स्ट मार्कअप लैंग्वेज)
DHTML कोई स्वतंत्र प्रोग्रामिंग भाषा नहीं है, बल्कि यह तकनीकों का एक समूह है। इसका मुख्य उद्देश्य वेब पेज को गतिशील (Dynamic) और संवादात्मक (Interactive) बनाना है।
जब हम HTML के साथ CSS और JavaScript को मिला देते हैं, तो वह DHTML कहलाता है।
DHTML के मुख्य स्तंभ:
-
HTML: पेज की संरचना के लिए।
-
CSS: पेज की रूपरेखा और सुंदरता के लिए।
-
JavaScript: पेज में जान डालने या क्रियाशीलता (Logic) के लिए।
-
DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल): यह वह माध्यम है जिससे JavaScript किसी भी HTML तत्व को बदल सकती है।
3. HTML और DHTML में मुख्य अंतर
| विशेषता | HTML | DHTML |
| प्रकृति | यह स्थिर (Static) है। | यह गतिशील (Dynamic) है। |
| परिवर्तन | पेज को बदले बिना सामग्री नहीं बदल सकती। | बिना पेज रिफ्रेश किए सामग्री बदली जा सकती है। |
| जटिलता | यह सरल और सीखने में आसान है। | यह थोड़ा कठिन है क्योंकि इसमें स्क्रिप्टिंग शामिल है। |
| उपयोग | साधारण जानकारी दिखाने के लिए। | एनिमेशन, ड्रॉप-डाउन मेनू और गेम्स के लिए। |
4. व्यावसायिक उदाहरण (Professional Example)
कल्पना कीजिए कि आप एक वेबसाइट देख रहे हैं:
-
HTML का कार्य: स्क्रीन पर एक “लॉगिन बटन” दिखाना।
-
DHTML का कार्य: जैसे ही आप उस बटन पर माउस ले जाएं (Hover करें), बटन का रंग बदल जाए या एक छोटा सा एनिमेशन दिखाई दे। यह बिना पेज को दोबारा लोड किए होता है।
5. निष्कर्ष
पेशेवर दृष्टिकोण से, HTML वह ईंटें और सीमेंट है जिससे घर बनता है, जबकि DHTML वह बिजली और ऑटोमेशन प्रणाली है जो घर के दरवाजों को अपने आप खुलने या लाइटों को जलने की शक्ति देती है।
आज के आधुनिक युग में, हम DHTML शब्द का प्रयोग कम करते हैं, लेकिन इसके सिद्धांत (HTML + CSS + JS) ही पूरी आधुनिक वेब दुनिया को चला रहे हैं।
HTML के मूल टैग्स (Basic Tags) एक वेबसाइट की नींव होते हैं। यहाँ सबसे महत्वपूर्ण टैग्स का वर्गीकरण और उनका विवरण दिया गया है:
1. दस्तावेज़ संरचना टैग (Document Structure Tags)
यह टैग्स ब्राउज़र को बताते हैं कि यह एक HTML फ़ाइल है।
-
<!DOCTYPE html>: यह ब्राउज़र को सूचित करता है कि दस्तावेज़ HTML5 में लिखा गया है। -
<html>: यह संपूर्ण HTML दस्तावेज़ का मुख्य (Root) तत्व है। -
<head>: इसमें पेज की तकनीकी जानकारी होती है (जैसे Title, CSS, Meta tags), जो यूजर को सीधे पेज पर नहीं दिखती। -
<title>: यह ब्राउज़र के टैब पर दिखने वाला नाम निर्धारित करता है। -
<body>: वेबसाइट का सारा दिखने वाला कंटेंट (Text, Images, Buttons) इसी के अंदर होता है।
2. टेक्स्ट फॉर्मेटिंग टैग (Text Formatting Tags)
सामग्री को व्यवस्थित और पठनीय बनाने के लिए इनका उपयोग होता है।
-
<h1>से<h6>: ये शीर्षक (Headings) के लिए हैं।<h1>सबसे बड़ा और मुख्य शीर्षक होता है, जबकि<h6>सबसे छोटा। -
<p>: यह अनुच्छेद (Paragraph) बनाने के लिए उपयोग किया जाता है। -
<br>: लाइन को तोड़ने (Line Break) के लिए। इसका कोई क्लोजिंग टैग नहीं होता। -
<b>या<strong>: टेक्स्ट को मोटा (Bold) करने के लिए। -
<i>या<em>: टेक्स्ट को तिरछा (Italic) करने के लिए।
3. लिंक और मीडिया टैग (Link & Media Tags)
वेबसाइट को मल्टीमीडिया और अन्य पेजों से जोड़ने के लिए।
-
<a href="URL">: यह हाइपरलिंक बनाने के लिए है।hrefएट्रिब्यूट में लिंक का पता दिया जाता है। -
<img src="image.jpg">: पेज पर चित्र (Image) लगाने के लिए।srcमें फोटो का पाथ औरaltमें उसका विवरण दिया जाता है।
4. लिस्ट टैग (List Tags)
जानकारी को बिंदुओं (Points) में दर्शाने के लिए।
-
<ul>: अनियंत्रित सूची (Unordered List) – इसमें बुलेट पॉइंट्स आते हैं। -
<ol>: क्रमित सूची (Ordered List) – इसमें नंबर (1, 2, 3) आते हैं। -
<li>: लिस्ट की हर एक वस्तु (List Item) को इसके अंदर लिखा जाता है।
5. टेबल और फॉर्म टैग (Table & Form Tags)
डेटा इकट्ठा करने और व्यवस्थित दिखाने के लिए।
-
<table>: डेटा को पंक्तियों और स्तंभों (Rows & Columns) में दिखाने के लिए। -
<form>: यूजर से जानकारी (जैसे नाम, ईमेल) लेने के लिए एक फॉर्म बनाता है। -
<input>: इसमें यूजर अपनी जानकारी टाइप करता है (जैसे Textbox, Checkbox)।
उदाहरण कोड (A Simple Example)
HTML
<!DOCTYPE html>
<html>
<head>
<title>मेरा पहला वेब पेज</title>
</head>
<body>
<h1>नमस्ते, दुनिया!</h1>
<p>यह HTML में लिखा गया एक <b>शुद्ध हिंदी</b> अनुच्छेद है।</p>
<h3>मेरी पसंदीदा चीजें:</h3>
<ul>
<li>कोडिंग करना</li>
<li>इतिहास पढ़ना</li>
</ul>
<a href="https://www.google.com">गूगल पर जाएँ</a>
</body>
</html>
इन टैग्स के अलावा, क्या आप Attributes (जैसे id, class, style) के बारे में विस्तार से जानना चाहेंगे, जो इन टैग्स को और अधिक नियंत्रित करते हैं?
Practice Quiz
Q: एच.टी.एम.एल. (HTML) का पूर्ण रूप क्या है?
Show Correct Answer
एच.टी.एम.एल. का अर्थ हाइपरटेक्स्ट मार्कअप लैंग्वेज है, जिसका उपयोग वेब पेज की संरचना बनाने के लिए किया जाता है।
Q: डी.एच.टी.एम.एल. (DHTML) का मुख्य उद्देश्य क्या है?
Show Correct Answer
डी.एच.टी.एम.एल. कोई भाषा नहीं बल्कि एच.टी.एम.एल., सी.एस.एस. और जावास्क्रिप्ट का संयोजन है जो पेज को गतिशील बनाता है।
Q: एच.टी.एम.एल. में सबसे बड़ा हेडिंग टैग कौन सा है?
Show Correct Answer
टैग का उपयोग सबसे महत्वपूर्ण और बड़े आकार की हेडलाइन दिखाने के लिए किया जाता है।
Q: नई पंक्ति (Line break) जोड़ने के लिए किस टैग का उपयोग किया जाता है?
Show Correct Answer
टैग एक रिक्त टैग है जिसका उपयोग टेक्स्ट के बीच में अगली पंक्ति पर जाने के लिए होता है।
Q: हाइपरलिंक बनाने के लिए सही सिंटैक्स क्या है?
Show Correct Answer
'href' एट्रिब्यूट का उपयोग उस गंतव्य यू.आर.एल. को निर्दिष्ट करने के लिए किया जाता है जहाँ लिंक ले जाएगा।
Q: डी.एच.टी.एम.एल. किन तकनीकों का समूह है?
Show Correct Answer
डी.एच.टी.एम.एल. मुख्य रूप से एच.टी.एम.एल. (संरचना), सी.एस.एस. (शैली) और जावास्क्रिप्ट (व्यवहार) के मेल से बनता है।
Q: एच.टी.एम.एल. में अक्रमित सूची (Unordered List) के लिए कौन सा टैग है?
Show Correct Answer
- टैग का उपयोग बुलेट वाली सूची बनाने के लिए किया जाता है।
Q: छवि (Image) प्रदर्शित करने के लिए कौन सा एट्रिब्यूट अनिवार्य है?
Show Correct Answer
'src' एट्रिब्यूट छवि का स्रोत या फ़ाइल पथ बताने के लिए अनिवार्य रूप से उपयोग किया जाता है।
Q: डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) किसका हिस्सा है?
Show Correct Answer
डोम (DOM) डी.एच.टी.एम.एल. का एक महत्वपूर्ण अंग है जो प्रोग्रामिंग के माध्यम से तत्वों को बदलने की अनुमति देता है।
Q: तालिका (Table) में पंक्ति बनाने के लिए किस टैग का उपयोग होता है?
Show Correct Answer
Q: एच.टी.एम.एल. का आविष्कार किसने किया था?
Show Correct Answer
टिम बर्नर्स-ली ने 1991 में सर्न (CERN) में एच.टी.एम.एल. का पहला संस्करण विकसित किया था।
Q: एच.टी.एम.एल. दस्तावेजों को किस एक्सटेंशन के साथ सहेजा (save) जाता है?
Show Correct Answer
वेब ब्राउज़र एच.टी.एम.एल. फाइलों को पहचानने के लिए .html एक्सटेंशन का उपयोग करते हैं।
Q: एच.टी.एम.एल. 5 में 'Canvas' टैग का क्या उपयोग है?
Show Correct Answer
कैनवस टैग का उपयोग जावास्क्रिप्ट के माध्यम से वेब पेज पर चित्र और आकृतियाँ बनाने के लिए किया जाता है।
Q: जिन टैग्स का कोई समापन (Closing) टैग नहीं होता, उन्हें क्या कहते हैं?
Show Correct Answer
रिक्त टैग जैसे
और को बंद करने की आवश्यकता नहीं होती है।
Q: एच.टी.एम.एल. में टिप्पणी (Comment) लिखने का सही तरीका क्या है?
Show Correct Answer
एच.टी.एम.एल. में टिप्पणियों को ब्राउज़र द्वारा अनदेखा किया जाता है और इन्हें '' के बीच लिखा जाता है।
Q: कौन सा एट्रिब्यूट किसी तत्व को विशिष्ट पहचान देता है?
Show Correct Answer
'id' एट्रिब्यूट का उपयोग पूरे दस्तावेज में किसी एक तत्व को विशिष्ट रूप से पहचानने के लिए किया जाता है।
Q: वर्ल्ड वाइड वेब कंसोर्टियम (W3C) की मुख्य भूमिका क्या है?
Show Correct Answer
W3C एक अंतरराष्ट्रीय समुदाय है जो वेब के लिए मानक और दिशा-निर्देश विकसित करता है।
Q: ड्रॉपडाउन सूची बनाने के लिए किस टैग का उपयोग किया जाता है?
Show Correct Answer
टैग का उपयोग चयन सूची बनाने के लिए किया जाता है जिसमें कई विकल्प होते हैं।
Q: एच.टी.एम.एल. 5 में मुख्य सामग्री के लिए कौन सा टैग है?
Show Correct Answer
Q: इनलाइन तत्वों (Inline elements) का एक उदाहरण कौन सा है?
Show Correct Answer
एक इनलाइन तत्व है जो केवल उतनी ही चौड़ाई लेता है जितनी उसकी सामग्री के लिए आवश्यक हो।
Q: डी.एच.टी.एम.एल. में जावास्क्रिप्ट का क्या कार्य है?
Show Correct Answer
जावास्क्रिप्ट डी.एच.टी.एम.एल. में घटनाओं (Events) को संभालने और सामग्री को गतिशील रूप से बदलने का कार्य करती है।
Q: बाहरी सी.एस.एस. फाइल को जोड़ने के लिए किस टैग का उपयोग होता है?
Show Correct Answer
टैग का उपयोग बाहरी स्टाइल शीट को एच.टी.एम.एल. फाइल से जोड़ने के लिए किया जाता है।
Q: तालिका के शीर्षक (Header) को परिभाषित करने के लिए कौन सा टैग है?
Show Correct Answer
Q: फॉर्म में पासवर्ड इनपुट के लिए सही प्रकार क्या है?
Show Correct Answer
'password' प्रकार का उपयोग करने से इनपुट किए गए अक्षर छिप जाते हैं (बिंदु या सितारों के रूप में)।
Q: रेडियो बटन बनाने के लिए किस टैग का उपयोग किया जाता है?
Show Correct Answer
रेडियो बटन का उपयोग तब किया जाता है जब उपयोगकर्ता को कई विकल्पों में से केवल एक को चुनना हो।