डायनेमिक एचटीएमएल (Dynamic HTML) का स्रोत देखें

{{Manual|date=December 2008}}
{{Html series}}

'''डायनेमिक एचटीएमएल (dynamic HTML)''' या '''DHTML''', इंटरैक्टिव और एनिमेटेड वेब साइट बनाने के लिए प्रौद्योगिकियों के एक संग्रह के लिए प्रयुक्त एक बृहद शब्दावली है।<ref>{{Cite web |url=http://www.w3schools.com/Dhtml/default.asp |title=संग्रहीत प्रति |access-date=9 फ़रवरी 2011 |archive-url=https://web.archive.org/web/20060805060110/http://www.w3schools.com/dhtml/default.asp |archive-date=5 अगस्त 2006 |url-status=dead }}</ref> इसके लिए स्टेटिक मार्कअप भाषा (जैसे [[एचटीएमएल|HTML]]), एक क्लाइंट-साइड स्क्रिप्टिंग भाषा (जैसे [[जावास्क्रिप्ट|जावास्क्रिप्ट (JavaScript)]]), एक प्रेजेनटेशन डेफीनेशन भाषा (जैसे सीएसएस (CSS)) और डोकुमेंट ऑब्जेक्ट मॉडल का इस्तेमाल किया जाता है।<ref> http://books.google.co.in/books?id=AuO923YJTX4C&amp;pg=PA22&amp;dq=dhtml+scripting+languages&amp;ei=mT2CSui-I42SkATfu6GXCg#v=onepage&amp;q=dhtml%20scripting%20languages&amp;f=false</ref>

DHTML एक वेब पृष्ठ के डेफीनेशन भाषा में चर वस्तुओं को बदलने के लिए स्क्रिप्टिंग भाषाओं की अनुमति देता है, जो कि पृष्ठ को पूरी तरह से लोड करने के ''बाद'' और देखने की प्रक्रिया के दौरान स्टेटिक HTML पृष्ठ सामग्री के दृश्य और अन्यथा कार्यों को प्रभावित करता है। अतः DHTML की गतिशील विशेषता वह तरिका है जिस तरीके से वह पृष्ठ को देखे जाते समय कार्य करता है और प्रत्येक पृष्ठ के लोड होने के साथ एक अद्वितीय पृष्ठ उत्पन्न करने की इसकी क्षमता नहीं होती.

इसके विपरीत, एक गतिशील वेब पेज एक व्यापक अवधारणा है - प्रत्येक उपयोगकर्ता, लोड अकरेंस, या विशिष्ट चर वस्तु मूल्य के लिए कोई भी वेब पृष्ठ अलग उत्पन्न करता है। इसमें क्लाइंट-साइड स्क्रिप्टिंग, एक बार सर्वर-साइड स्क्रिप्टिंग (जैसे [[पीएचपी|PHP]], [[पर्ल]], [[JavaServer Pages (जावासर्वर पेजेस)|JSP]] या [[एऍसपी.नेट|ASP.NET]]) द्वारा निर्मित पृष्ठ शामिल है, जहां वेब सर्वर इसे ग्राहक को भेजने से पहले सामग्री को उत्पन्न करता है।

== उपयोग ==

DHTML, निर्माणकर्ताओं को उनके पृष्ठों के लिए प्रभाव को जोड़ने की अनुमति देता है जो कि अन्यथा मुश्किल है। उदाहरण के लिए, DHTML पृष्ठ के लिए निर्माणकर्ता को अनुमति देता है:
<ul>
<li>उनके दस्तावेज़ में एनिमेट पाठ और छवियां, एक पूर्व निर्धारित मार्ग या उपयोगकर्ता द्वारा चुनने के बाद कोई भी शुरूआती बिंदु से कोई भी अंतिम बिन्दु तक स्वतंत्र रूप प्रत्येक तत्व से चलती हैं। </li>
<li>एक टिकर को अंतःस्थापित करने जो कि स्वचालित रूप से नवीनतम समाचार, स्टॉक कोट्स, या अन्य डेटा के साथ इसके सामग्री को ताज़ा कर देता है।</li>
<li>उपयोगकर्ता इनपुट को ग्रहण करने के लिए एक फार्म का प्रयोग करने और तब प्रक्रिया को आगे बढ़ाएं और सर्वर पर डेटा को वापस भेजने के बिना ही उस डेटा का प्रत्युत्तर दने के लिए.</li>
<li>रोलओवर बटन या ड्रॉप डाउन मेनू को शामिल करने के लिए.</li>
</ul>

एक कम सामान्य उपयोग, ब्राउज़र-आधारित एक्शन गेम निर्माण है। 1990 के दशक के उत्तरार्ध और 2000 दशक के प्रारम्भ के दौरान कई गेमों का निर्माण DHTML {{Citation needed|date=October 2008}} का उपयोग करके किया गया, लेकिन ब्राउज़रों के बीच मतभेद से इस मुश्किल बनाया: कई प्लेटफार्मों पर खेल को सक्षम करने के लिए कोड में कई तकनीकों को लागू किया जाना चाहिए था। हाल में, ब्राउज़र, वेब मानक में तब्दील किये जा रहे है जिससे DHTML गेम के डिजाइन अधिक व्यवहार्य बन गए हैं। उन खेलों को सभी प्रमुख ब्राउजरों में खेला जा सकता है और मैक ओएस एक्स (Mac OS X) के लिए विजेट्स और [[विंडोज़ विस्टा|विंडोज विस्टा]] के लिए गैजेट रख सकते हैं जो कि DHTML पर आधारित होते हैं।

हाल के वर्षों में शब्द "DHTML" का इस्तेमाल कम हो गया है, क्योंकि DHTML स्क्रिप्ट अक्सर विभिन्न वेब ब्राउजरों के बीच ठीक से काम नहीं करती है। DHTML को वर्तमान में अनओबट्रुसिव जावास्क्रिप्ट कोडिंग (DOM स्क्रिप्टिंग) के रूप में संदर्भित किया जाता है, सहमति वाले सर्वश्रेष्ठ अभ्यास पर एक प्रभाव को स्थापित करने के प्रयास में जबकि एक सुलभ, मानक-अनुवर्ती तरीकों में समान प्रभाव की अनुमति होती है।

DHTML के कुछ नुकसान यह हैं कि वेब ब्राउजरो में शामिल प्रौद्योगिकी के बीच समर्थन के पृथक स्तर के कारण इसका विकास और इसे डिबग करना मुश्किल हो गया है और स्क्रीन के विभिन्न आकार का अर्थ हैं सीमित संख्या में ब्राउजर और स्क्रीन आकार संयोजन पर अंतिम दृश्य फाइन-ट्युन हो सकते हैं। अपेक्षाकृत हाल के ब्राउजरों के लिए विकास जैसे इंटरनेट एक्सप्लोरर 5.0 +, मोज़िला फायरफोक्स 2.0 + और [[ऑपेरा वेब ब्राउज़र|ओपेरा]] 7.0 + शेयर्ड डोक्युमेंट ऑब्जेक्ट मॉडल द्वारा सहायता प्राप्त होते हैं। बुनियादी DHTML सपोर्ट को इंटरनेट एक्सप्लोरर 4.0 के साथ पेश किया गया था, हालांकि नेटस्केप नेविगेटर 4.0 के साथ मूल गतिशील सिस्टम था। jQuery जैसे जावास्क्रिप्ट लाइब्रेरी, क्रॉस-ब्राउज़र DOM परिचालन में दिन-ब-दिन बढ़ती कठिनाइयों को दूर करता गया।

== एक वेब पेज की संरचना ==
{{seealso|DOM events}}

आमतौर पर एक वेब DHTML का उपयोग कर पृष्ठ को निम्नलिखित तरीके से सेट किया जाता है:
<syntaxhighlight lang="html5">
<!doctype html>
<html lang="en">
   <head>
     <meta charset="utf-8">
     <title>DHTML example</title>
   </head>
   <body>
     <div id="navigation"></div>

     <script> 
        var init = function () {
          myObj = document.getElementById("navigation");
          // ... manipulate myObj
        };
        window.onload = init;
     </script>

     <!--
   अक्सर कोड को एक बाहरी फ़ाइल में संग्रहीत किया जाता है, इसे फ़ाइल को जोड़ते हुए जिसमें जावास्क्रिप्ट शामिल होता है। 
   यह मददगार होता है जब कई पृष्ठ एक स्क्रिप्ट का उपयोग करते हैं।:
     -->
     <script src="myjavascript.js"></script>
   </body>
</html>
</syntaxhighlight>

उपरोक्त कोड में, नीले रंग का कोड दस्तावेज़ के प्रकार की घोषणा करता है, जो कि वेबसाइट के निर्माण के लिए मार्कअप कोड के किस संस्करण का उपयोग किया गया है उसे निर्दिष्ट करता है। लाल कोड ब्राउज़र डिटेक्शन जावास्क्रिप्ट को प्रदर्शित करता है, जो ब्राउजर अप्लीकेशन मानक और आवश्यकताओं को समायोजित करने के लिए वेब पृष्ठ को सक्षम बनाता है।

== उदाहरण: पाठ के एक अतिरिक्त ब्लॉक का प्रदर्शन ==

निम्न कोड एक अक्सर इस्तेमाल किये जाने वाले कार्यों को दिखाता है। एक वेब पेज का अतिरिक्त हिस्सा केवल उपयोगकर्ता के अनुरोधों पर ही प्रदर्शित किया जाएगा.

<syntaxhighlight lang="html5">
<!doctype html>
<html lang="en">
   <head>
     <meta charset="utf-8">
     <title>एक डोम कार्य का उपयोग कैसे करें</title>
     <style>
        a {background-color:#eee;}
        a:hover {background:#ff0;}
        #toggleMe {background:#cfc; display:none; margin:30px 0; padding:1em;}
     </style>
   </head>
   <body>
     <h1>एक डोम कार्य का उपयोग कैसे करें</h1>

     <h2><a id="showhide" href="#">Show paragraph</a></h2>

     <p id="toggleMe"> यह एक उदाहरण है।
 (अतिरिक्त जानकारी, जो केवल अनुरोध पर प्रदर्शित होता है) ...</p>

     <p>सामान्य पाठ जारी है।..</p>

     <script>
        changeDisplayState = function (id) {
          var d = document.getElementById('showhide'),
             e = document.getElementById(id);
          if (e.style.display === 'none' || e.style.display === '') {
             e.style.display = 'block';
             d.innerHTML = 'Hide paragraph';
          }
          else {
             e.style.display = 'none';
             d.innerHTML = 'Show paragraph';
          }
        };
        document.getElementById('showhide').onclick = function () {
          changeDisplayState('toggleMe');
          return false;
        };
     </script>
   </body>
</html>
</syntaxhighlight>

== सन्दर्भ ==
{{reflist|2}}

== बाहरी कड़ियाँ ==
* [https://web.archive.org/web/20110207234057/http://quirksmode.org/ कुइर्क्समोड], परीक्षण उदाहरण के साथ एक व्यापक साइट और DHTML कोड लिखने की दिशानिर्देश जो कि कई ब्राउज़रों पर रन करते हैं।
* [https://web.archive.org/web/20110516091501/http://www.yourhtmlsource.com/javascript/dhtmlexplained.html परिचयात्मक DHTML ट्यूटोरियल] जो DHTML में पहला कदम उठाते हैं।
* [https://web.archive.org/web/20070812201940/http://msdn2.microsoft.com/en-us/library/ms533050.aspx MSDN पर HTML और DHTML संदर्भ]

{{ECMAScript}}

[[श्रेणी:HTML]]