Giới thiệu về HTML5

 thể lưu trữ các thông tin tạm 
thời vào các biến session, hoặc lưu trữ lâu dài vào Local Storage, thậm chí có thể 
tạo ra cơ sở dữ liệu cục bộ, tạo bảng và truy vấn mà trước kia với cookie chỉ đáp 
ứng cho những nhu cầu lưu trữ dữ liệu nhỏ ( khoảng 4KB). 
 i. Kiểm tra tình trạng trực tuyến 
 Hiện nay một số ứng dụng web đang có xu hướng phục vụ người dùng cả 
khi online hay offline. Khi online thì người dùng thao tác với CSDL của máy chủ 
một cách bình thường. Khi offline thì người dùng vẫn thao tác được, nhưng dữ 
liệu sẽ lưu lại một cách cục bộ, rồi đợi khi nào người dùng online thì xác nhận rồi 
chuyển dữ liệu đó lên CSDL máy chủ. Để làm được việc đó tài liệu HTML cần 
phải xác định được người dùng đang online hay offline để biết cách xử lí cho 
đúng. 
 Xác định tình trạng trực tuyến trong HTML5 ta có thể kiểm tra thuộc tính 
online của đối tượng navigator. 
 Current network status: 
 var lblStatus = document.getElementById(‘lblStatus’) 
 lblStatus.innerHTML = navigator.onLine ? 'online' : 'offline'; 
 ii. Lưu trữ tạm thời với Session Storage 
 Lưu trữ theo phiên (Session Storage) là một hình thức lưu trữ tạm thời trên 
RAM và chỉ có tác dụng trên một tab duy nhất. Tức là giá trị lưu trữ trong 
session chỉ tồn tại trong tab đó, không thể chia sẻ với tab khác và sẽ kết thúc khi 
tab đó bị đóng. 
 Để lưu một giá trị vào trong session ta dùng hàm setItem của đối tượng 
sessionStorage. Hàm nhận vào một cặp key-value. 
 sessionStorage.setItem("key", value); 
 Để lấy một giá trị từ session, ta dùng hàm getItem của đối tượng 
sessionStorage. Hàm nhận vào key và trả lại value. 
 Trang 15 
 GIỚI THIỆU VỀ HTML5 
 value = sessionStorage.getItem("key"); 
 iii. Lưu trữ lâu dài với Local Storage 
 Lưu trữ cục bộ (Local Storage) là một hình thức lưu trữ lâu dài trên ổ cứng 
và được chia sẻ công khai. Tức là giá trị lưu trữ trong local storage không bị mất 
đi cả khi đóng trình duyệt và có thể được truy xuất bởi các tab khác, thậm chí cả 
các trang HTML khác. 
 Để lưu một giá trị vào trong local storage ta dùng hàm setItem của đối 
tượng localStorage. Hàm nhận vào một cặp key-value. 
 localStorage.setItem("key", value); 
 Để lấy một giá trị từ local storage, ta dùng hàm getItem của đối tượng 
localStorage. Hàm nhận vào key và trả lại value. 
 value = localStorage.getItem("key"); 
 iv. Lưu trữ và truy vấn với Web SQL Database 
 Web SQL Database là một CSDL (database) dựa trên đặc tả của CSDL 
SQLite được xây dựng sẵn trong HTML5. Lập trình viên có thể viết các lệnh tạo 
CSDL mới, tạo bảng, thêm, sửa xoá dữ liệu, truy vấn ngay trong mã nguồn tài 
liệu HTML. Giống với Local Storage, CSDL này là cục bộ, lâu dài, được quản lí 
bởi trình duyệt và có thể được sử dụng bởi bất cứ trang HTML nào. 
 Để mở một CSDL để làm việc, ta dùng hàm openDatabase. Nếu CSDL đó 
chưa tồn tại, nó sẽ được tạo mới. 
 db = openDatabase(db_name, db_version, db_desc, db_size); 
 Tham số Giá trị Mô tả 
db_name string Tên của CSDL muốn mở hoặc tạo. 
db_version string Phiên bản của CSDL. 
db_desc string Mô tả về CSDL. 
db_size int Kích cỡ của CSDL (byte) 
 Hình 43 - Một ví dụ về Web SQL Database được viết ngay trên 
 mã nguồn tài liệu Html5 
 Trang 16 
 GIỚI THIỆU VỀ HTML5 
 h. Thẻ ngữ nghĩa 
 Thẻ ngữ nghĩa (semantic tags) là những thẻ mới đặc biệt trong HTML5, nó 
chỉ đơn giản giúp cho người đọc hoặc các công cụ phân tích mã nguồn hiểu được 
nhiệm vụ của các thành phần trong một tài liệu HTML. 
 Nhờ có những thẻ ngữ nghĩa này mà các bộ máy tìm kiếm tương lai có 
thể dễ dàng phân biệt được phần nội dung chính của một trang web và 
những thành phần không quan trọng khác. 
 Hình 44- Cấu trúc ngữ nghĩa một tài liệu HTML 
 Danh sách các thẻ ngữ nghĩa phổ biến : 
 Thẻ Mô tả 
 Đại diện cho một vùng trong một tài liệu HTML. 
 Đại diện cho vùng của trang web chứa các liên kết tới các trang 
 web khác hoặc tới các phần của chính trang đó. 
 Đại diện cho một thành phần độc lập của trang web và chứa nội 
 dung chính. 
 Đại diện cho một vùng mà không liên quan đến nội dung chính 
 của một trang web. 
 Chứa thông tin giới thiệu một phần, một trang hay bất cứ thông 
 tin gì của tiêu đề tài liệu, tiêu đề bảng. 
 Đánh dấu phần cuối của một trang hay của một section. 
 Chỉ ra thời gian theo hệ 24 giờ hay 12 giờ, dùng định dạng ngày 
 tháng năm nào. 
 Chỉ ra một phần của tài liệu đã được đánh dấu, bôi dậm có chủ ý 
 của tác giả. 
 Trang 17 
 GIỚI THIỆU VỀ HTML5 
 5. CÁC THAY ĐỔI TRONG HTML5 
 a. Các thẻ mới 
 Thẻ Mô tả 
 Mô tả một bài viết. 
 Mô tả thành phần nằm ngoài nội dung trang web. 
 Định nghĩa điều khiển phát nhạc. 
 Định nghĩa vùng có thể xử lí đồ hoạ bitmap. 
 Định nghĩa một nút lệnh. 
 Định nghĩa một danh sách thả xuống. 
 Định nghĩa thông tin chi tiết cho một thẻ. 
 Nhúng một plugin ngoài. 
 Định nghĩa tiêu đề cho thẻ figure 
 Tập hợp một nhóm media và các tiêu đề của chúng. 
 Mô tả phần chân của một section hoặc một trang. 
 Mô tả phần đầu của một section hoặc một trang. 
 Mô tả thông tin về một section. 
 Định nghĩa một khoá tự sinh trong form. 
 Mô tả một đoạn văn bản được đánh dấu. 
 Mô tả thông tin về hệ đo lường cho một giá trị. 
 Mô tả vùng chứa các link điều khiển. 
 Mô tả một số kiểu của đầu ra. 
 Mô tả trang thái hoàn thành của một công việc. 
 Sử dụng trong để chỉ ra dòng chữ sẽ được hiện nếu trình 
 duyệt không hỗ trợ Ruby. 
 Định nghĩa mở rộng cho chú thích ruby. 
 Định nghĩa một chú thích ruby. 
 Mô tả một vùng. 
 Định nghĩa một tài nguyên media. 
 Định nghĩa phần đầu của thẻ . 
 Định nghĩa một ngày/giờ. 
 Định nghĩa điều khiển phát phim. 
 Trang 18 
 GIỚI THIỆU VỀ HTML5 
 b. Các thuộc tính mới 
 Thuộc tính Thẻ Mô tả 
 Xác định cho phép lệnh Javascript được thực 
async script 
 thi một cách bất đồng bộ hay không. 
 Xác định điều khiển có được focus khi load 
autofocus input 
 trang web hay không. 
charset meta Xác định định dạng văn bản được sử dụng. 
 Xác định thẻ có thể được chỉnh sửa bởi người 
contenteditable toàn cục 
 dùng hay không. 
contextmenu toàn cục Xác định trình đơn ngữ cảnh cho thẻ. 
 Thuộc tính được định nghĩa bởi lập trình viên, 
data-* toàn cục 
 được bắt đầu với tiền tố data- 
 Xác định tất cả các điều khiển trong fieldset 
disable fieldset 
 có bị disable hay không. 
 Xác định người dùng có thể kéo thẻ được 
draggable toàn cục 
 không. 
 input, output, 
 Xác định các form mà dữ liệu điều khiển được 
form select, textarea, 
 gửi đi khi submit. 
 button, fieldset 
hidden toàn cục Xác định thẻ có được hiển thị hay không. 
 Xác định đường dẫn đến file application cache 
manifest html manifest để kết nối với các API cho ứng dụng 
 Web ngoại tuyến. 
 Xác định nội dung gợi ý cho người dùng nhập 
placeholder input, textarea 
 liệu. 
 Xác định điều khiển có bắt buộc người dùng 
required input, textarea 
 phải nhập liệu hay không. 
 Xác định thẻ có được kiểm tra chính tả nhập 
spellcheck toàn cục 
 liệu hay không. 
target base Xác định cửa sổ, iframe sẽ được redirect. 
 c. Các thẻ được thay đổi 
 Thẻ Mô tả 
 Thẻ nếu không được đặt thuộc tính href sẽ trở thành một liên 
 kết giữ chỗ. 
 Biểu diễn một đoạn ngắt theo cấp đoạn văn. 
 Được định nghĩa lại để sử dụng cho thanh công cụ hoặc trình đơn 
 ngữ cảnh. 
 Biểu diễn một mẩu in nhỏ (dùng cho những ghi chú). 
 Biểu diễn tính chất quan trọng hơn là chỉ hiển thị chữ đậm. 
 d. Các thuộc tính được thay đổi 
 Thuộc tính Thẻ Mô tả 
 border img Yêu cầu phải có giá trị 0 khi thuộc tính được đặt. 
 Trang 19 
 GIỚI THIỆU VỀ HTML5 
 language script Yêu cầu phải có giá trị “javascript” nếu được đặt. 
 name a Lập trình viên có thể dùng thuộc tính id để thay thế. 
 e. Các thẻ bị loại bỏ 
 Thẻ Mô tả 
 Có thể được thay thế bằng thẻ abbr. 
 Có thể được thay thế bằng thẻ object. 
 Có thể thay thế bằng cách dùng CSS. 
 Có thể thay thế bằng cách dùng CSS. 
 Có thể thay thế bằng cách dùng CSS. 
 Có thể được thay thế bằng thẻ ul. 
 Có thể thay thế bằng cách dùng CSS. 
 Không mang lại hiệu năng và thuận tiện cho người dùng. 
 Không mang lại hiệu năng và thuận tiện cho người dùng. 
 Không mang lại hiệu năng và thuận tiện cho người dùng. 
 Có thể thay thế bằng cách dùng CSS. 
 Có thể thay thế bằng cách dùng CSS. 
 Có thể thay thế bằng cách dùng CSS. 
 Có thể thay thế bằng cách dùng CSS. 
 f. Các thuộc tính bị loại bỏ 
 Thuộc tính Thẻ Mô tả 
axis td, th Ảnh hưởng đến khả năng tương thích. 
abbr td, th Ảnh hưởng đến khả năng tương thích. 
background body Có thể thay thế bằng cách dùng CSS. 
border table, object Có thể thay thế bằng cách dùng CSS. 
charset link, a Ảnh hưởng đến khả năng tương thích. 
clear br Có thể thay thế bằng cách dùng CSS. 
coords toàn cục Ảnh hưởng đến khả năng tương thích. 
frame table Có thể thay thế bằng cách dùng CSS. 
frameborder iframe Có thể thay thế bằng cách dùng CSS. 
longdesc img, iframe Ảnh hưởng đến khả năng tương thích. 
nohref area Ảnh hưởng đến khả năng tương thích. 
 Trang 20 
 GIỚI THIỆU VỀ HTML5 
 profile html Ảnh hưởng đến khả năng tương thích. 
 rules table Có thể thay thế bằng cách dùng CSS. 
 scheme meta Ảnh hưởng đến khả năng tương thích. 
 scope td Ảnh hưởng đến khả năng tương thích. 
 scrolling iframe Có thể thay thế bằng cách dùng CSS. 
 valuetype param Ảnh hưởng đến khả năng tương thích. 
 version html Ảnh hưởng đến khả năng tương thích. 
III. LỜI KẾT 
 Bài viết đề cập tới những lợi ích chính, và phân tích những sự kiện để 
 chứng tỏ HTML5 đang ngày càng phát triển và sẽ là chuẩn Web của tương lai. 
 Với HTML5, người dùng Web sẽ có được một trải nghiệm hoàn toàn mới, 
 chúng ta có thể thoải mái xem Video, chơi games trên trình duyệt với mọi thiết 
 bị mà không cần quan tâm đến các thành phần bổ sung cần phải cài thêm. 
 Với các thiết bị di động như Smartphone, Tablet, người dùng sẽ không còn lo 
 lắng về hiệu năng cũng như thời lượng sử dụng PIN nữa. Vì HTML5 đã tối ưu 
 hóa cho những lo ngại đó. 
 Tài liệu tham khảo: 
 •  
 •  
 •  
  Trang 21