Categories
Thiết kế website

Thiết kế web với HTML động

Thiết kế web với HTML độngHTML độ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ì== 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:

</script> </head> <body>

</body> </html> </source>

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

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.

  1. <html>
  2. <head><title>Ví dụ</title>
  3. <style type="text/css">
  4. <!--
  5.     h2 {background-color: lightblue; width: 100%}
  6.     a {font-size: larger; background-color: goldenrod}
  7.     a:hover {background-color: gold}
  8.     #example1 {display: none; margin: 3%; padding: 4%; background-color:
  9.         limegreen}
  10. -->
  11. </style>
  12. <script type="text/javascript">
  13. <!--
  14. function changeDisplayState (id) {
  15.     e = document.getElementById(id);
  16.     if (e.style.display == 'none' || e.style.display == '') {
  17.         e.style.display = 'block';
  18.         showhide.innerHTML = 'Dấu ví dụ'};
  19.     else {
  20.         e.style.display = 'none';
  21.         showhide.innerHTML = 'Hiển thị ví dụ';
  22.     }
  23. }
  24. //-->
  25. </script>
  26. </head>
  27. <body>
  28. <a id="showhide" href="#"
  29.     onclick="javascript:changeDisplayState('example1')">Hiển thị ví dụ</a>
  30. <div id="example1">Đây là ví dụ: văn bản chỉ hiển thị khi bấm chuột vào
  31.     liên kết.</div>
  32. <p>Thêm văn bản thường...<p>
  33. </body>
  34. </html>

Định dạng ậ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.

Nguồn: Wikipedia

Trả lời