Dynamic HTML

DHTML atau Dynamic HTML, bukanlah suatu bahasa pemrograman melainkan merupkan suatu istilah untuk membuat halaman web yang dinamis dan interaktif dengan mengkombinasikan bahasa markah HTML, JavaScript, Document Object Model, dan CSS.^[1]

DHTML mengizinkan skrip bahasa pemrograman untuk diubah menjadi variabel-variabel pada setiap pendefenisian bahasa pemrograman halaman web, yang menghasilkan efek perubahan tampilan beserta dengan fungsi-fungsinya setelah halaman web ditampilkan. Berbeda dengan HTML, yang memiliki kemampuan menghasilkan dan mengolah halaman web sebelum ditampilkan.

Penggunaan

DHTML biasanya digunakan untuk membuat tombol rollover ataupun menu drop-down dan halaman web yang interaktif.

Beberapa teknologi aplikasi penjelajah web memiliki tingkat dukungan terhadap DHTML yang berbeda-beda sehingga sangat sulit dikembangkan. Seperti misalnya variasi dan kombinasi ukuran layar bisa menampilkan dengan baik pada beberapa aplikasi penjelajah web sedangkan yang lainnya tidak. Pengembangan terbaru yang relatif setiap aplikasi penjelajah web seperti Internet Explorer 5.0+, Mozilla Firefox 2.0+, dan Opera 7.0+ sudah manambahkan Document Object Model.

Struktur pada halaman web

Pada dasarnya sebuah halaman web diatur seperti cara berikut ini:

{ window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Mobile-friendly input handler for Enter key document.addEventListener('keyup', function(e) { if (e.key === 'Enter') { const searchInput = e.target.closest('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { e.preventDefault(); const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Search button click handler document.addEventListener('click', e => { const searchButton = e.target.closest('#searchButton, .search-button, .cdx-search-input__end-button, .header-search, .search-icon, [type="submit"]'); if (searchButton) { e.preventDefault(); const searchForm = searchButton.closest('form'); if (searchForm) { const searchInput = searchForm.querySelector('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } } }); }); \n\n"}}">

<!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>

          <!--
      Walaupun kode tersebut disimpan pada file eksternal; ini bisa diselesaikan dengan membuat pranala file yang mengandung JavaScript.
      Hal ini berguna jika menggunakan skrip pemrograman yang sama pada beberapa [[halaman web]]:
          -->
          <script src="myjavascript.js"></script>
     </body>
</html>

Contoh: menampilkan blok tambahan pada teks

Kode berikut menggambarkan fungsi yang paling sering digunakan. Bagian tambahan pada sebuah halaman web hanya akan ditampilkan jika pengguna menginginkannya.

<!doctype html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title>Cara menggunakan fungsi DOM</title>
          <style>
               a {background-color:#eee;}
               a:hover {background:#ff0;}
               #contoh1 {background:#cfc; display:none; margin:30px 0; padding:1em;}
          </style>
     </head>
     <body>
          <h1>Cara menggunakan fungsi DOM</h1>

          <h2><a id="tampilkansembunyikan" href="#">Tampilkan contoh</a></h2>

          <p id="contoh1">Ini adalah sebuah contoh.
      (Informasi tambahan, hanya ditampilkan jika diinginkan pengguna)...</p>

          <p>Lanjutan teks...</p>

          <script>
               changeDisplayState = function (id) {
                    var d = document.getElementById('tampilkansembunyikan'),
                         e = document.getElementById(id);
                    if (e.style.display === 'none' || e.style.display === '') {
                         e.style.display = 'block';
                         d.innerHTML = 'Sembunyikan contoh';
                    }
                    else {
                         e.style.display = 'none';
                         d.innerHTML = 'Tampilkan contoh';
                    }
               };
               document.getElementById('tampilkansembunyikan').onclick = function () {
                    changeDisplayState('contoh1');
                    return false;
               };
          </script>
     </body>
</html>

Pranala luar

↑ "Salinan arsip". Diarsipkan dari asli tanggal 2006-08-05. Diakses tanggal 2009-04-13.

QuirksMode, a comprehensive site with test examples and instructions on how to write DHTML code which runs on several browsers.
Introductory DHTML Tutorial for those taking their first steps in DHTML.
HTML & DHTML Reference on MSDN

[1] "Salinan arsip". Diarsipkan dari asli tanggal 2006-08-05. Diakses tanggal 2009-04-13.

[1]

Basis data pengawasan otoritas
Nasional	Amerika Serikat Prancis Data BnF Republik Ceko Spanyol Israel
Lain-lain	Yale LUX