Dynamic HTML

DHTML (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

Lihat pula: DOM events

Pada dasarnya sebuah halaman web diatur seperti cara berikut ini: 

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

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

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.