Xem mã nguồn của HTML động

{{HTML}}
'''HTML động''' hay '''DHTML''' (viết tắt [[tiếng Anh]]: ''Dynamic HTML'') là một thể hiện của việc tạo ra một [[website|trang web]] bằng cách kết hợp các thành phần: [[ngôn ngữ đánh dấu]] [[HTML]] tĩnh, ngôn ngữ [[kịch bản máy khách]] (như là [[JavaScript|Javascript]]), và ngôn ngữ định dạng trình diễn [[CSS|Cascading Style Sheets]] và [[DOM|Document Object Model]] (DOM).

DHTML có thể được sử dụng để tạo ra 1 [[khoa học ứng dụng|ứng dụng]] trên [[trình duyệt web]]: ví dụ như dễ dàng điều hướng, tạo một [[đơn web]] tương tác với người dùng hoặc tạo ra một bài tập sử dụng cho [[giáo dục trực tuyến|e-learning]].

== Cấu trúc của một trang web ==
Đặc trưng của một trang web sử dụng '''DHTML''' được cấu thành như sau:

<syntaxhighlight lang="html5" style="font-size:1.2em;" >
<!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>
     </body>
</html>
</syntaxhighlight>

Thường thì mã [[JavaScript]] được lưu giữ trong một [[tập tin]] riêng, được nạp vào trang web bằng [[liên kết]] đến [[tập tin]] chứa mã [[JavaScript]]:

<syntaxhighlight lang="html5">
<script src="script.js"></script>
</syntaxhighlight>

== Ví dụ: Hiển thị một đoạn văn bản được thêm vào ==

Đoạn mã dưới đây minh họa một chức năng thường được sử dụng. Phần thêm vào của [[website|trang web]] sẽ chỉ được hiển thị nếu người dùng yêu cầu nó. Như trong [[giáo dục trực tuyến|e-learning]] chức năng này sử dụng để hiển thị gợi ý được thêm vào.

<syntaxhighlight lang="html5" style="font-size:1.2em;" >
<!doctype html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title>Ví dụ</title>
          <style>
               a {background-color:#eee;}
               a:hover {background:#ff0;}
               #toggleMe {background:#cfc; display:none; margin:30px 0; padding:1em;}
          </style>
     </head>
     <body>
          <h1>Ví dụ</h1>

          <h2><a id="showhide" href="#">Hiển thị ví dụ</a></h2>

          <p id="toggleMe">Đây là ví dụ: văn bản chỉ hiển thị khi bấm chuột vào
    liên kết.</p>

          <p>Thêm văn bản thường...</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 = 'Dấu ví dụ';
                    }
                    else {
                         e.style.display = 'none';
                         d.innerHTML = 'Hiển thị ví dụ';
                    }
               };
               document.getElementById('showhide').onclick = function () {
                    changeDisplayState('toggleMe');
                    return false;
               };
          </script>
     </body>
</html>
</syntaxhighlight>

<!-- Không hiểu đoạn này
 Một [[tập tin S5|S5]] là một ứng dụng của DHTML hoạt động trong các [[trình duyệt]] hiện đại (bao gồm IE 6): Một ứng dụng trình diễn -->

[[Định dạng tập tin]] [[XHTML]] chứa một [[slideshow]] có thể xem được trên chế độ [[projector]] theo từng [[slide]] một (có thể. Định dạng sẽ được thực hiện bởi CSS.

== Liên kết bên ngoài ==
* [http://www.quirksmode.org/ QuirksMode], một trang web toàn diện với các ví dụ và hướng dẫn làm thế nào để viết mã '''DHML''' có thể hoạt động trên một số trình duyệt
* [http://www.mah-jongg.ch Mahjongg Solitaire], Một trang web trờ chơi được viết bởi DHTML
* [http://www.funnygames.nl/host/games/lemmings/ DHTML Lemmings] {{Webarchive|url=https://web.archive.org/web/20051203085453/http://www.funnygames.nl/host/games/lemmings/ |date = ngày 3 tháng 12 năm 2005}}, một trò chơi kinh điển
* [http://www.dhtmlcentral.com DHTML Central], một trang web với thư viện DHML và một số thành phần của [[JavaScript]] để tạo các thực đơn, cây, và một thư viện giúp bạn đơn giản hóa việc [[Ngôn ngữ lập trình|lập trình]] DHTML.
* [http://www.dhteumeuleu.com/ Ví dụ DHTML] {{Webarchive|url=https://web.archive.org/web/20050713024411/http://www.dhteumeuleu.com/ |date = ngày 13 tháng 7 năm 2005}}
* [http://www.def-logic.com/games.html DHTML games] {{Webarchive|url=https://web.archive.org/web/20051124090217/http://www.def-logic.com/games.html |date = ngày 24 tháng 11 năm 2005}}
* [http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp Tham khảo HTML & DHTML trên [[MSDN]]]

{{Các ngôn ngữ lập trình chính}}

==Tham khảo==
{{tham khảo}}

[[Thể loại:HTML]]
[[Thể loại:JavaScript]]
[[Thể loại:DOM]]