HTML động

Bách khoa toàn thư mở Wikipedia

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. Bởi vì nó có một khả năng vô cùng phong phú như có thể được sử dụng để dịch chuyển một phần tử xung quanh màn hình, DHTML cũng có thể được sử dụng như là một công cụ để tạo ra một trò chơi đơn giản trên trình duyệt.

Một số điểm yếu của DHTML là khó khăn khi phát triển và gỡ rối vì sự phong phú và đa dạng của một số lượng lớn các trình duyệt. Việc phát triển cho các trình duyệt phổ biến như Internet Explorer 5.0+, Mozilla Firefox, Netscape 6.0+, và Opera 7.0+, có vẻ dễ dàng hơn nhờ sự chia sẽ DOM.

Mục lục

1 Cấu trúc của một trang web
2 Ví dụ: Hiển thị một đoạn văn bản được thêm vào
3 Một ứng dụng trình diễn
4 Liên kết bên ngoài

[sửa] 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:

<html>
<head>
<title>DHTML example</title> 
<script type="text/javascript"> 
    function init() {
        myObj = document.getElementById('navigation');
        // .... thêm mã nguồn
    }
    window.onload = init;
</script> 
</head>
<body>
    <div id="navigation"></div>
</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 type="text/javascript" src="script.js"></script>

Xem thêm: Sự kiện DOM

[sửa] 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.

<html>
<head><title>Ví dụ</title>

<style type="text/css">
<!--
    h2 {background-color: lightblue; width: 100%}
    a {font-size: larger; background-color: goldenrod} 
    a:hover {background-color: gold}
    #example1 {display: none; margin: 3%; padding: 4%; background-color:
        limegreen}
-->
</style> 

<script type="text/javascript">
<!--
function changeDisplayState (id) {
    e = document.getElementById(id);

    if (e.style.display == 'none' || e.style.display == '') {
        e.style.display = 'block';
        showhide.innerHTML = 'Dấu ví dụ'};
    else {
        e.style.display = 'none';
        showhide.innerHTML = 'Hiển thị ví dụ';
    }
}
//-->
</script>
</head>
<body>
<a id="showhide" href="#"
    onclick="javascript:changeDisplayState('example1')">Hiển thị ví dụ</a>
<div id="example1">Đây là ví dụ: văn bản chỉ hiển thị khi bấm chuột vào
    liên kết.</div>
<p>Thêm văn bản thường...<p>
</body>
</html>

[sửa] Một ứng dụng trình diễn

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 tập tin XHTML chứa một slideshow có thể xem được trên chế độ projector theo từng slide một (trình duyệt được thiết lập ở chế độ toàn màn hình) như một trang web đơn hoặc có thể in được như một bản tin phát tay. Với DHTML thì việc điều hướng được xây dựng một cách linh động. Những chuyển động đơn giản là điều có thể. Định dạng sẽ được thực hiện bởi CSS.

[sửa] 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, 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
DHTML games
Tham khảo HTML & DHTML trên MSDN