HTML động

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 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), và ngôn ngữ định dạng trình diễn Cascading Style Sheets và Document Object Model (DOM).

DHTML có thể được sử dụng để tạo ra 1 ứ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 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:

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

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:

<script src="script.js"></script>

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 trang web sẽ chỉ được hiển thị nếu người dùng yêu cầu nó. Như trong e-learning chức năng này sử dụng để hiển thị gợi ý được thêm vào.

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

Đị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

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
Mahjongg Solitaire, Một trang web trờ chơi được viết bởi DHTML
DHTML Lemmings Lưu trữ 2005-12-03 tại Wayback Machine, một trò chơi kinh điển
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 lập trình DHTML.
Ví dụ DHTML Lưu trữ 2005-07-13 tại Wayback Machine
DHTML games Lưu trữ 2005-11-24 tại Wayback Machine
Tham khảo HTML & DHTML trên MSDN

x t s Ngôn ngữ lập trình
Dùng cho kỹ nghệ	ABAP Ada ASP ASP.NET AWK Bash Assembly C C++ C# D Delphi Erlang Groovy Fortran Java JavaScript Lisp Lua Lotus Notes Objective-C OCaml Perl PHP PL/SQL Python Ruby SAS sed Smalltalk Tcl sh Visual Basic VBScript Visual Basic for Applications VB.NET Scheme XML
Dùng trong giảng dạy	Alice C C++ Eiffel Fortran Haskell Java JavaScript Logo ML Oz Pascal Prolog Python Scheme Visual Basic Visual FoxPro
Có giá trị lịch sử	ABC ALGOL APL BASIC Clipper COBOL Hope MUMPS Pascal PL/I PowerBuilder Simula

HTML động

Cấu trúc của một trang web

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

Liên kết bên ngoài

Tham khảo