HTML động với ví dụ là gì?

DHTML không phải là một ngôn ngữ mà là một thuật ngữ được sử dụng để mô tả cách tạo các trang web động và tương tác. Nó là sự kết hợp của HTML, JavaScript, Cascading Style Sheets (CSS) và Document Object Model (DOM). Bạn có thể thêm nội dung động vào trang HTML tĩnh bằng tập lệnh và kiểu. DHTML sử dụng các ngôn ngữ kịch bản phía máy khách như JavaScript để thay đổi các thuộc tính tĩnh của trang HTML để tạo hiệu ứng động. Điều này có nghĩa là tất cả các hiệu ứng DHTML đạt được sau khi tải nội dung trên một trang mà không cần tương tác lại với máy chủ

DHTML so với Ajax

Mặc dù cả DHTML và Ajax đều được sử dụng để thêm hiệu ứng động vào nội dung HTML tĩnh, Ajax có thể tương tác với máy chủ bằng cách gửi yêu cầu nhưng DHTML không tương tác với máy chủ

Đặc điểm của DHTML

Tất cả các tính năng của HTML động có thể được phân thành bốn loại như bên dưới

• Nội dung động – Nội dung trên trang được sửa đổi động dựa trên đầu vào của người dùng. Dưới đây là ví dụ về sự thay đổi nội dung khi di chuột qua văn bản

• Kiểu động – Giao diện của một phần tử trên trang web được sửa đổi linh hoạt như thay đổi màu sắc hoặc thay đổi phông chữ. Dưới đây là ví dụ về thay đổi phông chữ động khi di chuột

Xem tôi lấy màu gì khi bạn di chuột qua tôi. Và điều gì xảy ra khi bạn lấy chuột ra??

• Định vị động – Vị trí của một phần tử được thay đổi động so với các phần tử khác trên trang
• Liên kết động – Liên kết một đối tượng trong thời gian chạy dựa trên các điều kiện tại thời điểm đó

Xem thêm các hiệu ứng thay đổi nội dung động và tiện ích chuyển đổi phông chữ DHTML

Ưu điểm của DHTML

Có nhiều ưu điểm khi sử dụng DHTML, đặc biệt là khi nội dung được sửa đổi động

• DHTML hỗ trợ thêm kiểu vào nội dung tĩnh theo nhiều cách khác nhau
• Nó là động nên nó có thể được thay đổi ngay cả trong quá trình thực hiện thời gian chạy
• Quản trị viên web thường bị hạn chế sử dụng các phông chữ mặc định như Arial hoặc Times Roman. DHTML cho phép các phông chữ có thể tải xuống giúp trang web trông hấp dẫn hơn
• Trang DHTML cũng được lưu dưới dạng. tệp html

Điều đáng lưu ý ở đây là việc sử dụng nhiều tập lệnh trên một trang web sẽ làm giảm tốc độ tải trang và làm chậm trang web. Ngoài ra, các trang động có thể không hoạt động tốt trên các công cụ tìm kiếm so với các trang HTML tĩnh. Tìm hiểu thêm về trang động và trang tĩnh

Ví dụ về DHTML

Dưới đây là ví dụ về hình ảnh lật được hiển thị bằng thẻ hình ảnh HTML và lật theo chiều ngang bằng CSS để hiển thị văn bản phía sau hình ảnh

Tối ưu hóa công cụ tìm kiếm là một kỹ thuật làm cho trang web của bạn thân thiện với công cụ tìm kiếm. Tải xuống hướng dẫn SEO miễn phí tại đây để cải thiện thứ hạng trang web của bạn

Một số ví dụ chung mà DHTML được sử dụng bao gồm

• Tạo văn bản động
• Nội dung trượt từ vị trí này sang vị trí khác
• Thu thập thông tin đầu vào của người dùng thông qua một biểu mẫu và xử lý thông qua JavaScript của trang web khách hàng
• Menu động và di chuột qua các sự kiện

Dưới đây là một ví dụ khác trong đó hình ảnh HTML tĩnh hiển thị trong cột đầu tiên được lật theo chiều ngang bằng cách sử dụng DHTML trong cột thứ hai

DHTML cho phép các ngôn ngữ kịch bản thay đổi các biến trong ngôn ngữ định nghĩa của trang web, từ đó ảnh hưởng đến giao diện và chức năng của nội dung trang HTML "tĩnh", sau khi trang đã được tải đầy đủ và trong quá trình xem. Do đó, đặc điểm động của DHTML là cách nó hoạt động trong khi một trang được xem, chứ không phải ở khả năng tạo một trang duy nhất với mỗi lần tải trang