Xem mẫu
- GIỚI THIỆU VỀ HTML5
Tác giả: Nguyễn Văn Toản
Website: http://vnaking.com/
Linkin: http://vn.linkedin.com/in/toanvnaking/
- GIỚI THIỆU VỀ HTML5
MỤC LỤC
I. Mở đầu .............................................. Error! Bookmark not defined.
1. MụC TIÊU Đề TÀI ............................................................................................. 3
2. PHƯƠNG PHÁP NGHIÊN CứU ............................................................................ 3
II. Nội dung báo cáo ............................................................................ 3
1. TRÍCH YếU ....................................................................................................... 3
2. LịCH Sử HÌNH THÀNH VÀ PHÁT TRIềN HTML.................................................. 4
a. HTML 1.................................................................................................. 4
b. HTML 2.................................................................................................. 4
c. HTML 3.................................................................................................. 4
d. HTML 4.................................................................................................. 5
e. HTML5................................................................................................... 5
3. GIỚI THIỆU CÔNG NGHỆ HTML5............................................................. 6
4. CÁC ĐỔI MỚI NỔI BẬT TRONG HTML5 .............................. 7
A. CÚ PHÁP HTML5............................................................................................ 7
B. SVG VÀ MATHML ......................................................................................... 7
i. SVG (vẽ các hình học bằng vector) ....................................................... 7
ii. MathML (soạn thảo công thức toán học) ............................................. 8
C. MULTIMEDIA VớI VIDEO VÀ AUDIO ................................................................ 9
i. Video ....................................................................................................... 9
ii. Audio ...................................................................................................... 9
D. CANVAS (Vẽ Đồ HọA) .................................................................................... 10
E. FORM ............................................................................................................ 11
i. Input ..................................................................................................... 11
ii. Output................................................................................................... 13
F. THUộC TÍNH TOÀN CụC .................................................................................. 14
i. ContentEditable ................................................................................... 14
ii. Draggable ............................................................................................. 14
iii. SpellCheck............................................................................................ 14
G. LƯU TRữ Dữ LIệU CụC Bộ NGOạI TUYếN .......................................................... 15
i. Kiểm tra tình trạng trực tuyến .............................................................. 15
ii. Lưu trữ tạm thời với Session Storage ................................................... 15
iii. Lưu trữ lâu dài với Local Storage ........................................................ 16
iv. Lưu trữ và truy vấn với Web SQL Database......................................... 16
H. THẻ NGữ NGHĨA ............................................................................................. 17
5. CÁC THAY ĐỔI TRONG HTML5 ........................................... 18
A. CÁC THẻ MớI.................................................................................................. 18
B. CÁC THUộC TÍNH MớI .................................................................................... 19
C. CÁC THẻ ĐƯợC THAY ĐổI ............................................................................... 19
D. CÁC THUộC TÍNH ĐƯợC THAY ĐổI ................................................................. 19
E. CÁC THẻ Bị LOạI Bỏ ........................................................................................ 20
F. CÁC THUộC TÍNH Bị LOạI Bỏ........................................................................... 20
III. LỜI KẾT ....................................................................................... 21
http://vnaking.com/ Trang 2
- GIỚI THIỆU VỀ HTML5
I. Mở đầu
1. Mục tiêu đề tài
Giới thiệu về lịch sử hình thành của ngôn ngữ HTML nói chung và những
công nghệ mới được áp dụng trong HTML5 nói riêng.
2. Phương pháp nghiên cứu
Học nhóm, trao đổi kiến thức hiểu biết và kinh nghiệm lập trình HTML của
các thành viên trong nhóm. Tổ chức các buổi tranning, sermina để tiếp thu công
nghệ HTML mới. Tham khảo tài liệu từ nhiều nguồn đáng tin cậy trên Internet.
II. Nội dung báo cáo
1. Trích yếu
HTML5 là ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web
và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa. Được đề xuất
đầu tiên bởi Opera Software. Đây là phiên bản thứ 5 của ngôn ngữ HTML và
hiện tại vẫn đang được phát triển bởi World Wide Web Consortium và
WHATWG.
Mục tiêu cốt lõi là cải thiện khả năng hỗ trợ cho đa phương tiện mới nhất trong
khi vẫn giữ được việc con người và các thiết bị, các chương trình máy tính như
trình duyệt web, trình đọc màn hình, v.v.. có thể đọc, hiểu, hay xử lý một cách dễ
dàng. HTMl5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm
các đặc tả nổi trội của XHTML, DOM, đặc biệt là JavaScript.
Là phiên bản tiếp sau của HTML 4.01 và XHTML 1.1, HTML5 là mộ nỗ lực
để tạo nên một ngôn ngữ đánh dấu có thể được viết bằng cú pháp HTML hoặc
XHTML. Nó bao gồm các mô hình xử lý chi tiết để tăng tính tương thích, mở
rộng, cải thiện và hợp lý hóa các đánh dấu có sẵn cho tài liệu, đưa ra các đánh
đấu mới và giới thiệu giao diện lập trình ứng dụng (application programming
interfaces API) để tạo ra các ứng dụng Web phức tạp.
HTML5 còn là một ứng cử viên tiềm năng cho nền tảng ứng dụng di động.
Nhiều tính năng của HTML5 được xây dựng với việc xem xét chúng có thể sử
dụng được trên các thiết bị di động như điện thoại thông minh và máy tính bảng
hay không.
http://vnaking.com/ Trang 3
- GIỚI THIỆU VỀ HTML5
2. Lịch sử hình thành và phát triền HTML
HTML là viết tắt của cụm từ HyperText Markup Language (Ngôn ngữ đánh
dấu siêu văn bản), và đây là ngôn ngữ chính được sử dụng cho việc thiết kế các
website. Việc hình thành HTML có mối quan hệ mật thiết với sự phát triển của
Internet. Ngày nay, HTML rất được khuyên dùng bởi sự xuất hiện của một
chuẩn mới, thực tế là một phiên bản cao hơn của ngôn ngữ này như là một sự
phát triển tất yếu- HTML5.
Tim Berners-Lee là cha đẻ của HTML. Năm 1989, ông nghiên cứu ra ngôn
ngữ HTML như là một giao thức truyền đạt thông tin giữa giới khoa học với
nhau và thành công của nó vẫn còn cho đến ngày nay. Tim đầu tiên tạo ra 20 thẻ
trong HTML, lấy ý tưởng từ ngôn ngữ SGML, nhưng điều kì diệu đáng kinh
ngạc là ở chỗ 13 trong số 20 thẻ đó vẫn còn được hiển thị trong HTML4.
a. HTML 1
HTML 1 không cho phép truyền đạt cấu trúc trang phức tạp, nhưng vừa đủ
để cho phép tạo ra một trang web đơn giản. Phiên bản đầu tiên này được tung ra
vào cuối năm 1990 và gần như một năm sau, ngôn ngữ này mới thực sự được
ứng dụng. Năm 1993 các chuẩn HTML trở thành nền tảng của Mosaic- Trình
duyệt đầu tiên của Internet.
b. HTML 2
Nhiều công ti lớn đã đánh giá không đúng sức mạnh của ngôn ngữ siêu văn
bản , nhưng cuối cùng thì các chuẩn HTML cũng được phổ biến rộng rãi. Bởi vì
không có một tổ chức nào đứng ra hỗ trợ cho sự phát triển ngôn ngữ HTML ,
mọi thứ bị ngừng trệ. Vào tháng 7 năm 1994, HTML 2 được phát hành. HTML 2
là phiên bản cải tiến của HTML. Phiên bản lần này được tạo ra bởi sự nỗ lực rất
lớn của những người yêu thích HTML trên khắp thế giới. Những người này đã
đảm nhận một nỗ lực khổng lồ khi chú ý đến tất cả đóng góp từ khắp nơi trên thế
giới cho phiên bản mới này. Trước tình hình này, cũng trong cùng năm 1994,
Tập Đoàn Tài Chính World Wide Web được thành lập với người đứng đầu là
Tim Berners-Lee. Năm 1995, thẻ mới là thẻ “bgcolor”(màu nền) hay thẻ “font
face”(font chữ?) được đưa vào ứng dụng, Chúng tôi đưa ra những ví dụ về các
thẻ này nhằm nhấn mạnh trình độ đã đạt tới của chuẩn HTML vào thời điểm hiện
tại…chúng ta có thể nói rằng sự khác biệt giữa phiên bản đầu tiên và phiên bản
năm 1995 là rất lớn.
c. HTML 3
W3C chấp nhận những phiên bản cải tiến của HTML với các thẻ mới và các
chức năng mới. Dave Ragget đã mua về một phiên bản thú vị với rất nhiều thẻ
HTML hấp dẫn và phiên bản này đã được cải tiến rất hay. Nhưng vì nó làm chậm
đường truyền của các trình duyệt nên phiên bản này đã bị bỏ đi. Phiên bản
HTML 3.2 là phiên bản mạnh nhất của sê-ri này và trước khi được tung ra, nó
http://vnaking.com/ Trang 4
- GIỚI THIỆU VỀ HTML5
được duyệt bởi W3C và bởi các nhà cung cấp trình duyệt là Netscape và
Microsoft.
d. HTML 4
Người ta dành cả năm 1997 để phát triển phiên bản HTML4, một bước tiến
triển quan trọng trong những phiên bản cũ. HTML4 có những công cụ có giá trị
mang lại thêm nhiều đất sáng tạo cho dân thiết kế web: CSS. Ban đầu CSS cũng
không được coi là quan trọng lắm, nhưng đến nay người ta đánh giá nó cũng
quan trọng không kém gì bản thân HTML. Một sự kiện quan trọng nữa là sự phát
triển của các trình duyệt: Microsoft ứng dụng hầu như tất cả các thẻ và trình
duyệt Internet Explorer được người sử dụng yêu thích hơn ,làm lu mờ Netscape.
Vào tháng 4 năm 1998 HTML4 đã được chứng nhận bởi W3C và tương lai trở
nên sáng lạn hơn. HTML có một “đối thủ” gọi là XHTML (Extensible HyperText
Markup Language, tạm dịch: ngôn ngữ đánh dấu siêu văn bản mở rộng) từ năm
1998 đến nay cuộc chiến vẫn diễn ra ác liệt.
e. HTML5
Vào tháng 1 năm 2008, W3C tung ra bản nháp của HTML5 và thế thượng
phong có vẻ nghiêng về HTML (so với XHTML).
Bản HTML5 có nhiều thẻ nhưng cũng có nhiều vấn đề và rất khó để quả
quyết một cách chắc chắn bởi vì mọi việc còn có thể khác hẳn vào ngày mai. Một
thực tế chắc chắn đó là: Bởi vì phiên bản lần này được nghiên cứu bởi các tập
đoàn và các chuyên viên thiết kế, nên kết quả chỉ có thể là bước nhảy vọt đầy ấn
tượng trong dòng chảy của sự phát triển Web, Internet và thiết kế. Trong chuẩn
mới thực sự hoàn chỉnh của HTML, một nhân tố vô cùng quan trọng sẽ đóng
góp vào vai trò ảnh hưởng của HTML 5, đó là: CSS3.
http://vnaking.com/ Trang 5
- GIỚI THIỆU VỀ HTML5
3. GIỚI THIỆU CÔNG NGHỆ HTML5
HTML5 là một ngôn ngữ được thiết kế để thiết lập nội dung web. Nó nhằm
làm cho việc thiết kế và phát triển web dễ dàng hơn bằng cách tạo một giao diện
ngôn ngữ đánh dấu chuẩn hóa và trực quan.HTML5 cung cấp các phương tiện
phân tích và phân định các trang của bạn, và nó cho phép bạn tạo các thành phần
rời rạc. HTML5 có thể được gọi là "cách tiếp cận lập bản đồ thông tin để thiết kế
trang web" do nó kết hợp yếu tố cơ bản về lập bản đồ thông tin, phân chia và ghi
nhãn thông tin giúp dễ dàng sử dụng và hiểu thông tin. Đây là nền tảng của tiện
ích ngữ nghĩa và thẩm mỹ gây ấn tượng sâu sắc của HTML5.
HTML5 cung cấp khả năng xuất bản tất cả mọi thứ trên thế giới từ nội
dung văn bản từ đơn giản đến đa phương tiện phong phú, tương tác cho các nhà
thiết kế và các nhà phát triển ở mọi trình độ.
HTML5 cung cấp các công cụ quản lý dữ liệu, vẽ, video, và âm thanh
hiệu quả. Nó tạo điều kiện cho sự phát triển của các ứng dụng giữa các trình
duyệt với nhau cho trang web cũng như cho các thiết bị di động.
HTML5 là một trong những công nghệ thúc đẩy những cải tiến trong các dịch vụ
điện toán đám mây di động, vì nó tính đến tính linh hoạt rộng hơn, cho phép phát
triển các trang web thú vị và có khả năng tương tác. Nó cũng đưa vào thẻ và các
cải tiến mới, bao gồm cấu trúc thu nhỏ, các nút điều khiển của biểu mẫu, các
API, đa phương tiện, hỗ trợ cơ sở dữ liệu, và tốc độ xử lý nhanh hơn đáng kể.
Tính năng của HTML5:
Các thẻ mô tả chính xác những gì chúng được thiết kế để chứa đựng.
Tăng cường truyề thông mạng.
Cải thiện rất nhiề khả năng lưu trữ chung.
Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền.
Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cư
trú và máy chủ.
Lấy ra dữ liệu đã lưu trữ tốt hơn.
Cải thiện tốc độ nạp và lưu trang.
Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa (GUI), có
nghĩa là HTML5 có thể được định hướng nội dung.
Cải thiện xử lý biểu mẫu trình duyệt.
Một API cơ sở dữ liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy khách..
Canvas và video, để thêm đồ họa và video mà không cần cài đặt các trình
cắm thêm của bên thứ ba.
Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị
của máy điện thoại thông minh để kết hợp các dịch vụ và các ứng dụng đám
mây di động.
http://vnaking.com/ Trang 6
- GIỚI THIỆU VỀ HTML5
Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho phép
truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện
toán đám mây.
4. CÁC ĐỔI MỚI NỔI BẬT TRONG HTML5
a. Cú pháp HTML5
HTML5 sử dụng cú pháp tương thích ngược với HTML4 và XHTML1. Tài
liệu sử dụng cú pháp HTML5 sẽ luôn có định dạng truyền thông là text/html.
Sau đây là một tài liệu HTML5 mẫu:
Example document
Example paragraph
- HTML5 yêu cầu phải định nghĩa DOCTYPE để trình dyệt có thể xác định
được kiểu của tài liệu để hiển thị cho đúng
b. SVG và MathML
HTML5 cho phép vẽ các hình vector SVG (Scalable Vector Graphics) và
soạn các công thức toán học MathML (Mathematical Markup Language) bằng
các thẻ ngay trong mã nguồn.
i. SVG (vẽ các hình học bằng vector)
Để vẽ một hình học vector, ta dùng thẻ bao bọc các thẻ hình
học như , , ,… bên trong.
VD: Để vẽ một vòng tròn với html5 Canvas, chúng sử dụng phương thức
arc() và xác định góc bắt đầu từ 0 và góc kết thúc như 2 * PI.
context.arc(centerX,centerY,radius,0,2*Math.PI,false);
Hình.1 - Hình tròn tạo bởi SVG
Danh sách một số thẻ hình học thường dùng :
http://vnaking.com/ Trang 7
- GIỚI THIỆU VỀ HTML5
Thẻ Công dụng
Vẽ hình chữ nhật
Vẽ hình tròn
Vẽ hình ellipse
Vẽ đường thẳng
Vẽ đa giác
Vẽ chữ
ii. MathML (soạn thảo công thức toán học)
Để soạn thảo công thức toán học, ta dùng thẻ bao bọc các thẻ toán
học như , , ,… bên trong.
Ví dụ: Để hiển thị công thức toán học:
Ta cần viết đoạn code sau:
x
=
−
b
±
b2
−
4
⁢
a
⁢
c
2
⁢
a
Danh sách các thẻ toán học thường dùng :
Thẻ Tên đầy đủ Biểu diễn
http://vnaking.com/ Trang 8
- GIỚI THIỆU VỀ HTML5
mi Math Identifier Toán hạng
mo Math Operator Toán tử
mn Math Number Số
mfrac Math Fraction Phân số
mrow Math Row Một hàng trong phân số
msqrt Math Square Root Căn bậc hai
c. Multimedia với video và audio
Với HTML5 nếu muốn nhúng một bài hát hay một đoạn phim vào một
trang web thì cần một đoạn code ngắn và phía client không cần cài thêm bất kì
một plug-in nào cả. Đây là một trong những thay đổi rất có ý nghĩa của
HTML5, giúp cho việc đưa multimedia lên web trở nên đơn giản và thuận tiện
hơn bao giờ hết.
i. Video
Để chèn một đoạn phim vào trang HTML5, ta có thể dùng thẻ video với
cách viết ngắn gọn như sau mà không cần bất kỳ một plug-in nào (như:
shockwave flash, silverlight,…)
Hình 2 - Đoạn phim được hiển thị bằng thẻ video (không cần 1 plug-in nào)
ii. Audio
Cũng giống như video, thẻ audio cho phép nhúng một bản nhạc vào trong
trang web HTML5 mà phía client không cần cài thêm bất kì một plug-in nào cả.
Một ví dụ về cách dùng thẻ audio:
Not supported.
Hình 3 - Một bài hát được phát bằng thẻ audio
http://vnaking.com/ Trang 9
- GIỚI THIỆU VỀ HTML5
Bảng tương thích của trình duyệt với các định dạng audio:
Internet Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Explorer Trở lên Trở lên Trở lên Trở lên
OGG X X X
MP3 X X
WAV X X X
Sau đây là danh sách các thuộc tính của thẻ audio (tích hợp trong html5) :
Thuộc tính Giá trị Ý nghĩa
Tự động chạy audio ngay sau khi load trang web
autoplay autoplay
xong.
Hiển thị bảng điều khiển (play/pause, volume,
controls controls
timeline).
loop loop Tự động chạy lại từ đầu khi xem xong.
Load audio ngay lúc load trang web. (Bị bỏ qua
preload preload
nếu autoplay đã được đặt)
src url Đường dẫn đến file audio muốn chạy.
d. Canvas (Vẽ đồ họa)
Thẻ canvas định nghĩa một vùng chữ nhật mà có thể làm việc được các
pixel trên đó. Ta có thể vẽ lên canvas các hình như đường thẳng, hình chữ nhật,
hình tròn, văn bản,... một cách dễ dàng bằng các hàm Javascript. Với lợi thế này
ta có thể ứng dụng canvas trong rất nhiều lĩnh vực như: đồ hoạ, game, trình
chiếu,.. Các trình duyệt như Firefox , Safari, Chrome và Opera các phiên bản
cuối sau này đểu hỗ trợ Canvas.
Để tạo ra một đối tượng canvas mới, ta thêm thẻ canvas và xác định các
thuộc tính id, width, height.
Thẻ canvas không thể tự vẽ bằng các thẻ con giống như svg mà ta phải
dùng đến các hàm Javascript.
Hình 4 - Một hình ảnh đươc vẽ trên canvas
Không chỉ ứng dụng trong đồ hoạ 2D, hiện tại với sự hỗ trợ của một số thư
viện như WebGL ta có thể vẽ được cả các hình ảnh 3D trên canvas
http://vnaking.com/ Trang 10
- GIỚI THIỆU VỀ HTML5
Hình 5 - Một game 3D sử dụng canvas chạy trên nền web (html5)
e. Form
Trong phiên bản HTML5, form đã có nhiều cải tiến về cách thức chuyển dữ
liệu (hỗ trợ thêm PUT, GET) cũng như thêm rất nhiều các điều khiển nhập liệu
mới (datetime, color, number,…).
Sau đây là những thuộc tính thay đổi so với HTML4 :
Thuộc tính Giá trị Mô tả
accept MIME_type Bị loại bỏ khỏi HTML5
Nếu on, trình duyệt sẽ lưu các giá trị người dùng đã nhập,
autocomplete on | off
và sẽ hiển thị lại chúng nếu người dùng quay lại trang đó.
get: phương thức này sẽ gửi nội dung form dưới dạng
URL: URL?name=value
post: phương thức này sẽ gửi nội dung form bên trong nội
dung của request.
get | post | put
method put: Nếu kiểu action là http giống post. Nếu kiểu action là
| delete
file, tạo ra một file mới.
delete: Nếu kiểu action là http, bỏ qua các giá trị điền ở
form, và chuyển đến trang đích. Nếu kiểu action là file,
xoá file được chỉ định.
Nếu được chỉ định sẽ không kiểm tra tính đúng đắn của dữ
novalidate novalidate
liệu nhập trong form khi submit.
i. Input
Các điểu khiển input trong HTML5 được bổ sung thêm rất nhiều và phong
phú, giúp người dùng có thể dễ dàng nhập liệu và lập trình viên có thể dễ dàng
đảm bảo tính hợp lệ của dữ liệu.
Sau đây là các thuộc tính mới của thẻ input:
THUỘC TÍNH GIÁ TRỊ MÔ TẢ
autocomplete on | off Nếu on, trình duyệt sẽ lưu lại giá trị được nhập và
hiển thị lại nếu trang được mở lại.
autofocus autofocus Điều khiển sẽ được focus khi load web xong.
form tên form Xác định một hoặc nhiều form mà điều khiển này
thuộc về.
http://vnaking.com/ Trang 11
- GIỚI THIỆU VỀ HTML5
height pixels, % Xác định chiều cao của điều khiển
list id của một datalist Xác định danh sách dữ liệu mà điều khiển này
hiện xổ xuống khi người dùng nhập liệu.
max number Giá trị lớn nhất mà người dùng có thể nhập vào
điều khiển này.
min number Giá trị lớn nhỏ mà người dùng có thể nhập vào
điều khiển này.
pattern Javascript Pattern Định ra mẫu mà người dùng phải tuân theo. Ví dụ
mẫu: “[0-9]”, tức là người dùng chỉ được nhập 1
số từ 0 đến 9.
placeholder text Dòng chữ hiển thị trên điều khiển khi người dùng
chưa nhập gì. Dùng để hướng dẫn người dùng
nhập dữ liệu đúng.
required required Người dùng bắt buộc phải nhập dữ liệu vào điều
khiển này khi submit.
spellcheck true | false Kiểm tra chính tả khi người dùng nhập liệu.
step number Bước nhảy của mỗi giá trị. Được áp dụng cho các
điều khiển date, datetime, datetime-local, month,
week, time, number, và range.
tabindex number Thứ tự được focus của điều khiển khi người dùng
nhấn tab.
type color color: Chọn màu.
date date: Chọn ngày, tháng, năm.
datetime datetime: Chọn ngày, tháng, năm, giờ, múi giờ.
datetime-local datetime-local: Chọn ngày, tháng, năm, giờ.
email email: Nhập email.
image image: Chọn ảnh.
month month: Chọn tháng.
number number: Chọn số.
range range: Chọn số trong một khoảng xác định.
search search: Nhập giá trị cần tìm kiếm.
tel tel: Nhập số điện thoại.
time time: Chọn giờ.
url url: Nhập đường dẫn.
week week: Chọn tuần.
width pixels, % Xác định chiều rộng của điều khiển.
http://vnaking.com/ Trang 12
- GIỚI THIỆU VỀ HTML5
Hình 6 - Một Form và các điều khiển input mới của HTML5
ii. Output
Đây là một điều khiển mới trong HTML5.
Sau đây là các thuộc tính mới của thẻ output:
THUỘC TÍNH GIÁ TRỊ MÔ TẢ
Đặc tả một hoặc nhiều thành phần hơn mà
for id
trường ouput liên quan
Đặc tả một hoặc nhiều form mà trường
form formid
ouput lệ thuộc vào
Đặc tả tên đối tượng (dùng khi form được
name name
submit)
Hình 8 - Form và các điều khiển output mới của HTML5
http://vnaking.com/ Trang 13
- GIỚI THIỆU VỀ HTML5
f. Thuộc tính toàn cục
Một số thuộc tính toàn cục mới trong HTML5 phổ biến như contenteditable
(xác định nội dung thẻ đó có thể được thay đổi bởi người dùng hay không),
draggable (xác định thẻ đó có thể kéo được hay không), spellcheck (xác định có
kiểm tra chính tả khi người dùng nhập liệu hay không).
i. ContentEditable
ContentEditable là một thuộc tính toàn cục trong HTML5 mà nếu thẻ nào
được gán thuộc tính này thì người dùng có thể trực tiếp sửa đổi nội dung trong
thẻ đó.
Hình 40 - Một chương trình soạn thảo chạy trên nền web
sử dụng thuộc tính ContentEditable để chỉnh sửa nội dung
ii. Draggable
Với việc hỗ trợ kéo thả, các trang web HTML5 trở nên mềm dẻo và thân
thiện với người dùng hơn bao giờ hết. Để sử dụng khả năng này, ta cần xác định
ra một đối tượng có thể kéo được bằng cách gán thuộc tính toàn cục draggable =
“true”.
Để xử lí các sự kiện kéo thả, ta cần đến sự trợ giúp của các API được xây
dựng sẵn trong HTML.
Hình 41 - Kéo thả với HTML5
iii. SpellCheck
SpellCheck là một thuộc tính toàn cục giúp người dùng nhận ra những lỗi
sai chính tả trong khi nhập liệu bằng cách gạch chân đỏ những từ sai. Thuộc tính
này thường được dùng với thẻ input, textarea nếu thuộc tính này được gán với
các thẻ khác, thì tất cả các thẻ con của nó cũng được kiểm tra chính tả.
Ví dụ thiết lập một điều khiển input có thể kiểm tra chính tả:
http://vnaking.com/ Trang 14
- GIỚI THIỆU VỀ HTML5
Nhập thử từ “Group I 5”, nhưng nhập sai thành “Grop I 5”. Trình duyệt sẽ
gạch đỏ dưới chữ sai “Grop”.
Hình 42 - Trình duyệt gạch đỏ dưới chữ sai chính tả
g. Lưu trữ dữ liệu cục bộ ngoại tuyến
Lưu trữ dữ liệu cục bộ ngoại tuyến (Local Offline Storage) là một tính năng
mới của HTML5 cho phép một tài liệu HTML có 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.
http://vnaking.com/ 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
http://vnaking.com/ 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ả.
http://vnaking.com/ 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.
http://vnaking.com/ 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.
http://vnaking.com/ 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.
http://vnaking.com/ Trang 20
nguon tai.lieu . vn
