Giới thiệu

Chào mừng bạn đến với HTML5. Bài viết này ta sẽ tìm hiểu các thẻ cơ bản có mặt trong HTML5. Bài viết cũng liệt kê các loại dữ liệu, thuộc tính và thực thể khác nhau của HTML5. Cuối cùng, bài viết giải thích những lợi thế của việc sử dụng HTML5 trong phát triển ứng dụng di động.

Các chủ đề của bài viết:

  • Các thành phần cấu thành một thẻ HTML
  • Khai báo DOCTYPE
  • Các thẻ cơ bản trong HTML
  • Các loại dữ liệu, thuộc tính và thực thể khác nhau trong HTML
  • Thẻ đôi và thẻ đơn
  • Giải thích vai trò của HTML5 trong các thiết bị di động.

Tổng quan

Tất cả các phần tử trong HTML5 được tổ chức bằng cách sử dụng các thẻ. Các thẻ cơ bản trong HTML5 bao gồm <html>, <head>, <title>, <meta>, <link>, <script> và <body>. Lưu ý rằng DOCTYPE phải được cung cấp trước khi chèn các thẻ cơ bản trong HTML5. Có nhiều loại dữ liệu, thuộc tính và thực thể khác nhau có thể được áp dụng cho các thẻ có trong HTML5. Tất cả các thẻ được phân thành các thẻ đôi và thẻ đơn. Phân loại này dựa trên việc sử dụng thẻ kết thúc cho một phần tử HTML nào đó. HTML5 cũng là ngôn ngữ ưa thích dành cho phát triển ứng dụng di động vì các lợi ích khác nhau của nó.

Các thành phần cấu thành một thẻ HTML

Mỗi phần tử tổ chức nội dung trong một trang web ở dạng phân cấp, tạo thành cấu trúc HTML cơ bản. Nó bao gồm các thẻ, thuộc tính và nội dung. Thẻ biểu thị sự bắt đầu và kết thúc của một phần tử HTML.

Thẻ bắt đầu bao gồm dấu nhỏ hơn (<) tiếp theo là tên phần tử, không hoặc nhiều thuộc tính cách nhau bằng khoảng trắng và dấu lớn hơn (>). Thuộc tính là các cặp tên/giá trị mô tả phần tử và định dạng nội dung. Thẻ kết thúc được viết chính xác như thẻ bắt đầu, nhưng có dấu gạch chéo (/) đứng trước tên phần tử. Sơ đồ dưới đây trình bày một phần tử trong thẻ HTML.

HTML5: Cấu trúc của một phần tử
Cấu trúc của một phần tử HTML

Ghi chú: Thẻ được gọi là đánh dấu (mark) trong tài liệu HTML.

Khai báo DOCTYPE

Phần tử DOCTYPE thông báo cho trình duyệt số phiên bản HTML của tài liệu của bạn. Đây là khai báo đầu tiên trong tài liệu HTML5 trước khi bất kỳ mã HTML nào khác được viết. Bằng cách sử dụng DOCTYPE, trình duyệt có thể hiểu được chính xác hơn theo cách nó diễn giải và tái tạo các trang web của bạn. Hết sức khuyến cáo rằng nên sử dụng DOCTYPE ở đầu của tất cả các tài liệu HTML.

Khai báo DOCTYPE của HTML5 mới như sau:

<!DOCTYPE html>

Xin lưu ý rằng đây là một khai báo, không phải là một thẻ. Khai báo trên không chỉ là cú pháp hợp lệ trong HTML5, mà còn hợp lệ cho tất cả các phiên bản sau này của HTML, thậm chí nó còn tương thích ngay cả với các trình duyệt cũ.

Các thẻ cơ bản trong HTML5

Tài liệu HTML được tạo thành từ các phần tử, thẻ và thuộc tính khác nhau, trong đó chỉ rõ nội dung và định dạng của nó. Do đó, HTML là ngôn ngữ đánh dấu cả cấu trúc và trình bày. Đánh dấu cấu trúc chỉ rõ cấu trúc của nội dung, trong khi đánh dấu trình bày chỉ rõ định dạng.

Trang HTML được lưu với phần mở rộng là '.html'. Cấu trúc cơ bản của một tài liệu HTML chủ yếu bao gồm bảy thẻ cơ bản. Chúng bao gồm:

1. HTML

Phần tử HTML là phần tử gốc đánh dấu sự khởi đầu của một tài liệu HTML. Nó chứa mã bắt đầu và kết thúc ở dạng <HTML> và </HTML> tương ứng. Đây là phần tử bộ chứa lớn nhất vì nó có chứa các phần tử khác nhau.

2. HEAD

Phần tử <HEAD> cung cấp thông tin về trang web như các từ khoá và ngôn ngữ sử dụng, mà không được hiển thị trên trang web. Từ khóa là những thuật ngữ quan trọng tồn tại trong một trang web được sử dụng bởi các công cụ tìm kiếm để xác định trang web liên quan đến tiêu chí tìm kiếm.

3. TITLE

Phần tử TITLE cho phép bạn xác định tiêu đề của trang web bằng thẻ <TITLE> và </TITLE>. Tiêu đề được hiển thị trên thanh tiêu đề của trình duyệt web. Phần tử TITLE nằm trong phần tử HEAD.

4. META

Thẻ <META /> là loại thẻ đơn được sử dụng để hiển thị thông tin về dữ liệu. Trong HTML5, thẻ meta nội dung được sử dụng để xác định bộ ký tự hoặc mã hóa ký tự đã được đơn giản hóa. Thẻ <META /> mới có dạng như sau:

<meta charset="utf-8" />

UTF-8 là mã hóa ký tự thường được sử dụng nhất có hỗ trợ nhiều bảng chữ cái. UTF-8 cũng được quảng bá là tiêu chuẩn mới. Có một số thuộc tính khác liên quan đến thẻ meta có thể được sử dụng để khai báo thông tin chung về trang. Thông tin này không được hiển thị trong trình duyệt. Các thẻ meta cung cấp cho công cụ tìm kiếm, trình duyệt và các dịch vụ web thông tin cần thiết để xem trước hoặc có được một bản tóm tắt các dữ liệu có liên quan đến tài liệu của bạn.

Trong HTML5, việc có hay không có dấu gạch chéo ở cuối đối với thẻ đơn là không quan trọng lắm. Mặc dù vậy, bạn nên sử dụng dấu gạch chéo vì các lý do tương thích.

5. LINK

Thẻ <LINK /> được sử dụng để xác định mối liên hệ giữa một tài liệu và một tài nguyên bên ngoài. Nó được sử dụng để liên kết bảng định kiểu phân tầng (CSS). Thuộc tính type của nó được sử dụng để chỉ ra loại liên kết như 'text/css' chỉ tới một style sheet. Ví dụ:

<link type="text/css" rel="stylesheet" href="css.css" />

Thuộc tính type không được đưa vào trong HTML5. Lý do là CSS đã được tuyên bố như là kiểu mặc định và tiêu chuẩn cho HTML5. Vì vậy, thẻ <LINK> mới có dạng đơn giản hơn như sau:

<link rel="stylesheet" href="css.css" />

6. SCRIPT

Với HTML5, bây giờ JavaScript là ngôn ngữ kịch bản tiêu chuẩn và mặc định. Do đó, bạn cũng có thể loại bỏ thuộc tính type từ các thẻ kịch bản. Thẻ kịch bản mới như vậy sẽ đơn giản như sau:

<script src="js.js"></script>

Ví dụ sau đây cho thấy việc sử dụng thẻ <script>.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML cách dùng thẻ script</title>
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
  </head>
</html>

7. BODY

Phần tử BODY cho phép bạn thêm nội dung sẽ được thể hiện trên trang web được chỉ ra bên trong thẻ <BODY> và </BODY>. Nội dung có thể bao gồm văn bản, siêu liên kết và hình ảnh. Bạn có thể hiển thị nội dung bằng cách sử dụng các tùy chọn định dạng khác nhau như căn chỉnh, màu sắc và nền. Hình dưới đây trình bày các phần tử HTML cơ bản.

HTML5: Thẻ Body

Các loại dữ liệu trong HTML

Loại dữ liệu quy định loại giá trị được gán cho các thuộc tính và loại nội dung mà sẽ được hiển thị trên trang web. Các loại nội dung khác nhau bao gồm văn bản, hình ảnh, siêu liên kết, video và âm thanh. Các loại dữ liệu giúp xác định loại định dạng như màu sắc và độ dài của dữ liệu.

Dưới đây là danh sách các loại dữ liệu HTML cơ bản và quan trọng.

- Text String (Chuỗi văn bản)

Xác định nội dung văn bản mà người dùng có thể đọc.

Mã nhận dạng tài nguyên đồng nhất (URI)

Xác định vị trí của các trang web hoặc các tập tin mạng.

Màu sắc (Color)

Xác định màu sắc được áp dụng cho nội dung trên trang web.

Độ dài (Length)

Xác định khoảng cách giữa các phần tử HTML. Giá trị chiều dài có thể là ở dạng Pixels, Length hoặc MultiLength. Pixels đề cập đến chấm nhỏ trên màn hình. Length được chỉ ra bằng giá trị phần trăm của Pixels hoặc không gian có sẵn trên màn hình. MultiLength có thể được chỉ ra bằng Pixels hoặc tỷ lệ phần trăm.

Các loại nội dung (Content type)

Xác định loại nội dung được hiển thị trên một trang web. Ví dụ về các loại nội dung bao gồm "text/html" để hiển thị văn bản sử dụng định dạng HTML, "image/gif" để hiển thị hình ảnh ở định dạng .gif, và "video/mpg" để hiển thị tập tin video có định dạng .mpg.

Các loại thuộc tính HTML

Các thuộc tính HTML giúp cung cấp một số ý nghĩa và ngữ cảnh cho các phần tử. Một số thuộc tính chung được sử dụng trong các phần tử HTML5 như sau:

class - Chỉ ra tên lớp cho một phần tử.

contextmenu - Chỉ ra menu ngữ cảnh cho một phần tử.

dir - Chỉ ra hướng của văn bản thể hiện về nội dung. Có hai hướng là ltr (left to right) và rtl (right to left).

draggable - Chỉ ra chức năng có thể kéo của một phần tử.

dropzone - Chỉ ra có thể dữ liệu khi kéo được sao chép, di chuyển, hoặc liên kết khi giảm.

style - Chỉ ra kiểu CSS trong dòng (inline) cho một phần tử.

title - Chỉ ra thêm thông tin về phần tử.

Các loại thực thể HTML

Thực thể là các ký tự đặc biệt được dành riêng trong HTML. Những thực thể này có thể được hiển thị trên website HTML5 sử dụng cú pháp sau:

Cú pháp:

&tên_thực_thể;
hoặc:
&#mã_số_thực_thể;

Hình ảnh dưới đây cho thấy một số thực thể HTML thường được sử dụng.

HTML5: Các thực thể
Một số thực thể HTML

Thẻ đôi và thẻ đơn

Có hai loại thẻ (hoặc phần tử) HTML cụ thể là đôi và thẻ đơn. Thẻ đôi bao gồm thẻ bắt đầu (hay thẻ mở), nội dung, các phần tử phụ và thẻ kết thúc (hay thẻ đóng). Tất cả các thẻ HTML cơ bản là thẻ đôi. Thẻ đơn bao gồm phần bắt đầu (<) và các thuộc tính tiếp theo là phần kết thúc (/> hoặc >) mà không có nội dung.

HTML5 và các thiết bị di động

HTML5 đã giúp tạo ra các ứng dụng di động tốt hơn và phong phú hơn thông các API được sử dụng trong trong nó. Những API này hỗ trợ các tính năng ứng dụng web tiên tiến cho các trình duyệt di động.

HTML5 không được các thiết bị điện thoại di động cũ hỗ trợ. Những dòng điện thoại thông minh hiện đại với hệ điều hành Apple iOS hay Google Android hỗ trợ các trình duyệt tương thích với HTML5. Ngay cả Microsoft Windows 7 for Mobile sẽ có một trình duyệt mới được phát triển để hỗ trợ các website và ứng dụng được phát triển bằng HTML5.

Do các nền tảng di động khác nhau có sẵn trên các thiết bị di động, nên việc phát triển các ứng dụng di động trở nên khó khăn hơn. HTML5 đã cố gắng tích hợp tất cả các tính năng để triển khai các ứng dụng di động mà có thể tương thích với tất cả các nền tảng. HTML5 cung cấp các tính năng như chức năng kéo và thả, nhúng video vào ứng dụng, và thậm chí bao gồm cả các khả năng hoạt động ngoại tuyến.

Do HTML5 tương thích với hầu hết các hệ điều hành di động nên sẽ tiết kiệm tới 30% chi phí cho sự phát triển các hệ điều hành khác nhau. Ngoài ra, sẽ giảm sự phụ thuộc vào các thành phần của bên thứ ba, và do đó làm giảm chi phí cấp giấy phép. Tất cả các thành phần cần thiết sẽ được cung cấp sẵn thông qua trình duyệt ở dạng HTML5.

Lợi ích của HTML5 cho phát triển di động

Những lợi ích của HTML5 cho sự phát triển di động như sau:

- HMTL5 đã đưa vào API, do đó không cần phải có các plug-in bổ sung cho trình duyệt di động.

- Việc phát triển di động trở nên dễ dàng hơn bởi chủ yếu chỉ cần các kiến thức về HTML5, CSS và JavaScript. Điều này dễ dàng hơn khi so với các ngôn ngữ khác được sử dụng để phát triển di động. Việc phát triển cũng nhanh hơn khi dùng HTML5.

- Do có tốc độ tăng trưởng cao cho các ứng dụng di động và do tính tương thích nâng cao của nó, HTML5 hiện đang là nền tảng cho việc phát triển những ứng dụng di động này.

- HTML5 tương thích với hầu hết các nền tảng hệ điều hành. Các ứng dụng di động được phát triển trên HTML5 có thể chạy trên các trình duyệt của Android, iOS, Blackberry, Windows Phone và các hệ điều hành di động khác.

- Chi phí phát triển để tạo ra các ứng dụng bằng HTML5 thấp.

- Các ứng dụng dựa trên vị trí và bản đồ sẽ có sự hỗ trợ lớn hơn trong HTML5. Kế hoạch này là để hỗ trợ các ứng dụng như vậy trên các trình duyệt, và do đó sẽ tạo thành nền tảng độc lập.

- Không cần các chương trình của bên thứ ba trong HTML5. Do đó, các tính năng đa phương tiện như âm thanh và video có chức năng tốt hơn và cải thiện hỗ trợ trong HTML5.

<article>

Thẻ (phần tử) <article> thường được dùng để đặt phần chính của trang web, nội dung các bài đăng trên các diễn đàn, blog, các trang tin tức, các bình luận, ...

<article> thuộc nhóm phần tử Cấu trúc/Ngữ nghĩa.

Cú pháp:

<article>Nội_dung</article>

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<article>

<h1>Internet Explorer 9</h1>

<p>Windows Internet Explorer 9 (viết tắt là IE9) được phát hành vào ngày 14/03/2011</p>

</article>

</body>

</html>

 

<!-- ... --> (thẻ chú thích-comment)

Tổng quan

Thẻ <!-- ... --> (thẻ chú thích) dùng để tạo chú thích trong tài liệu HTML, theo đó những thẻ hoặc nội dung nào nằm trong nó sẽ được coi là chú thích.

Thẻ chú thích không có bất kỳ thuộc tính nào.

Cú pháp:

<!-- Phần chú thích -->

Ví dụ:

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<!-- Bạn sẽ không thấy được nội dung này: <a href="http://demo.v1study.com">demo.v1study.com</a> -->

<a href="http://v1study.com">v1study.com</a>

</body>

</html>

 

Thẻ <script> nằm trong thẻ chú thích cũng được coi là chú thích.

<!-- <script>alert('Xin chào Comment!');</script> -->

Khi bạn đặt thẻ chú thích vào thẻ <script> thì những gì nhằm trong thẻ chú thích lại không được coi là chú thích nếu bạn viết như sau:

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<script>

<!--

alert('Xin chào Comment!');

-->

</script>

</body>

</html>

 

Tuy nhiên, nếu bạn viết như sau thì những gì nằm trong thẻ chú thích sẽ được coi là chú thích:

<script>

<!-- alert('Xin chào Comment!'); -->

</script>

Lưu ý là bạn không áp dụng được thẻ chú thích cho thẻ PHP: <?php ... ?>.

Thẻ chú thích cũng có thể áp dụng cho một vài tình huống đặc biệt mà nội dung trong nó mặc dù được coi là chú thích nhưng vẫn tạo hiệu ứng. Chẳng hạn như nếu bạn muốn các trình duyệt Internet Explorer (IE) từ phiên bản 8 trở xuống có thể hiểu được các thẻ của HTML5 bạn làm như sau:

<!--[if lt IE 9]>

<script src="js/html5shiv-3.7.2/dist/html5shiv.js"></script>

<![endif]-->

Xem thêm

· Kích hoạt HTML5 trên IE8-.

URL là gì?

URL, viết tắt của Uniform Resource Locator (Định vị Tài nguyên thống nhất), được dùng để tham chiếu tới tài nguyên trên Internet. URL mang lại khả năng siêu liên kết cho các trang mạng. Các tài nguyên khác nhau được tham chiếu tới bằng địa chỉ, chính là URL, còn được gọi là địa chỉ web hay là liên kết mạng (hay ngắn gọn là liên kết).

Về kỹ thuật, URL là một dạng của URI, nhưng trong nhiều tài liệu kỹ thuật và cũng như trong các cuộc thảo, URL thường được sử dụng như một từ đồng nghĩa với URI, và điều này không bị coi là một vấn đề.

Lịch sử

Uniform Resource Locator được chuẩn hóa từ năm 1994, bởi Tim Berners-Lee và các nhóm làm việc URI của Internet Engineering Task Force (IETF) như một kết quả của sự hợp tác, khởi đầu từ tài liệu IETF "Birds of a Feather" vào năm 1992.

Cấu trúc

Một URL gồm có nhiều phần được liệt kê dưới đây:

  • URL scheme thường là Tên giao thức (ví dụ: http, ftp) nhưng cũng có thể là một cái tên khác (ví du: news, mailto). Muốn hiểu rõ về URL scheme xin xem URI scheme
  • Tên miền (domain), ví dụ: http://v1study.com
  • Chỉ định thêm cổng (có thể không cần)
  • Đường dẫn tuyệt đối trên máy phục vụ của tài nguyên (ví dụ: thumuc/trang)
  • Các truy vấn (có thể không cần)
  • Chỉ định mục con (có thể không cần)

Hình ảnh minh hoạ dưới đây sẽ thể hiện cụ thể hơn:

 

Hiện nay trên thế giới mỗi ngày có rất nhiều tên miền (domain) mới xuất hiện.

Để có thể tìm đến một đường dẫn internet để chỉ mục nội dung cần thiết phục vụ cho người sử dụng internet, chúng ta có thể sử dụng các công cụ trên mạng internet. Hiện nay các công cụ tìm kiếm trên mạng Internet ngày càng phổ biến và được sử dụng rộng rãi. Hoặc chúng ta có thể sử dụng việc tìm kiếm đến URL thích hợp thông qua danh bạ các website hay là các công cụ tìm kiếm.

Mối quan hệ giữa URL và URN, URI

Sơ đồ Euler biểu diễn URI hoặc là một định vị tài nguyên thống nhất (URL), hoặc một tên tài nguyên thống nhất (URN), hoặc cả hai.

 Về kỹ thuật, URL là một dạng của URI, nhưng trong nhiều tài liệu kỹ thuật và các cuộc thảo luận bằng lời nói, URL thường được sử dụng như một từ đồng nghĩa với URI, và điều này không bị coi là một vấn đề.

URI có thể được phân loại như là nhận dạng (URL), như tên gọi (URN), hoặc là cả hai. Một Định danh tài nguyên thống nhất (Uniform Resource Name - URN) có chức năng giống như tên của một người, trong khi một Định vị tài nguyên thống nhất (Uniform Resource Locator - URL) tương tự như địa chỉ đường phố của người đó. Nói cách khác: URI xác định việc nhận dạng cho đối tượng, trong khi URNđặt tên và URL cung cấp phương pháp tìm đối tượng đó.

Hệ thống mã số ISBN sử dụng để nhận dạng sách đã cung cấp một ví dụ rất cụ thể về URN. Chỉ số ISBN 0486275574 (run:isbn:0-486-27557-4) cho biết đây là một ấn bản truyện kịch Romeo và Juliet của Shakespeare. Để tìm cuốn sách này, phải cần địa chỉ cuốn sách đó chính là địa chỉ URL. Đường dẫn địa chỉ URL của cuốn sách trên hệ thống Unix sẽ có địa chỉ như là: file:///home/username/RomeoAndJuliet.pdf, đây là đường dẫn tập tin được lưu trên ổ cứng máy tính. Vì vậy URN và URL luôn có mục đích hỗ trợ & bổ sung cho nhau.

!DOCTYPE

Tổng quan

DOCTYPE (document type declaration) là một chỉ dẫn liên quan đến một SGML (Standard Generalized Markup Language) cụ thể hoặc một tài liệu XML (ví dụ như một trang web) với một định nghĩa kiểu tài liệu (document type definition - DTD) (ví dụ, định nghĩa chính thức phiên bản cụ thể của HTML). Tuân theo cú pháp của trang web, DOCTYPE thể hiện là phần viết ngắn gọn như sau: <!DOCTYPE>.

Vì vậy, <!DOCTYPE> không phải là một thẻ HTML, nó là một lệnh khai báo, dùng để khai báo kiểu của tài liệu HTML.

Trong tài liệu HTML, <!DOCTYPE> phải được đặt trước thẻ <HTML>.

Theo cách thức bố cục các trang HTML mà không theo chuẩn HTML5 của các trình duyệt hiện nay thì DOCTYPE sẽ có nhiệm vụ "đánh hơi" hoặc "chuyển đổi", cụ thể DOCTYPE sẽ xác định cách thức bố trí các trang tài liệu dạng text/html theo cách thức nào, chẳng hạn như cách thức "quirks mode" hay "standards mode". Còn đối với HTML5 là chuẩn HTML không dựa trên SGML thì việc sử dụng DOCTYPE chỉ mang tính hình thức.

Vì nhiệm vụ chủ yếu của các trình duyệt là thực thi các trang web dựa trên phân tích cú pháp HTML chứ không phải là phân tích cú pháp DTD nên các trình duyệt không sử dụng đến các DTD và cũng không bao giờ truy cập đến chúng. Hơn nữa, các trình duyệt hiện đại đang cạnh tranh nhau rất quyết liệt trong vấn đề hỗ trợ tốt nhất theo chuẩn HTML5, vậy nên DOCTYPE trong các trình duyệt này có thể coi là dư thừa.

Cú pháp

Cú pháp tổng quát của DOCTYPE là như sau:

<!DOCTYPE Phần_tử_gốc PUBLIC "FPI" ["URI"] [<!-- khai báo tập con trong -->] >
Hoặc:
<!DOCTYPE Phần_tử_gốc SYSTEM "URI" [<!-- khai báo tập con trong -->] >

Giải thích cú pháp:

Trong XML, Phần_tử_gốc là phần tử đầu tiên trong tài liệu, ví dụ trong XHTML phần tử gốc là <html>, các từ khóa PUBLIC hay SYSTEM thể hiện loại DTD (lựa chọn PUBLIC tức là tài liệu cho phép được phổ biến, SYSTEM tức là tài liệu không được phổ biến). Nếu lựa chọn là PUBLIC thì theo sau nó là một Định danh công cộng chính quy (Formal Public Identifier - FPI) được đặt trong cặp nháy kép, và sau đó phải là một định danh hệ thống (system identifier) và cũng được đặt trong cặp nháy kép. Ví dụ,  FPI của XHTML 1.1 là "-//W3C//DTD XHTML 1.1//EN" và có thể có 3 định danh hệ thống cho phép đối với XHTML 1.1 tùy thuộc vào nhu cầu, một trong số đó là tham chiếu URI "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd". Còn nếu lựa chọn là SYSTEM thì chỉ cho phép có một định danh hệ thống, tức là bộ phân tích cú pháp XML sẽ phải tìm đến các DTD trong hệ thống, tham chiếu URI sẽ được đặt trong cặp nháy kép. Phần cuối cùng (đặt trong cặp ngoặc vuông []) được gọi là tập con trong (đây là một tùy chọn) được dùng để sửa hoặc thêm các thực thể hoặc được dùng để sửa hoặc thêm các hành vi ứng với lựa chọn PUBLIC.

Một điều nữa cần nói tới, đó là DOCTYPE có điểm khác so với các tài liệu dựa trên SGML như HTML chẳng hạn, đó là bộ định danh công cộng có thể kết hợp với bộ định danh hệ thống, sự kết hợp này có thể được thực hiện bằng cách chuyển FPI tới bộ định danh hệ thống.

Ví dụ

Dòng đầu tiên của các trang World Wide Web thường là như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ar" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

Giải thích:

Khai báo kiểu tài liệu này là cho XHTML được tích hợp bằng cách tham chiếu tới một DTD, sử dụng bộ định danh public là -//W3C//DTD XHTML 1.0 Transitional//EN và bộ định danh hệ thống là http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; không có tập con trong; phần tử gốc là html.

Khai báo DOCTYPE với phiên bản HTML 4.01 DTD

Strict DTD

Ví dụ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional DTD

Ví dụ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

Ví dụ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Khai báo DOCTYPE với phiên bản XHTML 1.0 DTD

XHTML Strict DTD

Ví dụ:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

XHTML Transitional DTD

Ví dụ:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

XHTML Frameset DTD

Ví dụ:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Khai báo DOCTYPE với phiên bản XHTML 1.1 DTD

XHTML 1.1 là phiên bản XHTML cuối cùng, phiên bản này hỗ trợ cho việc modul hoá XHTML. XHTML 1.1 thừa hưởng tính nghiêm ngặt của XHTML 1.0 Strict.

Ví dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Khai báo DOCTYPE với phiên bản XHTML Basic DTD

XHTML Basic 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

XHTML Basic 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

Khai báo DOCTYPE với phiên bản XHTML Mobile Profile DTD

XHTML Mobile Profile 1.0

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

XHTML Mobile Profile 1.1

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">

XHTML Mobile Profile 1.2

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

Khai báo DOCTYPE với phiên bản HTML5

HTML5 là phiên bản không dựa trên SGML nên khai báo <!DOCTYPE> không cần tham chiếu tới DTD nào cả. Và vì vậy khai báo <!DOCTYPE> trong HTML5 đơn giản như sau:

<!DOCTYPE html>

Thẻ <meta>

Tổng quan

Thẻ <meta> dùng để trình bày bất kỳ loại thông tin siêu dữ liệu (metadata) nào cho dù metadata không thể được trình bày với những thẻ liên quan đến <meta> (như <base>, <link>, <script>, <style>, <title>).

HTML5: Thẻ <meta />

Tùy thuộc vào thuộc tính, thẻ <meta> sẽ có thể trình bày những siêu dữ liệu sau đây:

· nếu là thuộc tính name thì siêu dữ liệu ở mức tài liệu (document-level) sẽ được áp dụng cho toàn bộ trang web;

· nếu là thuộc tính http-equiv thì một chỉ thị pragma được đưa ra để yêu cầu máy chủ web cho biết cách thức phục vụ trang web tương ứng;

· nếu là thuộc tính charset (thuộc tính của HTML5) thì một bảng mã sẽ được cung cấp nhằm điều chỉnh dạng dữ liệu sẽ được hiển thị trong trang web;

· ​nếu là thuộc tính là itemprop thì một siêu dữ liệu do người dùng định nghĩa sẽ được chuyển cho tác nhân người dùng.

Nhóm nội dung: meta thuộc nhóm nội dung siêu dữ liệu. Nếu thuộc tính itemprop được sử dụng thì nhóm nội dung sẽ bao gồm thêm Flow và Phrasing.

Nội dung được phép: Thẻ <meta> không chứa nội dung.

Thẻ đóng: Thẻ <meta> là thẻ đơn (<meta />).

Phần tử cha được phép:

<meta charset>, <meta http-equiv> nằm trong thẻ <head>; <meta charset> cũng có thể nằm trong thẻ <body>; nếu thuộc tính http-equiv không phải là một khai báo mã hóa thì <meta> có thể nằm trong thẻ <noscript>.

<meta name>: bất kỳ phần tử nào chấp nhận nhóm nội dung Metadata.

<meta itemprop>: bất kỳ phần tử nào chấp nhận nhóm nội dung Metadata hoặc nhóm nội dung Parsing.

Giao diện DOM: HTMLMetaElement.

Thuộc tính

Thẻ <meta> bao gồm các thuộc tính Global.

Lưu ý rằng thuộc tính name có một ý nghĩa đặc biệt trong thẻ <meta> và thuộc tính itemprop không được phép thiết lập khi một trong các thuộc tính namehttp-equiv hoặc charset đang được sử dụng.

charset

Thuộc tính này được dùng để khai báo một bảng mã ký tự dùng cho trang web, thuộc tính này có thể được ghi đè (cục bộ) bằng cách sử dụng thuộc tính lang trong mỗi thẻ; charset chứa một hằng chuỗi trong danh sách các giá trị được xổ ra khi bạn mở nháy kép; trong trường hợp danh sách xổ ra không có bảng mã ký tự bạn mong muốn thì bạn có quyền điền một bảng mã ký tự theo ý mình nhưng nó phải nằm trong danh sách các bảng mã ký tự được định nghĩa bởi IANA. Dưới đây là một số gợi ý cho bạn lựa chọn:

· Khuyến khích sử dụng mã UTF-8.

· Không nên sử dụng bảng mã ASCII không tương thích (tức là không ánh xạ được mã 8-bit (trỏ từ 0x20 tới 0x7E) tới mã Unicode (trỏ từ 0x0020 tới 0x007E)) bởi vì những trình duyệt không hỗ trợ loại bảng mã này có thể diễn giải nội dung không đúng theo ý muốn. Ta nên tránh những loại bảng mã sau đây: JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, nhóm ISO-2022 và nhóm EBCDIC.

· Không thể sử dụng các bảng mã CESU-8, UTF-7, BOCU-1 và SCSU một cách thông thường mà phải thông qua các kỹ thuật cross-scripting.

· Không nên sử dụng bảng mã ký tự UTF-32 bởi vì các giải thuật mã hóa HTML5 có thể không phân biệt được nó với mã UTF-16.

Lưu ý:

- Bảng mã ký tự khai báo phải phù hợp với một trong các trang web của website.

- Thẻ <meta> phải nằm trong thẻ <head> hoặc nằm trong 512 Byte đầu tiên của trang web, bởi vì một số trình duyệt sẽ tìm kiếm bảng mã trong những Byte đầu tiên này trước khi chọn một bảng mã ký tự khác cho trang web.

- Thẻ <meta> chỉ là một phần của giải thuật để xác định tập ký tự cho trang web mà các trình duyệt sẽ sử dụng. Header HTTP Content-Type và bất kỳ thẻ nào cũng sẽ ưu tiên thẻ <meta>.

- Bạn nên ưu tiên sử dụng thuộc tính charset bởi vì nếu không có bảng mã nào được sử dụng trong trang web thì sẽ phải cần đến một số kỹ thuật cross-scripting, và điều này có thể gây ra tác hại cho người dùng.

- Trước HTML5, thẻ <meta> thường có dạng <meta http-equiv="Content-Type"  content="text/html; charset=IANAcharset">, trong đó IANAcharset tương đương (equivalent) với thuộc tính charset (của HTML5). Ta vẫn có quyền sử dụng cú pháp này mặc dù nó đã trở nên lỗi thời.

Ví dụ:

<meta charset="utf-8" />

content : Thuộc tính này sẽ cung cấp các giá trị liên quan đến các thuộc tính http-equivname.

http-equiv : Đây là thuộc tính liệt kê, nó định nghĩa một pragma để sửa đồi hành vi máy chủ và hành vi người dùng. Giá trị của pragma sẽ được định nghĩa thông qua thuộc tính content, các giá trị có thể có của pragma gồm:

· content-language 

Pragma này sẽ định nghĩa ngôn ngữ mặc định cho trang web. Có điểm lưu ý rằng bạn không nên thường xuyên sử dụng giá trị này vì nó đã lỗi thời, bạn có thể thay thế bằng thuộc tính lang của thẻ <body>.

· content-security-policy

Pragma này cho phép người quản trị website định ngĩa các chính sách nội dung cho tài nguyên đã được sử dụng; các chính sách ở đây chủ yếu liên quan đến việc xác định nguồn gốc máy chủ và các điểm cuối của kịch bản, điều này sẽ giúp bảo vệ chống lại các cuộc tấn công kịch bản cross-site.

· content-type

Pragma này định nghĩa kiểu MIME của tài liệu, giá trị của MIME nằm trong thuộc tính content. Cú pháp hợp lệ trong content đối với content-type thường là: content="text/html; charset=IANAcharset" , trong đó IANAcharset là bảng mã ký tự được định nghĩa bởi IANA.

Lưu ý:

- Nên sử dụng thuộc tính charset của thẻ <meta> để thay thế cho content-type vì nó đã lạc hậu so với HTML5.

- Vì thẻ <meta> không làm thay đổi được kiểu của tài liệu trong XHTML hoặc HTML5 với củ pháp XHTML, cho nên không được thiết lập kiểu MIME cho XHTML thông qua content-type.

- Chỉ có các tài liệu dạng HTML mới có thể sử dụng được content-type, còn trong các tài liệu dạng khác thuộc tính này không còn cần đến. Do vậy, có thể coi content-type đã trở nên lỗi thời, và ta nên thay thế nó bằng thuộc tính charset.

Ví dụ:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

· default-style

Pragma này dùng để định nghĩa CSS ta muốn được sử dụng trong trang web; khi đó thuộc tính content của <meta> phải mang giá trị của thuộc tính title của thẻ <link> và thuộc tính href của thẻ <link> phải chứa URL của tập tin CSS, hoặc cũng có thể content cần mang giá trị của thuộc tính title của thẻ <style> và trong <style> chứa nội dung CSS.

· refresh

Pragma này dùng để định nghĩa:

- số giây (second) cho đến khi trang web được tải lại (reload) nếu thuộc tính content chỉ chứa nội dung là một số nguyên dương;

- số giây cho đến khi trang web được chuyển hướng nếu thuộc tính content chứa nội dung là một số nguyên dương và sau đó là ';url=' và một URL hợp lệ.

Ví dụ sau sẽ chuyển hướng tới trang http://v1study.com sau 05 giây:

<meta http-equiv="refresh" content="5;url=http://v1study.com/" />

· set-cookie

Dùng để định nghĩa một cookie cho trang web, nội dung của nó phải tuân thủ theo cú pháp được định nghĩa tại IETF HTTP Cookie Specification. Pragma này đã trở nên lỗi thời và ta có thể thay thế nó bằng "HTTP header set-cookie".

name

Thuộc tính này định nghĩa tên của một siêu dữ liệu ở mức tài liệu. Ta không nên thiết lập thuộc tính name nếu một trong những thuộc tính itemprop, http-equiv hoặc charset đã được thiết lập.

Tên của siêu dữ liệu mức tài liệu được kết hợp vớ giá trị của thuộc tính content. Dưới đây ta sẽ tìm hiểu các giá trị có thể có của thuộc tính name kết hợp với giá trị của thuộc tính content:

· application-name: định nghĩa tên của ứng dụng web đang chạy trong trang web.

Lưu ý:

- Các trình duyệt có thể sử dụng giá trị này để nhận diện ứng dụng; nó có sự khác biệt so với thẻ <title> ở chỗ nó thường bao gồm tên các ứng dụng nhưng có thể nó cũng chứa những thông tin đặc biệt như tên của tài liệu hoặc trạng thái;

- Những trang web đơn giản thì không nên sử dụng application-name.

· author: định nghĩa theo một định dạng bất kỳ tên của tác giả của tài liệu;

· description: chứa nội dung vắn tắt nhưng xúc tích về trang web. Ở một số trình duyệt như Opera và FireFox thì việc sử dụng description cho trang web sẽ có tác dụng đánh dấu (bookmarked) trang web đó;

· generator: chứa một bộ định danh với định dạng bất kỳ đối với phần mềm dùng để tạo trang web;

· keywords: chứa các chuỗi phân cách nhau bằng dấu (,) và những chuỗi này có liên quan chặt chẽ tới nội dung của các trang web của website tới mức chúng được coi là những từ khóa của trang web và website;

· referrer: giá trị này dùng để điều khiển nội dung của header HTTP Referer và nó sẽ đính kèm bất kỳ một yêu cầu nào gửi từ tài liệu hiện thời. Các giá trị của thuộc tính content ứng với <meta name="referer"> gồm:

Giá trị Mô tả
no-referrer Không gửi header HTTP Referer.
origin Gửi bản tài liệu gốc.
no-referrer-when-downgrade Gửi bản tài liệu gốc như là một tham chiếu tới đích có mức độ bảo mật cao hơn hoặc tương đương (https->https), nhưng không gửi tham chiếu tới đích có mức độ bảo mật thấp hơn (https->http).
origin-when-crossorigin Gửi một URL hoàn chỉnh (không có tham số) khi thực hiện yêu cầu có nguồn tương tự nhưng chỉ gửi bản tài liệu gốc cho những trường hợp khác.
unsafe-URL Gửi một URL hoàn chỉnh (không có tham số) khi thực hiện yêu cầu có nguồn tương tự.

Lưu ý: Nếu ta dùng phương pháp chèn động để tạo thẻ <meta name="referrer"> (bằng cách sử dụng document.write hoặc appendChild) thì ta sẽ không xác định được rằng có gửi được hay không các tham chiếu, và điều này có thể tạo ra các xung đột hay mâu thuẫn, khi đó giá trị no-referrer sẽ được sử dụng.

Các thuộc tính cũng có thể có một giá trị được lấy từ danh sách mở rộng được định nghĩa tại WHATWG Wiki MetaExtensions. Mặc dù không được chính thức chấp nhận, nhưng ta sẽ tìm hiểu một vài tên phổ biến sau đây:

· <meta name="creator">: định nghĩa theo một định dạng bất kỳ tên của người tạo trang web. Lưu ý rằng creator cũng có thể là tên của một tổ chức hay cơ quan nào đó. Ta có thể sử dụng nhiều thẻ <meta> nếu có nhiều tên;

· <meta name="googlebot">: dùng để đồng bộ hóa các robot, nhưng chỉ được dùng bởi Googlebot với mục đích thu thập thông tin chỉ mục (index) cho Google;

· <meta name="publisher">: định nghĩa theo một định dạng bất kỳ tên của nhà xuất bản tài liệu. Lưu ý rằng publisher cũng có thể định nghĩa tên của tổ chức hay cơ quan nào đó;

· <meta name="robots">: định nghĩa việc thu thập thông tin liên kết với trang web. Danh sách các giá trị thu thập được phân cách nhau bằng dấu (,). Dưới đây là các giá trị có thể có trong danh sách của <meta name="robots">:

Giá trị Mô tả Sử dụng bởi
index Cho phép robot đánh chỉ mục trang web Tất cả
noindex Ngăn ngừa robot đánh chỉ mục cho trang web Tất cả
follow Cho phép robot theo dõi các liên kết trong trang web Tất cả
nofollow Ngăn ngừa robot theo dõi các liên kết trong trang web Tất cả
noodp Ngăn ngừa việc sử dụng mô tả DMOZ nếu có, chẳng hạn như mô tả về trang web trong các trang kết quả của bộ máy tìm kiếm (search engine) Google, Yahoo, Bing
noarchive Ngăn ngừa bộ máy tìm kiếm đệm (caching) nội dung trang web Google, Yahoo
nosnippet Ngăn ngừa việc hiển thị bất kỳ phần mô tả nào về trang web trong trang kết quả tìm kiếm Google
noimageindex Ngăn ngừa trang web hiện thời xuất hiện như là một trang tham khảo từ một ảnh đã được lập chỉ mục. Google
noydir Ngăn ngừa việc sử dụng mô tả Yahoo Directory nếu có Yahoo
nocache Đồng bộ hoá việc không lưu trữ Bing

Lưu ý:

- Chỉ những robot liên kết mới thực hiện được những quy tắc đã được định nghĩa bởi robots.

- Robot vẫn cần phải truy cập vào trang web để đọc siêu dữ liệu. Nếu bạn không muốn điều này xảy ra - chẳng hạn như để ngăn ngừa việc tiêu hao băng thông - thì bạn cần thay thế hoặc bổ sung tập tin robots.txt.

 - Nếu bạn muốn xoá chỉ mục của trang web thì bạn sẽ sử dụng giá trị noindex, nhưng nó chỉ hoạt động khi robot 'viếng thăm' trang web vào lần kế tiếp, và để đảm bảo chắc chắn rằng robot sẽ viếng thăm trang web này thì bạn nên sử dụng tập tin robots.txt . Một số bộ máy tìm kiếm (Google chẳng hạn) đã phát triển các công cụ cho phép bạn gỡ bỏ nhanh chỉ mục khỏi các trang web mong muốn. Chẳng hạn bạn có thể vào phần 'Chỉ mục của Google' của công cụ Webmasters của Google để xoá chỉ mục cho những trang web mong muốn.

- Bạn cần tránh việc sử dụng những giá trị có thể loại trừ lẫn nhau tại cùng thời điểm, chẳng hạn như indexnoindex, hoặc follownofollow, bởi vì có thể gây ra sự mất kiểm soát hành vi của robot.

- Một số bộ máy tìm kiếm thu thập các robot như Google, Yahoo Search hay Bing, ... đều hỗ trợ các giá trị tương tự trong phần chỉ dẫn HTTP là X-Robot-Tags, điều này sẽ cho phép các bộ máy tìm kiếm sử dụng pragma này trên những tài liệu không phải là HTML (hình ảnh chẳng hạn).

· <meta name="slurp">: dùng để đồng bộ các robot, nhưng chỉ áp dụng cho Slurp - bộ thu thập chỉ mục của Yahoo Search;

· <meta name="viewport">: đưa ra những gợi ý về kích thước ban đầu cho chế độ xem trang web. Pragma này chỉ được sử dụng cho một số thiết bị di động; nó cũng đang được sử dụng khá phổ biến mặc dù nó không nằm trong tiến trình được chuẩn hoá. Các giá trị có thể có của pragma này:

Giá trị Các giá trị có thể có Mô tả
width Một số nguyên dương hoặc literal device-width Định nghĩa độ rộng theo đơn vị pixel cho chế độ xem
height Một số nguyên dương hoặc literal device-height Định nghĩa độ cao theo đơn vị pixel cho chế độ xem
initial-scale Một số thực nằm trong đoạn từ 0.0 đến 10.0 Xác định tỉ lệ giữa độ rộng của thiết bị (device-width theo chế độ portrait hoặc device-height theo chế độ landscape) với kích thước của chế độ xem.
maximum-scale Một số thực nằm trong đoạn từ 0.0 đến 10.0 Xác định giá trị lớn nhất cho chế độ thu phóng (zoom); nó phải lớn hơn hoặc bằng minimum-scale.
minimum-scale Một số thực nằm trong đoạn từ 0.0 đến 10.0 Xác định giá trị nhỏ nhất cho chế độ thu phóng (zoom); nó phải nhỏ hơn hoặc bằng maximum-scale.
user-scalable Một giá trị boolean (yes hoặc no) Nếu thiết lập là no thì người dùng không được phép thu phóng; mặc định là yes.

Lưu ý:

- Mặc dù không được chuẩn hoá nhưng <meta name="viewport"> lại thương xuyên được sử dụng bởi các trình duyệt dành cho mobile như Safari Mobile, Firefox for Mobile hoặc Opera Mobile.

- Các giá trị mặc định có thể thay đổi tuỳ thuộc vào từng thiết bị hoặc trình duyệt.

Ví dụ:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Thẻ <col> và <colgroup>

Tổng quan

Thẻ <col> dùng để thiết lập các hiệu ứng chung cho các ô của cột ứng với nó trong bảng, điều này có thể sẽ giúp ta tốn ít công sức hơn so với việc thiết lập hiệu ứng một cách thủ công trên từng ô của cột đó. <col> là thẻ con của thẻ <colgroup>.

Thẻ <colgroup> là thẻ cha của thẻ <col> và là thẻ con trực tiếp của thẻ <table>. <colgroup> cùng với thẻ <col> dùng để thiết lập các hiệu ứng chung cho từng cột của bảng.

Nhóm nội dung

Thẻ <col> và <colgroup> không thuộc nhóm nội dung nào.

Nội dung được phép

Thẻ <col> không chứa nội dung.

Đối với thẻ <colgroup>: nếu thẻ này sử dụng thuộc tính span thì nó là thẻ trắng (empty); nếu không sử dụng span thì nó sẽ không chứa hoặc chứa các thẻ <col>.

Thẻ đóng

Thẻ <col> là thẻ đơn (<col />) .

Đối với thẻ <colgroup>: có thể bỏ qua thẻ mở <colgroup> nếu nó chứa thẻ <col> và thẻ <colgroup> nằm trước nó không bỏ qua thẻ đóng; có thể bỏ qua thẻ đóng (</colgroup>) nếu phía sau nó không có các khoảng trắng hoặc thẻ chú thích (<!-- -->).

Phần tử cha được phép

Đối với thẻ <col>: phần tử cha được phép là <colgroup>, nhưng không được sử dụng thuộc tính span trong thẻ <colgroup>.

Đối với thẻ <colgroup>: phần tử cha được phép là thẻ <table> nhưng <colgroup> phải nằm sau thẻ <caption> và nằm trước các thẻ  <thead>, <tbody>, <tfoot> và <tr>.

DOM interface

Cả <col> và <colgroup> đều thuộc HTMLTableColElement.

Thuộc tính

<col> và <colgroup> bao gồm các thuộc tính Global. Dưới đây là những thuộc tính cơ bản của hai thẻ này.

align

Đây là thuộc tính liệt kê, nó được dùng để canh lề theo chiều ngang cho nội dung nằm trong từng ô của của cột ứng với thẻ <col> hiện thời, nếu nó được sử dụng trong thẻ <colgroup> thì hiệu ứng canh lề sẽ áp dụng cho các cột ứng với các thẻ <col> nằm trong thẻ <colgroup> hiện thời. Các giá trị có thể có của align gồm:

· left, canh trái nội dung trong ô;

· center, canh giữa nội dụng;

· right, canh phải nội dung;

· justify, canh thẳng hàng hai bên trái phải đối với nội dung;

· char, canh lề nội dung văn bản với độ lệch nhỏ nhất, được xác định bằng các thuộc tính char và charoff (giá trị này đã lỗi thời và có thể không còn được dùng đến nữa).

Nếu thuộc tính này không được dùng đến thì <col> sẽ thừa kế giá trị của align trong thẻ <colgroup> chứa nó, còn nếu thẻ <colgroup> cũng không sử dụng đến thuộc tính align thì mặc định nội dung trong ô sẽ được canh trái.

Lưu ý: Thuộc tính align đã trở nên lỗi thời từ phiên bản HTML5, vì vậy nên tránh dùng nó. 

Để tạo được các hiệu ứng tương tự như những giá trị left, center, right hay justify của align ta làm như sau:

- Không nên cố gắng sử dụng thuộc tính text-align của CSS cho <col> cũng như <colgroup> bởi vì thẻ <td> của bảng không phải là con của chúng, và vì vậy <td> sẽ không thừa kế được.

- Nếu bảng không sử dụng thuộc tính colspan thì ta có thể sử dụng bộ chọn td:nth-child(an+b) của CSS, trong đó a bằng 0 hoặc a là một số nguyên có trị tuyệt đối lớn hơn hoặc bằng tổng số cột trong bảng và b là thứ tự của cột (cột thứ mấy) trong bảng, sau đó bên trong bộ chọn này ta sử dụng thuộc tính text-align thì lúc đó text-align mới có tác dụng. Ví dụ như nếu bạn muốn canh giữa cho nội dung nằm trong các ô của cột thứ 4 của bảng có 8 cột thì ta làm như sau:

td:nth-child(8n+4) { text-align: center; }
Hoặc:
td:nth-child(-8n+4) { text-align: center; }
Hoặc:
td:nth-child(0n+4) { text-align: center; }
 

Trong trường hợp a có trị tuyệt đối nhỏ hơn tổng số cột thì cột có vị trí b và những cột khác cách cột đó a*i vị trí (i = ±1, ±2, ...) sẽ được canh lề. Ví dụ nếu như bạn muốn canh phải cho nội dung nằm trong các ô của cột thứ 4 và những cột bên phải nó cách nó 2*i vị trí thì ta làm như sau:

td:nth-child(2n+4) { text-align: center; }

- Nếu bảng có sử dụng thuộc tính colspan thì có thể thiết lập hiệu ứng canh lề bằng cách kết hợp các bộ chọn CSS một cách thích hợp (ví dụ như td[colspan=2]{text-align:center}).

Để tạo được hiệu ứng tương tự như giá trị char của thuộc tính align thì trong CSS3 ta có thể sử dụng giá trị của thuộc tính char tương tự như giá trị của thuộc tính text-align.

bgcolor

Thuộc tính này dùng để tạo màu nền cho các ô của cột. Giá trị màu được thể hiện là tên màu theo tiếng Anh hoặc bao gồm ký tự '#" và 6 ký số hệ 16 được chia thành 3 cặp theo 3 màu cơ bản: #RRGGBB (R: Red, G: Green, B: Blue). Dưới đây là 16 màu cơ bản thường được dùng đến:

16 màu cơ bản

Lưu ý: Đây là thuộc tính không chuẩn, nên có thể nó không còn được dùng đến, nó chỉ được sử dụng trong một số phiên bản của trình duyệt Internet Explorer; ta có thể thay thế nó bằng thuộc tính background-color hoặc background của CSS.

char

Thuộc tính này dùng để thiết lập ký tự để canh lề cho các ô của cột. Ký tự thường dùng đến là ký tự '.' khi muốn canh lề cho các số hoặc các giá trị tiền tệ. Thuộc tính này sẽ không có tác dụng nếu thuộc tính align không thiết lập giá trị là char.

Lưu ý: Thuộc tính này đã lỗi thời và có thể không còn được sử dụng nữa. Để thay thế, trong CSS3 ta có thể dùng tập ký tự để áp dụng thuộc tính char như giá trị của thuộc tính text-align.

charoff

Thuộc tính này được dùng để chỉ ra số ký tự cần thêm vào các cột dữ liệu từ các ký tự liện kết được xác định thông qua thuộc tính char. Thuộc tính này cũng đã lỗi thời và có thể không còn được dùng đến nữa.

span

Thuộc tính này chứa một số nguyên dương để chỉ ra số cột liên tiếp nhau bắt đầu từ cột tương ứng với thẻ <col> sẽ được thẻ <col> mở rộng hiệu ứng. Nếu thuộc tính này không được sử dụng thì giá trị mặc định sẽ là 1. Ví dụ:

<table width="100%" border="1" cellspacing="0">
  <col style="background: red;" /> <!--Áp dụng cho cột thứ nhất-->
  <col span="2" style="background: green;" /> <!--Áp dụng cho cột thứ hai, mở rộng cho cột bên phải-->
</table>
 

valign

Thuộc tính này dùng để canh lề theo chiều dọc đối với nội dung trong mỗi ô của cột tương ứng. Các giá trị có thể có của thuộc tính này gồm:

· baseline, giá trị này sẽ canh dưới cho văn bản trong với ô, nhưng canh chỉnh nó nằm trên đường cơ sở của các ký tự chứ không nằm phía dưới chúng. Trong trường hợp tất cả các ký tự trong ô đều có cùng kích thước thì giá trị baseline tương đương với giá trị bottom.

· bottom, giá trị này sẽ đặt văn bản trong ô xuống phía dưới cùng nhất có thể của ô (canh dưới);

· middle, giá trị này sẽ canh giữa đối với văn bản trong ô;

· top, giá trị này sẽ đặt văn bản lên phía trên cùng nhất có thể của ô.

Lưu ý: Thuộc tính valign đã lỗi thời, do đó có thể nó không còn được dùng nữa, ta nên tránh sử dụng; thay vào đó ta có thể xử lý hiệu ứng canh dọc văn bản trong ô như sau:

- Nếu bảng không sử dụng thuộc tính colspan thì ta áp dụng bộ chọn td:nth-child(an+b) của CSS để xác định cột muốn canh dọc rồi sử dụng thuộc tính vertical-align trong bộ chọn. Ví dụ, nếu ta muốn canh dưới cho các ô của cột thứ 4 ta làm như sau:

td:nth-child(0n+4){ vertical-align:bottom; }

- Nếu bảng có sử dụng thuộc tính colspan thì có thể thiết lập hiệu ứng canh lề bằng cách kết hợp các bộ chọn CSS một cách thích hợp (ví dụ như td[colspan=2]{vertical-align:center}).

width

Thuộc tính này dùng để xác định độ rộng mặc định cho cột ứng với thẻ <col> hiện thời, nếu nó được sử dụng cho thẻ <colgroup> thì tất cả các cột ứng với các thẻ <col> nằm trong thẻ <colgroup> tương ứng sẽ được xác định độ rộng; đơn vị sử dụng là pixel (px) hoặc percentage (%); width cũng có thể mang giá trị đặc biệt là 0* với ý nghĩa rằng độ rộng của cột hiện thời nên đủ ở mức cần thiết để chứa nội dung; một giá trị khác cũng hay được sử dụng là 0.5*. Thuộc tính này đã lỗi thời đối với HTML5.

Ví dụ áp dụng

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <table border="1" cellpadding="0" cellspacing="0">
    <colgroup>
      <col style="background: red;" />
      <col style="background: green;" />
      <col style="background: blue;" />
    </colgroup>
  </table>
</body>
</html>
 

Khung giao diện web

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<style>

article, aside, footer, header, section{

display:block;

text-align:center;

}

#total{

width:900px;

margin:0px auto;

position:relative;

}

#logo, #banner, aside, article, footer, article header{

border:green thin solid;

box-sizing:border-box;

float:left;

}

#logo,#banner,#total > footer{

height:100px;

padding-top:35px;

}

#logo{

width:25%;

}

#banner{

width:75%;

}

aside,article{

height:200px;

}

aside{

width:20%;

padding-top:90px;

}

article{

width:60%;

}

footer{

width:100%;

}

article header,article footer{

width:100%;

height:50px;

padding-top:15px;

}

article article{

width:100%;

height:100px;

padding-top:40px;

}

</style>

</head>

<body>

<section id="total">

<header><section id="logo">Header>>Section-Logo</section><section id="banner">Header>>Section-Banner</section></header>

<nav></nav>

<section>

   <aside>Aside</aside><article><header>Article>>Header</header><article>Article-Article</article><footer>Article>>Footer</footer></article><aside>Aside</aside>

</section>

<footer>Footer</footer>

</section>

</body>

</html>

 

Kích hoạt HTML5 trên IE8

Các trình duyệt Internet Explorer từ phiên bản 8 trở xuống và một số trình duyệt phiên bản thấp khác như Safari 4.x và FireFox 3.x không nhận dạng được các phần tử mới trong HTML5, vì vậy bạn không thể thiết lập CSS cho các phần tử này.

Để khắc phục điều này, Sjoerd Visscher đã đưa ra một biện pháp gọi là HTML5 Shiv, theo đó HTML5 Shiv sẽ cho phép bạn thiết lập được CSS cho các phần tử HTML5 trên các trình duyệt từ IE8 trở xuống cho dù những trình duyệt này không nhận dạng được các phần tử HTML5.

Bạn có thể download và tìm hiểu thêm về HTML5 Shiv tại địa chỉ: https://github.com/aFarkas/html5shiv

Để kích hoạt HTML5 Shiv sau khi tải về, bạn đặt đoạn code sau đây vào phần tử <head>:

<!doctype html>

<html>

<head>

<!--[if lt IE 9]>

    <script src="html5shiv.js"></script>

<![endif]-->

</head>

<body>

...

</body>

</html

 

autocomplete

autocomplete dùng để hiển thị hay không hiển thị các giá trị đã được gửi đi trước đó trong mỗi lần submit khi bạn có những thao tác trên các phần tử <input> như là click đúp hoặc điền giá trị vào phần tử <input> tương ứng, ví dụ như khi bạn điền giá trị là 'abc' vào một phần tử <input> và submit form thì sau khi submit xong nếu bạn click đúp chuột hoặc điền 'a' vào phần tử <input> này thì giá trị 'abc' sẽ hiện ra như là một gợi ý cho bạn.

autocomplete có hai giá trị là 'on' (cho phép) và 'off' (không cho phép), trong đó nếu bạn thiết lập giá trị là 'on' cho phần tử <form> thì điều này có nghĩa là tất cả các phần tử <input> của form sẽ hiển thị các giá trị đã điền trong mỗi lần submit, ngược lại thì tất cả đều không hiển thị; còn nếu thiết lập giá trị là 'on' cho phần tử <input> thì nó sẽ hiển thị các giá trị đã điền, ngược lại thì không.

Lưu ý: thuộc tính autocomplete áp dụng cho phần từ <form> và phần tử <input> có các kiểu như sau: text, search, url, tel, email, password, date, range và color.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Safari.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<form autocomplete="on">

Tên đăng nhập: <input name="tendangnhap">

E-mail: <input type="email" name="email" autocomplete="off">

<input type="submit" value="Gửi">

</form>

<p>Bạn hãy điền dữ liệu rồi nhấn nút 'Gửi', sau đó bạn click đúp vào trường 'Tên đăng nhập' và click đúp vào trường 'E-mail' để thấy sự khác biệt.</p>

</body>

</html>

 

autofocus

Thuộc tính autofocus của phần tử <input> được dùng để xác định rằng phần tử <input> sẽ tự động được focus khi trình duyệt tải xong trang web.

Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ thuộc tính autofocus.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Tên đăng nhập: <input type="text" name="tendangnhap" autofocus> E-mail: <input type="email" name="email"> <input type="submit" value="Gửi">

</form>

<p>Trình duyệt sẽ tự động focus vào trường 'Tên đăng nhập' sau khi tải xong trang web.</p>

</body>

</html>

 

form

Thuộc tính form của phần tử <input> sẽ cho biết phần tử <input> thuộc về form nào của trang web.

Để sử dụng thuộc tính này, đầu tiên bạn đặt ID cho thẻ <form>, ví dụ <form id="frm">, sau đó từ thuộc tính form của <input> bạn thiết lập mối liên quan tới <form> như sau: form="frm" .

Trình duyệt hỗ trợ: Chrome, FireFox, Opera và Safari.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form id="f1">

Tên đăng nhập: <input type="text" name="tendangnhap" form="f2"><br>

<input type="submit" value="Submit">

</form>

<form id="f2">

<input type="submit" value="Gửi">

</form>

<p>Trường 'Tên đăng nhập' nằm trong form 'f1' nhưng lại thuộc về form 'f2', trường 'E-mail' không nằm trong form nào nhưng lại thuộc về form 'f1'.</p>

E-mail: <input type="text" name="email" form="f1">

</body>

</html>

formaction

Thuộc tính formaction của phần tử <input> dùng để chỉ định trang sẽ nhận dữ liệu của form khi form được gửi. formaction sẽ thay thế thuộc tính action của phần tử <form>.

Lưu ý:  formaction áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ thuộc tính formaction.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form action="http://v1study.com" method="get">

Họ và tên: <input name="hoten"><br>

Tên đăng nhập: <input name="tendangnhap"><br>

<input type="submit" value="Submit1"><br>

<input type="submit" value="Submit2" formaction="http://demo.v1study.com">

</form>

<p>Khi bạn nhấn vào nút 'Submit1' thì dữ liệu sẽ được gửi tới trang 'http://v1study.com', khi bạn nhấn vào nút 'Submit2' thì dữ liệu sẽ được gửi tới trang 'http://demo.v1study.com'.</p>

</body>

</html>

formenctype

Như bạn đã biết, thuộc tính enctype của phần tử <form> dùng để xác định loại nội dung được gửi đi khi submit form, thì thuộc tính formenctype của phần tử <input> sẽ thay thế thuộc tính enctype này. formenctype chỉ áp dụng cho form có phương thức gửi là "post".

Lưu ý:  formenctype áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ thuộc tính formenctype.

Ví dụ: Ví dụ dưới đây có hai nút submit, trong đó nút "Submit1" sẽ submit loại nội dung được thể hiện ở thuộc tính enctype của phần tử <form> là "application/x-www-form-urlencoded", còn nút "Submit2" sẽ submit loại nôi dung được thể hiện ở thuộc tính formenctype của nút submit này là "multipart/form-data".

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form method="post" enctype="application/x-www-form-urlencoded">

Tên đăng nhập: <input type="text" name="tendangnhap"><br>

<input type="submit" value="Submit1">

<input type="submit" value="Submit2" formenctype="multipart/form-data">

</form>

</body>

</html>

 

formmethod

Thuộc tính formmethod của phần tử <input> dùng để định nghĩa phương thức gửi dữ liệu của form. Thuộc tính này sẽ thay thế thuộc tính method của form.

Lưu ý:  formmethod áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form method="post">

Họ và tên: <input type="text" name="hoten"><br>

Tên đăng nhập: <input type="text" name="tendangnhap"><br>

<input type="submit" value="Submit1"><br>

<input type="submit" value="Submit2" formmethod="get">

</form>

<p>Nút lệnh 'Submit1' sẽ gửi dữ liệu theo phương thức 'post' được thể hiện ở thuộc tính method của phần tử &lt;form&gt;, nút lệnh 'Submit2' sẽ gửi dữ liệu theo phương thức 'get' được thể hiện ở thuộc tính formmethod của nút lệnh này.</p>

</body>

</html>

formnovalidate

Thuộc tính formnovalidate của phần tử <input> có tác dụng tương tự thuộc tính novalidate của phần tử <form>, khi áp dụng nó cũng mang nghĩa là không cần phải xác nhận tính hợp lệ đối với dữ liệu của form trước khi gửi.

Thuộc tính formnovalidate sẽ thay thế cho thuộc tính novalidate của phần tử <form>.

Lưu ý: Thuộc tính formnovalidate áp dụng cho phần tử <input> có kiểu "submit".

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

E-mail: <input type="email" name="email"><br>

<input type="submit" value="Submit1"><br>

<input type="submit" formnovalidate value="Submit2">

</form>

<p>Nếu bạn điền vào trường 'E-mail' một email không đúng định dạng thì khi nhấn nút 'Submit1' bạn sẽ không submit được form, nhưng nếu bạn nhấn nút 'Submit2' thì bạn vẫn submit được form.</p>

</body>

</html>

formtarget

Thuộc tính formtarget của phần tử <input> tương tự thuộc tính target của phần tử <form>, nó được dùng để chỉ định hình thức hiển thị trang nhận dữ liệu, trong đó trang nhận dữ liệu có thể được hiển thị ngay tại vị trí trang gửi hoặc hiển thị tại một cửa sổ khác hoặc một tab khác.

Thuộc tính formtarget sẽ thay thế thuộc tính target của phần tử <form>.

Lưu ý: Thuộc tính formtarget áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form target="_self" action="http://v1study.com">

Họ và tên: <input type="text" name="hoten"><br>

Tên đăng nhập: <input type="text" name="tendangnhap"><br>

<input type="submit" value="Submit1"><br>

<input type="submit" value="Submit2" formtarget="_blank">

</form>

<p>Nếu bạn nhấn nút 'Submit1' thì trang nhận dữ liệu sẽ được mở tại chính trang hiện tại, nhưng nếu bạn nhấn nút 'Submit2' thì trang nhận dữ liệu sẽ được mở tại một tab hoặc một cửa sổ mới.</p>

</body>

</html>

max

Thuộc tính max của phần tử <input> được dùng để xác định giá trị lớn nhất có thể nhập vào phần tử <input> tương ứng.

Lưu ý: Thuộc tính max áp dụng cho phần tử <input> có các kiểu sau: number, range, date, datetime, datetime-local, month, time và week.

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Nhập vào một ngày (max = '2015-12-31'): <input type="date" name="ngaytruoc" max="2015-12-31"><br>

Nhập vào một năm từ (max = 2015): <input type="number" name="nam" max="2015"><br>

<input type="submit" value="Gửi">

</form>

</body>

</html>

min

Thuộc tính min của phần tử <input> được dùng để xác định giá trị nhỏ nhất có thể nhập vào phần tử <input> tương ứng.

Lưu ý: Thuộc tính min áp dụng cho phần tử <input> có các kiểu sau: number, range, date, datetime, datetime-local, month, time và week.

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Nhập vào một ngày (min = '2014-03-01'): <input type="date" name="ngaysau" min="2014-03-01"><br>

Nhập vào một năm từ (min = 1999): <input type="number" name="nam" min="1999"><br>

<input type="submit" value="Gửi">

</form>

</body>

</html>

multiple

Thuộc tính multiple của phần tử <input> cho phép người dùng chọn được nhiều tập tin cùng lúc, người dùng cũng điền được nhiều email cùng lúc.

Lưu ý: Thuộc tính multiple áp dụng cho phần tử <input> với các kiểu "file" và "email".

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form action="http://dangtranlong.blogspot.com">

Bạn có thể chọn nhiều file: <input type="file" name="file" multiple><br>

Bạn có thể nhập nhiều email (dấu ',' làm phần phân cách): <input type="email" name="email" multiple placeholder="aa@bb.cc,xx@yy.zz"><br>

<input type="submit" value="Gửi">

</form>

<p>Bạn có thể chọn cùng lúc nhiều files và nhập cùng lúc nhiều email.</p>

</body>

</html>

list

Thuộc tính list của phần tử <input> sẽ tham chiếu tới phần tử <datalist> có id được chỉ ra tương ứng, khi đó phần tử <input> sẽ hiển thị các gợi ý cho người dùng, trong đó các gợi ý được lấy từ các phần tử con <option> của phần tử <datalist>.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Mời bạn nhập vào một môn học: <input list="keyword">

<datalist id="keyword">

<option value="HTML">html</option>

<option value="CSS">css</option>

<option value="JavaScript">javascript</option>

<option value="HTML5">html5</option>

<option value="CSS3">css3</option>

<option value="jQuery">jquery</option>

<option value="Ajax">ajax</option>

<option value="SQL">sql</option>

<option value="PHP">php</option>

</datalist>

<input type="submit" value="Tìm kiếm">

</form>

<p>Khi bạn click đúp chuột hoặc focus vào phần tử <input> rồi nhấn phím mũi tên lên xuống trên bàn phím, các gợi ý sẽ xuất hiện.</p>

</body>

</html>

<aside>

Phần tử <aside> thường được dùng để đặt các nội dung nằm bên cạnh (trái hoặc phải) nội dung chính của trang web giống như phần sidebar.

<aside> thuộc nhóm phần tử Cấu trúc/Ngữ nghĩa.

Ví dụ:

<!DOCTYPE html>

<html>

<body>

<p>Tôi đang giảng dạy tại trường Hà Nội-Aptech.</p>

<aside>

<h4>Hà Nội-Aptech</h4>

<p>Hà Nội-Aptech là trường đào tạo Lập trình viên quốc tế tốt nhất Việt Nam.</p>

</aside>

</body>

</html>

 

<audio>

HTML5 cung cấp cho bạn một chuẩn audio mới để cho phép chạy các file audio trên trang web mà bạn không cần sử dụng thiết bị hỗ trợ nào, đó là phần tử <audio>.

Chạy các file audio trên trang web

Trước HTML5 chưa hề có một chuẩn nào cho phép chạy các file audio trên một trang web. Phần lớn các file audio được chạy thông qua một  plug-in (ví dụ như flash), nhưng mỗi trình duyệt khác nhau lại có những loại plug-in khác nhau.

Phần tử <audio> trong HTML5 được dùng để định nghĩa một chuẩn cho các file audio mà không cần sử dụng bất kỳ một loại plug-in nào.

Trình duyệt hỗ trợ

 Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ phần tử <audio>.

Cách dùng phần tử <audio>

Để thực hiện một file audio bạn có thể tham khảo ví dụ dưới đây:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<audio controls autoplay loop>
  <source src="Link_audio.ogg" type="audio/ogg">
  <source src="Link_audio.mp3" type="audio/mpeg">
Trình duyệt này không hỗ trợ phần tử audio.
</audio>
</body>
</html>

Thuộc tính 'controls' dùng để hiển thị các điều khiển cho audio, bao gồm các nút play, pause và volume.

Thuộc tính 'autoplay' sẽ cho phép tự động thực thi audio.

Thuộc tính 'loop' sẽ cho phép lặp lại việc thực thi audio mỗi khi audio được thực thi xong.

Nếu trình duyệt không hỗ trợ phần tử <audio> thì dòng chữ "Trình duyệt này không hỗ trợ phần tử audio." sẽ hiện ra.

<audio> cho phép sử dụng nhiều phần tử <source>. <source> có thể liên kết đến các file audio khác nhau, trình duyệt sẽ sử dụng file hợp lệ đầu tiên trong các file đó.

Các định dạng audio và trình duyệt hỗ trợ

Có ba định dạng có thể sử dụng cho phần tử <audio> là: MP3, Wav và Ogg.

Trình duyệt

MP3

Wav

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

NOCập nhật: Firefox từ phiên bản 21 trở nên chạy trên các hệ điều hành Windows 7, Windows 8, Windows Vista, và Android có hỗ trợ MP3

YES

YES

Safari

YES

YES

NO

Opera

NO

YES

YES

Các kiểu MIME dùng cho định dạng audio

Định dạng

KiểuMIME

MP3

audio/mpeg

Ogg

audio/ogg

Wav

audio/wav

Xem thêm:

<bdi>

Thẻ <bdi> (Bi-Directional Isolation) dùng để thiết lập hiệu ứng ngược hướng hiển thị với hướng đã được chỉ định của thẻ bao ngoài (như <span>, <p>, ...).

Thẻ bao ngoài thẻ <bdi> sẽ chỉ định hướng thông qua thuộc tính dir gồm hai hướng là ltr (left to right) và rtl (right to left).

<bdi> hữu dụng khi ta nhúng một đoạn văn bản mà chưa biết trước hướng hiển thị của nó là ltr hay rtl.

Trong trường hợp không chỉ định hướng hiển thị thì trình duyệt sẽ quyết định hướng dựa vào nội dung nằm trong <bdi>.

Trình duyệt hỗ trợ:

Chrome và FireFox.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<p>Bạn thử bôi đen từ trái sang phải đoạn text bằng chữ Ả-rập dưới đây:</p>

<bdi>الدراسة التي عملي</bdi>

</body>

</html>

 

<datalist>

Phần tử <datalist> cho phép đưa ra một danh sách các tùy chọn đã được tạo từ trước để gợi ý cho người dùng lựa chọn, theo đó khi người dùng click vào phần tử <input> tham chiếu tới phần tử <datalist> thì danh sách đó sẽ được hiện ra.

Cách sử dụng:

+ Đặt ID cho phần tử <datalist>

+ Đặt giữa thẻ mở và đóng của <datalist> các thẻ <option>, mỗi thẻ <option> là một tuỳ chọn gợi ý.

+ Sử dụng thuộc tính list của thẻ <input> để trỏ tới thẻ <datalist> có ID tương ứng.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Bạn có thể tham khảo thêm tại phần Thuộc tính list.

 

<details> & <summary>

Hai phần tử này dùng để hiển thị phần đầu đề và nội dung chi tiết cho phần đầu đề.

Cú pháp:

<DETAILS>

<SUMMARY>Đầu đề</SUMMARY>

Nội dung chi tiết

</DETAILS>

Phần nội dung chi tiết mặc định sẽ ẩn đi. Khi bạn nhấn vào phần đầu đề thì nội dung chi tiết sẽ hiện ra.

Ví dụ:

<DETAILS>

<SUMMARY>HTML5</SUMMARY>

Là chuẩn HTML mới nhất hiện nay.

</DETAILS>

Nếu bạn muốn nội dung chi tiết mặc định sẽ được hiện ngày từ đầu thì bạn sử dụng thêm thuộc tính OPEN của phần tử <DETAILS>.

Ví dụ:

<DETAILS open>

<SUMMARY>CSS3</SUMMARY>

Là chuẩn CSS mới nhất hiện nay.

</DETAILS>

 

<dialog>

Phần tử <dialog> dùng để tạo một hộp thoại hoặc một thành phần tương tác như inspector hay window.

Bạn có thể tích hợp các phần tử của form vào <dialog> bằng cách sử dụng thuộc tính method="dialog" của thẻ <form>. Khi form được submit thì hộp thoại sẽ được đóng lại và thuộc tính returnValue sẽ thiết lập giá trị cho nút lệnh Submit.

Bạn cũng có thể sử dụng phần tử giả của CSS là ::backdrop để định kiểu cho phần phía sau phần tử <dialog>, chẳng hạn như làm mờ phần nội dung không thể tiếp cận trong khi hộp thoại modal đang hoạt động.

Thuộc tính:

Mặc định, hộp thoại được tạo bởi <dialog> ở trạng thái đóng. Nếu bạn muốn nó ở trạng thái mở bạn sử dụng thuộc tính open.

Ví dụ:

<dialog open>

<p>V1Study</p>

</dialog>

Lưu ý:

Phần tử <dialog> đang trong quá trình thử nghiệm, vì vậy cần kiểm tra tính tương thích của phần tử khác nhau. Cũng lưu ý rằng các cú pháp và hành vi của <dialog> có thể thay đổi trong các phiên bản trình duyệt tương lai.

Thuộc tính tabindex không dùng được trên phần tử <dialog>.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
<form method="dialog">
<section>
<p><label for="favAnimal">Favorite animal:</label>
<select id="favAnimal" name="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
</section>
<menu>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>

<menu>
<button id="updateDetails">Update details</button>
</menu>

<script>
(function() {
var updateButton = document.getElementById( 'updateDetails');
var cancelButton = document.getElementById( 'cancel');

// Update button opens a modal dialog
updateButton.addEventListener( 'click', function() {
document.getElementById( 'favDialog').showModal();
});

// Form cancel button closes the dialog box
cancelButton.addEventListener( 'click', function() {
document.getElementById( 'favDialog').close();
});

})();
</script>
</body>
</html>



 

 

<figure> & <figcaption>

<figure> thường được dùng để đặt các phần như phần giải nghĩa, sơ đồ, hình ảnh, mã lệnh, …

<figcaption> được dùng làm phần chú thích cho phần tử <figure>, nó có thể được đặt ở vị trí trên hoặc dưới phần tử <figure>.

<figure> và <figcaption> thuộc nhóm phần tử Cấu trúc/Ngữ nghĩa.

Ví dụ:

<!DOCTYPE html>

<html>

<body>

<figure>

<img src="Nguồn ảnh">

<figcaption>Chú thích ảnh</figcaption>

</figure>

</body>

</html>

 

<footer>

Phần tử <footer> thường được dùng để đặt phần chân của trang web, nó cũng được dùng để đặt phần cuối của một phần nào đó trong trang web.

<footer> thường là nơi đặt những thông tin như tác giả của trang web, thông tin bản quyền, các liên kết, thông tin liên hệ, …

Trong một trang web bạn được quyền dùng nhiều phần tử <footer>.

<footer> thuộc nhóm phần tử Cấu trúc/Ngữ nghĩa.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<footer>

<p>Designed by: Đặng Trần Long</p>

<p>Copyright: Đặng Trần Long</p>

<p>E-mail: dangtranlong@gmail.com</p>

</footer>

</body>

</html>

<header>

Phần tử <header> thường được dùng để đặt phần trên cùng của trang web như phần logo, banner, ..., nó cũng được dùng để đặt phần đầu của phần nào đó trong trang web.

Bạn có thể dùng nhiều phần tử <header> trong một trang web.

<header> thuộc nhóm phần tử Cấu trúc/Ngữ nghĩa.

Ví dụ: Ví dụ dưới đây sử dụng phần tử <header> để đặt tiêu đề cho một bài viết:

<!DOCTYPE html>

<html>

<body>

<article>

<header>

<h1>Internet Explorer 9</h1>

<p><time pubdate datetime="2011-03-14"></time></p>

</header>

<p>Windows Internet Explorer 9 (viết tắt là IE9) được phát hành vào ngày 14/03/2011</p>

</article>

</body>

</html>

 

novalidate

Thuộc tính novalidate của phần tử <form> được dùng để xác định rằng dữ liệu trong form không cần phải được xác nhận tính hợp lệ trước khi gửi.

Trình duyệt hỗ trợ: Chrome, IE10+, FireFox và Opera.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form novalidate>

E-mail: <input type="email" name="email"> <input type="submit" value="Gửi">

</form>

<p>Bạn có thể điền vào trường 'E-mail' giá trị bất kỳ bạn muốn.</p>

</body>

</html>

 

pattern

Thuộc tính pattern của phần tử <input> được dùng để xây dựng biểu thức quy tắc (mẫu) áp dụng cho phần tử <input> tương ứng mà không cần phải sử dụng code JavaScript.

Lưu ý: Thuộc tính pattern áp dụng cho phần tử <input> có các kiểu sau: text, search, url, tel, email và password.

Gợi ý: Nên dùng thêm thuộc tính 'title' của phần tử <input> để mô tả mẫu nhằm trợ giúp cho người dùng khi nhập liệu.

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Mã quốc gia: <input name="maquocgia" pattern="[A-Za-z]{3}" title="Mã quốc gia gồm 03 ký tự hoa hoặc thường không dấu"> <input type="submit">

</form>

<p>Bạn sẽ phải điền dữ liệu theo đúng mẫu mà thuộc tính pattern chỉ ra.</p>

</body>

</html>

placeholder

Thuộc tính placeholder của phần tử <input> sẽ đưa ra một gợi ý nhỏ cho người dùng dễ hiểu khi nhập liệu vào phần tử <input>, khi người dùng nhập dữ liệu vào phần tử <input> tương ứng thì gợi ý này sẽ mất đi, khi người dùng xóa giá trị trong phần tử <input> này thì gợi ý lại hiện ra.

placeholder chỉ đưa ra gợi ý, những gì được viết trong nó không phải là giá trị của phần tử <input> .

Lưu ý: Thuộc tính placeholder áp dụng cho phần tử <input> có các kiểu sau: text, search, url, tel, email và password.

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví du:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Họ và tên: <input name="hoten" placeholder="Bạn điền họ tên vào đây"><br>

E-mail: <input type="email" name="email" placeholder="aa@bb.cc"><br>

Số điện thoại: <input type="number" name="dienthoai" placeholder="0..."><br>

<input type="submit" value="Gửi">

</form>

<p>Khi bạn nhập giá trị vào phần tử &lt;input&gt; tương ứng thì gợi ý sẽ mất đi, khi bạn xóa giá trị trong phần tử &lt;input&gt; này thì gợi ý lại hiện ra.<br>

Những gì được viết trong thuộc tính placeholder không được coi là giá trị.</p>

</body>

</html>

required

Thuộc tính required của phần tử <input> được dùng để yêu cầu người dùng phải điền dữ liệu vào phần tử <input> tương ứng trước khi gửi dữ liệu.

required có thể dùng để thay thế cho trường hợp bạn sử dụng JavaScript để check trống.

Lưu ý: Thuộc tính required áp dụng cho phần tử <input> có các kiểu sau: text, search, url, tel, email, password, date, number, checkbox, radio và file.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form action="http://v1study.com">

Họ và tên *: <input type="text" name="hoten" required placeholder="Yêu cầu"><br>

Tên đăng nhập *: <input name="tendangnhap" required placeholder="Yêu cầu"><br>

<input type="submit" value="Gửi">

</form>

<p>Bạn phải điền dữ liệu vào những trường có dấu '*'.</p>

</body>

</html>

step

Thuộc tính step của phần tử <input> dùng để tạo khoảng cách giữa các con số có thể nhập vào trong tập dãy số đã được thiết lập cho phần tử <input>.

step thường đi kèm với các thuộc tính minmax.

Lưu ý: Thuộc tính step áp dụng cho phần tử <input> có các kiểu sau: number, range, date, datetime, datetime-local, month, time và week.

Trình duyệt hỗ trợ:

Chrome, IE, Opera Safari.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form action="http://dangtranlong.blogspot.com">

Nhập vào một số từ 1 đến 10 (độ chính xác 0.1): <input type="number" name="so" min="1" max="10" step="0.1">

<input type="submit" value="Gửi">

</form>

<p>Bạn có thể nhập vào một số từ min=1 đến max=10 với độ chính xác 1 con số sau dấu '.'.<br>

Số bạn nhập vào chỉ có thể có giá trị >= min+n*step và <=max, với n là một số nguyên >=0.</p>

</body>

</html>

width & height

Thuộc tính width và height của phần tử <input> được dùng để xác định độ rộng và độ cao của phần tử <input>.

Lưu ý: Thuộc tính width và height áp dụng cho phần tử <input> có kiểu là "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Họ tên: <input type="text" name="hoten"><br>

Tên đăng nhập: <input type="text" name="tendangnhap"><br>

<input type="image" alt="Submit" width="66" height="66">

</form>

<p>Ngoài họ tên và tên đăng nhập, tọa độ của chuột (gốc tọa độ là góc trên trái của của phần tử có kiểu 'image') cũng được submit.</p>

</body>

</html>

color

Kiểu color cho phép bạn chọn một màu sắc nào đó mà bạn muốn.

Trình duyệt hỗ trợ: Chrome và Opera.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Hãy chọn một màu bạn yêu thích: <input type="color" name="color">

</form>

</body>

</html>

 
 

 

date

Kiểu date cho phép bạn chọn ngày, tháng và năm bạn muốn.

Trình duyệt hỗ trợ: Chrome, Opera và Safari.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Ngày sinh: <input type="date" name="date"><br><br>

<input type="submit" value="Send">

</form>

</body>

</html>

 
 

 

datetime

Kiểu datetime cho phép bạn chọn ngày, tháng, năm, giờ, phút và giây bạn muốn (có hỗ trợ time zone).

Trình duyệt hỗ trợ:

Opera Safari.

Ví dụ:

Ngày sinh (ngày tháng và thời gian): <input type="datetime">

 

datetime-local

Kiểu datetime-local cho phép bạn chọn ngày, tháng, năm, giờ, phút, giây, mini giây và buổi sáng hoặc chiều bạn muốn nhưng không hỗ trợ time zone.

Trình duyệt hỗ trợ: Chrome, Opera và Safari.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Ngày sinh (ngày tháng và thời gian): <input type="datetime-local" name="datetime_local"><br><br>

<input type="submit" value="Send">

</form>

</body>

</html>

 
 

 

email

Kiểu email cho phép bạn nhập một địa chỉ email bạn muốn.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Trình duyệt Safari chạy trên điện thoại iPhone thể hiện rõ kiểu email thông qua kiểu thể hiện của bàn phím (có ký hiệu @ và tùy chọn .com ở bàn phím).

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
E-mail *: <input type="email" name="email" required><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>


 

 

month

Kiểu month cho phép bạn chọn một tháng và năm.

Trình duyệt hỗ trợ: Chrome, Opera và Safari.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
Chọn tháng và năm: <input type="month" name="month"><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>

 
 

number

Kiểu number cho phép bạn nhập các giá trị số. Bạn cũng có thể thiết lập miền giá trị khi nhập liệu vào trường kiểu number.

Việc thiết lập miền giá trị thông qua các thuộc tính sau:

Ø  max – Xác định giá trị lớn nhất cho phép

Ø  min – Xác định nhỏ nhất cho phép

Ø  step – Xác định bước nhảy của mỗi số

Ø  value – Xác định giá trị mặc định cho trường number

Lưu ý: Giá trị nhập được vào trường number >= min+n*step và <=max, trong đó n là một số nguyên >=0.

Trình duyệt hỗ trợ: Chrome, IE, Opera và Safari.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
Nhập điểm số (từ 0 đến 10): <input type="number" min="0" max="10" step="0.1" value="5" name="number"><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>


 

 

range

Kiểu range tạo ra một dãy số và bạn có thể chọn một số bất kỳ trong dãy số này.

Việc thiết lập miền giá trị thông qua các thuộc tính sau:

Ø  max – Xác định giá trị lớn nhất cho phép

Ø  min – Xác định nhỏ nhất cho phép

Ø  step – Xác định bước nhảy của mỗi số

Ø  value – Xác định giá trị mặc định cho trường number

Lưu ý: Cũng giống như kiểu number, giá trị chọn được ở trường range >= min+n*step và <=max, trong đó n là một số nguyên >=0.

Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ kiểu này.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
Volume (từ 0 đến 100): <input type="range" min="0" max="100" step="1" value="50" name="range"><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>


 

 

search

Kiểu search áp dụng cho các trường tìm kiếm (tương tự như kiểu text).

Trình duyệt hỗ trợ:

Chrome Safari.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
Tìm kiếm trên Google: <input type="search" name="search"><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>


 

 

tel

Kiểu tel cho phép tạo ra trường nhập liệu theo đó bạn chỉ nhập được các giá trị số tương đương với số điện thoại.

Trình duyệt hỗ trợ: Hiện tại chưa có trình duyệt nào hỗ trợ kiểu tel trên các máy tính.

Ví dụ:

Mời nhập số điện thoại: <input type="tel">

 

time

Kiểu time sẽ tạo ra một trường mà người dùng có thể lựa chọn về thời gian gồm giờ, phút, giây, mini giây và buổi sáng hoặc chiều.

Trình duyệt hỗ trợ: Chrome, Opera và Safari.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
Bạn vui lòng chọn thời gian giao hàng: <input type="time" name="time"><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>

 

url

Kiểu url sẽ yêu cầu bạn phải nhập vào một url hợp lệ.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Trình duyệt Safari trên điện thoại iPhone sẽ nhận diện chính xác được kiểu url, điều này được thể hiện bằng sự thay đổi kiểu bàn phím nhập liệu tương ứng để nhập url.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
Hãy nhập địa chỉ website của bạn: <input type="url" name="url" placeholder="http://..."><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>


 

 

week

Kiểu week sẽ tạo ra trường cho phép bạn chọn một tuần nào đó trong năm mà bạn muốn.

Trình duyệt hỗ trợ: Chrome, Opera và Safari.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
Hãy chọn một tuần: <input type="week" name="week"><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>


 

 

<a>

Tổng quan

Thẻ <a> (Anchor) dùng để thiết lập siêu liên kết (HyperLink). Việc thiết lập các siêu liên kết thông qua thuộc tính href.

Nhóm nội dung: FlowPhrasing, Interactive, Palpable.

Nội dung được phép: Flow, Phrasing, Transparent.

Tính thiếu sót: Bắt buộc phải có thẻ mở <a> và thẻ đóng </a>.

Phần tử cha được phép: Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow và Phrasing.

Giao diện DOM: HTMLAnchorElement.

Thuộc tính

<a> bao gồm Các thuộc tính Global.

href

Đây là thuộc tính cốt lõi của <a>, nếu không sử dụng thì thẻ <a> không còn tác dụng tạo siêu liên kết, mà chỉ có tác dụng tạo liên kết giữ chỗ (placeholder). href sẽ chỉ ra đích của liên kết, có thể là một URL (liên kết ngoài) hoặc một đoạn (fragment) URL (liên kết trong). Đoạn URL bắt đầu bằng dấu (#)  dùng để xác định vị trí đích trong trang web hiện thời (trên, giữa hoặc phần dưới cùng của trang web); URL có thể áp dụng cho bất kỳ giao thức nào mà được trình duyệt hỗ trợ (http, https, ftp, mailto, ...).

target

Dùng để xác định nơi hiển thị tài nguyên được liên kết. Trong HTML4 giá trị của target là tên hay từ khóa của một frame; còn trong HTML5 thì giá trị của target là tên hoặc từ khóa ứng với ngữ cảnh duyệt web (tab, cửa sổ (window) , frame nội tuyến). Dưới đây là những từ khóa của target:

_blank : Nạp tài nguên được liên kết vào một tab mới hoặc một cửa sổ mới không có tên.

_parent : Nạp tài nguyên vào frameset cha của frame hiện thời; nếu không có cha thì _parent tương ứng với _self.

_self : Nạp tài nguyên vào cùng một frame (HTML4) hoặc cùng một ngữ cảnh duyệt web (HTML5: tab hoặc window hoặc frame hiện thời).

_top : Trong HTML4, nạp tài nguyên vào tab hoặc window, hủy bỏ tất cả các frame khác; còn trong HTML5, nạp tài nguyên vào ngữ cảnh duyệt web ở cấp cao nhất (tab, window hay frame đầu tiên khi duyệt web); nếu không có điều này thì _top tương ứng với _self.

Chú ý rằng thuộc tính target chỉ có ý nghĩa khi thuộc tính href được sử dụng.

download

Thuộc tính download (HTML5) nếu được sử dụng sẽ chỉ ra rằng có thể sử dụng siêu liên kết để tải một tài nguyên, khi đó nếu người dùng nhấp vào siêu liên kết thì sẽ được nhắc nhở lưu trữ tài nguyên dưới dạng file vào thiết bị lưu trữ.

hreflang

Thuộc tính này dùng để xác định ngôn ngữ của tài nguyên được liên kết. Các giá trị của thuộc tính này được xác định tại BCP47 (đối với HTML5) hoặc RFC1766 (đối với HTML4). hreflang dùng kèm với thuộc tính href.

media

Thuộc tính này sẽ xác định loại phương tiện truyền thông (media) sẽ nạp cho tài nguyên được liên kết, giá trị của thuộc tính này phải là một truy vấn media. media chủ yếu là hữu ích khi liên kết tới tập tin CSS bằng cách cho phép người dùng chọn một tập tin CSS đáp ứng tốt nhất cho thiết bị chạy trên tài nguyên được liên kết. Các giá trị có thể có của media gồm: all, aural, braille, handheld, print, projection, screen, tty và tv.

ping

Thuộc tính ping (HTML5) nếu được sử dụng sẽ gửi tới các URL của các tài nguyên một thông báo/ping nếu người dùng follow các siêu liên kết.

rel

Khi được dùng cùng với thuộc tính href thì rel có tác dụng xác định mối quan hệ giữa đối tượng đích và đối tượng liên kết. 

charset

Dùng để xác định mã ký tự của tài nguyên được liên kết. Giá trị của thuộc tính này là một danh sách các bộ ký tự phân cách nhau bằng ký tự dấu cách (space) hoặc dấu (;) và các bộ ký tự này được định nghĩa trong RFC 2045; giá trị mặc định là ISO-8859-1.

Lưu ý: charset đã bị lỗi thời trong HTML5, bạn nên sử dụng header HTTP Content-Type trong tài nguyên được liên kết.

Cách sử dụng

Liên kết ngoài

Tức là liên kết tới một trang web khác hoặc liên kết email.

Cú pháp:

<a href="URL"> Điểm_liên_kết</a> //liên kết tới trang web khác
Hoặc:
<a href="mailto:địa_chỉ_email"> Điểm_liên_kết</a> //liên kết tới địa chỉ email

, trong đó, Điểm_liên_kết có thể là một chuỗi, một hình ảnh hoặc một đối tượng bất kỳ.

Trong trường hợp bạn muốn siêu liên kết được mở ở Tab hay cửa sổ mới bạn sử dụng thuộc tính target="_blank" .

Ví dụ:

Website: <a href="http://v1study.com" target="_blank">http://v1study.com</a><br><br>
Email: <a href="mailto:contact.v1study@gmail.com">contact.v1study@gmail.com</a>
 

Mặc định điểm liên kết sẽ được gạch chân và có font chữ màu blue, nếu bạn muốn bỏ gạch chân hay đổi màu cho điểm liên kết bạn sử dụng CSS như sau:

Website: <a href="http://v1study.com" target="_blank" style="text-decoration:none; color:green;"> http://v1study.com</a><br><br>

Liên kết trong

Là liên kết tới một vị trí nào đó (trên, giữa, dưới, ...) trong trang web hiện tại.

Cú pháp:

<a href="#Tên_hoặc_ID"> Điểm_liên_kết</a>
...
<a name="Tên">Vị_trí</a>
Hoặc:
<a id="ID">Vị_trí</a>

Ví dụ:

<body>
<p>Đầu trang [<a href="#cuoitrang" id="dautrang">Xuống cuối trang-Bottom</a>]</p>
<p>.</p>
<p>Cuối trang [<a href="#dautrang" name="cuoitrang">Lên đầu trang-Top</a>]</p>
</body>
 

Khả năng tương thích trình duyệt

Desktop

Đặc điểm

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Hỗ trợ cơ bản

(Có)

1.0 (1.7)

(Có)

(Có) (Có)

href="#top"

(Có)

10.0 (10.0)

(Có) (Có) (Có)

download

14

20.0 (20.0)

Không hỗ trợ

15

Không hỗ trợ

ping

(Có)

Mặc định là disabled

Không hỗ trợ

(Có)

Không hỗ trơ

Mobile

Đặc điểm

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Có)

1.0 (1.0)

(Có) (Có) (Có)

href="#top"

(Có)

10.0 (10.0)

(Có) (Có) (Có)

download

(Có)

20.0 (20.0)

Không hỗ trợ

?

Không hỗ trợ

ping

 

Mặc định là disabled

 

 

 

<abbr>

Tổng quan

Thẻ <abbr> (abbreviation) dùng để đánh dấu cho cụm ký tự viết tắt nào đó, chẳng hạn như HTML, CSS, JS, ...

Việc đánh dấu này sẽ giúp ích khá nhiều trong việc thân thiện hoá với trình duyệt, trình dịch cũng như bộ máy tìm kiếm (Search Engine - SE).

Lưu ý: Số loại ngữ pháp của văn bản trong thuộc tính title nên tương ứng với nội dung của thẻ <abbr>, đặc biệt là với những ngôn ngữ có nhiều hơn hai loại ngữ pháp (ví dụ như tiếng Ả Rập, ngữ pháp có cả loại đơn, loại đôi và loại bội).

Nhóm nội dung

Flow, Phrasing, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Bắt buộc phải có thẻ mở <abbr> và thẻ đóng </abbr>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

HTMLElement, HTMLSpanElement.

Thuộc tính

<p> bao gồm Các thuộc tính Global.

Bạn nên sử dụng thuộc tính title đi kèm để giải nghĩa chi tiết cho cụm từ viết tắt.

Kiểu mặc định

Đa số các trình duyệt đều định kiểu cho thuộc tính display của thẻ <abbr> là display:inline, và đây cũng là định kiểu tốt nhất. Vậy nên, nếu trình duyệt nào không thiết lập cách thức hiển thị này thì bạn cần chủ động đổi lại.

Một số trình duyệt như Internet Explorer lại định kiểu cho <abbr> tương tự như thẻ <span>.

Một số trình duyệt khác như FireFox, Opera lại đưa thêm dấu gạch chấm (dot) ở dưới nội dung của phần tử.

Một số ít trình duyệt lại thêm cả dấu gạch chấm và ký hiệu (tương đối nhỏ) dạng mũ (small-cap).

Nếu bạn muốn tránh những định kiểu như trên bạn nên đưa thêm CSS vào <abbr>, ví dụ như bạn có thể sử dụng thuộc tính font-varial:none.

Cũng cần lưu ý thêm nữa là các trình duyệt Internet Explorer từ phiên bản 6 trở xuống lại không hỗ trợ thẻ <abbr>; trong trường hợp này bạn cần đưa đoạn script sau vào trong thẻ <head>:

<!--[if lte IE 6]>

<script>

document.createElement("abbr");

</script>

<![endif]-->

Ví dụ

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<abbr title="HyperText Markup Language">HTML</abbr> ra đời năm 1991.

</body>

</html>



 

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

2.0

1.0 (1.7 or earlier)

7.0

1.3

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

Xem thêm

· Các phần tử truyền đạt ngữ nghĩa cấp văn bản khác: <a>, <b> & <strong>, <em>, <small>, <cite>, <q>, <dfn>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <i>, <mark>, <ruby>, <rp>, <rt>, <bdo>, <span>, <br>, <wbr>.

 

<acronym>

Thẻ <acronym> dùng để đánh dấu cho một từ viết tắt nào đó như FAO, NASA, ASCII, ...

Việc đánh dấu này sẽ giúp ích khá nhiều trong việc thân thiện hoá với trình duyệt, trình dịch cũng như bộ máy tìm kiếm (Search Engine - SE).

Bạn nên sử dụng thuộc tính 'title' đi kèm để giải nghĩa chi tiết cho cụm từ viết tắt.

<acronym> không được HTML5 hỗ trợ. Trong trường hợp này bạn nên sử dụng thẻ <abbr> để thay thế.

Ví dụ:

<ACRONYM title="General Agreement on Tariffs and Trade">GATT</ACRONYM>
<ACRONYM lang="it" title="Stati Uniti">s.u.</ACRONYM>

<address>

Tổng quan

Thẻ <address> dùng làm nơi đặt thông tin liên hệ của tác giả hoặc chủ sở hữu đối với bài báo hay trang web.

Nếu <address> nằm trong thẻ <article> thì thường nó sẽ chứa thông tin liên quan đến tác giả của bài báo.

Nếu <address> nằm trong thẻ <body> thì nó sẽ chứa thông tin đại diện cho trang web.

Mặc định văn bản nằm trong thẻ <address> sẽ có chữ dạng in nghiêng.

Thông thường <address> sẽ tạo ra trước và sau nó thẻ <br>.

Một số lưu ý:

Nên dùng thẻ <p> thay cho <address> nếu địa chỉ không chứa thông tin liên hệ như số điện thoại hay email.

Không nên đặt những thông tin khác ngoài thông tin liên hệ trong thẻ <address>. Ví dụ như ngày xuất bản chẳng hạn thì bạn nên đặt trong thẻ <time>.

Bạn nên đặt <address> trong phần tử <footer>.

Nhóm nội dung

Flow, Palpable.

Nội dung được phép

Flow (nhưng không được có thẻ <address> lồng bên trong hay bên ngoài, không chứa các thẻ tạo tiêu đề <hgroup>, <h1> ... <h6>, không có thẻ tạo khối <article>, <aside>, <section>, <nav>, <header>, <footer>).

Thẻ đóng

Bắt buộc phải có thẻ mở <address> và thẻ đóng </address>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow.

DOM interface

HTMLElement, HTMLSpanElement.

Thuộc tính

<address> bao gồm Các thuộc tính Global.

Ví dụ

<address>
    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
    You may also want to visit us:<br>
    V1Study<br>
    Ha noi<br>
    Vietnam
</address>


 

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

(Yes)

1.0 (1.7 or earlier)

1.0

5.12

1.0

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

1.0 (1.7)

(Yes)

(Yes)

(Yes)

Xem thêm

· Các phần tử tạo khối khác: <body>, <nav>, <article>, <aside>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>, <footer>, <section>, <header>.

<applet>

Thẻ <applet> dùng để nhúng file Java Applet.

HTML5 không hỗ trợ <applet> , ta có thể thay thế bằng thẻ <object> .

Trình duyệt hỗ trợ: Internet Explorer, FireFox và Safari.

Bạn sử dụng thuộc tính code của thẻ <applet> để xác định URL của file Java Applet.

Ví dụ:

<applet code="URL_file_Java_Applet"></applet>

<area> & <map>

Tổng quan

Thẻ <area> dùng để tạo vùng ảnh (hot-spot region) liên kết trong một ảnh được dùng làm bản đồ ảnh (image-map). <area> là thẻ con của thẻ <map>.

Để sử dụng được thẻ <area> cần phải kết hợp với ít nhất hai thẻ nữa là thẻ <img> và thẻ <map>.

Nhóm nội dung

<area> : Flow, Phrasing.

<map> : Flow, Phrasing, Palpable.

Nội dung được phép

<area> : không chứa nội dung.

<map> : Transparent.

Thẻ đóng

<area> : là thẻ đơn (<area />).

<map> : bắt buộc phải bao gồm thẻ mở <map> và thẻ đóng </map>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

<area> : HTMLAreaElement.

<map> : HTMLMapElement.

Thuộc tính

<area> và <map> bao gồm Các thuộc tính Global.

Đối với <area>:

alt

Trong HTML4 thuộc tính này là cần thiết, nhưng có thể chứa một chuỗi rỗng. Còn trong HTML5 alt chỉ cần thiết khi thuộc tính href được sử dụng. alt cũng giúp ích cho người khiếm thị khi họ sử dụng các công cụ chuyên dụng để đọc trang web của bạn. Xin xem thêm thông tin về alt tại đây.

coords

Thuộc tính này chứa một tập các giá trị dùng để xác định toạ độ của vùng hot-spot. Số lượng cũng như ý nghĩa của các giá trị trong coords phụ thuộc vào giá trị của thuộc tính shape. Cụ thể, nếu giá trị là 'rect' (rectangle-hình chữ nhật) thì coords gồm hai cặp toạ độ thể hiện góc trên trái (top-left) và dưới phải (bottom-right) của hình chữ nhật; nếu giá trị của shape là 'circle' (hình tròn) thì coords sẽ gồm 3 giá trị, trong đó hai giá trị đầu là toạ độ tâm của đường tròn, giá trị thứ 3 là bán kính của đường tròn; nếu giá trị của shape là 'poly' (polygon-đa điểm) thì coords sẽ gồm các cặp giá trị trong đó mỗi cặp là toạ độ của một điểm. Trong HTML4 thì các giá trị của coords có thể có đơn vị px hoặc %, còn trong HTML5 thì các giá trị có đơn vị CS pixel.

href

Thuộc tính này chứa một URL thể hiện đích đến của hot-spot khi người dùng click chuột vào hot-spot. Trong HTML4, thuộc tính này hoặc thuộc thuộc tính nohref là bắt buộc phải được sử dụng trong <area>, còn trong HTML5 thì bạn có thể bỏ qua (tức là hot-spot do <area> tạo ra không đại diện cho một siêu liên kết nào).

name

Dùng để đặt tên cho hot-spot.

nohref

Dùng để chỉ ra rằng không có siêu liên kết nào tồn tại trên hot-spot (trong HTML5 chỉ cần dùng href là đủ).

shape

Thuộc tính này dùng để chỉ định hình dạng của hot-spot. Thuộc tính này có 3 giá trị cơ bản là rect (chữ nhật), circle (tròn) và poly (đa điểm).

Ngoài ra, <area> còn có các thuộc tính cơ bản khác gồm: download , hreflang , media , rel , target.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img src="Nguồn_ảnh" usemap="#Map" border="1" />
<map name="Map" id="Map">
<area shape="rect" coords="2,2,440,161" href="http://v1study.com" target="_blank" alt="v1study.com" title="v1study.com" />
<area shape="circle" coords="650,176,151" href="http://demo.v1study.com" target="_blank" alt="demo.v1study.com" title="demo.v1study.com" />
<area shape="poly" coords="209,170,19,194,24,309,249,321,498,291,444,194" href="http://dangtranlong.blogspot.com" target="_blank" alt="dangtranlong.blogspot.com" title="dangtranlong.blogspot.com" />
</map>
</body>
</html>
 

Khả năng tương thích trình duyệt

<area>

AnchorĐối với Máy tính

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

(Có)

(Có) (Có) (Có) (Có)

Đối với Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

?

?

?

?

?

<map>

AnchorĐối với Máy tính

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Hỗ trợ cơ bản

1.0

1.0 (1.7 trở xuống) [1][2]

(Có)

1.0

1.0

Đối với Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

1.0

1.0 (1.0) [1][2]

(Có)

1.0

1.0

Xem thêm

· <img>

<b> & <strong>

Tổng quan

Thẻ <b> (bold) thường được dùng để đánh dấu những từ khóa trong các phần văn bản tóm lược, đánh dấu tên sản phẩm, in đậm phần văn bản quan trọng.

Lưu ý khi sử dụng

· Không nên nhầm lẫn giữa <b> với các thẻ <strong>, <em> hay <mark>. <strong> dùng để thể hiện tầm quan trọng của đoạn văn bản đặt trong nó, <em> đặt một mức độ nhấn mạnh nào đó vào văn bản trong nó, còn <mark> dùng để thể hiện phần văn bản liên quan trong nó, nhưng <b> lại đơn thuần chỉ là để làm đậm văn bản mà không truyền đạt thêm thông tin ngữ nghĩa nào.

· Không nên dùng thẻ <b> để đánh dấu tiêu đề (title) hay đề mục (heading), thay vào đó bạn nên dùng các thẻ heading từ <h1> đến <h6>. Ngoài ra, bạn có thể sử dụng CSS để tạo độ đậm cho văn bản, khi đó bạn có thể thay đổi các độ đậm khác nhau cho đoạn văn, thay vì phải dùng đến thẻ <b>.

· Bạn có thể sử dụng thuộc tính class của thẻ <b> để chuyển tải thêm thông tin ngữ nghĩa bổ sung cho văn bản. Điều này sẽ giúp giảm bớt việc phải viết thêm CSS (font-weight) hay thay đổi mã HTML, giúp code phần nào được gọn hơn.

Thẻ <strong> được dùng với mục đích nhấn mạnh tầm quan trọng của văn bản, đoạn văn nằm trong nó thường được hiển thị ở dạng in đậm.

Nhóm nội dung

<b>: Flow, Phrasing, Palpable.

<strong>: Flow, Phrasing.

Nội dung được phép

Phrasing.

Thẻ đóng

Bắt buộc phải bao gồm thẻ mở <b> và thẻ đóng </b>.

Bắt buộc phải bao gồm thẻ mở <strong> và thẻ đóng </strong>.

Phần tử cha cho phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow cũng như Phrasing.

DOM interface

HTMLElement. Từ bản Gecko 1.9.2 (Firefox 4) nâng cấp lên HTMLSpanElement.

Thuộc tính

Cả <b> và <strong> đều bao gồm Các thuộc tính Global.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<b>HTML</b> là ngôn ngữ đánh dấu.<br /><br />
<strong>SQL</strong> là ngôn ngữ lập trình Cơ sở Dữ liệu.
</body>
</html>
 

Khả năng tương thích trình duyệt

<b> và <strong> tương thích trên tất cả các loại trình duyệt của máy tính cũng như điện thoại, riêng đối với Firefox (Gecko) thì phiên bản phải là 1.0 (1.7) trở lên

Sự khác biệt giữa <b> và <strong>

<strong> mang trạng thái logic, còn <b> mang trạng thái vật lý.

Các trạng thái logic có đặc điểm là tách biệt phần trình bày và phần nội dung, điều này sẽ làm cho nó có thể được thể hiện bằng nhiều cách khác nhau. Thay vì việc làm đậm văn bản, bạn muốn <strong> có thể tạo chữ có màu, đặt kích thước font chữ, gạch chân, ..., và bạn hoàn toàn có thể làm được điều này và điều này cũng làm cho các thuộc tính trình bày trở nên ý nghĩa hơn.

Còn đối với thẻ <b>, vì mang trạng thái vật lý nên <b> sẽ không tách biệt phần trình bày và phần nội dung, điều này sẽ làm cho <b> gần như chỉ có một tác dụng duy nhất là làm đậm.

Xem thêm

· Các thẻ chuyền đạt ngữ nghĩa mức văn bản: <a>, <em>, <small>, <cite>, <q>, <dfn>, <abbr>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <i>, <mark>, <ruby>, <rp>, <rt>, <bdo>, <span>, <br>, <wbr>.

· Cách sử dụng <b> & <i>.

<base>

Tổng quan

Thẻ <base> dùng để định nghĩa URL cơ sở để sử dụng cho tất cả các liên kết URL trong trang web; khi cần liên kết tới ảnh hay liên kết tới một thành phần nào khác trong website thì chỉ cần đưa ra URL ngắn gọn hơn (ở dạng tương đối). Ta nên sử dụng duy nhất một thẻ <base> trong một trang web.

URL cơ sở của trang web có thể được truy vấn từ một kịch bản sử dụng document.baseURI.

Lưu ý khi sử dụng: Nếu có nhiều thẻ <base> được định nghĩa thì thẻ <base> với giá trị của thuộc tính hreftarget đầu tiên và  hợp lệ sẽ được sử dụng, những thẻ <base> khác sẽ bị bỏ qua.

Thẻ <base> chỉ bao gồm hai thuộc tính là href và target.

URL cơ sở được tạo thông qua thuộc tính herf.

Thuộc tính target sẽ quy định giá trị chung (mặc định) cho các thẻ có sử dụng đến thuộc tính target.

Nhóm nội dung

Metadata.

Nội dung được phép

Thẻ <base> không chứa nội dung (thẻ trắng).

Thẻ đóng

<base> là thẻ đơn <base />.

Phần tử cha được phép

Thẻ <base> nằm trong thẻ <head> nhưng thẻ <head> phải không chứa thẻ <base> khác.

DOM interface

HTMLBaseElement.

Thuộc tính

<base> bao gồm Các thuộc tính Global.

href

Dùng để định nghĩa URL cơ sở được sử dụng trong toàn trang web và thường áp dụng cho những địa chỉ URL tương đối. Một khi đã định nghĩa thuộc tính href thì thẻ <base> phải nằm trước tất cả các thẻ có sử dụng đến URL. URL tuyệt đối và tương đối đều có thể áp dụng giá trị của href.

target

Bạn có thể theo dõi chi tiết về thuộc tính target tại ĐÂY.

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <base href="http://v1study.com/" target="_blank" />
</head>
<body>
  Tìm hiểu về <a href="html5-s3.html">HTML5</a>.
</body>
</html>

 
 

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

(Yes)

1.0 (1.7 or earlier) [1]

(Yes) [2][3]

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

(Yes)

1.0 (1.0) [1]

(Yes)

(Yes)

(Yes)

[1] : Hỗ trợ các URI tương đối cho thuộc tính href đối với Gecko 2.0 (Firefox 4.0).
[2] : Trước Internet Explorer 7 thẻ <base> có thể được đặt ở bất kỳ đâu trong trang web và thẻ <base> còn có thêm thuộc tính nearesst.
[3] : Internet Explorer 8 không hỗ trợ các url tương đối nữa.

Xem thêm

· <meta>

 

<basefont>

Thẻ <basefont> nằm trong thẻ <head> .

Thẻ <basefont> là thẻ đơn.

Thẻ <basefont> bao gồm 3 thuộc tính là color, face và size, và thuộc tính id dùng để thiết đặt id cho thẻ.

Thuộc tính color dùng để đặt màu mặc định (default) cho tất cả phần văn bản (text) trong trang web.

Thuộc tính face dùng để thiết lập font chữ mặc định cho tất cả phần văn bản (text) trong trang web.

Thuộc tính size dùng để thiết lập cỡ chữ mặc định cho tất cả phần văn bản (text) trong trang web.

Trình duyệt hỗ trợ: Chỉ trình duyệt Internet Explorer từ phiên bản 9 chở xuống mới hỗ trợ thẻ <basefont>, các trình duyệt còn lại bạn sẽ dùng CSS để thay thế.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<basefont color="red" size="7" face="Verdana, Geneva, sans-serif" />
</head>
<body>
<h1>Văn bản nằm trong thẻ &lt;h1></h1>
<p>Văn bản nằm trong thẻ &lt;p></p>
</body>
</html>

 

<keygen>

Phần tử <keygen> đưa ra một hình thức bảo mật để xác thực người dùng, theo đó <keygen> sẽ tạo ra hai mã bảo mật, một mã private và một mã public. Mã private được lưu trữ cục bộ trên máy tính của người dùng, mã public được lưu trên máy server nơi sẽ nhận dữ liệu của form. Mã public sẽ sẽ được dùng để xác nhận máy trạm nhằm mục đích xác thực người dùng trong tương lai.

Trình duyệt hỗ trợ: Chrome, FireFox, Opera và Safari.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<form>

Tên đăng nhập: <input name="tendangnhap">

Cấp độ bảo mật: <keygen name="mabaomat">

<input type="submit" value="Gửi">

</form>

</body>

</html>

<bdo>

Tổng quan

Thẻ <bdo> (bidirectional override) dùng để chỉ định hướng trình bày văn bản nằm trong nó; nó sẽ ghi đè hướng trình bày hiện thời của văn bản.

Việc chỉ định hướng của <bdo> là thông qua thuộc tính dir. Có hai hướng chính là ltr (left to right) và rtl (right to left), đồng thời có thêm lựa chọn là auto cho thuộc tính dir để trình duyệt sẽ tự động chọn hướng trình bày dựa vào nội dung nằm trong <bdo>.

Nhóm nội dung

Flow, Phrasing, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Bắt buộc phải có thẻ mở (opening tag) <bdo> và thẻ đóng (closing tag) </bdo>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

HTMLElement, HTMLSpanElement.

Thuộc tính

<bdo> bao gồm Các thuộc tính Global.

dir

Thuộc tính này dùng để chỉ định hướng trình bày của văn bản. Các hướng có thể có của dir:

  · ltr: chỉ định hướng của văn bản là từ trái sang phải.

  · rtl: chỉ định hướng của văn bản là từ phải qua trái.

  · auto: trình duyệt sẽ quyết định hướng của văn bản dựa trên nội dung thực tế nằm trong thẻ <bdo>.

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <bdo dir="rtl">V1Study</bdo>
</body>
</html>


 

Kết quả:

ydutS1V

Lưu ý

HTML 4 không định nghĩa các sự kiện cho thẻ <bdo>, những sự kiện này được đưa vào XHTML.

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

?

?

?

(Yes)

Xem thêm

· <bdi>

<bgsound>

Thẻ <bgsound> (background sound) dùng để tạo nhạc nền cho trang web.

<bgsound> là thẻ đơn (<bgsound />).

Trình duyệt hỗ trợ

Internet Explorer.

Các thuộc tính

src

Dùng để lấy URL của file âm thanh. Những file âm thanh được hỗ trợ gồm: .wav, .au, .mid và .mp3 .

loop

Dùng để thiết lập số lần lặp việc thực hiện file âm thanh. Các giá trị có thể áp dụng gồm: infinite (lặp vô hạn lần), 1, 2, 3, ..., -1. Nếu là 

volume

Thuộc tính này dùng để thiết lập âm lượng, giá trị từ -10000 (Min) đến 0 (Max).

balance

Thuộc tính này dùng để thiết lập âm lượng của các loa hai bên trái phải. Các giá trị của thuộc tính này là từ -10000 tới +10000.

delay

Thuộc tính này dùng để thiết lập độ trễ.

Ví dụ:

<bgsound src="Nguồn_file_audio" loop="infinite" volume="-1000" balance="1000" />

<big> & <small>

Thẻ <big> dùng để tăng kích thước của văn bản. Khi đó kích thước của văn bản sẽ tăng thêm một lượng là 12.5% .

Còn thẻ <small> lại có tác dụng ngược với <big>, tức là nó sẽ có tác dụng giảm kích thước của văn bản đi một lượng là 12.5% .

Lưu ý: Hai thẻ này đã lỗi thời, vì vậy nên tránh việc sử dụng chúng, thay vào đó ta có thể sử dụng CSS.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<big>V1Study</big><br><br>

V1Study<br><br>

<small>V1Study</small>

</body>

</html>

 

 

<blockquote> & <q>

Tổng quan

Thẻ <blockquote> (Block Quotation) dùng để dịch phải (tạo trích dẫn hay chú thích dài) một khoảng 40px cho văn bản hay đối tượng nằm trong nó.

<blockquote> là thẻ đôi (<blockquote> </blockquote>).

Thẻ <q> (Quote) dùng để tạo trích dẫn hay chú thích ngắn bằng cách tạo cặp nháy kép bao ngoài văn bản nằm trong nó.

<q> là thẻ đôi (<q> </q>).

Nhóm nội dung

<blockquote> : Flow, Sectioning root, Palpable.

<q> : FlowPhrasing, Palpable.

Nội dung được phép

<blockquote> : Flow.

<q> : Phrasing.

Thẻ đóng

Bắt buộc phải có thẻ mở <blockquote> và thẻ đóng </blockquote>.

Bắt buộc phải có thẻ mở <q> và thẻ đóng </q>.

Phần tử cha được phép

<blockquote> : Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow.

<q> : Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

HTMLQuoteElement

Thuộc tính

Cả <blockquote> và <q> đều bao gồm Các thuộc tính Global.

cite

Dùng để trỏ tới URL nơi chứa thông tin giải thích tham khảo hoặc giải thích cho ý nghĩa của chú thích.

Ví dụ

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<blockquote cite="http://v1study.com">

Đây là một trích dẫn lấy từ V1Study - This is a quotation taken from V1Study.

</blockquote>

<hr>

<q cite="http://v1study.com">

Đây là một trích dẫn lấy từ V1Study - This is a quotation taken from V1Study.

</q>

</body>

</html>


 

Lưu ý

Bạn có thể đặt nhiều thẻ <blockquote> bao ngoài đoạn văn hay đối tượng để có thể dịch phải nhiều lần.

Bạn có thể dùng thuộc tính margin của CSS để thay thế cho <blockquote>.

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

1.0

1.0 (1.7 or earlier)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

1.0 (1.0)

(Yes)

(Yes)

(Yes)

Xem thêm

· <cite>

<body>

Tổng quan

Thẻ <body> dùng để trình bày nội dung của trang web. Mỗi trang web thường chỉ sử dụng duy nhất một thẻ <body>.

Nhóm nội dung

Sectioning root.

Nội dung được phép

Flow.

Thẻ đóng

Ta có thể bỏ qua thẻ mở <body> nếu phần đầu tiên bên trong thẻ không phải là một ký tự trắng, thẻ chú thích, thẻ <script> hoặc thẻ <style>. Ta cũng có thể bỏ qua thẻ đóng </body> nếu bên trong thẻ có chứa nội dung, hoặc đã có thẻ mở <body> nhưng ngay sau đó không được có thẻ chú thích.

Phần tử cha được phép

Thẻ <body> phải nằm trong thẻ <html>.

DOM interface

HTMLBodyElement. Ta có thể truy cập thẻ <body> thông qua thuộc tính document.body .

Thuộc tính

<body> bao gồm Các thuộc tính Global.

alink

Thuộc tính này dùng để chỉ định màu cho siêu liên kết khi siêu liên kết được click chuột. Ta có thể sử dụng thuộc tính color cho giả lớp :active của CSS để thay thế.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    a[name=jquery]:active {
      color: #0F0;
    }
    a[name=jquery]:link {
      color#F00;
    }
    a[name=jquery]:visited {
      color#00F;
    }   
  </style>
</head>
<body alink="red" link="violet" vlink="green">
  Tìm hiểu về <a href="#">JavaScript</a>.<br><br>
  Tìm hiểu về <a name="jquery" href="#>jQuery</a>.
</body>
</html>
 

background

Thuộc tính này dùng để thiết lập màu nền hoặc chứa URI của ảnh nền cho trang web. Ta có thể sử dụng thuộc tính background của CSS để thay thế.

   Lưu ý: Từ phiên bản Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) thì thuộc tính background không còn được coi là một URI nữa, mà nó được coi như là một chuỗi đơn giản.

Ví dụ:

<!DOCTYPE html>
<html>
<body background="nguồn ảnh">
</body>
</html>

bgcolor

Thuộc tính này dùng để thiết lập màu nền (background color) cho trang web. Ta cũng có thể sử dụng thuộc tính background-color của CSS để thay thế.

Ví dụ:

<!DOCTYPE html>
<html>
<body bgcolor="#00FFFF">
</body>
</html>

bottommargin : Thuộc tính này dùng để thiết lập biên khoảng cách với đối tượng dưới thẻ <body> (mặc định là mép dưới của trình duyệt). Thuộc tính này đã lỗi thời, ta nên thay thế bằng thuộc tính margin-bottom.

lang : Thuộc tính này dùng để định nghĩa ngôn ngữ cho trang web.

leftmargin : Thuộc tính này dùng để thiết lập biên khoảng cách với đối tượng bên trái thẻ <body> (mặc định là mép trái của trình duyệt). Thuộc tính này đã lỗi thời, ta nên thay thế bằng thuộc tính margin-left.

link : Thuộc tính này dùng để chỉ định màu cho siêu liên kết khi nó chưa được viếng thăm lần nào kể từ khi trang web được mở. Ta có thể sử dụng thuộc tính color cho giả lớp :link của CSS để thay thế. Bạn xem ví dụ chi tiết được trình bày tại phần thuộc tính alink.

onafterprint : Được kích hoạt sau khi người dùng in xong trang web.

onbeforeprint : Được kích hoạt khi người dùng yêu cầu in trang web.

onbeforeunload : Được kích hoạt trước khi ngắt tải (unload) trang web.

onblur : Được kích hoạt khi người dùng focus vào một vị trí không phải là trang web hiện thời (ví dụ như click chuột mở một tab mới, ...).

onerror : Được kích hoạt khi trang web gặp lỗi, không tải được.

onfocus : Được kích hoạt khi trang web được focus.

onhashchange : Được kích hoạt khi đoạn chứa phần định danh (bắt đầu bằng dấu (#)) ở phần địa chỉ hiện thời của trang web thay đổi.

onlanguagechange : Được kích hoạt khi có sự thay đổi ngôn ngữ (thông qua thuộc tính lang).

onload : Được kích hoạt sau khi trang web được tải xong.

onmessage : Được kích hoạt khi trang web nhận được một thông điệp.

onoffline : Được kích hoạt khi không thực hiện được giao tiếp mạng.

ononline : Được kích hoạt khi giao tiếp mạng được khôi phục.

onpopstate : Được kích hoạt khi người dùng chuyển hướng sang trang web lịch sử.

onredo : Được kích hoạt khi người dùng nhấn nút Forward trên trình duyệt.

onresize : Được kích hoạt khi thay đổi kích thước trình duyệt.

onstorage : Được kích hoạt khi có sự thay đổi vùng lưu trữ.

onundo : Được kích hoạt khi người dùng nhấn nút Back trên trình duyệt.

onunload : Được kích hoạt khi trang web không còn được tải nữa.

rightmargin : Dùng để chỉ định khoảng cách của trang web so với mép bên phải. Ta có thể thay thế bằng thuộc tính margin-right của CSS.

text : Dùng để chỉ định màu cho văn bản nằm trong thẻ <body>. Ta có thể sử dụng thuộc tính color của CSS để thay thế.

topargin : Dùng để chỉ định khoảng cách của trang web so với mép bên trên. Ta có thể thay thế bằng thuộc tính margin-top của CSS.

vlink : Dùng để chỉ định màu của siêu liên kết sau khi nó được viếng thăm (visited link). Ta có thể sử dụng thuộc tính color cho giả lớp :visited của CSS để thay thế. Ví dụ chi tiết về thuộc tính này được trình bày tại phần thuộc tính alink.

Lưu ý

- Để thay đổi khoảng cách giữa các thẻ <p> bạn có thể sử dụng thuộc tính margin của CSS.

- Bạn không nên chèn thêm thẻ <p> không chứa nội dung hoặc thẻ <br> giữa các thẻ <p>.

Khả năng tương thích trình duyệt

AnchorMáy tính

Đặc điểm

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

1.0

(Có)

(Có) (Có) (Có)

onlanguagechange

?

32 (32)

?

?

?

bottommargin, leftmargin,rightmargin, topmargin 

(Yes)

35 (35)

?

?

?

Thiết bị di động

Đặc điểm

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Có)

(Có) (Có) (Có) (Có)

onlanguagechange

?

32.0 (32)

?

?

?

bottommargin, leftmargin,rightmargin, topmargin 

(Có)

35.0 (35)

?

?

?

<br>

Tổng quan

Thẻ <br> (breaking) dùng để tạo ra một dấu ngắt dòng (line break) trong văn bản (carriage-return); phần văn bản sau nó sẽ được chuyển xuống dòng mới nhưng không tạo dòng trắng.

Ta không nên sử dụng thẻ <br> để tăng khoảng cách giữa các dòng văn bản, thay vào đó nên dùng thuộc tính margin của CSS hoặc dùng thẻ <p>.

Nhóm nội dung

Flow, Phrasing.

Nội dung được phép

Thẻ <br> không chứa nội dung (thẻ trắng).

Thẻ đóng

Thẻ <br> là thẻ đơn <br />.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

HTMLBRElement.

Thuộc tính

<p> bao gồm Các thuộc tính Global.

clear

Thuộc tính này dùng để chỉ ra nơi bắt đầu dòng mới sau khi ngắt dòng.

Lưu ý: Ta không nên sử dụng thuộc tính này vì nó đã bị lỗi thời trong HTML5, thay vào đó ta sử dụng thuộc tính clear cửa CSS.

Ví dụ

I think that I shall never see<br />A poem lovely as a tree.

Kết quả:

I think that I shall never see
A poem lovely as a tree.

Các thông số kỹ thuật

Thông số Trạng thái Chú thích
WHATWG HTML Living Standard Living Standard  
HTML5 Candidate Recommendation  
HTML 4.01 Specification Recommendation  

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

1.0

(Yes)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

Xem thêm

· <address>

· <p>

<button>

Tổng quan

Thẻ <button> dùng để tạo nút lệnh (nút bấm).

Nhóm nội dung

Flow, Phrasing, Interactive, Listed, Labelable, Submittable, Form-associated, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Bắt buộc phải có thẻ mở <button> và thẻ đóng </button>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

HTMLButtonElement.

Kiểu phần tử

Inline.

Thuộc tính

<p> bao gồm Các thuộc tính Global.

disabled

Đây là thuộc tính Boolean, dùng để không cho phép người dùng tương tác được với thẻ <button> hiện thời. Nếu thuộc tính này không được định nghĩa thì <button> sẽ thừa kế những cài đặt của thẻ chứa nó (<fieldset> chẳng hạn), mặc định giá trị của thuộc tính là false (tức là enabled - cho phép tương tác với thẻ <button> hiện thời).

Firefox mặc định giá trị của thuộc tính disabled là true (tức là trạng thái disabled - không cho phép tương tác, ta có thể sử dụng thuộc tính autocomplete để điều khiển đặc điểm này).

name

Thuộc tính này dùng để đặt tên cho nút lệnh, cần thiết khi submit dữ liệu.

type

Thuộc tính này dùng để xác định kiểu của nút lệnh. Các giá trị của thuộc tính này gồm:

· submit: Dùng để tạo nút lệnh submit nhằm submit dữ liệu của form tới server. Đây là giá trị mặc định của nút lệnh nếu thuộc tính type không được dùng đến hoặc thuộc tính có sự thay đổi (động) về một giá trị trống (empty) hoặc không có giá trị.

· reset: Dùng để reset tất cả các thành phần con của form về giá trị khởi tạo tương ứng của mỗi thành phần.

· button: Dùng để tạo nút lệnh thông thường (không có hành vi). Ta có thể sử dụng code JS để thiết lập các sự kiện cho nút lệnh.

value

Thuộc tính này dùng để khởi tạo giá trị cho nút lệnh.

Ngoài ra, <button> còn có các thuộc tính quan trọng khác: autofocus , autocomplete , form , formaction , formenctype , formmethod , formnovalidate , formtarget.

Ví dụ

<button name="btnclick" value="Click">Click Here</button>

Khả năng tương thích trình duyệt

Máy tính

Đặc điểm

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Hỗ trợ cơ bản

1.0

1.0 (1.7 hoặc thấp hơn)

Thuộc tính formaction

9.0

4.0 (2.0)

10

?

?

Thuộc tính formenctype

9.0

4.0 (2.0)

10

10.6

?

Thuộc tính formmethod

9.0

4.0 (2.0)

10

?

?

Thuộc tính autofocus

5.0

4.0 (2.0)

10

9.6

5.0

Điện thoại

Đặc điểm

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

1.0 (1.0)

Thuộc tính formaction

?

4.0 (2.0)

?

?

?

Thuộc tính formenctype

?

4.0 (2.0)

?

?

?

Thuộc tính formmethod

?

4.0 (2.0)

?

?

?

Nhấp chuột và focus

Khi ta nhấp chuột vào nút lệnh sẽ kích hoạt sự kiện focus, điều này không phụ thuộc vào thuộc tính type của <button>, nhưng ở các trình duyệt hay hệ điều hành khác nhau thì có thể tạo nên những hiệu ứng focus khác nhau.

· Đối với Máy tính

Desktop Browsers

Windows 8.1

OS X 10.9

Firefox 30.0

Không (ngày cả khi tabindex)

Chrome 35

Safari 7.0.5

Không rõ

Không (ngay cả khi tabindex)

Internet Explorer 11

Không rõ

Presto (Opera 12)

· Đối với Mobile

Mobile Browsers

iOS 7.1.2

Android 4.4.4

Safari Mobile

Không (ngay cả khi tabindex)

Không rõ

Chrome 35

???

Lưu ý

Thẻ <button> dễ định kiểu (sử dụng CSS) hơn nhiều so với thẻ <input>. Ví dụ như ta có thể thêm vào bên trong thẻ mở <button> và thẻ đóng </button> các thẻ khác như <em>, <strong>, <img>, ... và có thể sử dụng các phần tử giả của CSS là :after và :before để tạo nên một thẻ <button> phức hợp, nhưng ta lại không làm được điều đó đối với thẻ <input>.

IE7 có một lỗi nhỏ ta cần lưu ý là khi submit Form sử dụng nút lệnh <button> chẳng hạn như <button type="submit" name="button" value="Submit">Gửi</button>, thì sau khi POST dữ liệu đáng nhẽ ta sẽ nhận được kết quả là button=Submit, thì lại nhận được kết quả button=Gửi.

IE6 và IE7 có một lỗi khá tệ là khi submit form với nút lệnh <button> thì tất cả các <button> khác của form cũng submit. Từ IE8 trở nên lỗi này đã được sửa.

Firefox sẽ thêm (với mục đích dễ tiếp cận) một đường bao có dạng nét chấm nhỏ quanh nút lệnh <button> khi nó được focus. Ta có thể chỉnh sửa dạng đường bao này bằng CSS như sau:

Các phiên bản Firefox <35 dành cho Android thiết lập thuộc tính CSS background-image gradient trên nút lệnh <button>. Ta có thể bỏ qua điều này bằng cách như sau:

background-image: none;

Xem thêm

· Các phần tử dùng để tạo form khác: <form>, <datalist>, <fieldset>, <input>, <keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.

<caption>

Tổng quan

Thẻ <caption> dùng để thể hiện tiêu đề của một bảng. <caption> thường là thẻ con đầu tiên của <table>, tuy vậy ta có thể sử dụng CSS để đặt nó ở vị trí mong muốn quanh bảng.

Lưu ý sử dụng: Nếu thẻ <table> là con duy nhất của thẻ <figure> thì ta có thể thay thẻ <caption> của <table> bằng thẻ <figcaption>.

Nhóm nội dung

Thẻ <caption> không thuộc nhóm nội dung nào.

Nội dung được phép

Flow.

Thẻ đóng

Bắt buộc phải có thẻ mở (opening tag) <caption> và thẻ đóng (closing tag) </caption>.

Phần tử cha được phép

<table>.

DOM interface

HTMLTableCaptionElement.

Thuộc tính

<caption> bao gồm Các thuộc tính Global.

align

Dùng để thiết lập vị trí tương đối so với bảng. Thuộc tính align có những giá trị sau:

· left, thiết lập vị trí nằm bên trái của bảng

· top,  thiết lập vị trí nằm bên trên của bảng ( đây là vị trí mặc định)

· right,  thiết lập vị trí nằm bên phải của bảng

· bottom,  thiết lập vị trí nằm bên dưới bảng

Lưu ý: Thuộc tính align đã lỗi thời từ phiên bản HTML5, ta có thể thay thế bằng thuộc tính caption-sidetext-align của CSS.

Ví dụ

<table><caption>Bảng điểm lớp ABC</caption></table>

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

(Yes)

1.0 (1.7 or earlier)

(Yes)

(Yes)

(Yes)


Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

(Yes)

1.0 (1.0)

(Yes)

(Yes)

(Yes)

Xem thêm

· Những phần tử khác liên quan đến bảng: <col> & <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>.

· Các thuộc tính CSS hữu dụng cho <caption>: text-align, caption-side.

 

<center>

Thẻ <center> dùng để đặt các thành phần nằm trong nó ra chính giữa.

Thẻ này không còn nằm trong chuẩn web nữa, mặc dù nó vẫn còn được hỗ trợ bởi một số trình duyệt, nhưng nó đang trong quá trình bị xóa. Do đó, không nên dùng thẻ này trong các dự án mới của bạn. Có thể sử dụng thuộc tính CSS text-align hoặc margin để thay thế.

Ví dụ:

<center>Nội dung</center>

<cite>

Tổng quan

Thẻ <cite> (Citation) dùng để biểu thị một trích dẫn bằng cách thể hiện phần văn bản trong nó ở dạng in nghiêng.

Lưu ý khi sử dụng

Trích dẫn ở đây có thể là một cuốn sách, một bài báo, một bài luận, bài thơ, bài hát, kịch bản, bộ phim, chương trình truyền hình, trò chơi, tác phẩm điêu khắc, bức tranh, vở kịch, triển lãm, tweet, ...,  hay một nguồn tài liệu được công bố khác.

Bạn có thể sử dụng thuộc tính cite trong thẻ <blockquote> và <q> để tham chiếu tới một nguồn tài nguyên cụ thể online.

Nhóm nội dung

Flow, Phrasing, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Bắt buộc phải có thẻ mở <cite> và thẻ đóng </cite> khi sử dụng.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

HTMLElement, HTMLSpanElement.

Thuộc tính

<cite> bao gồm Các thuộc tính Global.

Ví dụ

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<P>Trouthe is the hyest thing that many may kepe.<BR>(Chaucer, <CITE>The Franklin's Tale</CITE>)</P>

</body>

</html>



 

Lưu ý

Nếu bạn không muốn dạng mặc định là in nghiêng của thẻ <cite> bạn có thể sử dụng CSS như sau: <cite style="font-style:normal;">.

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

1.0

1.0 (1.7 or earlier)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

1.0 (1.0)

(Yes)

(Yes)

(Yes)

Xem thêm

· <blockquote> & <q>

 

<code>

Tổng quan

Thẻ <code> dùng làm nơi đặt đoạn văn bản mô tả mã lệnh của máy tính (mã lệnh lập trình chẳng hạn). Mặc định, font chữ của thẻ <code> khi hiển thị trên trình duyệt là font monospace.

Nhóm nội dung

FlowPhrasing, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Bắt buộc phải có thẻ mở <code> và thẻ đóng </code>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

HTMLElement, HTMLSpanElement.

Thuộc tính

<code> bao gồm Các thuộc tính Global.

Ví dụ

<!DOCTYPE html>
<html>
<body>
  <code>int n=5;<br>
    printf("\nn=%d",n);
  </code>
</body>
</html>

Lưu ý

Ta có thể sử dụng thuộc tính font-family của CSS để thay đổi kiểu font chữ cho thẻ <code>.

Khả năng tương thích trình duyệt

Desktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

1.0

1.0 (1.7 or earlier)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

1.0 (1.0)

(Yes)

(Yes)

(Yes)

Xem thêm

· <samp>, <kbd>, <command>, <var>.

 

<input> với các kiểu mới

HTML5 cung cấp thêm cho phần tử <INPUT> các kiểu mới (được thể hiện tại thuộc tính type). Những kiểu mới này sẽ giúp ích cho lập trình viên rất nhiều trong việc giảm công sức lập trình để tạo các hiệu ứng bằng JavaScript hoặc jQuery, và điều đó cũng có nghĩa sẽ góp phần cải thiện được tốc độ của trang web.

Lưu ý: Hiện tại đa số các trình duyệt đều không hỗ trợ tất cả các kiểu mới của <input> này, vì vậy khi một kiểu mới nào đó không được trình duyệt hỗ trợ thì kiểu đó sẽ được hiểu là kiểu text (<input type="text">).

Các trình duyệt hỗ trợ cho từng kiểu mới của <input> được kiểm nghiệm tính đến năm 2015. Dưới đây chúng ta sẽ tìm hiểu chi tiết về các kiểu mới này.

1. color

Kiểu color cho phép bạn chọn một màu sắc nào đó mà bạn muốn.

HTML5: input type="color"

Trình duyệt hỗ trợ: Chrome và Opera.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
  Hãy chọn một màu bạn yêu thích: <input type="color">
</form>
</body>
</html>
 

2. date

Kiểu date cho phép bạn chọn ngày, tháng và năm bạn muốn.

HTML5: Thẻ input type="date"

Trình duyệt hỗ trợ: Chrome, Opera và Safari.

Ví dụ:

Ngày sinh: <input type="date">
 

3. datetime

Kiểu datetime cho phép bạn chọn ngày, tháng, năm, giờ, phút và giây bạn muốn (có hỗ trợ time zone).

Trình duyệt hỗ trợ: Opera và Safari.

Ví dụ:

Ngày sinh (ngày tháng và thời gian): <input type="datetime">

4. datetime-local

Kiểu datetime-local cho phép bạn chọn ngày, tháng, năm, giờ, phút, giây, mini giây và buổi sáng hoặc chiều bạn muốn nhưng không hỗ trợ time zone.

Trình duyệt hỗ trợ: Chrome, Opera và Safari.

Ví dụ:

Ngày sinh (ngày tháng và thời gian): <input type="datetime-local">
 

5. email

Kiểu email cho phép bạn nhập một địa chỉ email bạn muốn.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Trình duyệt Safari chạy trên điện thoại iPhone thể hiện rõ kiểu email thông qua kiểu thể hiện của bàn phím (có ký hiệu @ và tùy chọn .com ở bàn phím).

Ví dụ:

E-mail *: <input type="email" required>
 

6. month

Kiểu month cho phép bạn chọn một tháng và năm.

Trình duyệt hỗ trợ: Chrome, Opera và Safari.

Ví dụ:

Chọn tháng và năm: <input type="month">
 

7. number

Kiểu number chỉ cho phép bạn nhập các giá trị số. Bạn cũng có thể thiết lập miền giá trị khi nhập liệu vào trường kiểu number.

Việc thiết lập miền giá trị thông qua các thuộc tính sau:

  • max – Xác định giá trị lớn nhất cho phép
  • min – Xác định nhỏ nhất cho phép
  • step – Xác định bước nhảy của mỗi số
  • value – Xác định giá trị mặc định cho trường number

Lưu ý: Giá trị nhập được vào trường number nằm trong đoạn [min+n*step , max], trong đó n là một số nguyên >=0.

Trình duyệt hỗ trợ: Chrome, IE, Opera và Safari.

Ví dụ:

Nhập điểm số (từ 0 đến 10): <input type="number" min="0" max="10" step="0.1" value="5">
 

8. range

Kiểu range tạo ra một thanh thể hiện dãy số và bạn có thể chọn một số bất kỳ trong dãy số này.

Việc thiết lập miền giá trị cũng thông qua các thuộc tính max, min, step và value giống như kiểu number.

Lưu ý: Cũng giống như kiểu number, giá trị chọn được ở trường range cũng nằm trong đoạn [min+n*step , max], trong đó n là một số nguyên >=0.

Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ kiểu này.

Ví dụ:

Volume (từ 0 đến 100): <input type="range" min="0" max="100" step="1" value="50">
 

9. search

Kiểu search áp dụng cho các trường tìm kiếm (tương tự như kiểu text).

Trình duyệt hỗ trợ: Chrome và Safari.

Ví dụ:

Tìm kiếm trên Google: <input type="search">
 

10. tel

Kiểu tel cho phép tạo ra trường nhập liệu theo đó bạn chỉ nhập được các giá trị số tương đương với số điện thoại.

Trình duyệt hỗ trợ: Hiện tại chưa có trình duyệt nào hỗ trợ kiểu tel trên các máy tính.

Ví dụ:

Mời nhập số điện thoại: <input type="tel">

11. time

Kiểu time sẽ tạo ra một trường mà người dùng có thể lựa chọn về thời gian gồm giờ, phút, giây, mini giây và các buổi sáng hoặc chiều.

Trình duyệt hỗ trợ: Chrome, Opera và Safari.

Ví dụ:

Bạn vui lòng chọn thời gian giao hàng: <input type="time">
 

12. url

Kiểu url sẽ yêu cầu bạn phải nhập vào một url hợp lệ.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Trình duyệt Safari trên điện thoại iPhone sẽ nhận diện chính xác được kiểu url, điều này được thể hiện bằng sự thay đổi kiểu bàn phím nhập liệu tương ứng để nhập url.

Ví dụ:

Hãy nhập địa chỉ website của bạn: <input type="url" placeholder="http://..." required>
 

13. week

Kiểu week sẽ tạo ra trường cho phép bạn chọn một tuần nào đó trong năm mà bạn muốn.

Trình duyệt hỗ trợ: Chrome, Opera và Safari.

Ví dụ:

Hãy chọn một tuần: <input type="week">
 

<dl> & <dt> & <dd>

Tổng quan

Thẻ <dl> (Description List) dùng làm nơi đặt một danh sách mô tả bao gồm các cặp thuật ngữ và mô tả cụ thể cho thuật ngữ, trong đó thuật ngữ được đặt trong thẻ <dt> và mô tả được đặt trong thẻ <dd>. Ngoài ra <dl> cũng được dùng để hiển thị siêu dữ liệu (một danh sách các cặp key/value).

Trước HTML5, <dl> được hiểu là Definition List.

Thẻ <dt> (Description Term) dùng làm nơi đặt thuật ngữ; <dt> chỉ có thể là con của <dl>. Trong một <dl> ta có thể dùng nhiều <dt>.

Thẻ <dd> dùng làm nơi đặt mô tả; <dt> chỉ có thể là con của <dt>. Trong một <dl> ta có thể dùng nhiều <dd>.

Nhóm nội dung

Đối với thẻ <dl>: Flow; nếu con của <dl> chỉ là một cặp name/value thì <dl> còn thuộc nhóm nội dung Palpable.

Đối với thẻ <dt> và <dd>: Không thuộc nhóm nội dung nào.

Nội dung được phép

Đối với thẻ <dl>: Các thẻ <dt>, và bên trong mỗi thẻ <dt> là các thẻ <dd>.

Đối với thẻ <dt>: Flow; nếu không có các thẻ <header> và <footer> thì <dt> cho phép các nội dung thuộc các nhóm nội dung Sectioning và Heading.

Đối với thẻ <dd>: Flow.

Thẻ đóng

Đối với thẻ <dl>: Cần phải có thẻ mở <dl> và thẻ đóng </dl>.

Đối với thẻ <dt>: Phải có thẻ mở <dt>, nếu nó chứa ít nhất một thẻ <dd> thì có thể bỏ qua thẻ đóng </dt>

Đối với thẻ <dd>: Phải có thẻ mở <dd>, nếu ngay sau nó là một thẻ <dd> khác thì có thể bỏ qua thẻ đóng </dd>

Phần tử cha được phép

Thẻ <dl>: Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow.

Thẻ <dt> và <dd>: <dl>.

DOM interface

<dl>: HTMLDListElement.

<dt> và <dd>: HTMLElement, HTMLSpanElement.

Thuộc tính

<dl>, <dt> và <dd> đều bao gồm Các thuộc tính Global.

compact

Đây là thuộc tính của <dl>, dùng để hiển thị thuật ngữ và mô tả thuật ngữ trên cùng một dòng. Hiện tại thuộc tính này không còn được hỗ trợ.

Ví dụ

Một thuật ngữ và một mô tả:

<dl>
  <dt>HDJ</dt>
  <dd>HTML - DHTML (CSS) - JavaScript.</dd>
</dl>

Kết quả:

HDJ
        HTML - DHTML (CSS) - JavaScript

Một thuật ngữ và nhiều mô tả:

<dl>
  <dt>RDBMS</dt>
  <dd>Relational DataBase Management System.</dd>
  <dd>Hệ quản trị cơ sở dữ liệu quan hệ.</dd>
</dl>

Kết quả:

RDBMS
        Relational DataBase Management System.
        Hệ quản trị cơ sở dữ liệu quan hệ.

Nhiều thuật ngữ và một mô tả:

<dl>
  <dt>HTML</dt>
  <dt>CSS</dt>
  <dt>JavaScript</dt>
  <dt>jQuery</dt>
  <dt>Ajax</dt>
  <dd>Những ngôn ngữ cần thiết cho việc thiết kế website.</dd>
</dl>

Kết quả:

HTML
CSS
JavaScript
jQuery
Ajax
         Những ngôn ngữ cần thiết cho việc thiết kế website.

Siêu dữ liệu (metadata):

<!DOCTYPE html>
<html>
<body>
  <dl>
    <dt>Tên</dt>
    <dd>V1Study</dd>
    <dt>Ra đời</dt>
    <dd>2015</dd>
    <dt>Đất nước</dt>
    <dd>Việt Nam</dd>
    <dt>Màu đặc trưng</dt>
    <dd>Xanh lá</dd>
  </dl>
</body>
</html>
 

Gợi ý: Nếu bạn muốn đặt một dấu phân cách (ví dụ như dấu hai chấm ':') giữa key và value ta có thể làm như sau:

dt:after{ content: ': ' ; }

Kết quả của phần metadata ở trên sẽ là:

Tên:
        V1Study
Ra đời:
        2015
Đất nước:
        Việt Nam
Màu đặc trưng:
        Xanh lá

Lưu ý

Không sử dụng thẻ <dl> (cũng như là thẻ <ul>) chỉ để nhằm mục đích tạo hiệu ứng thụt đầu dòng trong trang web; thay vào đó ta có thể sử dụng thuộc tính margin của CSS.

Khả năng tương thích trình duyệt

<dl>, <dt> và <dd> tương thích trên tất cả các phiên bản và loại trình duyệt của máy tính cũng như thiết bị cầm tay.

<fieldset> & <legend>

Tổng quan

Thẻ <fieldset> dùng để nhóm một tập các đối tượng liên quan đến một chủ đề nào đó thành một nhóm; thông thường các đối tượng được gom nhóm là các thành phần con của form.

Thẻ <legend> dùng để thể hiện một tiêu đề cho phần nội dung nằm trong thẻ <fieldset>; đây là thẻ con của <fieldset>.

Nhóm nội dung

<fieldset>: Flow, SectioningListedForm-associated, Palpable.

<legend>: Không thuộc nhóm nội dung nào.

Nội dung được phép

<fieldset>: Bao gồm một thẻ <legend> và sau đó là các đối tượng bạn muốn gom thành nhóm.

<legend>: Prasing.

Thẻ đóng

Cần phải có thẻ mở <fieldset>, <legend> và thẻ đóng </fieldset>, </legend>.

Phần tử cha được phép

<fieldset>: Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow.

<legend>: Là con của thẻ <fieldset>.

DOM interface

<fieldset>: HTMLFieldSetElement.

<legend>: HTMLLegendElement.

Thuộc tính

<fieldset> và <legend> bao gồm Các thuộc tính Global.

Đối với <fieldset>:

disabled

Đây là thuộc tính Boolean, nếu nó được sử dụng thì người dùng sẽ không thể tương tác được với các thành phần con của form (không tính đến thẻ <legend>) nằm trong <fieldset> hiện thời.

form

Thuộc tính này chứa giá trị là id của một thẻ <form> nào đó, khi đó thẻ <fieldset> hiện thời sẽ thuộc về (là con) của form này.

Ví dụ

Ví dụ 1: Form có chứa fieldset, legend, và label

<form action="test.php" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>


 

Ví dụ 2: Mô phỏng một thẻ select có thể chỉnh sửa nội dung dựa trên thẻ <fieldset> cùng với các radiobox và textbox.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Thẻ giả &lt;select> (cho phép chỉnh sửa)</title>
<style type="text/css">
/* Các thành phần của form */
fieldset.elist, input[type="text"], textarea, select, option, fieldset.elist ul, fieldset.elist > legend, fieldset.elist input[type="text"], fieldset.elist > legend:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type="text"] {
  padding: 0 20px;
}
textarea {
  width: 500px;
  height: 200px;
  padding: 20px;
}
textarea, input[type="text"], fieldset.elist ul, select, fieldset.elist > legend {
  border: 2px #cccccc solid;
  border-radius: 10px;
}
input[type="text"], fieldset.elist, select, fieldset.elist > legend {
  height: 32px;
  font-family: Tahoma;
  font-size: 14px;
}
input[type="text"]:hover, textarea:hover, select:hover, fieldset.elist:hover > legend {
  background-color: #ddddff;
}
select {
  padding: 4px 20px;
}
option {
  height: 30px;
  padding: 5px 4px;
}
option:not(:checked), textarea:focus {
  background-color: #ffcccc;
}
fieldset.elist > legend:after, fieldset.elist label {
  height: 28px;
}
input[type="text"], fieldset.elist {
  width: 316px;
}
input[type="text"]:focus {
  background: #ffcccc url("http://v1study.com/public/images/article/pen.png") no-repeat 2px center !important;
}
input[type="text"]:focus, textarea:focus, select:focus, fieldset.elist > legend {
  border: 2px #ccaaaa solid;
}
fieldset {
  border: 2px #af3333 solid;
  border-radius: 10px;
}
/* CSS cho thẻ 'giả' <select> */
fieldset.elist {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: visible;
  padding: 0;
  margin: 0;
  border: none;
}
fieldset.elist ul {
  position: absolute;
  width: 100%;
  max-height: 320px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
}
fieldset.elist:hover ul {
  background-color: #ffffff;
  border: 2px #af3333 solid;
  left: 2px;
  overflow: auto;
}
fieldset.elist ul > li {
  list-style-type: none;
  background-color: transparent;
}
fieldset.elist label {
  display: none;
  width: 100%;
}
fieldset.elist input[type="text"] {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border: none;
  background-color: transparent;
  border-radius: 0;
}
fieldset.elist > legend {
  display: block;
  margin: 0;
  padding: 0 0 0 5px;
  position: absolute;
  width: 100%;
  cursor: default;
  background-color: #ccffcc;
  line-height: 30px;
  font-style: italic;
}
fieldset.elist:hover > legend {
  position: relative;
  overflow: hidden;
}
fieldset.elist > legend:after {
  width: 20px;
  content: "\2335";
  float: right;
  text-align: center;
  border-left: 2px #cccccc solid;
  font-style: normal;
  cursor: default;
}
fieldset.elist:hover > legend:after {
  background-color: #99ff99;
}
fieldset.elist ul input[type="radio"] {
  display: none;
}
fieldset.elist input[type="radio"]:checked ~ label {
  display: block;
  width: 292px;
  background-color: #ffffff;
}
fieldset.elist:hover input[type="radio"]:checked ~ label {
  width: 100%;
}
fieldset.elist:hover label {
  display: block;
  height: 100%;
}
fieldset.elist label:hover {
  background-color: #3333ff !important;
}
fieldset.elist:hover input[type="radio"]:checked ~ label {
  background-color: #aaaaaa;
}
</style>
</head>
 
<body>
<form name="tshirt" method="get" action="test.php">
<fieldset>
  <legend style="color:#F0F; font-weight:bold;">Đặt mua Áo sơ mi</legend>
  <p>Tên của bạn: <input type="text" name="myname" /></p>
  <p>Kích thước:
  <select name="size">
    <option value="s">Nhỏ (Small)</option>
    <option value="m">Vừa (Medium)</option>
    <option value="l">Lớn (Large)</option>
    <option value="xl">Cực lớn (Extra Large)</option>
  </select></p>
  <div>Địa chỉ giao hàng (tạo thẻ 'giả' &lt;select> có thể sửa được):
    <fieldset class="elist">
      <legend>Địa chỉ&hellip;</legend>
      <ul>
        <li><input type="radio" name="address-chosen" value="1" id="address-switch_1" checked /><label for="address-switch_1"><input type="text" name="address-item_1" value="Hoàn Kiếm, Hà Nội, Việt Nam" /></label></li>
        <li><input type="radio" name="address-chosen" value="2" id="address-switch_2" /><label for="address-switch_2"><input type="text" name="address-item_2" value="Đà Nẵng, Việt Nam" /></label></li>
        <li><input type="radio" name="address-chosen" value="3" id="address-switch_3" /><label for="address-switch_3"><input type="text" name="address-item_3" value="Nha Trang, Việt Nam" /></label></li>
        <li><input type="radio" name="address-chosen" value="4" id="address-switch_4" /><label for="address-switch_4"><input type="text" name="address-item_4" value="Thành phố Hồ Chí Minh, Việt Nam" /></label></li>
      </ul>
    </fieldset>
  </div>
  <p>Bình luận:<br /><textarea name="comment"></textarea></p>
  <p><input type="reset" value="Reset" /> <input type="submit" value="Gửi đơn hàng" /></p>
</fieldset>
</form>
</body>
</html>


 

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

(Yes)

1.0 (1.7 or earlier)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

(Yes)

?

12

6

Xem thêm

· <form>, <legend>, <label>, <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <keygen>, <input>, <output>, <progress> và <meter>.

 

<h1> ... <h6>

Sáu thẻ Heading (đầu đề) từ <H1> đến <H6> thực hiện sáu mức đầu đề khác nhau, mức lớn nhất và cũng là quan trọng nhất là mức H1, còn mức nhỏ nhất là mức H6.

Các thẻ Heading đóng vai trò quan trọng trong việc trình bày các bài viết, đồng thời chúng có tác dụng lớn trong việc SEO trang web. Theo đó, mỗi một bài viết cần phải có một và chỉ một thẻ <H1>, thẻ <H1> chứa tiêu đề của bài viết, trong thẻ này bạn cần đưa vào từ khóa của bài viết; sau đó ở mỗi phần khau của bài viết sẽ có một đầu đề thì bạn đặt các thẻ <H2>; nếu trong mỗi phần của bài viết lại có những phần con thì bạn đặt các đầu đề của những phần con đó trong các thẻ <H3>,... Các bài viết trong V1Study.com đều tuân theo nguyên tắc này.

Ví dụ:

<h1>V1Study mức 1</h1>

<h2>V1Study mức 2</h2>

<h3>V1Study mức 3</h3>

<h4>V1Study mức 4</h4>

<h5>V1Study mức 5</h5>

<h6>V1Study mức 6</h6>

Đây là kết quả:

V1Study mức 1

V1Study mức 2

V1Study mức 3

V1Study mức 4

V1Study mức 5
V1Study mức 6

<head>

Tổng quan

Thẻ <head> dùng để cung cấp thông tin chung (metadata) về trang web bao gồm tiêu đề, các liên kết, các thẻ siêu dữ liệu (<meta> chẳng hạn) hoặc định nghĩa các kịch bản và bảng kiểu.

Nhóm nội dung

Thẻ <head> không thuộc nhóm nội dung nào.

Nội dung được phép

Nếu là thẻ <iframe srcdoc> hoặc thông tin tiêu đề đã có sẵn từ một giao thức cấp cao hơn thì thẻ <head> không cần chứa hoặc có thể chứa nhiều thẻ cung cấp nội dung siêu dữ liệu.

Ngược lại thì thẻ <head> phải chứa ít nhất một thẻ là thẻ <title> và có thể chứa nhiều thẻ khác cung cấp nội dung siêu dữ liệu.

Thẻ đóng

Nếu phần bắt đầu của thẻ <head> là thẻ bất thì ta có thẻ bỏ qua thẻ mở <head>

Nếu ngay phía sau thẻ mở <head> là ký tự trắng hoặc thẻ chú thích thì ta có thể bỏ qua thẻ đóng </head>.

Phần tử cha được phép

Thẻ <head> là thẻ con đầu tiên của thẻ <html>.

DOM interface

HTMLHeadElement.

Thuộc tính

<head> bao gồm Các thuộc tính Global.

profile

Cung cấp các URI của một hoặc nhiều hồ sơ siêu dữ liệu, các URI phân cách nhau bằng dấu cách trắng (white space).

Ví dụ

<!DOCTYPE html>
<html>
<head profile="profile_sources">
  <title>Head Tag</title>
  <meta charset="utf-8" />
  <script src="js_source"></script>
  <style>
    /*CSS*/
  </style>
</head>
</html>

Lưu ý

Đa số các trình duyệt đều có thể tự động khởi tạo một thẻ <head> nếu nó không có sẵn. Tuy nhiên, có một số trình duyệt sau đây không tự làm được điều này: Android <=1.6, iPhone <=3.1.3, Nokia 90, Opera <=9.27 và Safari <=3.2.1.

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

1.0

(Yes)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

Xem thêm

· <body>

· <base>

 

<hr>

Tổng quan

Thẻ <hr> (Horizontal Rule) dùng để tạo đường kẻ ngang; theo đó, hai thành phần trên và dưới trong trang web sẽ được phân cách nhau bằng một đường kẻ ngang khi đặt thẻ <hr> ở giữa chúng.

Thẻ <hr> là thẻ đơn (<hr />).

Nhóm nội dung

Flow.

Nội dung được phép

<hr> không chứa nội dung.

Thẻ đóng

<hr> không có thẻ đóng.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow.

DOM interface

HTMLHRElement

Thuộc tính

<hr> bao gồm Các thuộc tính Global.

align

Dùng để đặt vị trí cho <hr>. Thuộc tính này gồm các giá trị left (đặt trái), center (đặt giữa) và right (đặt phải).

color

Dùng để đặt màu cho đường kẻ được tạo bởi <hr>.

noshade

Dùng để không đổ bóng cho <hr> (mặc định <hr> sẽ đổ bóng).

size

Dùng để tạo độ dày của đường kẻ, mặc định đường kẻ có độ dày là 1px. Đơn vị của size là px.

width

Dùng để tạo độ rộng cho đường kẻ, mặc định đường kẻ có độ rộng là 100% (có hai đơn vị dành cho thuộc tính width là px và %).

Ví dụ

Ví dụ dưới đây sẽ cho thấy 2 đoạn văn bản sẽ được phân cách nhau bằng một đường kẻ ngang.

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<h1>HTML: Thẻ hr</h1>

<hr noshade color="red" size="5">

<p>Dùng để tạo đường kẻ ngang.</p>

</body>

</html>


 

Lưu ý

Nên dùng thêm CSS cho thẻ <hr> nếu bạn muốn có được đường kẻ ngang theo ý muốn.

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

1.0

(Yes)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

Xem thêm

· <p>

<html>

Tổng quan

Thẻ <html> là phần tử gốc của trang web, hầu hết các thẻ khác đều là con trực tiếp hoặc gián tiếp của <html>.

Nhóm nội dung

Thẻ <html> không thuộc nhóm nội dung nào.

Nội dung được phép

Thẻ <html> có hai thẻ con trực tiếp là <head> và <body>.

Thẻ đóng

Ta có thể bỏ qua thẻ mở <html> nếu thành phần đầu tiên bên trong nó không phải là thẻ chú thích <!-- .. -->.

Ta cũng có thể bỏ qua thẻ đóng </html> nếu thẻ mở <html> không trực tiếp theo sau bởi thẻ chú thích, và nó chứa hoặc là thẻ <body> hoặc là có thẻ mở <html>.

Phần tử cha được phép

Thẻ <html> được coi là cha của những thẻ khác.

DOM interface

HTMLHTMLElement.

Thuộc tính

<html> bao gồm Các thuộc tính Global.

manifest HTML5

Thuộc tính này dùng để xác định URI của một tài nguyên manifest mà trong manifest đó chỉ định các tài nguyên sẽ được đệm (cache) trên máy cục bộ. Bạn có thể xem chi tiết cách sử dụng manifest tại ĐÂY.

version

Thuộc tính này dùng để xác định phiên bản của DTD (Document Type Definition) của HTML. Thuộc tính này đã bị lỗi thời trong HTML5, nó không còn cần thiết nữa.

xmlns

Xác định Namespace XML của tài liệu, giá trị mặc định của thuộc tính này là xmlns="http://www.w3.org/1999/xhtml". Trong XHTML ta bắt buộc phải sử dụng thuộc tính này, còn trong HTML5 thì không cần thiết.

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    Head Section
  </head>
  <body>
    Body Section
  </body>
</html>

 

Lưu ý

Vì thẻ <html> là thẻ đầu tiên của trang web nên nó được coi là phần tử gốc. Trong HTML thì thẻ <html> không bắt buộc phải được khai báo, nhưng trong XHTML bắt buộc ta phải khai báo cả thẻ mở <html> và thẻ đóng </html>.

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

1.0

(Yes)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

Xem thêm

· <head>

· <body>

 

<i> & <em>

Tổng quan

Thẻ <i> (Italic) được dùng để định nghĩa (mang tính ngữ nghĩa) những phần văn bản trong đoạn văn và được thể hiện thành dạng chữ in nghiêng; ví dụ như những thuật ngữ kỹ thuật, nhóm từ ngữ là ngôn ngữ nước ngoài, các thuộc tính của thẻ,  ...

Thẻ <em> (Emphasis) dùng để đánh dấu văn bản có mức độ nhấn mạnh lớn. Ta có thể thiết lập thẻ <em> nằm trong thẻ <em> khác (lồng nhau) để tăng mức độ nhấn mạnh cho văn bản. Lưu ý rằng <em> sẽ thể hiện văn bản trong nó dưới dạng chữ in nghiêng; tuy nhiên nếu chỉ đơn thuần là để hiển thị văn bản ở dạng in nghiêng thì ta nên sử dụng thuộc tính font-style:italic của CSS.

Nhóm nội dung

Flow, Phrasing, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Cần phải có thẻ mở <i> và thẻ đóng </i>.

Bắt buộc phải có thẻ mở <em> và thẻ đóng </em>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

<i> và <em> đều thuộc HTMLElement, HTMLSpanElement.

Thuộc tính

Thẻ <i> và <em> bao gồm Các thuộc tính Global.

Ví dụ

<!DOCTYPE html>
<html>
<body>
  <p>
    Cụm chữ Latinh <i>Veni, vidi, vici</i> thường được đề cập đến trong âm nhạc, nghệ thuật và văn học.
  </p>
  <p>
    Trong HTML5, khái niệm mức khối (block-level) trước kia nay được gọi là nội dung <em>luồng (flow)</em>.
  </p>
</body>
</html>

Kết quả:

Demo thẻ <i> & <em>

Lưu ý

Đối với những phiên bản HTML trước đây thì thẻ <i> chỉ đơn thuần chỉ là một thẻ trình bày và được dùng để hiển thị văn bản ở dạng chữ in nghiêng giống như thẻ <b> được dùng để hiển thị văn bản ở dạng chữ in đậm. Điều này giờ đây không còn đúng với phiên bản HTML hiện thời, thẻ <i> lúc này thường dùng để xác định tính ngữ nghĩa hơn là chỉ hiển thị văn bản ở dạng in nghiêng đơn thuần.

Ta có thể sử dụng thuộc tính class để xác định lý do tại sao phần tử đang được sử dụng, dó đó nếu việc trình bày cần có sự thay đổi về sau thì ta nên sử dụng một cách chọn lọc các thuộc tính CSS.

So sánh thẻ <i> và thẻ <em>

Một số nhà phát triển web ít kinh nghiệm rất dễ nhầm lẫn rằng tại sao lại có nhiều thẻ có tác dụng thể hiện sự nhấn mạnh cho văn bản đến vậy, và rất dễ nhầm lẫn giữa thẻ <i> và thẻ <em>. Vậy giữa hai thẻ <i> và <em> chúng có những điểm gì khác nhau, dưới đây sẽ chỉ ra chi tiết những điểm khác nhau để phân biệt chúng:

Xét về kết quả hiển thị trực quan thì cả <i> và <em> đều tạo chữ in nghiêng, nhưng về mặt ngữ nghĩa thì lại khác nhau. Trong khi thẻ <em> thể hiện sự nhấn mạnh ở mức độ cao (stress) đối với nội dung văn bản nằm trong nó thì thẻ <i> lại thể hiện văn bản ở mức nổi bật hơn so với mức bình thường; chẳng hạn như nếu bạn muốn làm nổi bật tên của một bộ phim hay một cuốn sách thì bạn nên dùng thẻ <i>, nếu bạn muốn nhấn mạnh đến một cụm từ nào đó như cụm từ nói đến sự cập nhật hay lỗi thời hoặc một động từ thì bạn dùng đến thẻ <em>.

Ví dụ cụ thể cho thẻ <em>: "Tôi vừa mới làm việc xong!", hoặc: "Chúng tôi phải làm gì đó cho anh". Khi đó người hoặc phần mềm đọc văn bản sẽ nhấn mạnh những từ in nghiêng khi phát âm. Lúc này ta sẽ đặt những từ "làm" và "phải" trong thẻ <em>.

Ví dụ cụ thể cho thẻ <i>: "Queen Mary đã khởi hành đêm qua". Ở đây không hề có một sự nhấn mạnh tầm quan trọng của cụm từ "Queen Mary" mà đơn thuần chỉ ra rằng đối tượng được đề cập đến không phải là một nữ hoàng có tên "Mary" mà chỉ là một con tàu có tên "Queen Mary". Vậy thì ta đặt cụm từ "Queen Mary" trong thẻ <i>. Một ví dụ khác cho thẻ <i>: "Từ the làm một bài báo".

Khả năng tương thích trình duyệt

Các trình duyệt trên máy tính cũng như điện thoại di động đều hỗ trợ <i> và <em>.

Xem thêm

· <b> & <strong>, <mark>, <cite>, <dfn>.

<img>

Tổng quan

Thẻ <img> (image) dùng để hiển thị ảnh trong trang web.

Lưu ý: Bạn nên sử dụng thuộc tính alt của thẻ để hiển thị phần mô tả tương ứng để đề phòng trường hợp trình duyệt không hiển thị được ảnh hoặc không hỗ trợ đồ hoạ (do đó không hiển thị ảnh được, trường hợp này có thể xảy ra khi người dùng chọn không hiển thị ảnh hoặc những người khiếm thị sử dụng trình duyệt không có hỗ trợ đồ hoạ do không cần thiết).

Nhóm nội dung

FlowPhrasing, Embedded, Palpable. Nếu <img> sử dụng thuộc tính usemap thì <img> cũng thuộc nhóm nội dung Interactive.

Nội dung được phép

<img> không chứa nội dung.

Thẻ đóng

<img> là thẻ đơn (<img />).

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Embedded.

DOM interface

HTMLImageElement.

Thuộc tính

<img> bao gồm Các thuộc tính Global.

alt

Dùng để hiển thị một chuỗi văn bản thay thế trong trình duyệt trong trường hợp ảnh tương ứng với phần tử chứa alt không hiển thị, tức là nếu ảnh hiển thị thì phần văn bản trong alt sẽ không hiển thị (có thể do sai URL hoặc do trình duyệt hiện thời không hỗ trợ định dạng ảnh tương ứng hoặc cũng có thể do ảnh không được download hay trình duyệt không hỗ trợ đồ hoạ). Nếu không dùng đến thuộc tính alt trong thẻ <img> thì điều này sẽ báo cho trình duyệt biết ảnh hiển thị qua thẻ <img> là phần nội dung quan trọng trong trang web; còn nếu có sử dụng alt nhưng để chuỗi rỗng (alt="") thì sẽ báo cho trình duyệt biết rằng ảnh không phải là thành phần nội dung quan trọng trong trang web.

Ví dụ:

<img alt="Hệ thống nhớ máy tính" />.

border

Thuộc tính này dùng để thiết lập độ rộng đường bao xung quanh ảnh, bạn có thể sử dụng đơn vị px hoặc %. Lưu ý rằng thuộc tính này đã bị lỗi thời trong HTML5 và sẽ không còn được dùng đến nữa trong tương lai gần. Trong trường hợp này bạn sử dụng thuộc tính border của CSS để thay thế.

Ví dụ:

<img border="1" />
<img border="1%" />
<img style="border: 5px solid red;" /> <!--Tạo đường bao là nét liền với độ rộng là 5px và có màu red-->

crossorigin

Đây là thuộc tính liệt kê (thuộc phiên bản HTML5), thuộc tính này dùng để chỉ ra rằng việc tìm nạp ảnh liên quan có cần phải sử dụng đến CORS hay không (những ảnh được tải bằng phương pháp CORS có thể sử dụng lại được trong phần tử <canvas> mà không bị ảnh hưởng đến chất lượng ảnh). Thuộc tính này có những giá trị sau:

anonymous

Giả sử một yêu cầu cross-origin (ví dụ, Origin: HTTP header) đã được giải quyết, nhưng lại không có chứng nhận nào được gửi (ví dụ, không có cookie, không có chứng nhận X.509 và cũng không có thẩm định HTTP Basic nào được gửi), thì nếu server không cung cấp chứng nhận cho site nguồn (bằng cách không thiết lập Access-Control-Allow-Origin: HTTP header) thì chất lượng của ảnh sẽ bị giảm và việc sử dụng nó sẽ trở nên bị hạn chế.

use-credentials

Giả sử một yêu cầu cross-origin (ví dụ, Origin: HTTP header) đã được giải quyết và chứng nhận đã được gửi (ví dụ, một cookie, một chứng nhận X.509 và một thẩm định HTTP Basic được gửi), thì nếu server không cung cấp chứng nhận cho site nguồn (bằng cách không thiết lập Access-Control-Allow-Origin: HTTP header) thì chất lượng của ảnh cũng sẽ vẫn bị giảm và việc sử dụng nó sẽ trở nên bị hạn chế.

Nếu crossorigin không được sử dụng thì tài nguyên sẽ được nạp mà không có yêu cầu CORS (ví dụ, không gửi Origin: HTTP header), khi đó phần tử <canvas> sẽ bị ngăn chặn việc sử dụng ảnh mặc dù ảnh không hề bị giảm chất lượng. Còn nếu crossorigin được sử dụng nhưng không có tác dụng thì việc xử lý sẽ tương ứng với việc sử dụng giá trị anonymous.

height : Thuộc tính này dùng để xác định chiều cao của ảnh; đối với HTML5 thì đơn vị sử dụng là CSS pixel, còn đối với HTML4 thì đơn vị là px hoặc %.

hspace : Dùng để thiết lập khoảng trắng (theo đơn vị px) bên trái và bên phải của ảnh (trong HTML5 thuộc tính này đã lỗi thời và đã hoặc sẽ bị huỷ).

ismap : Đây là thuộc tính Boolean, dùng để chỉ ra rằng ảnh là một phần của bản đồ server-side, và vì vậy nếu bạn click chuột vào ảnh thì toạ độ của chuột sẽ được gửi tới server. Lưu ý rằng ismap chỉ được sử dụng khi thẻ <img> nằm trong một thẻ <a> nào đó và thẻ <a> này sử dụng thuộc tính href có giá trị hợp lệ.

longdesc : Thuộc tính này chứa URL của phần mô tả của ảnh, nó có tác dụng bổ sung cho phần mô tả của thuộc tính alt. Trong HTML5 người ta sử dụng thẻ <a> để liên kết đến phần mô tả thay vì dùng thuộc tính longdesc.

name : Dùng để đặt tên cho phần tử. Trong HTML4 nó được dùng với mục đích duy nhất là đảm bảo sự tương thích ngược; còn trong HTML5 ta sử dụng thuộc tính id để thay thế.

sizes : Đây là thuộc tính của HTML5.

src : Thuộc tính này dùng để chứa URL của ảnh và đây là thuộc tính bắt buộc. Đối với những trình duyệt hỗ trợ thuộc tính srcset thì src được ứng xử như một ảnh ứng viên với mật độ điểm ảnh là 1x trừ khi một ảnh với bộ mô tả mật độ điểm ảnh đã được xác định trong thuộc tính srcset hoặc srcset có chứa các bộ mô tả 'w'.

srcset : Đây là thuộc tính của HTML5.

width : Thuộc tính này dùng để xác định độ rộng của ảnh theo đơn vị CSS pixel đối với HTML5 và theo đơn vị px hoặc % đối với HTML4.

Ví dụ:

<img width="50%" /> <!--Độ rộng bằng 50% so với phần tử chứa-->

<img width="100" /> <!--Độ rộng bằng 100px-->

usemap

Thuộc tính này dùng để chứa phần URL (bắt đầu từ dấu '#') của một bản đồ ảnh liên quan (chứa id của thẻ <map>). Lưu ý rằng bạn không sử dụng được thuộc tính này nếu thẻ <img> là con của thẻ <a> hoặc thẻ <button>.

Mời bạn xem ví dụ về usemap tại đây.

vspace : Thuộc tính này dùng để xác định khoảng trắng tính theo đơn vị px ở trên và dưới ảnh hiện thời.

Các định dạng ảnh được hỗ trợ

Mỗi trình duyệt có thể có những hỗ trợ khác nhau đối với các định dạng ảnh. Dưới đây là danh sách các định dạng ảnh có thể được hỗ trợ bởi các trình duyệt:

JPEG, GIF (bao gồm cả ảnh GIF động), PNG, APNG, SVG, BMP, BMP ICO và PNG ICO.

Ví dụ

Ví dụ 1: Lấy nguồn ảnh.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img src="../public/images/article/he_thong_nho_may_tinh.png" alt="Hệ thống nhớ máy tính" />
</body>
</html>
 

Ví dụ 2: Điểm liên kết là ảnh.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="http://v1study.com/c-he-thong-nho-may-tinh-a71.html">  <img src="../public/images/article/he_thong_nho_may_tinh.png" alt="Hệ thống nhớ máy tính" /> </a>
</body>
</html>
 

Ví dụ 3: Sử dụng thuộc tính srcset.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img src="../public/images/article/he_thong_nho_may_tinh.png" alt="Hệ thống nhớ máy tính" srcset="../public/images/article/he_thong_nho_may_tinh.png 2x" />
</body>
</html>
 

Ví dụ 4: Sử dụng thuộc tính srcset và sizes.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img src="../public/images/article/he_thong_nho_may_tinh.png" alt="Hệ thống nhớ máy tính" srcset="../public/images/article/he_thong_nho_may_tinh.png 800w" sizes="(min-width: 600px) 1000px, 100vw" />
</body>
</html>
 

Khả năng tương thích trình duyệt

AnchorMáy tính

Đặc điểm

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

(Có)

(Có) (Có) (Có) (Có)

Thuộc tính srcset

34.0

32.0 (32.0) (sau một pref)

Không hỗ trợ

21

7.1

Thiết bị di động

Đặc điểm

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Có)

(Có) (Có) (Có) (Có)

Thuộc tính srcset

Không hỗ trợ

Không hỗ trợ Không hỗ trợ Không hỗ trợ

iOS 8

Xem thêm

· <embed>

· <object>

<input>

Thẻ <INPUT>, theo đúng như nghĩa của tên thẻ nó được dùng cho vấn đề nhập liệu. <INPUT> là thành phần con của thẻ <FORM>, <INPUT> đưa ra các cách thức nhập liệu khác nhau thông qua thuộc tính type.

Dữ liệu nhập vào thẻ <INPUT> sẽ được lưu trữ vào thuộc tính VALUE của thẻ, thuộc tính ACCESSKEY dùng để đưa ra phím tắt khi muốn focus vào thẻ. Chẳng hạn nếu bạn đặt phím tắt là ACCESSKEY="H" thì bạn nhấn tổ hợp phím "Alt + H" sẽ focus được vào thẻ tương ứng, thuộc tính DISABLED dùng để ngăn cản sự tương tác giữa người dùng với thẻ, thuộc tính DIR có hai trá trị là ltr (left to right) để nhập dữ liệu theo hướng từ trái sang phải và rtl (right to left) dùng để nhập dữ liệu theo hướng từ phải sang trái. Dưới đây tôi sẽ trình bày chi tiết các kiểu (type) của <INPUT>.

1. text:

Kiểu text được dùng để nhập những mẩu dữ liệu nhỏ như họ và tên, địa chỉ, quê quán, mô tả ngắn, tiêu đề bình luận, tiêu đề phản hồi. Đây là một trong những kiểu hay được sử dụng nhất trong form dữ liệu.

Ví dụ:

Họ và tên: <INPUT TYPE="text" />

2. password:

Kiểu password dùng để nhập những giá trị cần tính bảo mật cao như mật khẩu.

Ví dụ:

Mật khẩu: <INPUT TYPE="password" />

3. checkbox:

Kiểu checkbox dùng để tạo hộp kiểm cho phép người dùng tích chọn. Thông thường trong một form sẽ có nhiều checkbox và người dùng có thể có quyền không chọn, chọn một hoặc nhiều checkbox.

Ví dụ:

Bạn có khả năng đối với ngôn ngữ lập trình nào?

<INPUT TYPE="checkbox" /> Ngôn ngữ C

<INPUT TYPE="checkbox" /> HDJ

<INPUT TYPE="checkbox" /> SQL

<INPUT TYPE="checkbox" /> PHP

4. file:

Kiểu file cho phép bạn chọn một file có phần mở rộng bất kỳ. HTML5 có thêm thuộc tính multiple áp dụng cho file để cho phép người dùng có thể chọn nhiều tập tin cùng lúc.

Ví dụ:

Mời bạn chọn một file: <INPUT TYPE="file" />

5. button:

Kiểu button sẽ tạo ra một nút lệnh, nút lệnh này khi được nhấn chọn sẽ không có tác dụng gì vì mặc định nó không được cài đặt bất kỳ sự kiện nào.

Ví dụ:

<INPUT TYPE="button" value="Nút lệnh" />

6. submit:

Kiểu submit dùng để tạo nút lệnh với tác dụng gửi dữ liệu của form (biểu mẫu) tới trang nhận. Kiểu submit thường dùng làm nút đăng ký tài khoản hoặc nút gửi feedback, ...

<INPUT TYPE="submit" value="Đăng ký" />

7. image:

Kiểu image cũng có tác dụng như kiểu submit là dùng để tạo nút lệnh với tác dụng gửi dữ liệu của form tới trang nhận. Tuy nhiên, ta có thể dùng một ảnh làm nền cho nút lệnh này. Ngoài ra, kèm theo form dữ liệu gửi đi là hai giá trị hoành độ x và tung độ y tương ứng với tọa độ của chuột tại vị trí click vào nút lệnh image.

<INPUT TYPE="image" value="Đăng ký" src="Nguồn_ảnh" />

<main>

Phần tử <main> dùng để trình bày nội dung chính trong phần tử <body> của tài liệu hoặc ứng dụng. Phần nội dung chính bao gồm nội dung liên quan trực tiếp hoặc phần mở rộng chủ đề chính của trang web hoặc mở rộng chức năng chính của ứng dụng. Nội dung này phải là duy nhất trong trang web, không bao gồm bất kỳ nội dung nào lặp đi lặp lại như sidebars, các liên kết điều hướng, thông tin bản quyền, logo, và form tìm kiếm (trừ khi chức năng chính của trang web là form tìm kiếm).

Chú ý:

Thuộc tínhEDIT

Phần tử này chỉ bao gồm Các thuộc tính global.

Ví dụEDIT

<!-- nội dung khác -->
<main>
  <h1>V1Study</h1>
  <p>Là trang web cung cấp các kiến thức học tập.</p>

  <article>
    <h2>Java</h2>
    <p>Là một ngôn ngữ lập trình phổ biến có mặt trong V1Study.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>HDJ</h2>
    <p>Bao gồm các môn học HTML, CSS và JavaScript.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>
<!-- nội dung khác -->

Khả năng tương thích trình duyệt

EDIT

Phần tử <main> có hỗ trợ khả năng mở rộng. Từ phiên bản Internet Explorer 11 trở xuống, ta có thể sử dụng thuộc tính role="main" để đảm bảo rằng nó có thể hiểu được phần tử <main>.

<main role="main">
  ...
</main>

Các phần tử Cấu trúc/Ngữ nghĩa

Có nhiều website hiện nay có chứa những mã HTML có dạng như: <div id="nav">, <div class="header"> hoặc <div id="footer"> để thể hiện phần điều hướng (navigation), phần đầu (header) và phần chân trang web (footer). Cấu trúc cũng như khung sườn của trang web có thể nói gần như dựa hoàn toàn vào phần tử <div>.

HTML5 cung cấp những phần tử mới cho phép bạn tạo cấu trúc cho trang web mà không cần sử dụng những mã HTML như trên, đồng thời những phần tử mới này cũng giúp bạn không còn bị phụ thuộc vào phần tử <div> nữa. Ngoài ra, những phần tử này còn là những phần tử ngữ nghĩa bởi lẽ tên của mỗi phần tử nói lên tác dụng của phần tử đó.

HTML5: Các phần tử cấu trúc/ngữ nghĩa

Ngoài ra, việc sử dụng các phần tử cấu trúc/ngữ nghĩa cũng sẽ giúp website của bạn thân thiện hơn với các bộ máy tìm kiếm (Search Engine - SE), và điều này giúp làm tăng thứ hạng trong kết quả tìm kiếm đối với công cụ tìm kiếm này.

Dưới đây là danh sách các phần từ cấu trúc/ngữ nghĩa cơ bản:

  • <article>
  • <aside>
  • <figure> và <figcaption>
  • <footer>
  • <header>
  • <nav>
  • <section>

Trình duyệt hỗ trợ

Internet Explorer 9+, Firefox, Chrome, Safari và Opera đều hỗ trợ những phần tử cấu trúc/ngữ nghĩa.

Khởi tạo các phần tử cấu trúc/ngữ nghĩa

Để cho các phần tử ngữ nghĩa làm việc trên tất cả các trình duyệt bạn nên đặt giá trị của thuộc tính display của các phần tử là 'block' (điều này sẽ đảm bảo các trình duyệt cũ sẽ xác định đúng được các phần tử).

article, aside, figure, figcaption, footer, header, nav, section {display: block;}

<article>

Phần tử (hay thẻ) <article> thường được dùng để đặt làm phần chính của trang web, chẳng hạn như nội dung các bài đăng trên các diễn đàn, blog, các trang tin tức, các bình luận, hoặc bất kỳ một nội dung độc lập nào. Mỗi phần tử <article> nên được xác định, thường là bằng cách dùng các thẻ thiết lập tiêu đề (các thẻ từ <h1> đến <h6>) làm thẻ con của nó.

Lưu ý về cách dùng <article>:

- Khi có phần tử <article> nằm trong một phần tử <article> khác, thì phần tử bên trong thể hiện cho một bài viết liên quan đến phần tử bên ngoài. Chẳng hạn như một bài đăng thường có hai phần là nội dung bài đăng và phần bình luận, hai phần này được đặt trong hai phần tử <article> riêng rẽ, và hai phần tử <article> đó lại được đặt trong một phần tử <article> khác dùng để đặt toàn bộ bài đăng.

- Thông tin về tác giả của một phần tử <article> có thể được đặt trong thẻ <address>, nhưng phần tử <article> đó phải không được đặt trong thẻ <article> nào.

- Ngày xuất bản và thời gian của một thẻ <article> có thể được mô tả bằng cách sử dụng thuộc tính datetime của phần tử <time> (lưu ý rằng thuộc tính pubdate của <time> không còn là một chuẩn của HTML5 3WC nữa).

Dưới đây là ví dụ về phần tử <article>:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (viết tắt là IE9) được phát hành vào ngày 14/03/2011</p>
</article>
</body>
</html>

<aside>

Phần tử <aside> thường được dùng để đặt các nội dung nằm bên cạnh (trái hoặc phải) nội dung chính của trang web giống như phần sidebar.

Ví dụ sau đây trình diễn nội dung bên của một trang web dùng thẻ <aside>, trong đó chứa các link về các bài viết nổi bật.

<aside>
  <h3>Bài viết nổi bật</h3>
  <nav>
    <a>Định vị, kéo và thả</a>
    <a>Lưu trữ web</a>
    <a>API IndexedDB</a>
    <a>App Cache</a>
  </nav>
</aside>

<figure> và <figcaption>

Phần tử <figure> thường được dùng để đặt các phần như phần giải nghĩa, sơ đồ, hình ảnh, mã lệnh. Còn phần tử <figcaption> được dùng làm phần chú thích cho nội dung nằm trong  phần tử <figure>, nó có thể được đặt ở vị trí trên hoặc dưới phần tử <figure>. Ví dụ:

<body>
<figure>
  <img src="Nguồn ảnh" />
  <figcaption>Chú thích ảnh</figcaption>
</figure>
<body>

<footer>

<footer> thường được dùng để đặt phần chân của trang web, nó cũng được dùng để đặt phần cuối của một phần nào đó trong trang web.

<footer> thường là nơi đặt những thông tin như tác giả của trang web, thông tin bản quyền, các liên kết, thông tin liên hệ.

Trong một trang web bạn được quyền dùng nhiều phần tử <footer>. Ví dụ:

<body>
<footer>
  <p>Designed by: V1Study</p>
  <p>Copyright: V1Study</p>
  <p>E-mail: contact.v1study@gmail.com</p>
</footer>
</body>

<header>

Phần tử <header> thường được dùng để đặt phần trên cùng của trang web như phần logo, banner, điều hướng. Nó cũng được dùng để chứa các phần tử tiêu đề hoặc một biểu mẫu (form) tìm kiếm trong trang web.

Bạn có thể dùng nhiều phần tử <header> trong một trang web. Ví dụ dưới đây sử dụng phần tử <header> để đặt tiêu đề cho một bài viết:

<body>
<article>
<header>
  <h1>Internet Explorer 9</h1>
  <p><time pubdate datetime="2011-03-14"></time></p>
</header>
<p>Windows Internet Explorer 9 (viết tắt là IE9) được phát hành vào ngày 14/03/2011</p>
</article>
</body>

<nav>

Phần tử <nav> thường được dùng để đặt các liên kết điều hướng như là menu ngang, menu dọc.

Lưu ý rằng trong một trang web bạn có thể sử dụng nhiều phần tử <nav>, nhưng không phải tất cả các liên kết trong trang web đều cần phải được đặt trong <nav>, điển hình như phần tử <footer> có chứa nhiều liên kết nhưng không cần phải đặt trong <nav>

Dưới đây là một ví dụ sử dụng phần tử <nav> để đặt các liên kết.

<body>
<nav>
  <a href="#">HTML</a> |
  <a href="#">CSS</a> |
  <a href="#">JavaScript</a> |
  <a href="#">jQuery</a> |
  <a href="#">HTML5</a> |
  <a href="#">CSS3</a> |
  <a href="#">SQL</a> |
  <a href="#">PHP</a>
</nav>
</body>

<section>

<section> thường được dùng để đặt các phần con nằm trong những phần lớn như header, article, aside, footer, hoặc bất kỳ phần tử nào khác. Ví dụ:

<body>
<header>
  <section>Chứa Logo</section>
  <section>Chứa Banner</section>
</header>
</body>

Ví dụ áp dụng

Ví dụ dưới đây sử dụng các phần tử cấu trúc/ngữ nghĩa để tạo khung giao diện cho trang web. Bạn có thể nhấn nút "Demo" ngay phía dưới đoạn mã để xem sự hiển thị thực tế.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
article, aside, footer, header, section{
display:block;
text-align:center;
}
#total{
width:900px;
margin:0px auto;
position:relative;
}
#logo, #banner, aside, article, footer, article header{
border:green thin solid;
box-sizing:border-box;
float:left;
}
#logo,#banner,#total > footer{
height:100px;
padding-top:35px;
}
#logo{
width:25%;
}
#banner{
width:75%;
}
aside,article{
height:200px;
}
aside{
width:20%;
padding-top:90px;
}
article{
width:60%;
}
footer{
width:100%;
}
article header,article footer{
width:100%;
height:50px;
padding-top:15px;
}
article article{
width:100%;
height:100px;
padding-top:40px;
}
</style>
</head>
<body>
<section id="total">
<header><section id="logo">Header>>Section-Logo</section><section id="banner">Header>>Section-Banner</section></header>
<nav></nav>
<section>
<aside>Aside</aside><article><header>Article>>Header</header><article>Article-Article</article><footer>Article>>Footer</footer></article><aside>Aside</aside>
</section>
<footer>Footer</footer>
</section>
</body>
</html>
 

<nobr>

Thẻ <nobr> dùng để tránh việc xuống dòng đối với một đoạn văn bản (text) nào đó khi độ dài của nó lớn hơn độ rộng của của thẻ chứa đoạn văn bản đó.

Ví dụ:

- Ở ví dụ này bạn sẽ thấy khi độ dài của đoạn văn vượt quá độ rộng của thẻ chứa thì đoạn văn sẽ tự độ xuống dòng:

<section style="border:green thin solid; width:15%;">Thẻ NOBR sẽ ngăn không cho xuống dòng nếu độ dài của chuỗi lớn hơn độ rộng của phần tử chứa nó.</section>

 

- Bây giờ ta thêm thẻ <nobr> vào thì sẽ không còn hiện tượng xuống dòng nữa:

<nobr>

<section style="border:green thin solid; width:15%;">Thẻ NOBR sẽ ngăn không cho xuống dòng nếu độ dài của chuỗi lớn hơn độ rộng của phần tử chứa nó.</section>

</nobr>

 

- Nếu bạn muốn ẩn đi phần đoạn văn vượt ra ngoài nhưng vẫn muốn có thể xem được phần đoạn văn đó bạn làm như sau:

<nobr>

<section style="border:green thin solid; width:15%; overflow:auto;">Thẻ NOBR sẽ ngăn không cho xuống dòng nếu độ dài của chuỗi lớn hơn độ rộng của phần tử chứa nó.</section>

</nobr>

 

- Còn nếu bạn muốn ẩn hẳn đi phần đoạn văn vượt ra ngoài bạn làm như sau:

<nobr>

<section style="border:green thin solid; width:15%; overflow:hidden;"> Thẻ NOBR sẽ ngăn không cho xuống dòng nếu độ dài của chuỗi lớn hơn độ rộng của phần tử chứa nó.</section>

</nobr>

 

Lưu ý: Thẻ <nobr> là thẻ HTML không chuẩn, vậy nên bạn nên tránh việc sử dụng thẻ này. Trong CSS có một thuộc tính có thể thay thế được cho thẻ <nobr>, đó là thuộc tính: white-space.

<ol> & <li>

Thẻ <OL> (Ordered List) và <LI> (List Item) dùng để thể hiện một danh sách có thứ tự. Thứ tự được sắp xếp theo trật tự tăng dần từ trên xuống dưới với 5 cách đánh thứ tự được quy định bởi thuộc tính type của thẻ <OL> hoặc <LI>. Nếu đặt type trên thẻ <OL> thì sẽ áp dụng cho toàn bộ danh sách. Dưới đây là những cách đánh thứ tự cụ thể của kiểu type:

- type='1' : dạng số tự nhiên (mặc định)

- type='I' : dạng số La Mã in hoa

- type='i' : dạng số La Mã in thường

- type='A' : dạng ký tự in hoa

- type='a' : dạng ký tự in thường.

Ví dụ:

<OL> <!--Hoặc <OL type='1'> -->
  <LI>Ngôn ngữ C</LI>
  <LI>HDJ</LI>
  <LI>jQuery</LI>
  <LI>SQL</LI>
  <LI>PHP</LI>
</OL>

Kết quả hiển thị sẽ là:

  1. Ngôn ngữ C
  2. HDJ
  3. jQuery
  4. SQL
  5. PHP

Nếu bạn đặt type trên thẻ <LI> nào thì cách đánh thứ tự sẽ được áp dụng cho thẻ <LI> đó. Ví dụ:

<OL>
  <LI>Ngôn ngữ C</LI>
  <LI>HDJ</LI>
  <LI type="A">jQuery</LI>
  <LI>SQL</LI>
  <LI>PHP</LI>
</OL>

Kết quả:

1. Ngôn ngữ C
2. HDJ
C. jQuery
4. SQL
5. PHP

Tại mỗi thẻ <LI> bạn cũng có quyền đặt bộ thẻ <OL> và <LI> khác để tạo danh sách con. Ví dụ:

<OL>
  <LI>Ngôn ngữ C</LI>
  <LI>HDJ
      <OL>
        <LI>HTML</LI>
        <LI>CSS</LI>
        <LI>JavaScript</LI>
    </OL>
  </LI>
  <LI>jQuery</LI>
  <LI>SQL</LI>
  <LI>PHP</LI>
</OL>

Kết quả:

  1. Ngôn ngữ C
  2. HDJ
    1. HTML
    2. CSS
    3. JavaScript
  3. jQuery
  4. SQL
  5. PHP

<p>

Tổng quan

Thẻ <p> (Paragraph) hay còn gọi là thẻ mức đoạn (hay mức khối) dùng để thể hiện một đoạn văn bản.

Đoạn văn bản đặt trong <p> sẽ phân cách với các đoạn văn bản lân cận khác bằng một dòng trắng.

Thẻ <p> là thẻ đôi (<p> </p>).

<p> thuộc các Phần tử mức khối.

Nhóm nội dung

Flow, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Bắt buộc phải có thẻ mở (opening tag) <p>, có thể bỏ qua thẻ đóng (closing tag) </p> nếu <p> nằm ngay sau những thẻ <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul>, hoặc nằm ngay sau thẻ <p> khác, hoặc nếu trong phần tử chứa <p> không có nhiều nội dung hoặc phần tử chứa <p> không phải là thẻ <a>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow.

DOM interface

HTMLParagraphElement.

Thuộc tính

<p> bao gồm Các thuộc tính Global.

title

Dùng để tạo chú thích cho đoạn văn bản nằm trong thẻ <p>.

align

Dùng để canh lề cho đoạn văn bản nằm trong <p>. Thuộc tính này gồm các giá trị left (canh trái, mặc định), center (canh giữa), right (canh phải), justify (canh thẳng hàng hai bên trái phải).

Ví dụ

Ví dụ dưới đây sẽ trình bày hai đoạn văn nằm trong hai thẻ <p> khác nhau, hai đoạn văn này sẽ phân cách nhau bằng một dòng trắng, trong đó đoạn văn thứ nhất có màu red và khi bạn di chuyển chuột chạm vào đoạn văn thì sẽ hiện ra chú thích (được tạo bởi thuộc tính title), còn đoạn văn thứ hai có màu green và được đặt ở chính giữa trình duyệt (được tạo bởi thuộc tính align).

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<p title="Đây là đoạn văn bản đầu tiên" style="color:red;">This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.</p>

<p align="center" style="color:green;">This is second paragraph of text. This is second paragraph of text. This is second paragraph of text. This is second paragraph of text.</p>

</body>

</html>



 

Lưu ý

Để thay đổi khoảng cách giữa các thẻ <p> bạn có thể sử dụng thuộc tính margin của CSS.

Bạn không nên chèn thêm thẻ <p> không chứa nội dung hoặc thẻ <br> giữa các thẻ <p>.

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

1.0

1.0 (1.7 or earlier)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

1.0 (1.0)

(Yes)

(Yes)

(Yes)

Xem thêm

· <hr>

· <br>

<nav>

Phần tử <nav> thường được dùng để đặt các liên kết điều hướng như là menu ngang, menu dọc, …

<nav> thuộc nhóm phần tử Cấu trúc/Ngữ nghĩa.

Ví dụ:

<!DOCTYPE html>

<html>

<body>

<nav>

<a href="#">HTML</a> |

<a href="#">CSS</a> |

<a href="#">JavaScript</a> |

<a href="#">jQuery</a> |

<a href="#">HTML5</a> |

<a href="#">CSS3</a> |

<a href="#">SQL</a> |

<a href="#">PHP</a>

</nav>

</body>

</html>

 

<select>

Thẻ <select> dùng để thiết lập một menu chọn cho phép chọn một mục hoặc nhiều mục. Nếu muốn tạo menu chọn nhiều mục bạn chỉ cần sử dụng thêm thuộc tính multiple cho thẻ <select>.

Cú pháp:

<select>

<option>Lựa chọn 1</option>

<option>Lựa chọn 1</option>

<option>Lựa chọn 1</option>

<option>Lựa chọn 1</option>

<option>Lựa chọn 1</option>

...

</select>

Ví dụ về menu chọn một mục:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: Menu chọn 1 mục</title>
</head>

<body>
<form>
    <label for="ngonngu">Mời chọn một ngôn ngữ:</label>
    <select id="ngonngu" name="ngonngu">
        <option hidden>--Chọn 1 ngôn ngữ--</option>        
        <option>Ngôn ngữ C</option>        
        <option>HTML5</option>        
        <option>CSS3</option>        
        <option>JavaScript</option>        
        <option>jQuery</option>        
        <option>SQL</option>        
        <option>PHP</option>    
    </select>
    <input type="submit" value="Gửi">
</form>
</body>
</html>

 

Ví dụ về menu chọn nhiều mục:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: Menu chọn nhiều mục</title>
</head>

<body>
<form>
    <label for="ngonngu">Mời chọn những ngôn ngữ bạn thích (nhấn giữ phím Ctrl và chọn):</label>
    <select id="ngonngu" name="ngonngu" multiple>
        <option hidden>--Chọn 1 ngôn ngữ--</option>    
        <option>Ngôn ngữ C</option>    
        <option>HTML5</option>    
        <option>CSS3</option>    
        <option>JavaScript</option>    
        <option>jQuery</option>    
        <option>SQL</option>    
        <option>PHP</option>
    </select>
    <input type="submit" value="Gửi">
</form>
</body>
</html>

 

Trong DOM

Trong DOM thì thẻ <select> có thuộc tính selectedIndex dùng để lấy chỉ số của <option> đã được chọn. Ví dụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: Menu chọn 1 mục</title>
</head>

<body>
<form>
    <label for="ngonngu">Mời chọn một ngôn ngữ:</label>
    <select id="ngonngu" name="ngonngu" onChange="alert('Chỉ số của option đã chọn: '+selectedIndex);">
        <option hidden>--Chọn 1 ngôn ngữ--</option>        
        <option>Ngôn ngữ C</option>        
        <option>HTML5</option>        
        <option>CSS3</option>        
        <option>JavaScript</option>        
        <option>jQuery</option>        
        <option>SQL</option>        
        <option>PHP</option>    
    </select>
    <input type="submit" value="Gửi">
</form>
</body>
</html>

 

Trong DOM thì <select> cũng có một thuộc tính mảng là options, options đại diện cho tất cả các thẻ <option> của <select>. Nếu ban muốn lấy giá trị của một <option> nào đó thì bạn chỉ cần làm như sau: options[selectedIndex].value hoặc options[selectedIndex].text. Ví dụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: options</title>
</head>

<body>
<form>
    <label for="ngonngu">Mời chọn một ngôn ngữ:</label>
    <select id="ngonngu" name="ngonngu" onChange="alert('Ngôn ngữ bạn đã chọn: '+options[selectedIndex].value);">
        <option hidden>--Chọn 1 ngôn ngữ--</option>
        <option>Ngôn ngữ C</option>
        <option>HTML5</option>
        <option>CSS3</option>
        <option>JavaScript</option>
        <option>jQuery</option>
        <option>SQL</option>
        <option>PHP</option>
    </select>
    <input type="submit" value="Gửi">
</form>
</body>
</html>

 

<output>

Phần tử <output> được dùng để hiển thị kết quả tính toán.

<output> là phần tử con mới của phần tử <form>.

Trình duyệt hỗ trợ: Chrome, FireFox, Opera và Safari.

Ví dụ:

<!DOCTYPE html>

<html>

<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

0<input type="range" id="a" value="50">100 +

<input type="number" id="b" value="50"> =

<output name="x"></output>

</form>

</body>

</html>

 

<progress>

Phần tử <progress> dùng để hiển thị tiến trình thực hiện (theo thời gian) của một tác vụ.

Các sự kiện DOM của phần tử:

Sự kiện DOM Mô tả
mselementresize Được kích hoạt khi phần tử HTML thay đổi kích thước

Các thuộc tính DOM của phần tử:

Thuộc tính Kiểu truy cập Mô tả
form   Lấy một tham chiếu đến form mà đối tượng được nhúng vào trong.
max Read/Write Định nghĩa giá trị lớn nhất hoặc giá trị "done" cho phần tử progress.
position Read-only Trả về thương số của value/max khi thiết lập giá trị cho thuộc tính value (thanh tiến trình được xác định), trả về -1 nếu không thiết lập giá trị cho thuộc tính value (thanh tiến trình không được xác định).
value Read/Write Thiết lập hoặc lấy giá trị hiện thời của phần tử <progress>, giá trị nằm trong đoạn [0,max].

Lưu ý:

Nếu Bạn không sử dụng thuộc tính value thì thanh tiến trình sẽ ở trạng thái không được xác định (ring or inderteminate), khi đó thanh tiến trình vẫn xuất hiện nhưng không có hiệu ứng tiến trình. Còn nếu Bạn sử dụng thuộc tính value nhưng không sử dụng thuộc tính max thì dải tiến trình sẽ là từ 0 đến 1. Bạn cũng có thể sử dụng CSS để thay đổi dạng thể hiện của tiến trình như màu nền, màu chữ (màu tiến trình), ...

Ví dụ:

<html>
<head>
<meta charset="utf-8">
<title>Progress bar example</title>
<style type="text/css">
progress{
/* style the progress bar */
border: 1px solid black;
color: red;
background-color:Yellow;
}
</style>
<script>
function goingUp(){
// add 5% to value
var pBar = document.getElementById( "pbar");
if (pBar.value <= (pBar.max - 5)){
pbar.value += 5;
}
checkStatus();
}
function checkStatus(){
// Shows position and value
// -1 for indeterminate, otherwise current value divided by max.

var pBar = document.getElementById( "pbar");
document.getElementById( "positionStatus").innerHTML = "Value: " + pBar.value;
document.getElementById( "positionStatus").innerHTML += "<br/>Position: " + pBar.position.toFixed(3);
}
function toggle(){
var pBar = document.getElementById( "pbar");
if (pBar.hasAttribute("value")) {
// Removing the value attribute makes the progress bar indeterminate
pBar.removeAttribute( "value");
document.getElementById( "tgl").innerHTML = "Make determinate";
} else {
// Setting the value attribute makes the progress bar determinate
pBar.value = 5;
document.getElementById( "tgl").innerHTML = "Make indeterminate";
}
checkStatus();
}
</script>
</head>
<body onload="checkStatus();">
<h1>Progress bar test</h1>
<p>Thanh tiến trình không xác định: <progress></progress></p>
<p>Nút lệnh "Make determinate" hoặc "Make indeterminate" dùng để nạp hoặc huỷ tiến trình.</p>
<p>Click nút lệnh "Up" để thực hiện tiến trình (mỗi lần click tăng 5%).</p>
<div>
<label id="progLabel">Progress: <progress id="pbar" max="100">Put alternate display here</progress></label>
<button onclick="goingUp();">Up</button>
<button id= "tgl" onclick="toggle();">Make determinate</button>
</div>
<div id="positionStatus"></div>
</body>
</html>

 

<sub> & <sup>

Tổng quan

Thẻ <sub> (Subscript) dùng để tạo chữ có kích thước nhỏ hơn và có vị trí thấp hơn so với chữ bình thường. Có thể sử dụng thẻ <sub> để tạo chỉ số dưới (ví dụ như t3, H2O, ...).

Thẻ <sup> (Superscript) dùng để tạo chữ có kích thước nhỏ hơn và có vị trí cao hơn so với chữ bình thường. Có thể sử dụng thẻ <sup> để tạo chỉ số trên (ví dụ như 25, Mlle, ...).

Không nên sử dụng <sub> cũng như <sup> nhằm mục đích định kiểu; thay vào đó có thể sử dụng thuộc tính vertical-align của CSS.

Nhóm nội dung

Flow, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Bắt buộc phải có thẻ mở <sub> và <sup> cũng như thẻ đóng </sub> và </sup>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

HTMLElement.

Thuộc tính

<sub> và <sup> bao gồm Các thuộc tính Global.

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  Biểu thức: P = A<sub>1</sub> + A<sub>2</sub> + A<sub>3</sub>
  <hr />
  Phương trình bậc 3 là phương trình có dạng: ax<sup>3</sup> + bx<sup>2</sup> + cx + d = 0
  <hr />
  <p>
    The most beautiful women are
    <span lang="fr">
      <abbr>M<sup>lle</sup></abbr>
      Gwendoline</span> and
    <span lang="fr">
      <abbr>M<sup>me</sup></abbr>
      Denise</span>.
  </p>
  <hr />
  <p>
    The coordinate of the
    <var>i</var>th point is
(<var>x<sub><var>i</var></sub></var>,
    <var>y<sub><var>i</var></sub></var>).
For example, the 10th point has coordinate
(<var>x<sub>10</sub></var>,
    <var>y<sub>10</sub></var>).
  </p>
</body>
</html>
 

<u>

Tổng quan

Thẻ <u> (Underline) dùng để gạch chân cho phần văn bản tương ứng (một đường nằm dưới đường cơ sở của nội dung). Trong HTML5 thẻ <u> được dùng với ý nghĩa thể hiện phần văn bản trong nó là một unarticulated, chẳng hạn như gắn nhãn cho văn bản bên trong nó như là đang bị sai chính tả.

Lưu ý: Trong HTML 4 và XHTML 1 thì thẻ <u> chỉ thuần tuý mang ý nghĩa định kiểu; nhưng HTML5 lại định nghĩa lại nó với ý nghĩa khác được trình bày ở phần bên trên. Vì vậy, nếu bạn chỉ đơn thuần muốn gạch chân cho văn bản thì bạn có thể sử dụng thẻ <span> hoặc một thẻ khác thích hợp và định kiểu cho nó với thuộc tính text-decoration:underline của CSS.

Nhóm nội dung

Flow, Phrasing, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Bắt buộc phải có thẻ mở <u> và thẻ đóng </u>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

HTMLElement.

Thuộc tính

<u> bao gồm Các thuộc tính Global.

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <u>Today's Special</u>: Salmon<br />
  <span style="text-decoration: underline;">Today's Special</span>: Salmon
</body>
</html>
 

 

<p><u>All</u> of that is explained in <u>Dive into Python</u>.</p>

Kết quả:

All of that is explained in Dive into Python.

Nên được thay bằng:

<p><em>All</em> of that is explained in <cite>Dive into Python</cite>.</p>

Kết quả:

All of that is explained in Dive into Python.

Lưu ý

Nên tránh dùng thẻ <u> tại những vị trí dễ gây nhầm lẫn với siêu liên kết.

Trong đa số các trường hợp thì những thẻ khác lại có vẻ thích hợp hơn so với <u>: để đánh dấu sự nhấn mạnh ở mức lớn thì sử dụng thẻ <em>,  đánh dấu là từ hoặc cụm từ khoá thì dùng thẻ <b> hoặc thẻ <mark> (tuỳ thuộc ngữ cảnh để lựa chọn), đánh dấu là tiêu đề sách chẳng hạn thì dùng thẻ <cite>, để gắn nhãn cho văn bản rồi chú thích một cách tường mình cho nó ta dùng thẻ <ruby>, để gắn nhãn cho tên của một con tàu nào đó giống như trong văn bản phương Tây thì ta sử dụng thẻ <i>.

<section>

Phần tử <section> thường được dùng để đặt các phần con nằm trong những phần lớn như header, article, aside, footer, ...

<section> thuộc nhóm phần tử Cấu trúc/Ngữ nghĩa.

Ví dụ:

<!DOCTYPE html>

<html>

<body>

<header>

<section>Chứa Logo</section>

<section>Chứa Banner</section>

</header>

</body>

</html>

Thuộc tính mới của FORM & INPUT

HTML5 cung cấp thêm cho bạn các thuộc tính mới cho phần tử <form> và phần tử <input>. Các thuộc tính mới này giúp ta giảm được việc phải lập trình, và như vậy nó giúp tăng tốc độ tải trang web nơi chứa <form> và <input>.

Lưu ý rằng hiện tại chưa có trình duyệt nào hỗ trợ đầy đủ các thuộc tính mới này. Các trình duyệt hỗ trợ cho từng thuộc tính được kiểm nghiệm tại năm 2015.

Dưới đây ta sẽ tìm hiểu chi tiết đối các thuộc tính mới này.

1. autocomplete

autocomplete dùng để hiển thị hay không hiển thị các giá trị đã được gửi đi trước đó trong mỗi lần submit khi bạn có những thao tác trên các phần tử <input> như là click đúp hoặc điền giá trị vào phần tử <input> tương ứng. Ví dụ như khi bạn điền giá trị là 'abc' vào một phần tử <input> và submit form thì sau khi submit xong nếu bạn click đúp chuột hoặc điền 'a' vào phần tử <input> này thì giá trị 'abc' sẽ hiện ra như là một gợi ý cho bạn.

autocomplete có hai giá trị là 'on' (cho phép - mặc định) và 'off' (không cho phép), trong đó nếu bạn thiết lập giá trị là 'on' cho phần tử <form> thì điều này có nghĩa là tất cả các phần tử <input> của form sẽ hiển thị các giá trị đã điền trong mỗi lần submit, ngược lại thì tất cả đều không hiển thị; còn nếu thiết lập giá trị là 'on' cho phần tử <input> thì nó sẽ hiển thị các giá trị đã điền tương ứng với phần tử input đó, ngược lại thì không.

Lưu ý: thuộc tính autocomplete áp dụng cho phần từ <form> và phần tử <input> có các kiểu như sau: text, search, url, tel, email, password, date, range và color.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Safari.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form autocomplete="on">
  Tên đăng nhập: <input name="tendangnhap">
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit" value="Gửi">
</form>
</body>
</html>
 

2. novalidate

Thuộc tính novalidate của phần tử <form> được dùng để xác định rằng dữ liệu trong form không cần phải được xác nhận tính hợp lệ trước khi gửi.

Trình duyệt hỗ trợ: Chrome, IE10+, FireFox và Opera.

Ví dụ:

<form novalidate>
  E-mail: <input type="email" name="email"> <input type="submit" value="Gửi">
</form>
 

Các thuộc tính mới của thẻ <input>:

3. autofocus

Thuộc tính autofocus của phần tử <input> được dùng để xác định rằng phần tử <input> sẽ tự động được focus khi trình duyệt tải xong trang web.

Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ thuộc tính autofocus.

Ví dụ:

<form>
  Tên đăng nhập: <input type="text" autofocus> E-mail: <input type="email" name="email"> <input type="submit" value="Gửi">
</form>
 

4. form

Thuộc tính form sẽ cho biết phần tử <input> thuộc về form nào của trang web.

Để sử dụng thuộc tính này, đầu tiên bạn đặt ID cho thẻ <form>, ví dụ <form id="frm">, sau đó từ thuộc tính form của <input> bạn thiết lập mối liên quan tới <form> như sau: <input form="frm"> .

Trình duyệt hỗ trợ: Chrome, FireFox, Opera và Safari.

Ở ví dụ sau đây, thẻ <input> với name="tendangnhap" lại không thuộc <form id="f1"> mặc dù nó nằm trong form này, còn thẻ <input type="email"> lại thuộc về <form id="f1"> mặc dù nó nằm ngoài các form.

<form id="f1">
  Tên đăng nhập: <input type="text" name="tendangnhap" form="f2"><br>
  <input type="submit" value="Submit">
</form>
<form id="f2">
  <input type="submit" value="Gửi">
</form>
E-mail: <input type="email" name="email" form="f1">
 

5. formaction

Thuộc tính formaction dùng để chỉ định trang sẽ nhận dữ liệu của form khi form được gửi. formaction sẽ thay thế thuộc tính action của phần tử <form>.

Lưu ý:  formaction áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ thuộc tính formaction.

Ví dụ:

<form action="http://v1study.com" method="get">
  Họ và tên: <input name="hoten"><br>
  Tên đăng nhập: <input name="tendangnhap"><br>
  <input type="submit" value="Submit1"><br>
  <input type="submit" value="Submit2" formaction="http://demo.v1study.com">
</form>
 

6. formenctype

Như bạn đã biết, thuộc tính enctype của phần tử <form> dùng để xác định loại nội dung được gửi đi khi submit form, thì thuộc tính formenctype của <input> sẽ thay thế thuộc tính enctype này. formenctype chỉ áp dụng cho form có phương thức gửi là "post".

Lưu ý:  formenctype áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt đều hỗ trợ thuộc tính formenctype.

Đoạn mã dưới đây có hai nút submit, trong đó nút "Submit1" sẽ submit loại nội dung được thể hiện ở thuộc tính enctype của phần tử <form> là "application/x-www-form-urlencoded", còn nút "Submit2" sẽ submit loại nội dung được thể hiện ở thuộc tính formenctype của nút submit này là "multipart/form-data".

<form method="post" enctype="application/x-www-form-urlencoded">
  Tên đăng nhập: <input type="text" name="tendangnhap"><br>
  <input type="submit" value="Submit1">
  <input type="submit" value="Submit2" formenctype="multipart/form-data">
</form>

7. formmethod

Thuộc tính formmethod dùng để định nghĩa phương thức gửi dữ liệu của form. Thuộc tính này sẽ thay thế thuộc tính method của form.

Lưu ý:  formmethod áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<form method="post">
  Họ và tên: <input type="text" name="hoten"><br>
  Tên đăng nhập: <input type="text" name="tendangnhap"><br>
  <input type="submit" value="Submit1"><br>
  <input type="submit" value="Submit2" formmethod="get">
</form>
 

8. formnovalidate

Thuộc tính formnovalidate có tác dụng tương tự thuộc tính novalidate của phần tử <form>, khi áp dụng nó cũng mang nghĩa là không cần phải xác nhận tính hợp lệ đối với dữ liệu của form trước khi gửi.

Thuộc tính formnovalidate sẽ thay thế cho thuộc tính novalidate của phần tử <form>.

Lưu ý: Thuộc tính formnovalidate áp dụng cho phần tử <input> có kiểu "submit".

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Ví dụ:

<form>
E-mail: <input type="email" name="email"><br>
<input type="submit" value="Submit1"><br>
<input type="submit" formnovalidate value="Submit2">
</form>
 

9. formtarget

Thuộc tính formtarget tương tự thuộc tính target của phần tử <form>, nó được dùng để chỉ định hình thức hiển thị trang nhận dữ liệu, trong đó trang nhận dữ liệu có thể được hiển thị ngay tại vị trí trang gửi hoặc hiển thị tại một cửa sổ khác hoặc một tab khác.

Thuộc tính formtarget sẽ thay thế thuộc tính target của phần tử <form>.

Lưu ý: Thuộc tính formtarget áp dụng cho phần tử <input> có kiểu là "submit" hoặc "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<form target="_self" action="http://v1study.com">
  Họ và tên: <input type="text" name="hoten"><br>
  Tên đăng nhập: <input type="text" name="tendangnhap"><br>
  <input type="submit" value="Submit1"><br>
  <input type="submit" value="Submit2" formtarget="_blank">
</form>
 

10. max

Thuộc tính max được dùng để xác định giá trị lớn nhất có thể nhập vào phần tử <input> tương ứng.

Lưu ý: Thuộc tính max áp dụng cho phần tử <input> có các kiểu sau: number, range, date, datetime, datetime-local, month, time và week.

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<form>
Nhập vào một ngày (max = '2015-12-31'): <input type="date" max="2015-12-31"><br>
Nhập vào một năm từ (max = 2015): <input type="number" max="2015"><br>
<input type="submit" value="Gửi">
</form>
 

11. min

Thuộc tính min được dùng để xác định giá trị nhỏ nhất có thể nhập vào phần tử <input> tương ứng.

HTML5: input thuộc tính min

Lưu ý: Thuộc tính min áp dụng cho phần tử <input> có các kiểu sau: number, range, date, datetime, datetime-local, month, time và week.

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<form>
Nhập vào một ngày (min = '2015-01-01'): <input type="date" min="2015-01-01"><br>
Nhập vào một năm từ (min = 1999): <input type="number" min="1999"><br>
<input type="submit" value="Gửi">
</form>
 

12. multiple

Thuộc tính multiple cho phép người dùng chọn được nhiều tập tin cùng lúc, người dùng cũng điền được nhiều email cùng lúc.

Lưu ý: Thuộc tính multiple áp dụng cho phần tử <input> với các kiểu "file" và "email".

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<form action="http://dangtranlong.blogspot.com">
  Bạn có thể chọn nhiều file: <input type="file" multiple><br>
  Bạn có thể nhập nhiều email (dấu ',' làm phần phân cách): <input type="email" multiple placeholder="aa@bb.cc,xx@yy.zz"><br>
  <input type="submit" value="Gửi">
</form>
 

13. list

Thuộc tính list sẽ tham chiếu tới phần tử <datalist> có id được chỉ ra tương ứng, khi đó phần tử <input> sẽ hiển thị các gợi ý cho người dùng, trong đó các gợi ý được lấy từ các phần tử con <option> của phần tử <datalist>.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Ví dụ:

<form>
Mời bạn nhập vào một môn học: <input list="keyword">
<datalist id="keyword">
<option value="HTML">html</option>
<option value="CSS">css</option>
<option value="JavaScript">javascript</option>
<option value="HTML5">html5</option>
<option value="CSS3">css3</option>
<option value="jQuery">jquery</option>
<option value="Ajax">ajax</option>
<option value="SQL">sql</option>
<option value="PHP">php</option>
</datalist>
<input type="submit" value="Tìm kiếm">
</form>
 

14. pattern

Thuộc tính pattern được dùng để xây dựng biểu thức quy tắc (mẫu) áp dụng cho phần tử <input> tương ứng mà không cần phải sử dụng code JavaScript.

Lưu ý: Thuộc tính pattern áp dụng cho phần tử <input> có các kiểu sau: text, search, url, tel, email và password.

Gợi ý: Nên dùng thêm thuộc tính 'title' của phần tử <input> để mô tả mẫu nhằm trợ giúp cho người dùng khi nhập liệu.

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<form>
  Mã quốc gia: <input pattern="[A-Za-z]{3}" title="Mã quốc gia gồm 03 ký tự hoa hoặc thường không dấu"> <input type="submit">
</form>
 

15. placeholder

Thuộc tính placeholder của phần tử <input> sẽ đưa ra một gợi ý nhỏ cho người dùng dễ hiểu khi nhập liệu vào phần tử <input>, khi người dùng nhập dữ liệu vào phần tử <input> tương ứng thì gợi ý này sẽ mất đi, khi người dùng xóa giá trị trong phần tử <input> này thì gợi ý lại hiện ra.

placeholder chỉ đưa ra gợi ý, những gì được viết trong nó không phải là giá trị của phần tử <input> .

Lưu ý: Thuộc tính placeholder áp dụng cho phần tử <input> có các kiểu sau: text, search, url, tel, email và password.

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví du:

<form>
  Họ và tên: <input name="hoten" placeholder="Bạn điền họ tên vào đây"><br>
  E-mail: <input type="email" name="email" placeholder="aa@bb.cc"><br>
  Số điện thoại: <input type="number" name="dienthoai" placeholder="0..."><br>
  <input type="submit" value="Gửi">
</form>
 

16. required

Thuộc tính required được dùng để yêu cầu người dùng phải điền dữ liệu vào phần tử <input> tương ứng trước khi gửi dữ liệu.

html5: input với thuộc tính required

required có thể dùng để thay thế cho trường hợp bạn sử dụng JavaScript để check trống.

Lưu ý: Thuộc tính required áp dụng cho phần tử <input> có các kiểu sau: text, search, url, tel, email, password, date, number, checkbox, radio và file.

Trình duyệt hỗ trợ: Chrome, IE, FireFox và Opera.

Ví dụ:

<form action="http://v1study.com">
Họ và tên *: <input type="text" name="hoten" required placeholder="Yêu cầu"><br>
Tên đăng nhập *: <input name="tendangnhap" required placeholder="Yêu cầu"><br>
<input type="submit" value="Gửi">
</form>
 

17. step

Thuộc tính step dùng để tạo khoảng cách giữa các con số có thể nhập vào trong tập dãy số đã được thiết lập cho phần tử <input>.

step thường đi kèm với các thuộc tính min và max.

Lưu ý: Thuộc tính step áp dụng cho phần tử <input> có các kiểu sau: number, range, date, datetime, datetime-local, month, time và week.

Trình duyệt hỗ trợ: ChromeIE, Opera và Safari.

Ví dụ:

<form action="http://dangtranlong.blogspot.com">
Nhập vào một số từ 1 đến 5 (độ chính xác 0.1): <input type="number" min="1" max="5" step="0.1">
<input type="submit" value="Gửi">
</form>
 

18. width & height

Thuộc tính widthheight của phần tử <input> được dùng để xác định độ rộng và độ cao của phần tử <input>.

Lưu ý: width và height chỉ áp dụng cho phần tử <input> có kiểu "image".

Trình duyệt hỗ trợ: Tất cả các trình duyệt.

Ví dụ:

<input type="image" alt="Submit" width="66" height="66">
 

Cách sử dụng CANVAS

<canvas> được dùng để vẽ đồ họa. Khả năng vẽ đồ họa của <canvas> thường thông qua các script (chủ yếu là sử dụng JavaScript).

<canvas> có một số phương thức đồ họa rất mạnh cho phép bạn vẽ được khá nhiều dạng hình học như box, circles, text, line, …, ngoài ra nó còn cho phép vẽ ảnh.

Trình duyệt hỗ trợ

Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ phần tử <canvas>.

Tạo vùng để vẽ

Phần tử <canvas> sẽ tạo ra một vùng có dạng chữ nhật trên trình duyệt, vùng này sẽ là nơi cho phép bạn có thể vẽ các dạng hình học như tôi đã trình bày ở trên. Mặc định <canvas> không tạo đường bao và không chứa nội dung. Một trang HTML có thể có nhiều phần tử <canvas>.

Đoạn mã dưới đây dùng để khởi tạo một canvas.

<canvas id="myCanvas" width="200" height="100"></canvas>

Nếu bạn muốn thiết lập đường bao cho <canvas> bạn có thể dùng thuộc tính border trong style như ví dụ dưới đây:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
  Trình duyệt này không hỗ trợ phần tử canvas.
</canvas>
</body>
</html>
 

Lưu ý: Nếu trình duyệt của bạn không hỗ trợ phần tử <canvas> thì dòng chữ nằm trong phần tử này sẽ hiện ra: "Trình duyệt này không hỗ trợ phần tử canvas."

 

Vẽ chữ nhật trên <canvas>

Ta xét ví dụ dưới đây:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Trình duyệt này không hỗ trợ phần tử canvas.

</canvas>

<span id="sp1"></span>

<script>

var i=0;

function draw1(){

var sp=document.getElementById("sp1");

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

if(i<150)

i++;

else

return;

ctx.fillRect(0,0,i,i/2);

sp.innerHTML=i+'x'+i/2;

setTimeout("draw1();",50);

}

draw1();

</script>

</body>

</html>

Giải thích ví dụ

Trước tiên ta cần phải tìm đến phần tử <canvas> bằng lệnh:

var c=document.getElementById("myCanvas");

Sau đó dùng phương thức getContext() để yêu cầu hỗ trợ vẽ đồ họa 2 chiều ("2d"):

var ctx=c.getContext("2d");

Hai dòng tiếp theo dùng để vẽ một hình chữ nhật có nền đỏ:

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

Thuộc tính fillStyle có thể là một CSS color, một gradient hoặc một pattern. Giá trị mặc định của fillStyle là "#000000" (black - màu đen).

Phương thức fillRect(x,y,rộng,cao) dùng để vẽ hình chữ nhật.

Tọa độ trong <canvas>

<canvas> là một khung hình chữ nhật, trong đó góc trên trái của canvas có tọa độ (0,0), vì vậy phương thức fillRect() đề cập ở trên có các tham số (0,0,150,75) có nghĩa là hình được vẽ bắt đầu từ tọa độ (0,0) và vẽ hình chữ nhật có kích thước là 150x75.

 

Vẽ đường thẳng trên <canvas>

Để vẽ đường thẳng trên <canvas> thì trước tiên ta sử dụng hai phương thức sau đây:

Ø  Phương thức moveTo(x,y) dùng để xác định điểm bắt đầu của đường thẳng

Ø  Phương thức lineTo(x,y) dùng để xác định điểm kết thúc của đường thẳng cần vẽ

Sau đó ta sử dụng phương thức stroke() để vẽ nét cho đường thẳng.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Trình duyệt này không hỗ trợ phần tử canvas.

</canvas>

<script>

var i=0;

function draw(){

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

if(i<200)

i++;

else

return;

ctx.lineTo(i,i/2);

ctx.stroke();

setTimeout("draw();",50);

}

draw();

</script>

</body>

</html>

 

Vẽ đường tròn trên <canvas>

Để vẽ được đường tròn trên <canvas>, ta sử dụng kết hợp hai phương thức sau:

Ø  Trước tiên dùng phương thức arc(x,y,r,start,stop) dùng để vẽ cung tròn

Ø  Rồi sau đó dùng phương thức stroke() dùng để vẽ đường tròn

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Trình duyệt này không hỗ trợ phần tử canvas.

</canvas>

<script>

var i=0;

function draw2(){

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

if(i<2)

i+=0.1;

else

return;

ctx.beginPath();

ctx.arc(95,50,40,0,i*Math.PI);

ctx.stroke();

setTimeout("draw2();",200);

}

draw2();

</script>

</body>

</html>

 

Vẽ hình tròn trên <canvas>

Để vẽ được hình tròn trên <canvas>, ta sử dụng kết hợp hai phương thức sau:

Ø  Trước tiên dùng phương thức arc(x,y,r,start,stop) dùng để vẽ cung tròn

Ø  Rồi sau đó dùng phương thức fill() dùng để vẽ đường tròn.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Trình duyệt này không hỗ trợ phần tử canvas.

</canvas>

<script>

var i=0;

function draw3(){

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

if(i<2)

i+=0.1;

else

return;

ctx.beginPath();

ctx.arc(95,50,40,0,i*Math.PI);

ctx.fill();

setTimeout("draw3();",200);

}

draw3();

</script>

</body>

</html>

 

Vẽ chữ bằng <canvas>

Để vẽ chữ bằng <canvas> bạn nên dùng các thuộc tính và phương thức sau đây:

Ø  Thuộc tính font dùng để định nghĩa phông chữ cho văn bản

Ø  Phương thức fillText(text,x,y) dùng để vẽ chữ với nét chữ là nét đặc

Ø  Phương thức strokeText(text,x,y) cũng dùng để vẽ chữ với nét chữ là nét rỗng.

Ví dụ 1: Dùng phương thức fillText() để vẽ chữ (tạo chữ nét đặc):

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">Trình duyệt này không hỗ trợ phần tử canvas.</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("V1Study",50,60);

</script>

</body>

</html>

 

Ví dụ 2: Dùng phương thức strokeText() để vẽ chữ (tạo chữ nét rỗng):

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">Trình duyệt này không hỗ trợ phần tử canvas.</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.strokeText("V1Study",50,60);

</script>

</body>

</html>

 

Vẽ ảnh trên <canvas>

Để vẽ ảnh trên canvas bạn sử dụng phương thức sau:

Ø  drawImage(image,x,y)

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<p>Image to use:</p>

<img id="scream" src="nguồn_ảnh" alt="The Scream" width="220" height="277">

<p>Canvas:</p>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Trình duyệt này không hỗ trợ phần tử canvas.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("scream");

ctx.drawImage(img,10,10);

</script>

</body>

</html>

<svg>

SVG là gì?

Ø  SVG là ba ký tự viết tắt của cụm từ tiếng Anh: Scalable Vector Graphics

Ø  SVG cho phép định nghĩa đồ họa vector trên các trang Web

Ø  SVG định nghĩa đồ họa theo định dạng XML

Ø  Các hiệu ứng đồ họa bằng SVG sẽ không bị ảnh hưởng về chất lượng ngay cả khi bạn zoom hoặc thay đổi kích thước trình duyệt

Ø  Có thể tạo các hiệu ứng hoạt ảnh trên tất cả các phần tử cũng như thuộc tính của các file SVG

Ø  SVG là một chuẩn của W3C

Ưu điểm của SVG

Ø  Các ảnh SVG có thể được tạo và chỉnh sửa với bất kỳ trình soạn thảo nào

Ø  Các ảnh SVG có thể được tìm kiếm, đánh chỉ mục, được lập trình và nén lại

Ø  Các ảnh SVG hoàn toàn có thể mớ rộng

Ø  Các ảnh SVG có thể được in với chất lượng hình ảnh rất cao ở bất kỳ độ phân giải nào

Ø  Các ảnh SVG có thể được zoom mà không làm thay đối chất lượng ảnh

Trình duyệt hỗ trợ    

Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ SVG.
 

Bạn có thể nhúng SVG trực tiếp vào trang HTML.

Ví dụ:

<!DOCTYPE html>

<html>

<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;">

</svg>

</body>

</html>

Sự khác biệt giữa <SVG> và <Canvas>

SVG được coi là một ngôn ngữ dùng để mô tả đồ họa 2D trong XML. Canvas dùng để vẽ đồ họa 2D bằng JavaScript.

SVG dựa trên XML, có nghĩa là mọi phần tử đều có thể được chấp nhận trong SVG DOM. Bạn có thể đưa thêm các xử lý sự kiện JavaScript vào mỗi phần tử. Trong SVG, mỗi hình dạng được vẽ sẽ được nhớ lại và được coi là một đối tượng. Vì vậy nếu có phần nào đó của một đối tượng này thay đổi thì trình duyệt sẽ tự động tạo lại hình dạng của phần đó mà không ảnh hưởng đến những phần khác của đối tượng.

Còn đối với Canvas thì hình ảnh được vẽ trên từng điểm ảnh, và sau khi hình ảnh được vẽ xong thì trình duyệt sẽ không nhớ lại nó. Vì vậy nếu vị trí của hình ảnh thay đổi thì toàn bộ Canvas cũng như bản thân nó phải được vẽ lại.

So sánh Canvas và SVG

Bảng dưới đây sẽ cho thấy những điểm khác biệt giữa <Canvas> và <SVG>:

Canvas

SVG

Phụ thuộc độ phân giải của màn hình

Không phụ thuộc độ phân giải của màn hình

Không hỗ trợ xử lý sự kiện

Hỗ trợ xử lý sự kiện

Việc vẽ văn bản là khó khăn

Rất thích hợp cho các ứng dụng có diện tích dựng hình lớn (Google Maps chẳng hạn)

Có thể lưu trữ ảnh với phần mở rộng là .png hoặc .jpg

Thao tác vẽ sẽ bị chậm bởi việc sử dụng DOM

Rất thích hợp cho việc viết các ứng dụng game

Không phù hợp cho việc viết các ứng dụng game

Gradient với <canvas>

Gradient có thể được dùng để tô màu cho các dạng hình học như hình chữ nhật, hình tròn, đường thẳng, văn bản, …

Để sử dụng gradient trong <canvas> bạn có thể thực hiện theo các bước sau đây:

Bước 1: Chọn loại gradient. Có hai loại gradient khác nhau dùng trong tô màu được thể hiện qua hai phương thức sau đây:

Ø  Phương thức createLinearGradient(x,y,x1,y1) dùng để tạo gradient dạng thẳng

Ø  Phương thức createRadialGradient(x,y,r,x1,y1,r1) dùng để tạo gradient dạng cong.

Bước 2: Xác định các điểm dừng màu sắc. Để xác định các điểm dừng màu sắc của gradient ta cần sử dụng phương thức addColorStop(). Các điểm dừng màu sắc của gradient nằm trong đoạn [0-1].

Bước 3: Sử dụng thuộc tính fillStyle hoặc strokeStyle để yêu cầu gradient tương ứng, rồi sau đó vẽ các hình dạng mong muốn.

Ví dụ 1: Sử dụng phương thức createLinearGradient() để vẽ gradient dạng thẳng.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Trình duyệt này không hỗ trợ phần tử canvas.

</canvas>

<script>

var i=0;

function draw4(){

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Tạo gradient

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Vẽ hình

if(i<150)

i++;

else

return;

ctx.fillStyle=grd;

ctx.fillRect(25,13,i,i/2);

setTimeout("draw4();",30);

}

draw4();

</script>

</body>

</html>

 

Ví dụ 2: Sử dụng phương thức createRadialGradient() để vẽ gradient dạng tròn/elip.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Trình duyệt này không hỗ trợ phần tử canvas.

</canvas>

<script>

var i=0;

function draw5(){

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Tạo gradient

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Vẽ hình

if(i<150)

i++;

else

return;

ctx.fillStyle=grd;

ctx.fillRect(25,13,i,i/2);

setTimeout("draw5();",30);

}

draw5();

</script>

</body>

</html>

 

Cách sử dụng SVG

SVG là gì?

Ø  SVG là ba ký tự viết tắt của cụm từ tiếng Anh: Scalable Vector Graphics

Ø  SVG cho phép định nghĩa đồ họa vector trên các trang Web

Ø  SVG định nghĩa đồ họa theo định dạng XML

Ø  Các hiệu ứng đồ họa bằng SVG sẽ không bị ảnh hưởng về chất lượng ngay cả khi bạn zoom hoặc thay đổi kích thước trình duyệt

Ø  Có thể tạo các hiệu ứng hoạt ảnh trên tất cả các phần tử cũng như thuộc tính của các file SVG

Ø  SVG là một chuẩn của W3C

Ưu điểm của SVG

Ø  Các ảnh SVG có thể được tạo và chỉnh sửa với bất kỳ trình soạn thảo nào

Ø  Các ảnh SVG có thể được tìm kiếm, đánh chỉ mục, được lập trình và nén lại

Ø  Các ảnh SVG hoàn toàn có thể mớ rộng

Ø  Các ảnh SVG có thể được in với chất lượng hình ảnh rất cao ở bất kỳ độ phân giải nào

Ø  Các ảnh SVG có thể được zoom mà không làm thay đối chất lượng ảnh

Trình duyệt hỗ trợ    

Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ SVG.
 

Bạn có thể nhúng SVG trực tiếp vào trang HTML.

Ví dụ:

<!DOCTYPE html>

<html>

<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;">

</svg>

</body>

</html>

Sự khác biệt giữa <SVG> và <Canvas>

SVG được coi là một ngôn ngữ dùng để mô tả đồ họa 2D trong XML. Canvas dùng để vẽ đồ họa 2D bằng JavaScript.

SVG dựa trên XML, có nghĩa là mọi phần tử đều có thể được chấp nhận trong SVG DOM. Bạn có thể đưa thêm các xử lý sự kiện JavaScript vào mỗi phần tử. Trong SVG, mỗi hình dạng được vẽ sẽ được nhớ lại và được coi là một đối tượng. Vì vậy nếu có phần nào đó của một đối tượng này thay đổi thì trình duyệt sẽ tự động tạo lại hình dạng của phần đó mà không ảnh hưởng đến những phần khác của đối tượng.

Còn đối với Canvas thì hình ảnh được vẽ trên từng điểm ảnh, và sau khi hình ảnh được vẽ xong thì trình duyệt sẽ không nhớ lại nó. Vì vậy nếu vị trí của hình ảnh thay đổi thì toàn bộ Canvas cũng như bản thân nó phải được vẽ lại.

So sánh Canvas và SVG

Bảng dưới đây sẽ cho thấy những điểm khác biệt giữa <Canvas> và <SVG>:

Canvas

SVG

Phụ thuộc độ phân giải của màn hình

Không phụ thuộc độ phân giải của màn hình

Không hỗ trợ xử lý sự kiện

Hỗ trợ xử lý sự kiện

Việc vẽ văn bản là khó khăn

Rất thích hợp cho các ứng dụng có diện tích dựng hình lớn (Google Maps chẳng hạn)

Có thể lưu trữ ảnh với phần mở rộng là .png hoặc .jpg

Thao tác vẽ sẽ bị chậm bởi việc sử dụng DOM

Rất thích hợp cho việc viết các ứng dụng game

Không phù hợp cho việc viết các ứng dụng game

 

<video>

Hiện nay có nhiều website sử dụng video nhưng không theo một chuẩn nào. HTML5 cung cấp một chuẩn video hoàn toàn mới thông qua phần tử <video>.

Trình duyệt hỗ trợ

Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ phần tử <video>.

Cách sử dụng phần tử <video>

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<video width="320" height="240" controls autoplay loop>
<source src="" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
  Trình duyệt này không hỗ trợ phần tử video
</video>
</body>
</html>

Giải thích ví dụ:

Thuộc tính 'controls' dùng để hiển thị bộ điều khiển video, bao gồm các nút play, pause, volume và fullscreen.

Thuộc tính 'width' và 'height' dùng để thiết lập độ rộng và độ cao cho video.

Thuộc tính 'autoplay' sẽ cho phép tự động thực thi video.

Thuộc tính 'loop' sẽ cho phép lặp lại việc thực thi video mỗi khi video được thực thi xong.

Nếu trình duyệt không hỗ trợ phần tử <video> thì dòng chữ "Trình duyệt này không hỗ trợ phần tử video" sẽ hiện ra.

Trong phần tử <video> cho phép sử dụng nhiều phần tử <source>. Các phần tử <source> có thể liên kết đến các file video khác nhau và trình duyệt sẽ sử dụng định dạng video đầu tiên hợp lệ.

Các định dạng video và trình duyệt hỗ trợ

Hiện tại phần tử <video> hỗ trợ ba định dạng video là MP4, WebM và Ogg. Dưới đây là sự hỗ trợ của các trình duyệt đối với các định dạng này:

Trình duyệt

MP4

WebM

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

NO
Cập nhật: Firefox từ phiên bản 21 trở nên chạy trên các hệ điều hành Windows 7, Windows 8, Windows Vista và Android đều hỗ trợ MP4.

YES

YES

Safari

YES

NO

NO

Opera

NO

YES

YES

  • MP4 - Các file MPEG 4 có định dạng video là H264 và định dạng audio là AAC
  • WebM - Các file WebM có định dạng video là VP8 và định dạng audio là Vorbis
  • Ogg - Các file Ogg có định dạng video là Theora và định dạng audio là Vorbis

Các kiểu MIME để định dạng cho Video

Định dạng

Kiểu MIME

MP4

video/mp4

WebM

video/webm

Ogg

video/ogg

Các thuộc tính và phương thức DOM

HTML5 có khá nhiều thuộc tính, phương thức và sự kiện của DOM để cho phép thao tác trên các phần tử <video>.

Ví dụ dưới đây minh họa cách dùng phần tử <video> kết hợp với các thuộc tính và phương thức để điểu khiển video.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="text-align:center">
  <button onclick="playPause()"> Play/Pause </button>
  <button onclick="makeBig()"> Big </button>
  <button onclick="makeSmall()"> Small </button>
  <button onclick="makeNormal()"> Normal </button>
  <br>
  <video id="video1" width="420">
    <source src="Link_video.mp4" type="video/mp4">
    <source src="Link_video.ogg" type="video/ogg">
    Trình duyệt này không hỗ trợ phần tử video.
  </video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause(){
if(myVideo.paused) //Nếu video đang tạm dừng
  myVideo.play();  //thì tiếp tục cho video chạy
else
  myVideo.pause(); //ngược lại thì cho video tạm dừng
}
function makeBig(){
myVideo.width=560; //Đặt lại độ rộng cho video lớn hơn độ rộng cũ
}
function makeSmall(){
myVideo.width=320; //Đặt lại độ rộng cho video nhỏ hơn độ rộng cũ
}
function makeNormal(){
myVideo.width=420; //Đặt lại độ rộng cho video bằng độ rộng cũ
}
</script>
</body>
</html>

Xem thêm:

<wbr>

Thẻ <wbr> (Word Break Opportunity) dùng để tạo một điểm ngắt dòng "mềm" trong đoạn văn bản được bao ngoài bằng thẻ <nobr>.

Giải thích:

Khi bạn đặt một đoạn văn vào thẻ <nobr> thì đoạn văn đó sẽ không xuống dòng dù kích thước đoạn văn đó có lớn đến đâu.

Khi bạn đặt thẻ <br> vào một vị trí nào đó trong đoạn văn bản trên thì từ phần đoạn văn phía sau nơi đặt thẻ <br> trở đi sẽ được đặt ở dòng phía dưới mà không quan tâm đến kích thước đoạn văn.

Nhưng nếu bạn đặt thẻ <wbr> vào một vị trí nào đó trong đoạn văn bản trên thì chỉ khi kích thước đoạn văn bản lớn hơn độ rộng của phần tử chứa nó thì phần đoạn văn bản nằm sau thẻ <wbr> mới xuống dòng.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<nobr>This line of text will not break, no matter how narrow the window gets. This one, however,<wbr> will break after the word "however," if the window gets small enough.</nobr>

</body>

</html>



 

Các sự kiện của đối tượng wbr:

Sự kiện Mô tả
abort Được kích hoạt khi người dùng hủy bỏ việc tải xuống.
afterupdate Được kích hoạt trên một đối tượng databound sau khi cập nhật thành công các dữ liệu liên quan trong đối tượng nguồn dữ liệu.
beforecopy Được kích hoạt trên các đối tượng nguồn trước khi lựa chọn được sao chép vào clipboard của hệ thống.
beforeupdate Được kích hoạt trên một đối tượng databound trước khi cập nhật dữ liệu liên quan trong đối tượng nguồn dữ liệu.
cellchange Được kích hoạt khi có sự thay đổi dữ liệu từ nhà cung cấp dữ liệu.
change Được kích hoạt khi có sự thay đổi nội dung của đối tượng hoặc thay đổi lựa chọn.
dataavailable Đươc kích hoạt theo định kỳ mỗi khi dữ liệu đến từ các đối tượng nguồn dữ liệu không đồng bộ khi truyền dữ liệu.
datasetchanged Được kích hoạt khi tập dữ liệu đã được đối tượng nguồn dữ liệu tiếp cận có sự thay đổi.
error Được kích hoạt khi xảy ra lỗi nạp đối tượng.
errorupdate Được kích hoạt trên đối tượng databound khi xảy ra lỗi cập nhật dữ liệu liên quan đến đối tượng nguồn dữ liệu.
filterchange Được kích hoạt khi một bộ lọc ảnh thay đổi trạng thái hoặc hoàn tất quá trình chuyển đổi.
input Được kích hoạt mỗi khi nội dung văn bản của phần tử thay đổi thông qua giao diện người dùng.
layoutcomplete Được kích hoạt khi quá trình in ấn hoặc việc xem bố cục trước khi in kết thúc việc điền nội dung từ tài liệu nguồn vào đối tượng LayoutRect.
load Được kích hoạt ngay khi kết thúc việc tải đối tượng.
ondatasetcomplete Được kích hoạt để chỉ ra rằng tất cả dữ liệu đều có sẵn từ đối tượng nguồn dữ liệu.
onselect Được kích hoạt khi lựa chọn hiện thời thay đổi.
reset Được kích thoạt khi người dùng reset một form.
resize Được kích hoạt khi kích thước của một đối tượng nào đó thay đổi.
rowenter Được kích hoạt để chỉ ra rằng hàng hiện tại đã có sự thay đổi từ nguồn dữ liệu và đối tượng có những giá trị dữ liệu mới.
rowexit Được kích hoạt ngay trước khi bộ kiểm soát nguồn dữ liệu thay đổi hàng hiện tại của đối tượng.
rowdelete Được kích hoạt khi các hàng dữ liệu bị xoá từ tập bản ghi.
rowinserted Được kích hoạt khi chèn các hàng dữ liệu mới vào tập bản ghi hiện thời.

Các phương thức của đối tượng wbr:

Phương thức Mô tả
addBehavior Thêm hành vi vào phần tử.
applyElement Chuyển một phần tử trở thành con hoặc cha của phần tử khác.
clearAttributes Xoá tất cả các thuộc tính và giá trị khỏi đối tượng.
componentFromPoint Returns the component located at the specified coordinates via certain events.
doScroll Mô phỏng việc nhấp chuột vào một thành phần thanh cuộn ngang hoặc dọc. Lưu ý rằng phương thức này không còn được hỗ trợ nữa, thay vào đó từ phiên bản IE11 bạn có thể sử dụng các phương thức thay thế là scrollLeft và scrollTop.
fireEvent Kích hoạt một sự kiện cụ thể trên đối tượng.
getAttribute Truy xuất giá trị của một thuộc tính.
getAttributeNode Lấy một đối tượng thuộc tính được tham chiếu bởi thuộc tính attribute.
getAttributeNodeNS Nhận một đối tượng thuộc tính phù hợp với các namespace và tên cụ thể.
getAttributeNS Nhận giá trị của một thuộc tính cụ thể trong namespace cụ thể.
getElementsByClassName Nhận một tập hợp các đối tượng dựa trên giá trị của thuộc tính class.
getElementsByTagNameNS Nhận một tập hợp các đối tượng dựa trên phần tử cụ thể có trên trong namespace cụ thể.
hasAttribute Xác định sự tồn tại của một thuộc tính có tên cụ thể.
hasAttributeNS Xác định sự tồn tại của một thuộc tính có trong namespace cụ thể.
hasAttributes Xác định sự tồn tại của một hoặc nhiều thuộc tính của đối tượng.
msMatchesSelector Xác định xem một đối tượng có phù hợp với một bộ chọn cụ thể hay không.
normalize Kết hợp các đối tượng DOM lân cận để tạo ra mô hình đối tượng tài liệu chuẩn hoá.
removeAttribute Xoá thuộc tính khỏi đối tượng.
removeAttributeNode Xoá đối tượng thuộc tính khỏi đối tượng.
removeAttributeNS Xoá thuộc tính cụ thể khỏi đối tượng.
removeBehavior Tách một hành vi khỏi phần tử.
replaceAdjacentText Thay đoạn văn bản lân cận bằng phần tử.
scrollIntoView Gây ra cho đối tượng cuộn thanh cuộn theo hướng nhìn, đặt nó lên trên cùng hoặc dưới cùng của cửa sổ.
setActive Thiết lập đối tượng ở trạng thái hoạt động mà không đặt trọng tâm vào đối tượng.
setAttribute Thiết lập giá trị cho một thuộc tính cụ thể.
setAttributeNode Thiết lập một nút đối tượng thuộc tính như là một phần của đối tượng.
setAttributeNodeNS Thiết lập đối tượng thuộc tính như là một phần của đối tượng.
setAttributeNS Thiếp lập giá trị của một thuộc tính cụ thể trong namespace cụ thể.
setCapture Chuyển con trỏ chuột tới đối tượng thuộc tài liệu hiện thời.

 

Định vị địa lý (Geolocation)

ĐỊNH VỊ

HTML5 cung cấp kỹ thuật Geolocation cho phép bạn xác định được vị trí của người dùng.

Xác định vị trí người dùng

HTML5 Geolocation API được dùng để lấy vị trí địa lý của người dùng. Tuy nhiên thao tác này có thể xâm phạm đến sự riêng tư của người sử dụng, cho nên mặc định vị trí là không thể được định vị trừ khi được người dùng cho phép.

Trình duyệt hỗ trợ

Internet Explorer 9+, Firefox, Chrome, Safari và Opera đều hỗ trợ khả năng định vị của HTML5.

Lưu ý: Khả năng định vị sẽ chính xác hơn khi áp dụng Geolocation cho các thiết bị có GPS (chẳng hạn như điện thoại iPhone).

Cách thức định vị trong HTML5

Phương thức getCurrentPosition() được dùng để lấy vị trí hiện tại của người dùng.

Dưới đây là một ví dụ đơn giản về việc sử dụng Geolocation để xác định kinh độ và vĩ độ của vị trí người dùng:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">Vui lòng click vào nút lệnh để lấy tọa độ (bạn phải cho phép trình duyệt lấy tọa độ):</p>
<button onclick="getLocation()">Lấy tọa độ</button>
<script>
var x=document.getElementById("demo");
function getLocation() {
  if(navigator.geolocation)
    navigator.geolocation.getCurrentPosition(showPosition);
  else
    x.innerHTML="Trình duyệt này không hỗ trợ Geolocation!";
}
function showPosition(position) {
  x.innerHTML="Vĩ độ: " + position.coords.latitude + "<br>Kinh độ: " + position.coords.longitude;  
}
</script>
</body>
</html>
 

Giải thích ví dụ:

- Kiểm tra xem Geolocation có được hỗ trợ không.

- Nếu được hỗ trợ thì thực hiện phương thức getCurrentPosition(). Nếu không thì đưa ra thông báo để người dùng biết.

- Nếu phương thức getCurrentPosition() được thực hiện thành công thì nó sẽ trả về một đối tượng chứa tọa độ cho hàm là tham số của nó (trong trường hợp này hàm nhận lại đối tượng tọa độ chính là hàm showPosition()).

- Hàm showPosition() sẽ hiển thị kinh độ (longitude) và vĩ độ (latitude) của vị trí người dùng.

Trên đây là ví dụ rất cơ bản về định vị, trong đó không có phần xử lý lỗi.

Xử lý lỗi và xử lý tình huống bị người dùng từ chối

Tham số thứ hai của phương thức getCurrentPosition() được dùng để xử lý các lỗi. Nó sẽ chỉ định một hàm để chạy nếu có lỗi xảy ra để lấy được vị trí của người dùng. Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">Click vào nút lệnh để lấy tọa độ của bạn:</p>
<button onclick="getLocation()">Lấy tọa độ</button>
<script>
var x=document.getElementById("demo");
function getLocation() {
  if(navigator.geolocation)
    navigator.geolocation.getCurrentPosition(showPosition,showError);
  else
    x.innerHTML="Trình duyệt này không hỗ trợ Geolocation.";
}
function showPosition(position) {
  x.innerHTML="Vĩ độ: " + position.coords.latitude + "<br>Kinh độ: " + position.coords.longitude;
}
function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML="Người dùng đã từ chối yêu cầu định vị.";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Không lấy được thông tin về vị trí.";
      break;
    case error.TIMEOUT:
      x.innerHTML="Hết thời gian yêu cầu lấy thông tin về vị trí người dùng.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Không rõ lỗi.";
      break;
  }
}
</script>
</body>
</html>
 

Giải thích các mã lỗi:

- PERMISSION_DENIED – Người dùng không cho phép định vị

- POSITION_UNAVAILABLE – Không xác định được vị trí

- TIMEOUT – Hết thời gian định vị

Hiển thị vị trí trong bản đồ tĩnh

Để hiển thị vị trí trong một bản đồ động, bạn cần truy cập vào một dịch vụ bản đồ có thể sử dụng vĩ độ và kinh độ, chẳng hạn như Google Maps. Sau đây là ví dụ cho phép bạn lấy được vị trí của bạn trong một bản đồ tĩnh.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">Hãy click vào nút lệnh để lấy vị trị của bạn:</p>
<button onclick="getLocation()">Lấy tọa độ</button>
<div id="mapholder"></div>
<div id="point" style="background:red; width:6px; height:6px; position:absolute; border-radius:3px; display:none;"></div>
</div>
<script>
var i=false;
var x=document.getElementById("demo");
function getLocation() {
  if(navigator.geolocation)
    navigator.geolocation.getCurrentPosition(showPosition,showError);
  else
    x.innerHTML="Trình duyệt này không hỗ trợ Geolocation.";
}
function showPosition(position) {
  fblink();
  var latlon=position.coords.latitude+","+position.coords.longitude;
  var rong=400, cao=300;
  var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="  +latlon+"&zoom=14&size="+rong+"x"+cao+"&sensor=false";
  var spoint=document.getElementById("showpoint");
  var point=document.getElementById("point");
  var map=document.getElementById("mapholder");
  map.innerHTML = "<img border='0' src='"+img_url+"'>";
}
</script>
</body>
</html>
 

Ví dụ trên sử dụng các dữ liệu được trả về là vĩ độ và kinh độ để hiển thị vị trí trong bản đồ Google (sử dụng hình ảnh tĩnh). Xin nhấn mạnh lại là ví dụ trên sẽ định chính xác vị trí của bạn nếu bạn dùng thiết bị có cài đặt GPS hoặc thiết bị đó có tính năng định vị tốt.

Giá trị trả về của phương thức getCurrentPosition()

Phương thức getCurrentPosition() sẽ trả về một đối tượng nếu nó thực thi thành công, trong đó các thuộc tính vĩ độ, kinh độ và độ chính xác của vị trí luôn luôn được phương thức trả về. Các thuộc tính khác dưới đây nếu cho phép thì chúng cũng được trả về.

Thuộc tính Mô tả
coords.latitude Thuộc tính về vĩ độ (là một số thập phân)
coords.longitude Thuộc tính về kinh độ (là một số thập phân)
coords.accuracy Thuộc tính về độ chính xác của vị trí
coords.altitude Thuộc tính về độ cao (đơn vị là mét) so với mực nước biển trung bình
coords.altitudeAccuracy Thuộc tính về độ chính xác độ cao của vị trí
coords.heading Thuộc tính về tọa độ tính theo chiều kim đồng hồ (gốc là lúc 0 giờ)
coords.speed Thuộc tính về tốc độ (đơn vị là m/s)
timestamp Thuộc tính để lấy ngày/thời gian của phản hồi

Một số phương thức khác của đối tượng Geolocation

watchPosition(): Trả về vị trí hiện tại của người dùng cũng như vị trí tương ứng khi người dùng di chuyển (chẳng hạn như GPS trong xe hơi).

clearWatch(): Dừng thực thi phương thức watchPosition().

Sau đây là ví dụ về phương thức watchPosition(), nếu bạn muốn kiểm tra thực tế đoạn code này thì bạn cần dùng đến một thiết bị GPS có độ chính xác tốt và nó đang di chuyển (chẳng hạn như điện thoại iPhone đặt trong xe đang di chuyển).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">Click vào nút lệnh để lấy tọa độ của bạn:</p>
<button onclick="getLocation()">Lấy tọa độ</button>
<script>
var x=document.getElementById("demo");
function getLocation() {
  if(navigator.geolocation)
    navigator.geolocation.watchPosition(showPosition);
  else
  x.innerHTML="Trình duyệt này không hỗ trợ khả năng định vị của HTML5.";
}
function showPosition(position) {
  x.innerHTML = "Vĩ độ: " + position.coords.latitude +  "<br>Kinh độ: " + position.coords.longitude;
}
</script>
</body>
</html>
 

KÉO và THẢ

Kéo và thả là một phần của chuẩn HTML5. HTML5 hỗ trợ những thao tác này ở tất các phần tử.

html5: kéo và thả

Trình duyệt hỗ trợ: Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ những thao tác kéo và thả của HTML5.

Lưu ý: Trình duyệt Safari 5.1.2 không hỗ trợ các thao tác kéo và thả.

Ví dụ về kéo và thả trong HTML5:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1{width:350px; height:70px; padding:3px; border:green thin solid; box-sizing:border-box;}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}
function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
  ev.preventDefault();
  var data=ev.dataTransfer.getData( "Text");
  ev.target.appendChild( document.getElementById(data) );
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<br>
<img id="drag1" src="nguồn_ảnh" draggable="true" ondragstart="drag(event)" width="330" height="50" title="Bạn thử kéo ảnh vào ô bên trên nhé!">
</body>
</html>
 

Ví dụ trên có thế áp dụng cho bất kỳ sự kiện kéo thả nào.

Tạo một phần tử có thể kéo được:

Ta chỉ cần sử dụng thuộc tính draggable và đặt giá trị true cho nó, ví dụ:

<img draggable="true">

Sử dụng sự kiện ondragstart và phương thức setData() để kéo:

Khi bạn nhấn chọn đối tượng và kéo thì sự kiện ondragstart sẽ được kích hoạt, ta thiết lập một lời gọi đến hàm xử lý thao tác kéo (ví dụ dưới đây là hàm drag()).

Trong hàm xử lý thao tác kéo ta sử dụng phương thức dataTransfer.setData() để thiết lập kiểu dữ liệu và giá trị của dữ liệu được kéo như sau:

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

,trong đó kiểu đối tượng ở đây là "Text" và giá trị của đối tượng là  id của phần tử được kéo (phần tử được kéo ở đây là ảnh có id="drag1").

Sử dụng sự kiện ondragover để thả:

Khi bạn thả đối tượng ra thì sự kiện ondragover sẽ được kích hoạt, sự kiện này sẽ xác định vị trí của đối tượng sau khi nó được thả.

Theo mặc định thì ta không thể thả một đối tượng vào trong một đối tượng khác. Tuy nhiên ta có thể khắc phục được điều này bằng cách sử dụng phương thức event.preventDefault().

Sự kiện ondrop:

Sự kiện này được kích hoạt khi bạn thả đối tượng. Ta sẽ cho sự kiện ondrop gọi đến phương thức drop() có mã lệnh như sau:

function drop(ev) {
  ev.preventDefault();
  var data=ev.dataTransfer.getData( "Text");
  ev.target.appendChild( document.getElementById(data));
}

Giải thích mã lệnh:

- Phương thức preventDefault() dùng để yêu cầu trình duyệt cho phép thả một đối tượng vào một đối tượng khác.

- Phương thức dataTransfer.getData("Text") được dùng để lấy kiểu đối tượng được kéo. Phương thức này sẽ lấy kiểu đối tượng được xác định từ phương thức setData().

- Đối tượng được kéo tương đương với phần tử có ID được chuyền đi (trong trường hợp này ID="drag1" là của phần tử <img>).

- Đưa phần tử được kéo vào phần tử chứa.

Kéo và thả (Drag and Drop)

Kéo và thả là một phần của chuẩn HTML5. HTML5 hỗ trợ những thao tác này ở tất các phần tử.

Trình duyệt hỗ trợ

Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ những thao tác kéo và thả của HTML5.

Lưu ý: Safari 5.1.2 không hỗ trợ các thao tác kéo và thả.

Ví dụ về kéo và thả trong HTML5

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<style>

#div1{width:350px; height:70px; padding:3px; border:green thin solid; box-sizing:border-box;}

</style>

<script>

function allowDrop(ev){

ev.preventDefault();

}

function drag(ev){

ev.dataTransfer.setData("Text", ev.target.id);

}

function drop(ev){

ev.preventDefault();

var data=ev.dataTransfer.getData( "Text");

ev.target.appendChild( document.getElementById(data));

}

</script>

</head>

<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>

<br>

<img id="drag1" src="nguồn_ảnh" draggable="true" ondragstart="drag(event)" width="330" height="50" title="Bạn thử kéo ảnh vào ô bên trên nhé!">

</body>

</html>

Ví dụ trên có thế áp dụng cho bất kỳ sự kiện kéo thả nào.

Tạo một phần tử có thể kéo được

Ta chỉ cần sử dụng thuộc tính draggable và đặt giá trị true cho nó, ví dụ:

<img draggable="true">

Sử dụng sự kiện ondragstart và phương thức setData() để kéo

Khi bạn nhấn chọn đối tượng và kéo thì sự kiện ondragstart sẽ được kích hoạt, ta thiết lập một lời gọi đến hàm xử lý thao tác kéo (ví dụ dưới đây là hàm drag()).

Trong hàm xử lý thao tác kéo ta sử dụng phương thức dataTransfer.setData() để thiết lập kiểu dữ liệu và giá trị của dữ liệu được kéo như sau:

function drag(ev){

ev.dataTransfer.setData("Text", ev.target.id);

}

,trong đó kiểu đối tượng ở đây là "Text" và giá trị của đối tượng là  id của phần tử được kéo (phần tử được kéo ở đây là ảnh có id="drag1").

Sử dụng sự kiện ondragover để thả

Khi bạn thả đối tượng ra thì sự kiện ondragover sẽ được kích hoạt, sự kiện này sẽ xác định vị trí của đối tượng sau khi nó được thả.

Theo mặc định thì ta không thể thả một đối tượng vào trong một đối tượng khác. Tuy nhiên ta có thể khắc phục được điều này bằng cách sử dụng phương thức event.preventDefault().

Sự kiện ondrop

Sự kiện này được kích hoạt khi bạn thả đối tượng. Ta sẽ cho sự kiện ondrop gọi đến phương thức drop() có mã lệnh như sau:

function drop(ev){

ev.preventDefault();

var data=ev.dataTransfer.getData( "Text");

ev.target.appendChild( document.getElementById(data));

}

Giải thích mã lệnh:

Ø  Phương thức preventDefault() dùng để yêu cầu trình duyệt cho phép thả một đối tượng vào một đối tượng khác

Ø  Phương thức dataTransfer.getData("Text") được dùng để lấy kiểu đối tượng được kéo. Phương thức này sẽ lấy kiểu đối tượng được xác định từ phương thức setData()

Ø  Đối tượng được kéo tương đương với phần tử có ID được chuyền đi (trong trường hợp này ID="drag1" là của phần tử <img>)

Ø  Đưa phần tử được kéo vào phần tử chứa.

Web Storage

Giới thiệu

Ta hãy xét một tài khoản email, chẳng hạn như Gmail. Để đăng nhập vào tài khoản thư điện tử của bạn trong Gmail, thì bạn cần nhập địa chỉ email, sau đó là mật khẩu của bạn.

Sau khi đăng nhập được vào tài khoản, có thể ở góc trên bên phải màn hình của bạn sẽ hiện ra một hộp thoại như hình dưới đây để gợi ý lưu lại mật khẩu (password).

html5: lưu lại password

Như được thể hiện ở hình trên, nếu bạn nhấn nút Save password thì mật khẩu của gmail của bạn sẽ được lưu lại trong máy tính (thông qua cookie).

Theo truyền thống, trong vài thập kỷ qua, các ứng dụng web đã sử dụng cookie để lưu trữ một lượng nhỏ thông tin trên máy tính của người dùng. Cookie là một tập tin lưu trữ thông tin liên quan đến người dùng và việc lưu trữ có thể là tạm thời hoặc vĩnh viễn. Như vậy, trong trường hợp này, cookie có thể được tạo ra cho các chi tiết đăng nhập mà có thể được lưu trong một thời gian nhất định trên máy tính của người dùng.

Tuy nhiên, cookie có những hạn chế như sau:

- Cookie làm chậm hiệu suất của ứng dụng web, bởi chúng được đi kèm với mọi yêu cầu HTTP.

- Cookie không thể được coi là phương tiện an toàn để truyền dữ liệu nhạy cảm.

- Cookie không thể lưu trữ lượng thông tin lớn, vì chúng có một giới hạn kích thước chỉ có 4 KB.

Để khắc phục những hạn chế và đưa ra giải pháp để lưu trữ dữ liệu phía máy khách, W3C đã thiết kế một đặc điểm kỹ thuật có tên là API Lưu trữ web (Web Storage).

Lưu trữ web cung cấp chức năng sử dụng dữ liệu mà có thể được lưu trữ ở phía máy khách cho một phiên hoặc hơn.

Lưu trữ web trong HTML5

Lưu trữ web là một đặc điểm kỹ thuật W3C. Nó cung cấp chức năng để lưu trữ dữ liệu ở phía máy khách (là máy tính của người dùng). Dữ liệu này có thể phục vụ cho cả nhu cầu tạm thời cũng như vĩnh viễn. Một số trình duyệt còn tham chiếu đến nó như là 'Lưu trữ DOM'. Lợi thế của việc sử dụng Lưu trữ web là nó cung cấp nhiều kiểm soát hơn so với các cookie truyền thống, và rất dễ làm việc với nó.

Lưu trữ web lúc đầu là một phần của đặc điểm kỹ thuật HTML5, nhưng bây giờ nó hiện diện trong một đặc điểm kỹ thuật riêng biệt. Nó cho phép lưu trữ tối đa 5 MB thông tin cho mỗi tên miền (domain).

Các ứng dụng web HTML5 sử dụng Lưu trữ web để thực hiện lưu trữ liên tục phía máy khách.

Lưu trữ web so với cookie

Có một số khác biệt quan trọng giữa cookie và Lưu trữ web như sau:

- Cookie có nghĩa là để được đọc ở phía máy chủ, trong khi Lưu trữ web chỉ có sẵn ở phía máy khách. Máy chủ không thể đọc hoặc ghi trực tiếp vào Lưu trữ web.

- Cookie được gửi cùng với mỗi yêu cầu HTTP đến máy chủ, trong khi dữ liệu Lưu trữ web không được chuyển sang máy chủ.

- Cookie có thể dẫn đến tiêu tốn băng thông và do đó dẫn đến chi phí cao, bởi chúng được gửi đi với mỗi yêu cầu HTTP. Lưu trữ web được lưu trữ trên ổ cứng của người dùng, do đó không tốn kém gì khi sử dụng.

- Như đã đề cập ở trên, với các tập tin cookie, dữ liệu thông tin có thể được lưu trữ là 4 KB, trong khi với Lưu trữ web, một số lượng lớn các dữ liệu có thể được lưu trữ lên đến 5 MB.

Lưu trữ web cụ thể theo trình duyệt

Lưu trữ web là phụ thuộc vào trình duyệt. Nếu người dùng truy cập vào một trang web bằng trình duyệt Google Chrome chẳng hạn, thì bất kỳ dữ liệu nào cũng sẽ được lưu trữ vào Lưu trữ web của Google Chrome. Tương tự như vậy, nếu người dùng vào lại cũng trang web đó trong Firefox, thì dữ liệu đã lưu trước đó qua Google Chrome sẽ không dùng được. Vị trí nơi dữ liệu Lưu trữ web được lưu trữ phụ thuộc vào trình duyệt. Lưu trữ của mỗi trình duyệt là riêng biệt và độc lập, ngay cả khi nó có mặt trên cùng một máy tính.

Lưu trữ web HTML5 được thực hiện riêng trong hầu hết các trình duyệt web, và vì vậy người ta có thể sử dụng nó ngay cả khi các hỗ trợ (plug-in) cho trình duyệt của bên thứ ba không có sẵn.

Bảng dưới đây liệt kê sự hỗ trợ của các trình duyệt khác nhau cho Lưu trữ web HTML5.

Trình duyệt Phiên bản
IE 8.0+
Firefox 3.6+
Chrome 5.0+
Opera 10.5+
Safari 4.0+

Các loại Lưu trữ web

Có hai loại Lưu trữ web HTML5 cụ thể là lưu trữ phiên (sessionStorage) và lưu trữ cục bộ (localStorage). Cả lưu trữ phiên và lưu trữ cục bộ đều cho phép lưu trữ khoảng 5 MB dữ liệu cho mỗi tên miền. Trước khi đi vào chi tiết từng loại, bạn cần xác định xem phiên bản hiện tại của trình duyệt có hỗ trợ cho Lưu trữ web HTML5 hay không.

Để kiểm tra sự hỗ trợ của trình duyệt đối với Lưu trữ web HTML5, ta sử dụng thuộc tính có tên localStorage hoặc sessionStorage được dùng đến như là một biến toàn cầu (global) của đối tượng window. Nếu không có sự hỗ trợ, thuộc tính localStorage hoặc sessionStorage sẽ là không xác định.

Đoạn mã dưới đây trình bày kịch bản để kiểm tra sự hỗ trợ cho Lưu trữ web HTML5 của trình duyệt.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hỗ trợ Lưu trữ web</title>
<script>
function fcheckSupport() {
  if(('sessionStorage' in window) && window['sessionStorage'] !==null) {
    alert('Trình duyệt của bạn hỗ trợ Lưu trữ web');
    return;
  }
  alert('Trình duyệt của bạn không hỗ trợ Lưu trữ web');
}
</script>
</head>
<body onload='fcheckSupport();'>
</body>
</html>

Ở đoạn mã này, câu lệnh if kiểm tra xem thuộc tính có tên là sessionStorage tồn tại trong đối tượng window toàn cầu hay không. Nếu thuộc tính tồn tại, có nghĩa là lưu trữ phiên được hỗ trợ và có một thông báo thích hợp được hiển thị để cho biết như vậy.

Lưu trữ phiên (sessionStorage)

Lưu trữ phiên duy trì theo dõi dữ liệu cụ thể cho một cửa sổ hoặc tab và nó sẽ bị hủy bỏ ngay khi người dùng đóng tab (hoặc cửa sổ) trình duyệt tương ứng. Vì vậy, ngay cả khi bạn đang truy cập cùng một trang web trong hai cửa sổ hoặc tab khác nhau trên cùng một trình duyệt, thì mỗi cửa sổ sẽ có đối tượng lưu trữ phiên riêng lẻ của riêng mình. Điều này có nghĩa rằng mỗi cửa sổ chứa đối tượng lưu trữ phiên tách riêng với dữ liệu riêng biệt.

Lưu trữ phiên sử dụng các cặp khóa/giá trị. Các dữ liệu (giá trị) được lưu trữ vào khóa, và được truy xuất bằng cách tham chiếu tới khóa đó. Các cặp khóa/giá trị được đặt trong cặp nháy kép.

Khóa là một chuỗi, trong khi giá trị được lưu trữ trong khóa có thể là bất kỳ loại dữ liệu nào, chẳng hạn như string, boolean, integer, hoặc float. Không phụ thuộc vào loại dữ liệu được lưu trữ, dữ liệu khi lưu vào khóa luôn được đặt trong một chuỗi.

Do đó, nếu việc lưu trữ và truy xuất dữ liệu với các kiểu khác nhau thì ta cần sử dụng các hàm để chuyển đổi chúng thành những loại dữ liệu thích hợp.

Ví dụ như hàm parseInt() được sử dụng để chuyển đổi dữ liệu thành loại dữ liệu số nguyên trong JavaScript.

Bảng sau đây liệt kê một số ví dụ về các cặp khóa/giá trị thuộc các kiểu dữ liệu khác nhau.

Khóa Giá trị
Tên Long
Sách HTML5 và CSS3
Email dangtranlong@gmail.com
Ôtô Toyota Camry
Tuổi 27
Uservalid true

Có một số hoạt động có thể được thực hiện với đối tượng sessionStorage. Những hoạt động này được mô tả dưới đây.

- Lưu trữ và truy xuất dữ liệu

Các phương thức setItem() và getItem() được sử dụng tương ứng để lưu trữ và lấy dữ liệu từ lưu trữ phiên.

Cú pháp để sử dụng các phương thức setItem() và getItem() như sau:

+ Để gán dữ liệu thì ta sử dụng sessionStorage.setItem(key, value);, trong đó key là khóa có tên tham chiếu tới dữ liệu, value là dữ liệu được lưu trữ.

+ Để lấy dữ liệu ta sử dụng câu lệnh var item = sessionStorage.getItem(key);, trong đó item là biến để dữ liệu sẽ lưu lại vào đó, còn key là khóa có tên tham khảo tới dữ liệu.

Đoạn mã sau đây trình bày cách để gán và lấy tên sử dụng đối tượng sessionStorage.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Làm việc với Lưu trữ web</title>
<script>
function testStorage() {
  if(('sessionStorage' in window) && window['sessionStorage'] !== null) {
    sessionStorage.setItem('Tên', 'Long');
    alert('Tên là: ' + sessionStorage.getItem('Tên'));
  }
}
</script>
</head>
<body onload='testStorage();'>
</body>
</html>

Đoạn mã trên lưu hằng chuỗi 'Long' vào khóa 'Tên'. Điều này được thực hiện thông qua phương thức setItem(). Sau đó, hằng chuỗi được lấy ra và hiển thị như là một cảnh báo sử dụng phương thức alert() trên trang trình duyệt. Để lấy lại hằng chuỗi, phương thức getItem() đã được sử dụng trong đoạn mã.

Lưu ý: Bạn không nhất thiết phải sử dụng một chuỗi để đặt tên cho khóa. Bạn hoàn toàn có thể sử dụng một số để đặt tên cho khóa, mặc dù khi tiến hành lưu trữ thì nó sẽ được chuyển thành chuỗi.

Đoạn mã sau trình bày kịch bản có sử dụng số để đặt tên cho khóa.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Làm việc với Lưu trữ web</title>
<script>
function testStorage() {
  if(('sessionStorage' in window) && window['sessionStorage'] !== null) {
    sessionStorage.setItem(6, 'Cuốn sách rất tuyệt vời!');
    var feedback = sessionStorage.getItem(6);
    alert(feedback);
  }
}
</script></head>
<body onload='testStorage();'>
</body>
</html>

Trong đoạn mã này, khóa được đặt với tên là số 6, nhưng điều đó không có nghĩa đó là khóa thứ sáu. Tên của khóa được định nghĩa là 6 được lưu trữ nội bộ trong trình duyệt. Phương thức getItem() được sử dụng để lấy giá trị đã lưu với khóa đó. Cuối cùng, giá trị có khóa là 6 được hiển thị trong cửa sổ thông báo với hàm alert().

Tương tự như các đối tượng JavaScript khác, đối tượng sessionStorage có thể được coi là một mảng kết hợp. Thay vì sử dụng các phương thức getItem() và setItem(), ta có thể dùng một đoạn mã phụ của mảng có thể được sử dụng để lấy và gán dữ liệu. Ví dụ, sessionStorage.setItem('name','John'); có thể được viết thành sessionStorage['name'] ='John';.

Tương tự như vậy, alert(sessionStorage.getItem('name')); có thể được viết thành alert(sessionStorage['name']);.

Như đã đề cập ở trên, ta cũng có thể lưu trữ những giá trị không phải chuỗi vào trong lưu trữ phiên.

Đoạn mã sau trình bày việc lưu trữ một giá trị là số nguyên ứng với tuổi và sau đó được lấy ra bằng cách sử dụng phương thức parseInt() cùng với phương thức getItem().

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Session Storage</title>
<script>
function fstore() {
  if (('sessionStorage' in window) && window['sessionStorage']!== null) {
    var name = document.getElementById('ten').value;
    sessionStorage.setItem('username', name);
    var data = sessionStorage.getItem('username');
    sessionStorage.setItem('age', document.getElementById('tuoi').value);
    var agevalue = parseInt(sessionStorage.getItem('age'));
    alert(data + ' ' + agevalue + ' tuổi');
  }
}
</script>
</head>
<body>
<form name='form1'>
<label>Tên: </label><br>
<input type="text" id="ten">
<br />
<label>Tuổi: </label><br>
<input type="text" id="tuoi">
<br/><br>
<input type="submit" value="Gửi đi" onclick="fstore();"/>
</form>
</body>
</html>

Trong đoạn mã này, phương thức parseInt() chuyển đổi tham số đã chỉ ra thành một định dạng số nguyên.

Hình sau đây trình bày kết quả về lưu trữ và lấy dữ liệu biểu mẫu có các giá trị số nguyên.

- Loại bỏ và xóa dữ liệu

Ta cũng có thể loại bỏ và xóa dữ liệu từ lưu trữ phiên. Phương thức removeItem() được sử dụng để loại bỏ một mục cụ thể khỏi danh sách.

Cú pháp cho phương thức removeItem() như sau:

sessionStorage.removeItem(key);

, trong đó, key là khóa chứa dữ liệu.

Giả sử, để loại bỏ giá trị liên quan đến khóa username thì ta dùng câu lệnh như sau:

sessionStorage.removeItem('username');

Tương tự như vậy, để xóa tất cả các mục có trong lưu trữ phiên, ta sử dụng phương thức clear() như được trình bày sau đây:

sessionStorage.clear();

Ngoài ra, ta có thể sử dụng thuộc tính length để xác định số lượng các cặp khóa/giá trị hiện có trong lưu trữ:

var itemcount = sessionStorage.length;

Lưu trữ cục bộ (localStorage)

Không giống như lưu trữ phiên, lưu trữ cục bộ cho phép lưu dữ liệu từ trình duyệt trong thời gian dài hơn trên máy tính của người dùng. Dữ liệu được lưu giữ lâu dài và có thể được lấy ra khi người dùng truy cập lại website. Nói cách khác, lưu trữ cục bộ được sử dụng nếu dữ liệu cần phải được lưu trữ trong hơn một phiên đơn lẻ. Chẳng hạn như nếu bạn muốn đếm số lần một người đã viếng thăm một website thì bạn sẽ dùng loại lưu trữ này.

Về các phương thức, lưu trữ cục bộ làm việc theo một cách tương tự như lưu trữ phiên. Cụ thể, nó cũng sử dụng cùng các hàm chẳng hạn như setItem(), getItem(), removeItem() và clear().

Đoạn mã sau trình bày việc sử dụng lưu trữ cục bộ để lưu trữ giá trị của trường username và sau đó, lấy giá trị trong một trang web khác.

<!DOCTYPE html>
<head>
<title>Lưu trữ cục bộ</title>
<script>
function fstore() {
  if (('localStorage' in window) && window['localStorage'] !== null) {
    var username = document.getElementById('username').value;
    localStorage.setItem('username', username);
  }
  else {
    alert('Trình duyệt của bạn không hỗ trợ lưu trữ cục bộ');
  }
}
function fcancel_store() {
  if(('localStorage' in window) && window['localStorage'] !== null) {
    localStorage.removeItem('username');
  }
  else {
    alert('Trình duyệt của bạn không hỗ trợ lưu trữ cục bộ');
  }
}
</script>
</head>
<body>
<form method="get" action="success.html">
Tên đăng nhập: <input type="text" id="username" value="" size="20" onblur="fstore();"/>
<input type="submit" value="Gửi"/>
<input type="button" value="Hủy" onclick="fcancel_store();"/>
</body>
</html>

Trong đoạn mã trên, khi người dùng nhấn vào nút Gửi thì hàm fstore() sẽ được gọi, trước tiên nó sẽ tiến hành kiểm tra xem đối tượng localStorage có được trình duyệt hỗ trợ không. Nếu được hỗ trợ, khi đó các nội dung của phần Tên đăng nhập được lấy ra và lưu trữ trong biến có tên cũng là username. Sau đó, nội dung của biến này được gán cho đối tượng lưu trữ cục bộ với khóa có tên là username. Nếu đối tượng localStorage không được hỗ trợ, một thông điệp thích hợp được hiển thị trong cửa sổ thông báo.

Ngoài ra, hàm fcancel_store() được gọi ra khi người dùng bấm vào nút Hủy. Trong hàm fcancel_store(), phương thức removeItem() loại bỏ khóa đã chỉ định và giá trị của nó khỏi lưu trữ cục bộ.

Khi nút Gửi được nhấn, người dùng sẽ được chuyển hướng đến trang web success.html, hiển thị giá trị được lưu trữ với khóa username.

Đoạn mã sau trình bày trang success.html để lấy giá trị từ lưu trữ cục bộ và hiển thị nó trong trình duyệt.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Lưu trữ cục bộ</title>
<script>
function fprint() {
  var username = localStorage.getItem('username');
  document.getElementById('lblMsg').innerHTML = 'Tên đăng nhập là: <b>'+ username+'</b>';
}
</script>
</head>
<body onload="fprint();">
<label id="lblMsg"></label><br>
</body>
</html>

Ở đây, trong đoạn mã, phương thức lưu trữ cục bộ getItem() lấy giá trị từ khóa username và lưu trữ vào biến username. Sau đó, giá trị của biến username được hiển thị trong thẻ <label>.

API IndexedDB

Giới thiệu

Cơ sở dữ liệu là một tập hợp dữ liệu có tổ chức. Các cơ sở dữ liệu, như là cơ sở dữ liệu quan hệ lưu trữ dữ liệu dưới dạng bảng. Một bảng bao gồm các hàng và cột được sử dụng để lưu trữ dữ liệu. Việc trình bày dữ liệu từ bảng là ở dạng các bản ghi.

HTML5 đã giới thiệu một API Lưu trữ web mới có thể lưu trữ các cơ sở dữ liệu web cục bộ trong trình duyệt của người dùng. Tuy nhiên, các cơ sở dữ liệu web không giống như các cơ sở dữ liệu quan hệ về chức năng.

API Cơ sở dữ liệu có chỉ mục (Indexed DataBase API) là một đặc điểm kỹ thuật mới, còn được gọi với tên là API IndexedDB. Về cơ bản đó là kho đối tượng có thể được sử dụng để lưu trữ và thao tác dữ liệu ở phía máy khách. Lưu trữ đối tượng là cơ chế lưu trữ chính lưu trữ đối tượng trong cơ sở dữ liệu được quản lý cục bộ trong trình duyệt. Nó cho phép tạo ra kho đối tượng với từng loại cụ thể, trong đó các đối tượng vẫn có thể được tiếp tục sử dụng JavaScript. Như vậy, IndexedDB cho phép để tạo ra các ứng dụng web với khả năng truy vấn phong phú và có thể làm việc cả online và offline.

IndexedDB hỗ trợ hai loại bao gồm API đồng bộ (synchronous) và API không đồng bộ (asynchronous). API đồng bộ có thể được sử dụng với Web Worker, trong khi API không đồng bộ có thể được sử dụng cho các ứng dụng web. Hiện tại, chưa có trình duyệt chính nào hỗ trợ cho API đồng bộ.

API IndexedDB được thực hiện bằng cách sử dụng đối tượng window.indexedDB. Do các đặc điểm kỹ thuật hiện tại vẫn đang trong giai đoạn phát triển, nên các trình duyệt thực hiện đối tượng IndexedDB với các tiền tố của riêng mình. Ví dụ, trình duyệt Chrome sử dụng tiền tố -webkit, trong khi Mozilla hỗ trợ tiền tố -moz.

Bảng sau đây liệt kê các hỗ trợ trình duyệt đối với API IndexedDB.

IE
(-ms)
Firefox
(-moz)
Chrome
(-webkit)
Safari
(-webkit)
Opera
(-o)
iOS Safari
6.0 3.6 - - - 3.2
7.0 8.0moz - - - 4.0-4.1
8.0 9.0moz 16.0webkit 5.0 - 4.2-4.3
9.0 10.0moz 17.0webkit 5.1 11.6 5.0
10.0ms 11.0moz 18.0webkit 6.0 12.0 -
- 12.0moz 19.0webkit - - -

Các cấu trúc cơ bản của API IndexedDB

API IndexedDB có một số cấu trúc cơ bản như sau:

- Cơ sở dữ liệu: Cơ sở dữ liệu IndexedDB gồm nhiều kho đối tượng. Mỗi cơ sở dữ liệu có chứa tên xác định nguồn gốc của cơ sở dữ liệu và một số phiên bản trong đó xác định thời gian tồn tại của cơ sở dữ liệu.

- Lưu trữ đối tượng: Lưu trữ đối tượng là cơ chế chính để lưu trữ dữ liệu trong một cơ sở dữ liệu. Chúng nắm giữ dữ liệu đã lưu trữ trong cơ sở dữ liệu ở dạng các bản ghi.

- Khóa: Mỗi bản ghi lưu lại trong cơ sở dữ liệu được xác định bằng khóa duy nhất.

- Giá trị: Các giá trị là những dữ liệu được lưu trữ trong các bản ghi.

- Đường dẫn khóa: Đường dẫn khóa là một chuỗi định nghĩa cách trình duyệt nên trích xuất khóa từ một giá trị. Khóa từ một giá trị có thể được trích xuất hoặc trong kho đối tượng hoặc chỉ số. Một chuỗi rỗng, một mã định danh JavaScript, ... là ví dụ về một số đường dẫn khóa hợp lệ.

- Chỉ số: Được sử dụng khi các dữ liệu từ kho đối tượng được lấy dựa trên một số giá trị khác ngoài khóa. Đó là một kho đối tượng chuyên dụng để tìm kiếm các bản ghi trong một kho đối tượng khác được gọi là kho đối tượng có tham chiếu.

- Giao tác: Bất kỳ việc thêm hoặc truy xuất dữ liệu nào trong một cơ sở dữ liệu đều được thực hiện bằng cách sử dụng giao tác. Nói cách khác, giao tác là một cơ chế được sử dụng để tương tác với cơ sở dữ liệu. Mỗi giao tác có một chế độ, phạm vi, và một danh sách yêu cầu. Chế độ này xác định loại giao tác có thể được thực hiện, phạm vi chỉ ra kho đối tượng mà giao tác sẽ được thực hiện trên đó, và cuối cùng là danh sách yêu cầu để xác định các yêu cầu đã được đưa ra.

- Yêu cầu: Các thao tác, chẳng hạn như đọc hoặc viết trên cơ sở dữ liệu được thực hiện bằng việc sử dụng một yêu cầu. Mỗi yêu cầu chứa các thuộc tính, chẳng hạn như cờ, đối tượng nguồn, kết quả, và lỗi.

- Con trỏ: Con trỏ là một cơ chế được sử dụng để lấy nhiều bản ghi từ một cơ sở dữ liệu.

- Dải khóa: Các bản ghi từ kho đối tượng và các chỉ số được lấy ra sử dụng các khóa hoặc dải khóa. Dải khóa đề cập đến việc truy xuất dữ liệu giữa các giới hạn đã chỉ định dựa trên các khóa.

Thực thi API IndexedDB

Các bước để thực hiện IndexedDB API trong ứng dụng web như sau:

  1. Mở một Cơ sở dữ liệu
  2. Cập nhật phiên bản của Cơ sở dữ liệu
  3. Tạo kho đối tượng
  4. Tạo một giao tác
  5. Thực hiện một số thao tác cơ sở dữ liệu, chẳng hạn như thêm và lấy thông qua việc mở một con trỏ
  6. Làm việc với các kết quả đã truy xuất

Mở một Cơ sở dữ liệu

Đoạn mã sau trình bày đoạn mã để mở cơ sở dữ liệu.

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var request = indexedDB.open("CompanyDB", 1);
request.onsuccess = function (event) {
  . . .
};
request.onerror = function (event) {
  console.log("Lỗi IndexedDB: " + event.target.errorCode);
};

Ở đây, đoạn mã phát hiện sự hỗ trợ cho API IndexedDB trong các trình duyệt khác nhau và tạo ra đối tượng indexedDB. Đối tượng indexedDB có chứa một phương thức có tên là open() mở cơ sở dữ liệu CompanyDB.

Trong trường hợp, nếu cơ sở dữ liệu tồn tại, khi đó phương thức open() chỉ cần mở nó, nếu không tạo ra cơ sở dữ liệu đó.

Phương thức open() trả về đối tượng IDBRequest có tên là request. Đối tượng request cung cấp các bộ xử lý, chẳng hạn như thành successerror. Những bộ xử lý này được gọi tùy thuộc vào việc mở cơ sở dữ liệu thành công hay thất bại. Bộ xử lý onsuccess() có chứa một sự kiện thuộc loại success làm đối số của nó. Tương tự như vậy, bộ xử lý onerror() được gọi với sự kiện error làm đối số của nó.

Cập nhật phiên bản của Cơ sở dữ liệu

Sau khi cơ sở dữ liệu được mở ra, nó có thể được cấu trúc bằng cách cung cấp số phiên bản. Điều này giúp thiết lập cơ sở dữ liệu.

Số phiên bản sẽ được chỉ ra cho cơ sở dữ liệu trong hàm onsuccess().

Đoạn mã sau trình bày đoạn mã chỉ ra số phiên bản cho cơ sở dữ liệu CompanyDB.

var setVrequest = db.setVersion("1.99");
setVrequest.onsuccess = function(event) {
 . . .
}

Tạo kho đối tượng

Cấu trúc của cơ sở dữ liệu IndexedDB tạo điều kiện cho việc lưu trữ nhiều kho đối tượng. Nói cách khác, có thể có nhiều hơn một kho đối tượng trong cơ sở dữ liệu. Kho đối tượng được tạo ra sử dụng phương thức createObjectStore(). Các phương thức createObjectStore() nhận hai đối số cụ thể là: tên kho và đối tượng parameter. Đối tượng parameter được sử dụng để xác định thuộc tính tùy chọn mà quan trọng. Trong trường hợp này, đường dẫn khóa được định nghĩa được sử dụng để xác định các đối tượng duy nhất trong kho đối tượng. Ví dụ, kho nhân viên chứa thuộc tính id làm đường dẫn khóa, sẽ là duy nhất cho từng đối tượng và phải có mặt cho từng đối tượng.

Đoạn mã sau trình bày đoạn mã để tạo ra một kho đối tượng có tên là employee trong cơ sở dữ liệu CompanyDB.

var employeeData = [{ name: "John Smith", email: "john@company.com" }, { name: "Jill Patrick", email: "jill@company.com" }, { name: "Rock Ethan", email: "rock@company.com" }, { name: "Daniel Andrew", email: "daniel@company.com" }];
var objectStore = db.createObjectStore("employee", {
  keyPath: "id", autoIncrement: true });
  for (i in employeeData) {
    objectStore.put(employeeData[i]);
    alert("Bản ghi đã thêm");
  }

Đoạn mã tạo ra một mảng có tên là employeeData có chứa các giá trị tên và e-mail. Sau đó, phương thức createObjectStore() tạo ra kho nhân viên với đường dẫn khóa được đặt thành thuộc tính id. Đường dẫn khóa được sử dụng với tùy chọn autoIncrement tự động tạo ra id cho mỗi đối tượng. Tất cả các đối tượng riêng lẻ trong kho đối tượng được chỉ ra dựa trên id. Cuối cùng, vòng lặp for..in lưu trữ dữ liệu trong kho đối tượng employee.

Tạo một giao tác

Để thực hiện thao tác cơ sở dữ liệu, chẳng hạn như lấy dữ liệu từ kho đối tượng, IndexedDB cung cấp đối tượng IDBTransaction. Đối tượng này có thể được tạo ra trong ba chế độ cụ thể là: chỉ đọc, đọc ghi, và ảnh chụp. Chế độ đọc ghi được sử dụng để cập nhật đối tượng, trong khi đó chế độ chỉ đọc được sử dụng cho các thao tác khác.

Đoạn mã sau trình bày đoạn mã để lấy dữ liệu từ kho đối tượng employee sử dụng hàm get() của đối tượng transaction.

var trans = db.transaction(["employee"], IDBTransaction.READ_WRITE). objectStore("employee");
var request = trans.get(2);
request.onerror = function(event) {
//Xử lý lỗi!
};
request.onsuccess = function(event) {
//Làm gì đó với request.result!
alert("Tên: " + request.result.name);
};

Trong đoạn mã này, phương thức transaction() nhận hai tham số. Tham số thứ hai là tùy chọn. Tham số đầu tiên là danh sách các kho đối tượng được mở rộng bởi đối tượng transaction. Trong trường hợp này, có một kho đối tượng đơn lẻ được đặt tên là employee, được tạo ra trong cơ sở dữ liệu. Tham số thứ hai tùy chọn chỉ ra loại giao tác, có nghĩa là, chỉ đọc, đọc ghi, hoặc ảnh chụp. Ở đây, loại giao tác được định nghĩa là IDBTransaction.READ_WRITE. Loại này cho phép đọc cũng như viết trong cơ sở dữ liệu. Kho đối tượng employee được lấy từ đối tượng transaction trên đó các thao tác được thực hiện. Ở đây, phương thức get() được gọi trên đối tượng employee trả về giá trị so với đường dẫn khóa 2. Cuối cùng, kết quả của phương thức get() được lưu trữ trong đối tượng yêu cầu trên đó gọi lại các hàm, chẳng hạn như onsuccessonerror được gọi.

Mở một con trỏ

Con trỏ được sử dụng để lấy nhiều bản ghi từ một kho đối tượng. Chúng có thể được sử dụng khi giá trị của đường dẫn khóa là không rõ. Chúng là một phần của một giao tác và được mở cho một kho đối tượng cụ thể.

Đoạn mã dưới đây trình bày đoạn mã để lấy nhiều bản ghi từ kho đối tượng employee.

store = db.transaction("employee"). objectStore("employee");
store.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    alert("Tên cho id " + cursor.key + " là " + cursor.value.name);
    cursor.continue();
  }
};

Ở đây, trong đoạn mã, đối tượng transaction được tạo ra cho kho đối tượng employee. Sau đó, hàm openCursor() được gọi trên kho đối tượng. Nếu con trỏ được mở ra thành công, một đối tượng con trỏ được trả về sẽ lấy dữ liệu từ kho đối tượng.

Đoạn mã sau đây trình bày đoạn mã đầy đủ để mở, tạo ra, và lấy dữ liệu từ kho đối tượng sử dụng API IndexedDB.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>API IndexedDB</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com /svn/trunk/html5.js"></script>
<![endif]-->
<script>
//Phát hiện hỗ trợ cho IndexedDB API
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var db;
var transaction;
var store;
var objectStore;
var employeeData = [{ name: "John Smith", email: "john@company.com" }, { name: "Jill Patrick", email: "jill@company.com" }, { name: "Rock Ethan", email: "rock@company.com" }, { name: "Daniel Andrew", email: "daniel@company.com" }];
function initDb() {
  var request = indexedDB.open("CompanyDB", 1);
  request.onsuccess = function (evt) {
    db = request.result;
    var setVrequest = db.setVersion("1.99");
    setVrequest.onsuccess = function(e) {
      if(db.objectStoreNames.contains( "employee")) {
        db.deleteObjectStore("employee");
        alert ('Đối tượng employee đã bị xóa');
      }
      objectStore = db.createObjectStore("employee", {keyPath: "id", autoIncrement: true });
      alert ('Đối tượng employee được tạo ra');
      objectStore.createIndex("name", "name", { unique: false });
      objectStore.createIndex("email", "email", { unique : true });
      for (i in employeeData) {
        objectStore.put(employeeData[i]);
        alert('Đã thêm bản ghi');
      }
    };
  };
  request.onerror = function (evt) {
    console.log("Lỗi IndexedDB: " + evt.target.errorCode);
  };
}
function employee_details() {
  store = db.transaction("employee"). objectStore("employee");
  store.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
      alert("Tên cho id " + cursor.key + " là " + cursor.value.name);
      cursor.continue();
    }
  };
}
function search_employee() {
  trans = db.transaction(["employee"], IDBTransaction.READ_WRITE). objectStore("employee");
  var request = trans.get(2);
  request.onerror = function(event) { //Xử lý lỗi! };
    request.onsuccess = function(event) {
      //Làm việc với request.result
      alert("Tên: " + request.result.name);
    };
  };
}
window.addEventListener( "DOMContentLoaded", initDb, false);
</script>
</head>
<body>
<input type="button" value="In chi tiết nhân viên" onclick="employee_details()"/> <br/>
<input type="button" value="Tìm kiếm nhân viên dựa trên khóa" onclick="search_employee()"/>
</body>
</html>

Việc thực hiện chương trình bắt đầu với việc tạo ra kho đối tượng employee, trong đó các bản ghi được thêm vào.

Cửa sổ thông báo hiển thị thông báo 'Đã thêm bản ghi' trong khi lưu trữ các bản ghi vào kho đối tượng. Sau đó, ứng dụng cho phép người dùng truy vấn cơ sở dữ liệu bằng cách bấm vào nút In chi tiết nhân viênTìm kiếm nhân viên dựa trên khóa.

Hình dưới đây trình bày kết quả cho kho đối tượng employee trong trình duyệt Chrome, khi người dùng bấm vào nút Tìm kiếm nhân viên dựa trên khóa.

html5: API IndexedDB

Hạn chế của API IndexedDB

API IndexedDB API được sử dụng để lưu trữ dữ liệu phía máy khách, nhưng nó có một số hạn chế về thiết kế. Những hạn chế này như sau:

- Phân loại quốc tế hóa làm việc với phân loại dữ liệu chuỗi. Bởi cơ sở dữ liệu không tuân theo bất kỳ trật tự quốc tế nào để lưu trữ dữ liệu, nên phân loại quốc tế hóa không được API hỗ trợ.

- API IndexedDB không đồng bộ hóa cơ sở dữ liệu phía máy khách với các cơ sở dữ liệu phía máy chủ. Nếu cần thiết, khi đó đoạn mã cần phải được viết để thực hiện việc đồng bộ hóa phía máy chủ.

- API IndexedDB hỗ trợ truy vấn cơ sở dữ liệu phía máy khách, nhưng không hỗ trợ việc sử dụng các toán tử, chẳng hạn như toán tử LIKE được sử dụng trong Structured Query Language (SQL - Ngôn ngữ truy vấn có cấu trúc). SQL là ngôn ngữ truy vấn được sử dụng bởi các cơ sở dữ liệu phía máy chủ để thực hiện thao tác trong cơ sở dữ liệu đó.

Bộ đệm ứng dụng (App Cache)

Tổng quan

Giả sử bạn đang đi du lịch ở một nơi nằm ngoài vùng phủ sóng của Nhà cung cấp Dịch vụ Internet (Internet Service Prodiver - ISP). Trong trường hợp này, bạn sẽ không thể truy cập vào các ứng dụng Web do không có kết nối mạng.

HTML5 hỗ trợ các ứng dụng Web ngoại tuyến (offline) cho phép bạn làm việc với chúng mà không cần bạn phải trực tuyến (online). Ứng dụng Web ngoại tuyến làm việc bằng cách lưu lại tất cả các trang Web cục bộ trên hệ thống của người dùng. Tính năng này được gọi là Bộ đệm Ứng dụng (Application Cache).

Bản chất của vấn đề ở đây chính là Bộ đệm Ứng dụng cho phép tất cả nguồn tài nguyên, chẳng hạn như HTML, JavaScript, hình ảnh, và các trang CSS của một ứng dụng Web được lưu trữ cục bộ trên hệ thống.

Việc lưu trữ này sẽ giúp người dùng lướt web mà không cần internet, tốc độ lướt web nhanh hơn do việc tải các tài nguyên trở nên nhẹ nhàng hơn (ít hơn), và việc lưu trữ này cũng có tác dụng giảm tải cho máy chủ (server).

Trình duyệt hỗ trợ

Internet Explorer 10, Firefox, Chrome, Safari và Opera đều hỗ trợ bộ đệm ứng dụng.

Ví dụ áp dụng

Ví dụ dưới đây sẽ cho bạn thấy bạn có thể lướt web mà máy tính của bạn không cần phải kết nối internet.

<!DOCTYPE html>
<html manifest="demo_manifest.appcache">
<head>
<meta charset="utf-8">
</head>
<body>
<script src="demo_time.js"></script>
<p id="timePara"><button onclick="getDateTime()">Lấy giờ chuẩn quốc tế (GMT)</button></p>
<p><img src="logo.png" width="336" height="69"></p>
<p>Hãy click để mở <a href="html5_manifest.html" target="_blank">trang này</a> rồi ngắt kết nối internet, sau đó refresh lại trang, bạn sẽ thấy trang web vẫn làm việc bình thường.</p>
</body>
</html>

Căn bản về Bộ đệm Ứng dụng

Để sử dụng bộ đệm ứng dụng bạn cần dùng thuộc tính manifest trong phần tử <html>. Ví dụ:

<!DOCTYPE HTML>
<html manifest="demo_manifest.appcache">
...
</html>

Thuộc tính manifest sẽ cho phép lưu trữ trang web mỗi khi người dùng viếng thăm trang web đó. manifest sẽ thiết lập liên kết tới file manifest có phần mở rộng là .appcache.

Lưu ý rằng file manifest phải thể hiện đúng kiểu MIME theo dạng "text/cache-manifest". Vì vậy cần phải cấu hình MIME cho đúng trên dịch vụ web (web server).

File manifest bản chất là một tập tin văn bản (file text) đơn giản, file này có nhiệm vụ yêu cầu trình duyệt lưu trữ hoặc không lưu trữ những gì bạn muốn.

Một file manifest có ba phần:

- CACHE MANIFEST: Các tập tin được liệt kê ở phần này sẽ được lưu trữ sau khi được tải về lần đầu tiên.

- NETWORK: Các tập tin được liệt kê ở phần này yêu cầu một kết nối đến máy chủ, và sẽ không được lưu trữ.

- FALLBACK: Các tập tin được liệt kê ở phần này sẽ xác định các trang dự phòng để đề phòng trường hợp một trang web nào đó không truy cập được.

CACHE MANIFEST

Phần CACHE MANIFEST thường được viết như sau:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Giải thích:

Phần CACHE MANIFEST trên đây đưa ra ba loại tài nguyên cần lưu trữ lại trên máy tính cục bộ là tập tin CSS (theme.css), ảnh GIF (logo.gif) và tập tin JavaScript (main.js). Khi tập tin manifest được tải thì trình duyệt sẽ tải về máy ba file trên từ thư mục gốc của website. Sau khi đã tải về được ba file trên thì nếu như người dùng không kết nối internet thì nguồn tài nguyên liên quan đến ba file trên của web site vẫn có thể dùng được.

NETWORK

Phần NETWORK dưới đây yêu cầu không lưu trữ file "login.php" trên máy khách:

NETWORK:
login.php

Bạn có thể sử dụng dấu hoa thị như dưới đây để yêu cầu rằng tất cả các tài nguyên cũng như tập tin khác với tài nguyên được nêu ở phần cache manifest đều không được lưu trữ:

NETWORK:
*

FALLBACK

Phần FALLBACK dưới đây yêu cầu rằng file "offline.html" sẽ thay thế các file trong mục /html/ nếu như không kết nối được internet:

FALLBACK:
/html/ /offline.html

Như vậy một bộ đệm file manifest (file .appcache) hoàn chỉnh sẽ có dạng như sau:

CACHE MANIFEST
# 2013-12-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

Chú ý: những dòng bắt đầu bằng dấu '#' là những dòng chú thích hoặc cũng có thể phục vụ cho một mục đích khác. Mỗi bộ đệm ứng dụng chỉ được cập nhật khi file manifest có sự thay đổi. Theo đó ở phần CACHE MANIFEST nếu như bạn có một thay đổi bất kỳ về ảnh, file CSS, file JS hoặc ngay cả khi bạn cập nhật về ngày tháng năm cũng như phiên bản ở phần chú thích thì bộ đệm ứng dụng sẽ được cập nhật lại.

Cập nhật Bộ đệm Ứng dụng

Bộ đệm sẽ vẫn còn lưu trữ các tập tin ứng dụng cho tới khi một trong những tình huống sau xảy ra:

  • Người dùng xóa bộ đệm trình duyệt
  • File manifest có sự thay đổi
  • Bộ đệm ứng dụng được cập nhật theo chương trình.

Những lưu ý đối với bộ đệm ứng dụng

Thứ nhất, bạn cần phải thận trong với những gì bạn lưu trữ. Mỗi khi lưu trữ một file thì trình duyệt sẽ đưa ra phiên bản lưu trữ, và để đảm bảo rằng trình duyệt chắc chắn sẽ cập nhật bộ đệm thì bạn nên thay đổi file manifest.

Thứ hai, bạn cần lưu ý là các trình duyệt khác nhau có thể có bộ đệm với dung lượng khác nhau để lưu trữ dữ liệu (một số trình duyệt cho phép lưu trữ dữ liệu có thể lên tới 5 MB cho mỗi web site).

Server-Sent

Server-Sent cho phép một trang web có được thông tin cập nhật từ máy chủ.

Sự kiện Server-Sent – Thông điệp một chiều

Sự kiện server-sent được kích hoạt khi một trang web tự động được cập nhật từ máy chủ.

Sự kiện này cũng có thể được kích hoạt trước khi có hành động cập nhật, nhưng trang web phải có bản cập nhật có sẵn.

Những tình huống sau thường áp dụng server-sent: các thao tác cập nhật trên Facebook/Twitter, giá chứng khoán, news feed, kết quả thể thao, ...

Trình duyệt hỗ trợ

Sự kiện Server-Sent được hầu hết các trình duyệt hỗ trợ, ngoại trừ trình duyệt IE.

Lấy dữ liệu từ sự kiện Server-Sent

Để lấy dữ liệu từ sự kiện server-sent ta sử dụng đối tượng EventSource.

Ví dụ:

<!DOCTYPE html>

<html>

<body>

<h1>Getting server updates</h1>

<div id="result"></div>

<script>

if(typeof(EventSource) != "undefined"){   //Nếu trình duyệt hỗ trợ Server-Sent

var source=new EventSource( "demo_sse.php"); 

source.onmessage = function(event){

document.getElementById( "result").innerHTML += event.data + "<br>";

};

}

else{   //nếu không thì

document.getElementById( "result").innerHTML = "Trình duyệt này không hỗ trợ sự kiện server-sent!";

}

</script>

</body>

</html>

Giải thích ví dụ:

Ø Tạo một đối tượng EventSource, và chỉ định URL của trang gửi bản cập nhật (trong ví dụ này là "demo_sse.php")

Ø Mỗi khi nhận cập nhật thì sự kiện onmessage được kích hoạt

Ø Khi sự kiện onmessage được kích hoạt thì dữ liệu nhận được sẽ được đưa vào phần tử có id="result"

Còn đây là mã lệnh của file demo_sse.php:

<?php

  header('Content-Type: text/event-stream');

  header('Cache-Control: no-cache');

  $time = date('r');

  echo "data: Thời gian hiện tại của máy chủ là: {$time}\n\n";

  flush();

?>

Giải thích mã lệnh PHP:

Ø  Đặt "Content-Type" của header là "text/event-stream"

Ø  Đặt “Cache-Control” của header là ‘no-cache’

Ø  Dùng hàm date() để lấy thời gian thực của server

Ø  Dùng hàm echo để hiển thị kết quả

Ø  Dùng hàm flush() để đưa kết quả hiển thị về trang web

Đối tượng EventSource

Đối tượng này có ba sự kiện chính được thể hiện ở bảng dưới đây:

Sự kiện

Mô tả

onopen

Sự kiện này được kích hoạt khi một kết nối đến máy chủ được mở

onmessage

Sự kiện này được kích hoạt khi nhận tin nhắn

onerror

Sự kiện này được kích hoạt khi có lỗi xảy ra

Sự kiện Media

Các sự kiện khác nhau sẽ được gửi khi tiến hành xử lý các media trong các trang HTML có sử dụng đến các phần tử <audio><video>.

Các sự kiện Media

Bảng dưới đây sẽ liệt kê các sự kiện media cũng như cung cấp một số thông tin hữu ích về cách sử dụng chúng.

Tên sự kiện

Mô tả

abort

Sự kiện này được gửi khi huỷ bỏ việc phát lại; ví dụ, nếu thiết bị media đang được thực hiện mà ta bắt đầu thực hiện lại từ đầu thì sự kiện này sẽ được gửi.

canplay

Được gửi khi đủ dữ liệu để thiết bị media có thể chơi được, ít nhất là một vài khung hình (frame). Điều này tương ứng với giá trị CAN_PLAY của thuộc tính readyState.

canplaythrough

Được gửi khi trạng thái sẵn sàng thay đổi thành CAN_PLAY_THROUGH, có nghĩa rằng toàn bộ thiết bị media có thể chơi mà không bị gián đoạn với giả định tốc độ download vẫn còn ít nhất ở mức hiện tại. Lưu ý: Việc thiết lập giá trị cho thuộc tính currentTime sẽ kích hoạt sự kiện canplaythrough trong FireFox, các trình duyệt khác có thể sẽ không kích hoạt sự kiện này.

durationchange

Được gửi khi các siêu dữ liệu (metadata) được nạp hoặc thay đổi dẫn đến sự thay đổi trong quá trình thực hiện media, ví dụ như khi media được nạp hoàn chỉnh thì sự kiện này sẽ được gửi đi.

emptied

Được gửi khi thiết bị media ở trạng thái trống (media được nạp hoàn chỉnh hoặc một phần), lúc này phương thức load() sẽ được gọi để nạp lại media.

encrypted

Được gửi khi người dùng thực hiện khởi tạo dữ liệu của media.

ended

Được gửi thi hoàn tất việc phát lại (playback).

error

Được gửi khi xảy ra lỗi. Khi đó thuộc tính error của phần tử sẽ chứa thông tin cụ thể về lỗi. Xem chi tiết tại phần Xử lý lỗi.

interruptbegin

Được gửi khi đang phát audio trên thiết bị Firefox OS thì bị gián đoạn, hoặc cũng có thể do ứng dụng phát audio được gửi tới sau, hoặc do audio có độ ưu tiên cao hơn kênh audio bắt đầu chơi. Xem chi tiết tại phần Sử dụng AudioChannels API.

interruptend

Được gửi khi đoạn audio bị gián đoạn trước đó trên thiết bị Firefox OS  bắt đầu chơi một lần nữa - khi kết thúc sự gián đoạn. Điều này xảy ra khi ứng dụng liên quan được đặt lên trước, hoặc khi đoạn audio có độ ưu tiên cao hơn đã phát xong.

loadeddata

Xảy ra khi frame đầu tiên của thiết bị media được nạp xong.

loadedmetadata

Xảy ra khi metadata của media được nạp xong, lúc này tất cả các thuộc tính đều chứa những thông tin hữu ích mong muốn.

loadstart

Được gửi khi bắt đầu nạp media.

mozaudioavailable

Được gửi khi một bộ đệm âm thanh cung cấp cho lớp âm thanh để xử lý, lúc này bộ đêm sẽ chứa các mẫu âm thanh ở dạng thô mà có thể hoặc không được chơi theo thời gian bạn nhận được sự kiện.

pause

Được gửi khi tạm dừng việc phát lại.

play

Được gửi khi bắt đầu phát lại media sau khi bị tạm ngưng, có nghĩa là khi việc phát lại được mở lại sau sự kiện pause trước đó.

playing

Được gửi khi media bắt đầu chơi (hoặc là lần đầu tiên, hoặc là sau khi tạm dừng, hoặc sau khi kết thúc và bắt đầu chơi lại).

progress

Được gửi định kỳ để thông báo tới các bên liên quan về tiến trình tải media. Thông tin về lượng media hiện thời mà đã được tải về có sẵn trong thuộc tính buffered của phần tử.

ratechange

Được gửi khi thay đổi tốc độ phát lại.

seeked

Được gửi khi hoàn thành hoạt động tìm kiếm.

seeking

Được gửi khi bắt đầu hoạt động tìm kiếm.

stalled

Được gửi khi người dùng cố gắng lấy dữ liệu media, nhưng dữ liệu lại bất ngờ không tới nơi.

suspend

Được gửi khi việc nạp media bị treo; điều này xảy ra hoặc là do việc download đã hoàn tất hoặc bị tạm ngưng do một lý do nào đó.

timeupdate

Xảy ra khi thời gian được chỉ ra bởi thuộc tính currentTime của phần tử đã thay đổi.

volumechange

Được gửi khi thay đổi âm lượng của audio (khi âm lượng được thiết lập hoặc khi thay đổi thuộc tính muted).

waiting

Được gửi khi các hoạt động được yêu cầu (phát lại chẳng hạn) bị trì hoãn trong khi chờ hoàn thành những hoạt động khác (như tìm kiếm chẳng hạn).

Ví dụ:

var v = document.getElementsByTagName("video")[0];

v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);

v.currentTime = 10.0;

Ví dụ trên tiến hành nạp phần tử video đầu tiên trong trang web và nạp vào nó sự kiện seeked, sự kiện này sẽ được gửi mỗi khi hoàn thành hoạt động tìm kiếm. Listener sau đó sẽ gọi phương thức play() để bắt đầu phát lại.

Việc đặt thuộc tính currentTime của phần tử <video> là 10.0 có nghĩa là hoạt động tìm kiếm sẽ được thực hiện trong 10 giây và hoạt động này sẽ được nạp vào thiết bị media. Điều này sẽ phát sinh ra sự kiện seeking và sẽ được gửi khi hoạt động tìm kiếm bắt đầu, sau đó sự kiện seeked sẽ được gửi đi khi hoàn tất hoạt động tìm kiếm.

Tóm lại, ví dụ trên tiến hành đánh dấu hoạt động tìm kiếm trong khoảng thời gian 10 giây vào thiết bị media, sau đó tiến hành phát lại ngay sau khi kết thúc tìm kiếm.

Khả năng tương thích

Đối với Máy tính

Đặc điểm

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Hỗ trợ cơ bản

?

3.5 (1.9.1) (Trước Gecko 2.0, các sự kiện media đã được khởi động.)

?

?

?

encrypted

42.0

?

?

?

?

load

?

Bị huỷ ở bản 3.6 (1.9.2)

?

?

?

mozaudioavailable 

Không hỗ trợ

4.0 (2.0)

Không hỗ trợ

Không hỗ trợ

Không hỗ trợ

suspend

?

3.6 (1.9.2)

?

?

?

Đối với thiết bị cầm tay

Đặc điểm

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Chrome for Android

Hỗ trợ cơ bản

?

?

?

?

?

?

encrypted

?

?

?

?

?

42.0

load

?

?

?

?

?

?

mozaudioavailable 

Không hỗ trợ

4.0 (2.0)

Không hỗ trợ

Không hỗ trợ

Không hỗ trợ

?

suspend

?

?

?

?

?

?

Web Worker

WEB WORKER

JavaScript được thiết kế để chạy trong một môi trường đơn luồng, điều này có nghĩa là trong cùng một thời điểm sẽ không thể chạy được nhiều kịch bản (script) một lúc. Giả sử bạn cần xử lý các sự kiện giao diện người dùng trình duyệt phức tạp, trong đó cần truy vấn và xử lý một lượng lớn dữ liệu API và các thao tác DOM, khi đó Javascript có thể sẽ treo trình duyệt của bạn nếu nó tiêu tốn quá nhiều tài nguyên CPU.

Web Worker là gì?

Tình huống trình bày ở trên có thể được xử lý bằng cách sử dụng Web Worker, nó sẽ thực hiện tất cả các tác vụ tính toán phức tạp mà không làm gián đoạn giao diện người dùng vì nó chạy trên các luồng riêng biệt.

Về mặt bản chất, Web Worker là một tập lệnh JavaScript (JS), tập lệnh này không làm ảnh hưởng đến hiệu năng của trang web, nó cho phép các kịch bản có thể chạy trong thời gian dài mà không bị gián đoạn bởi các kịch bản có đáp ứng như là các cú nhấn chuột hay những tương tác người dùng khác, và cho phép những tác vụ phức tạp được thực thi mà không hề làm giảm hiệu suất để đảm bảo vẫn giữ được tính hồi đáp của các trang web.

Web Worker là các kịch bản nền và nó tương đối nặng nề, cho nên ta không nên dùng nó với số lượng lớn. Ví dụ như ta không nên tạo worker cho mỗi điểm ảnh với một tấm ảnh có kích thước vài megapixel.

Khi một kịch bản đang được thực hiện trong Web Worker thì nó không thể truy cập được đối tượng window của trang web (window.document), điều này có nghĩa là Web Worker không thể trực tiếp truy cập được tới trang web và API DOM. Mặc dù Web Worker không thể ngăn chặn các giao diện người dùng trình duyệt, nhưng nó vẫn có thể làm giảm tốc độ CPU và làm giảm khả năng đáp ứng của hệ thống.

Web Worker làm việc như thế nào?

Web Worker được khởi tạo với một URL là một tập tin JavaScript, file này chứa mã lệnh mà nó sẽ thực thi. Mã lệnh này có nhiệm vụ thiết lập bộ lắng nghe sự kiện và giao tiếp với kịch bản đã sinh ra nó từ trang chính.

Câu lệnh dưới đây thể hiện một ví dụ đơn giản về cách tạo một đối tượng worker:

var worker = new Worker('demo.js');

Nếu tập tin javascript đã chỉ định tồn tại, thì trình duyệt sẽ sinh ra một luồng worker mới, và được tải xuống không đồng bộ. Còn nếu đường dẫn tới worker trả về lỗi 404 thì worker sẽ được hiểu là không có tác dụng.

Nếu ứng dụng của bạn có nhiều tập tin hỗ trợ javascript thì bạn có thể sử dụng phương thức importScripts() để nhập chúng bằng cách đặt tên các file vào phần đối số của phương thức này và dùng dấu (,) làm phần phân cách. Ví dụ:

importScripts("js1.js", "js2.js");

Một khi web worker được tạo ra thì giao tiếp giữa nó và trang chính sẽ được thực hiện bằng cách sử dụng phương thức postMessage(). Tùy thuộc vào trình duyệt cũng như phiên bản trình duyệt mà phương thức này có thể chấp nhận đối số là một chuỗi hoặc một đối tượng JSON.

Thông điệp thông qua web worker được truy cập bằng cách sử dụng sự kiện onmessage trong trang chính. Bây giờ ta sẽ viết một ví dụ sử dụng web worker, trong đó trang chính là demo.html và nó sẽ sinh ra một web worker để thực hiện vòng lặp và trả về giá trị cuối cùng của biến j.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vòng lặp lớn</title>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
  alert("Đã lặp " + event.data + " lần.");
};
worker.onerror = function (event) {
  console.log(event.message, event);
};
function fhello() {
  alert("Chào bạn ..." );
}
</script>
</head>
<body>
<input type="button" onclick="fhello();" value="Nói xin chào"/>
</body>
</html>

Dưới đây là nội dung của tập tin worker.js. Trong tập tin sử dụng phương thức postMessage() để truyền thông tin trở về trang chính.

for (var a = 0; a <= 1000; a++) {
  var j = a;
}
postMessage(j);

Bây giờ ta đặt hai tập tin demo.html và demo.js trong cùng một thư mục và thử truy cập bằng trình duyệt phiên bản mới nhất.

Ngắt Web Worker

Web Worker không tự ngắt được chính bản thân nó, nhưng trang mà đã kích hoạt nó có thể ngắt được nó bằng phương thức terminate().

worker.terminate();

Nếu đã ngắt Web Worker thì nó sẽ không thể hồi đáp thông điệp cũng như giải quyết bất kỳ hoạt động tính toán nào khác bởi tất cả các tài nguyên của trình duyệt cũng như của máy tính có liên quan sẽ được giải phóng. Ta không thể kích hoạt trở lại được một Web Worker, nhưng thay vào đó ta có thể tạo một đối tượng Web Worker mới bằng cách sử dụng cùng một URL.

Xử lý lỗi

Sau đây là một ví dụ về chức năng xử lý lỗi trong tập tin JavaScript Web Worker trong đó lỗi được đưa ra trình duyệt.

worker.onerror = function (event) {
  console.log(event.message, event);
};

Kiểm tra sự hỗ trợ của trình duyệt

Cú pháp sau đây được dùng để kiểm tra xem trình duyệt có hỗ trợ Web Worker hay không. Một thông báo thích hợp được đưa ra sẽ cho ta biết điều này.

function myFunction() {
  if (Modernizr.webworkers) {
    alert("Xin chúc mừng! Trình duyệt này có hỗ trợ Web Worker.");
  }
  else {
    alert("Trình duyệt này không hỗ trợ Web Worker." );
  }
}

Ví dụ áp dụng Web Worker

Dưới đây là ví dụ hoàn chỉnh áp dụng Web Worker. Tập tin demo.html chứa đoạn mã sau đây:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vòng lặp lớn</title>
<script src="js/modernizr-1.5.min.js"></script>
<script>
var worker = new Worker('demo.js');
worker.onmessage = function (event) {
  alert("Đã lặp " + event.data + " lần.");
};
worker.onerror = function (event) {
  console.log(event.message, event);
};
function fnoiXinChao() {
  alert("Chào bạn ..." );
}
function fCheck() {
  if (Modernizr.webworkers) {
    alert("Xin chúc mừng! Trình duyệt này có hỗ trợ Web Worker.");
  }
  else {
    alert("Trình duyệt này không hỗ trợ Web Worker." );
  }
}
function fNgat(){
   worker.terminate();
}
</script>
</head>
<body>
<input type="button" onclick="fnoiXinChao();" value="Nói xin chào" />
<input type="button" onClick="fCheck();" value="Check support" />
<input type="button" onClick="fNgat();" value="Ngắt Web Worker" />
</body>
</html>

Còn đây là đoạn mã chứa trong tập tin demo.js:

// JavaScript Document
for (var i = 0; i <= 1000000000; i += 1) { //lặp 1 tỷ lần
  var j = i;
}
postMessage(j);

Phương thức postMessage() có nhiệm vụ đưa giá trị chứa trong biến j về trang demo.html và nó được lưu vào biến event.data.

Bạn nên thực thi ví dụ trên trên trình duyệt Firefox hoặc Safari, vì các trình duyệt khác hiện tại còn đang chưa hỗ trợ kỹ thuật Web Worker. Dưới đây là một số hình ảnh minh họa việc thực thi ví dụ trên trình duyệt Firefox.

Trong trường hợp bạn nhấn nút F5 để tải lại trang web thì thông báo "Đã lặp 1000000000 lần" lại xuất hiện sau khoảng vài giây. Nhưng nếu trong quá trình chờ thông báo này xuất hiện lại mà bạn nhấn nút Ngắt Web Worker thì thông báo sẽ không hiện lại nữa.

Nhóm nội dung

Mỗi phần tử đều phải tuân theo quy tắc xác định nhóm nội dung có thể có. Những quy tắc này được nhóm thành các nhóm nội dung phổ biến. Mỗi phần tử HTML có thể không, hoặc thuộc về một hoặc thuộc về nhiều nhóm nội dung, mỗi nhóm nội dung sẽ có những quy tắc theo đó nội dung của phần tử phải phải tuân theo.

Dưới đây sẽ trình bày chi tiết từng nhóm nội dung:

Content_categories

Metadata

Các phần tử thuộc về nhóm này sẽ chỉnh sửa cách thể hiện hoặc hành vi của phần còn lại trang web, thiết lập các liên kết tới các trang web khác, hoặc truyền tải thông tin khác ngoài thông tin chính thống.

Các phần tử thuộc nhóm nội dung Metadata gồm: <base>, <command>, <link>, <meta>, <noscript>, <script>, <style> và <title>.

Flow

Các phần tử thuộc nhóm nội dung này thường chứa văn bản hoặc nội dung được nhúng vào trong các phần tử.

Những phần tử thuộc nhóm nội dung Flow gồm : <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> và text.

Có một số phần tử cũng thuộc về Flow nhưng chỉ khi nó thỏa mãn những điều kiện tương ứng nào đó. Dưới đây là những phần tử này:

· <area>, nếu nó là con của thẻ <map>

· <link>, nếu nó sử dụng thuộc tính itemprop

· <meta>, nếu nó sử dụng thuộc tính itemprop

· <style>, nếu nó sử dụng thuộc tính scoped

Sectioning

Các phần tử thuộc về nhóm nội dung này sẽ tạo một thành phần của toàn bộ cấu trúc hiện thời của trang web để định nghĩa phạm vi của các phần tử <header>, <footer> và nhóm nội dung Heading.

Các phần tử của nhóm nội dung Sectioning gồm: <article>, <aside>, <nav> và <section>.

Heading

Các phần tử thuộc nhóm nội dung này sẽ định nghĩa tiêu đề của một thành phần được đánh dấu tường minh bởi phần tử thuộc nhóm Sectioning content hoặc được định nghĩa ngầm định bởi chính nhóm này.

Các phần tử của nhóm nội dung Heading bao gồm <h1>, <h2>, <h3>, <h4>, <h5>, <h6> và <hgroup>.

Lưu ý: Mặc dù có khả năng chứa một số nội dung tiêu đề, nhưng thẻ <header> lại không thuộc nhóm Heading.

Phrasing

Phrasing định nghĩa văn bản và đánh dấu nơi chứa văn bản đó.

Các phần tử thuộc nhóm này gồm: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> và plain text.

Những thẻ sau đây sẽ thuộc về nhóm Phrasing nếu thỏa mãn điều kiện tương ứng:

· <a>, nếu nó chỉ chứa nội dung phrasing

· <area>, nếu nó là con của thẻ <map>

· <del>, nếu nó chỉ chứa nội dung phrasing

· <ins>, nếu nó chỉ chứa nội dung phrasing

· <link>, nếu nó sử dụng thuộc tính itemprop

· <map>, nếu nó chỉ chứa nội dung phrasing

· <meta>, nếu nó sử dụng thuộc tính itemprop

Embedded

Các phần tử thuộc nhóm này sẽ import tài nguyên khác hoặc chèn nội dung từ ngôn ngữ đánh dấu hay namespace khác vào trang web.

Các phần tử thuộc nhóm nội dung Embedded gồm: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>.

Interactive

Nhóm Interactive bao gồm các phần tử được thiết kế đặc biệt nhằm mục đích tương tác người dùng.

Các phần tử thuộc nhóm nội dung Interactive gồm: <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select> và <textarea>.

Những phần tử dưới đây sẽ thuộc về Interactive nếu thỏa mãn những điều kiện tương ứng:

· <audio>, nếu nó sử dụng thuộc tính controls

· <img>, nếu nó sử dụng thuộc tính usemap

· <input>, nếu nó sử dụng thuộc tính type

· <menu>, nếu nó sử dụng thuộc tính type

· <object>, nếu nó sử dụng thuộc tính usemap

· <video>, nếu nó sử dụng thuộc tính controls

Form

Nhóm nội dung này bao gồm các phần tử con của phần tử <form> (nằm trực tiếp trong <form> hoặc sử dụng thuộc tính form để chỉ định phần tử <form> nó thuộc về).

Các phần tử thuộc nhóm nội dung Form gồm: <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>.

Nhóm nội dung Form được chia thành những nhóm nhỏ như sau:

listed

Bao gồm các phần tử: <button>, <fieldset>, <input>, <keygen>, <object>, <output>, <select> và <textarea>.

labelable

Bao gồm các phần tử kết hợp được với phần tử <label>, <button>, <input>, <keygen>, <meter>, <output>, <progress>, <select> và <textarea>.

submittable

Bao gồm các phần tử mà giá trị của chúng có thể được gửi đi khi submit form dữ liệu: <button>, <input>, <keygen>, <object>, <select> và <textarea>.

resettable

Bao gồm các phần tử mà giá trị của chúng có thể được reset khi reset form dữ liệu: <input>, <keygen>, <output>, <select> và <textarea>.

 

Sectioning root

Phần tử thuộc nhóm nội dung này có thể có cấu trúc của riêng nó, nhưng các thành phần và tiêu đề bên trong nó lại không thể hiện ra ở trình duyệt.

Cùng với <body> là một Sectioning root còn có những phần tử sau có thể đưa nội dung bên ngoài vào trong trang web: <blockquote>, <details>, <fieldset>, <figure> và <td>.

Các thuộc tính Global

Các thuộc tính Global là các thuộc tính chung cho hầu hết các phần tử HTML, chúng có thể được sử dụng trên tất cả các phần tử, mặc dù một vài thuộc tính có thể không có hiệu ứng trên một số phần tử.

Global có thể được xác định trên mọi phần tử HTML ngay cả khi chúng không được xác định theo chuẩn. Điều này có nghĩa rằng bất kỳ phần tử nào không theo chuẩn cũng vẫn phải cho phép những thuộc tính này, mặc dù việc sử dụng những phần tử đó không còn phù hợp với chuẩn HTML5, chẳng hạn như các trình duyệt theo chuẩn HTML5 vẫn sẽ ẩn được nội dung trong thẻ <foo hidden> (sử dụng thuộc tính hidden), cho dù <foo> không còn là một phần tử HTML có giá trị nữa.

Ngoài các thuộc tính cơ bản thì các thuộc tính global còn có thêm những thuộc tính sau:

· Hai thuộc tính xml:lang và xml:base được thừa hưởng các thông số của XHTML, chúng được dùng với mục đích duy trì khả năng tương thích.

· Các thuộc tính bội aria-*, dùng để tăng khả năng truy cập.

· Các thuộc tính bộ xử lý sự kiện: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange  onwaiting.

Mô tả thuộc tính

accesskey

Đưa ra gợi ý nhằm tạo một phím tắt cho phần tử hiện thời. Bạn có thể đưa ra nhiều phím tắt cho phần tử, các phím tắt phân cách nhau bằng ký tự space và trình duyệt sẽ sử dụng phím tắt đầu tiên trong danh sách các phím tắt đó.

class

Đưa ra một danh sách các class cho phần tử. Class sẽ cho phép CSS cũng như JavaScript lựa chọn và truy cập các phần tử xác định thông qua các Bộ chọn class của CSS hoặc các hàm như Document.getElementsByClassName() của JavaScript.

contenteditable

Là một thuộc tính liệt kê dùng để cho phép người dùng sửa phần tử hay không, nếu có thì trình duyệt sẽ thay đổi tiện ích nhằm cho phép sửa phần tử. Phần tử này chỉ mang một trong hai giá trị sau:

· true hoặc chuỗi rỗng (mặc định), cho phép người dùng sửa phần tử;

· false, không cho phép sửa phần tử.

contextmenu

Là một ID của phần tử <menu> được dùng như là một menu ngữ cảnh cho phần tử hiện thời.

data-*

Tạo nên một lớp các thuộc tính gọi là các thuộc tính tùy chỉnh, những thuộc tính này cho phép trao đổi thông tin sở hữu giữa HTML và DOM thông qua các script. Các dữ liệu tùy chỉnh đều sẵn có thông qua interface HTMLElement của phần tử mà thuộc tính được thiết lập, khi đó thuộc tính HTMLElement.dataset sẽ cho phép truy cập chúng.

dir

Là một thuộc tính liệt kê, thuộc tính này chỉ định hướng của văn bản nằm trong phần tử hiện thời. dir có thể có những giá trị sau:

· ltr, nghĩa là left to right, thường áp dụng cho những ngôn ngữ có hướng viết từ trái sang phải (ví dụ như tiếng Việt, tiếng Anh, ...);

· rtl, nghĩa là right to left, thường áp dụng cho những ngôn ngữ có hương viết từ phải sang trái (ví dụ như tiếng Ảrập - Arabic);

· auto, dùng trong trường hợp bạn muốn các tác nhân tham gia vào phần tử hiện thời quyết định hướng; các tác nhân này sẽ sử dụng thuật toán cơ bản để quyết định hướng, cụ thể nó phân tích các ký tự của văn bản trong phần tử để tìm ra được một ký tự có hướng điển hình nhất, từ đó nó sẽ nạp hướng cho toàn bộ văn bản của phần tử.

draggable 

Là một thuộc tính liệt kê, thuộc tính này cho phép hay không phần tử hiện thời có thể được kéo bằng cách sử dụng Drag and Drop API. draggable có thể có những giá trị sau:

· true, cho phép phần tử được kéo

· false, không cho phép kéo phần tử hiện thời.

dropzone 

Là một thuộc tính liệt kê, thuộc tính này dùng để cho phép các những loại nội dung có thể được đưa vào phần tử hiện thời bằng cách sử dụng Drag and Drop API. dropzone có thể có những giá trị sau:

· copy, dùng để copy phần tử được kéo khi tiến hành thả phần tử đó

· move, cho phép phần tử được kéo di chuyển tới vị trí mới.

· link, dùng để tạo liên kết tới dữ liệu được kéo.

hidden

Là một thuộc tính Boolean, dùng để chỉ ra rằng phần tử hiện thời là không có, hoặc không còn, hoặc không còn liên quan, khi đó phần tử sẽ ở trạng thái ẩn so với các phần tử khác. Chẳng hạn như bạn có thể ẩn đi những phần tử của trang web để người dùng không tương tác được, đến khi việc đăng nhập hoàn thành thì mới cho hiện ra. The browser won't render such elements. Lưu ý rằng thuộc tính này không ẩn đi nội dung trong phần tử mà ẩn đi phần tử.

id

Định nghĩa một giá trị nhận diện duy nhất (định danh duy nhất - ID) trong toàn bộ trang web. Mục đích của điều này là để nhận diện phần tử trong các liên kết (sử dụng định danh phân mảnh), trong các kịch bản và trong CSS.

itemid, itemprop, itemref, itemscope  itemtype

Đây là những thuộc tính  có liên quan đến thuộc tính vi dữ liệu WHATWG HTML.

lang

Thuộc tính này tham gia vào việc xác định ngôn ngữ cho phần tử, ngôn ngữ được xác định phải thỏa mãn rằng hoặc những phần tử không thể chỉnh sửa sử dụng được hoặc những phần tử có thể chỉnh sửa nên sử dụng. Những phần tử chứa một giá trị đầu vào duy nhất có định dạng bao gồm những phần tử trong tài liệu IETF Các thẻ dùng để nhận diện ngôn ngữ (BCP47). Lưu ý rằng thuộc tính xml:lang có mức ưu tiên cao hơn thuộc tính lang.

spellcheck 

Là một thuộc tính liệt kê, dùng để xác định xem liệu phần tử có thể được kiểm tra lỗi chính tả hãy không. spellcheck có thể gồm những giá trị sau:

· true, nghĩa là phần tử nên được kiểm tra chính tả;

· false, nghĩa là phần tử không nên được kiểm tra chính tả.

style

Chứa các khai báo định kiểu CSS để nạp cho phần tử hiện thời. Bạn nên đặt CSS trong một hoặc nhiều file có đuôi .css riêng để có thể sử dụng được cho nhiều phần tử. Sử dụng style và phần tử <style> có mục đích chính là định kiểu nhanh (thường áp dụng cho mục đích test hoặc áp dụng riêng biệt cho một phần tử cụ thể hoặc một số phần tử trong một trang cụ thể).

tabindex

Là một thuộc tính kiểu nguyên dùng để thiết lập tiêu điểm bằng phím Tab trên bàn phím cho phần tử. tabindex có thể có những giá trị sau:

· Giá trị âm, có nghĩa là phần tử được đặt tiêu điểm nhưng không truy cập được qua phím Tab;

· Giá trị 0, có nghĩa là phần tử được đặt tiêu điểm có thể được truy cập thông qua phím Tab, nhưng thứ tự tương đối của nó được xác định thông qua các quy ước nền;

· Giá trị dương, có nghĩa là phần tử được đặt tiêu điểm và có thể được truy cập qua phím Tab trên bàn phím, nhưng theo thứ tự từ nhỏ tới lớn, tức là giá trị dương càng nhỏ thì càng có thứ tự ưu tiên cao.

title

Chứa nội dung thể hiện thông tin mang ý nghĩa chú giải hay chú thích cho phần tử hiện thời.

translate

Là một thuộc tính liệt kê, dùng để xác định xem các nội dung của phần tử hiện thời cũng như những nội dung con bên trong có được dịch ra ngôn ngữ bản địa tương ứng không. translate có thể có những giá trị sau:

· Chuỗi rỗng hoặc giá trị "yes", có nghĩa rằng phần tử sẽ được dịch;

· Giá trị "no", có nghĩa rằng phần tử sẽ được dịch.

Khả năng tương thích trình duyệt

Desktop (Máy tính để bàn, Laptop)

Thuộc tính

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

accesskey

(Có)

(Có)

(Có)

(Có)

(Có)

class

(Có)

(Có)

(Có)

(Có)

(Có)

contenteditable

(Có)

3.0 (1.9)

(Có)

(Có)

(Có)

contextmenu

Không hỗ trợ

9 (9)

Không hỗ trợ

Không hỗ trợ

Không hỗ trợ

data-*

(Có)

6 (6)

(Có)

(Có)

(Có)

dir

(Có)

(Có)

(Có)

(Có)

(Có)

draggable

(Có)

2.0 (1.8.1)

(Có)

(Có)

(Có)

dropzone

?

Không hỗ trợ

?

?

?

hidden

(Có)

4.0 (2)

(Có)

(Có)

(Có)

id

(Có)

(Có)

(Có)

(Có)

(Có)

itemid, itemprop, itemref, itemscope, itemtype

?

(Yes)

?

?

?

lang

(Có)

(Có)

(Có)

(Có)

(Có)

spellcheck

(Có)

2.0 (1.8.1)

(Có)

(Có)

(Có)

style

(Có)

(Có)

(Có)

(Có)

(Có)

tabindex

(Có)

(Có)

(Có)

(Có)

(Có)

title

(Có)

(Có)

(Có)

(Có)

(Có)

Mobile (Trên thiết bị di động)

Thuộc tính

Android

Chrome for Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

accesskey

(Có)

(Có)

(Có)

(Có)

(Có)

(Có)

class

(Có)

(Có)

(Có)

(Có)

(Có)

(Có)

contenteditable

(Có)

(Có)

1.0 (1.9)

(Có)

(Có)

?

contextmenu

Không hỗ trợ

Không hỗ trợ

Không hỗ trợ

Không hỗ trợ

Không hỗ trợ

Không hỗ trợ

data-*

(Có)

(Có)

6.0 (6)

(Có)

(Có)

?

dir

(Có)

(Có)

(Có)

(Có)

(Có)

?

draggable

(Có)

(Có)

1.0 (1.8.1)

(Có)

(Có)

?

dropzone

?

?

Không hỗ trợ

?

?

?

hidden

(Có)

(Có)

4.0 (2)

(Có)

(Có)

(Có)

id

(Có)

(Có)

(Có)

(Có)

(Có)

(Có)

itemid, itemprop, itemref, itemscope, itemtype

?

?

(Yes)

?

?

?

lang

(Có)

(Có)

(Có)

(Có)

(Có)

(Có)

spellcheck

(Có)

(Có)

1.0 (1.8.1)

(Có)

(Có)

?

style

(Có)

(Có)

(Có)

(Có)

(Có)

(Có)

tabindex

(Có)

(Có)

(Có)

(Có)

(Có)

(Có)

title

(Có)

(Có)

(Có)

(Có)

(Có)

(Có)

Practical 1

1. Bài thực hành 1:

a. Tạo 2 file: lab1-bai1.html và lab1-test1.html

b. Trong file lab1-bai1.html đặt liên kết đến file lab1-test1.html và ngược lại.

2. Bài thực hành 2:

Tạo 1 file có tên lab1-bai2.html có nội dung như sau:

Internet

Layout

Linear layout

Pathnames

Internet

The Internet is a network of networks. That is, computer networks are linked to other networks, spanning countries. The TCP/IP transfer protocol provides the bindings that connect all these computers the world over.

Layout

A web page is not a printed page. That is, the guidelines that are applied to print may not apply to a web page. Avoid making the reader scan too much of the screen while reading the page. After a while it puts a strain on the eyes, and the reader may lose interest. Text should be contained within a few inches width.

Linear layout

Linear layout follows a linear structure. There is a sequential link between the pages. Each page has a link to the previous and next page. The last page has a link to the first page. This format is used when you are presenting sequential information. For example, chapters of a book or slides of a presentation which require the user to read the information in sequential order.

Pathnames

Absolute pathnames specify the complete path to the file from the root directory. For example, C:\mydirectory\ htmlexamples\Doc2.htm.

Relative pathnames specify the location of the file relative to the location of the current file. For example, if the current directory is mydirectory, then the pathname will be<A HREF= “..\Doc3.htm”>Next page</A>

Tạo liên kết trong đến các chủ đề trong tài liệu.

3. Bài thực hành 3:

  1. Tạo 1 file có tên lab1-bai3.html.
  2. Sử dụng các ký tự đặc biệt để tạo nội dung như sau:

if (A > B)

            A = A – 1;

else if (A < B)

            A = A + 1;

4. Bài thực hành 4:

  1. Tạo 1 file có tên lab1-bai4.html.
  2. Tạo 1 đường link tới email có địa chỉ như sau: support@v1study.com

5. Bài thực hành 5:

  1. Tạo 1 file có tên lab1-bai5.html có nội dung như sau:
  2. Đặt đoạn code sau vào trang lab1-bai5.html rồi thực thi:

<HTML>

<HEAD>

<META http-equiv="Refresh" content="2; url=http://v1study.com">

<TITLE> Using META Element </TITLE>

</HEAD>

<BODY>

<P>This page is refreshed after every 2 seconds

</BODY>

</HTML>

Submit site tới DMOZ

Tổng quan

DMOZ (viết tắt của Directory.MOZilla.org) là thư mục do con người chỉnh sửa lớn nhất, toàn diện nhất của Web. Nó được xây dựng và duy trì bởi một cộng đồng toàn cầu các biên tập viên tình nguyện và  đam mê. Trong quá khứ nó đã được lịch sử gọi là Open Directory Project (ODP).

Internet nói chung và các website nói riêng vẫn đang tăng tưởng với tốc độ đáng kinh ngạc, đến mức độ rất khó kiểm soát về chất lượng cũng như tính toàn diện và hữu ích, và điều này dẫn đến xuất hiện các liên kết tồi tệ xuất hiện len lỏi trong các website.

Thay vì "đương đầu" với sự phát triển bùng nổ như vậy, DMOZ cung cấp các phương tiện cho internet tự tổ chức, cụ thể khi internet phát triển thì xuất hiện tầng lớp gọi là Cư dân mạng hay Công dân mạng, và họ sẽ giúp cho việc trình bày cũng như phân loại các website để từ đó loại bỏ các website tồi và giữ lại những website tốt.

Việc website của bạn được chấp nhận tại DMOZ sẽ góp phần làm cho nó trở nên thân thiện hơn với bộ máy tìm kiếm và đây cũng là một trong những hoạt động SEO quan trọng.

Dưới đây tôi sẽ trình bày các bước để đăng ký một website tới DMOZ:

Bước 1:

Truy cập trang dmoz.org, khi đó giao diện sẽ là như sau:

http://v1study.com/public/images/article/dmoz.png

Ở đây bạn sẽ thấy các lĩnh vực, bạn chọn một lĩnh vực cụ thể, hoặc để đơn giản hơn cho việc lựa chọn bạn chuyển sang Bước 2.

Bước 2:

Vào mục World bằng cách nhấn chọn mục 'World' , trong mục World sẽ liệt kê các ngôn ngữ, trong đó có ngôn ngữ Tiếng Việt như minh hoạ ở hình dưới:

Bạn chọn một ngôn ngữ mong muốn, khi đó bạn sẽ thấy xuất hiện các lĩnh vực như hình dưới đây:

http://v1study.com/public/images/article/dmoz-world-language.png

Bước 3:

Lựa chọn lĩnh vực mà bạn mong muốn. Trong mỗi lĩnh vực sẽ có những lĩnh vực nhỏ hơn (con, cháu) cho bạn chọn. Sau khi đã chọn xong lĩnh vực mong muốn bạn click chọn mục 'suggest URL' như hình dưới đây để chuyển sang phần Submit Site ở Bước 4:

http://v1study.com/public/images/article/dmoz-world-language-reference.png

Bước 4:

Đây là bước cuối cùng; ở bước này bạn sẽ điền các thông tin sau đó nhấn nút Submit phía cuối trang để Submit Site. Tuy vậy, trước tiên bạn nên đọc thật kỹ những chú ý trong mục 'Category' với những ý cơ bản bao gồm:

Tất cả các trang web trong thể loại này phải bằng tiếng Việt.
All web sites in this category must be in Vietnamese.

· Trang web phải có nhiều thông tin hữu ích và hoạt động ổn định. Các website chưa hoàn chỉnh không được chấp nhận. Không chứa các 'link farm'.

· Vui lòng nhập tiếng Việt có dấu, không viết theo kiểu liệt kê keywords hoặc mang tính quảng cáo, mời gọi.

· Tiêu đề: nên ngắn gọn và súc tích - nên là tiêu đề của trang web; không phải là một mô tả, không phải là một loạt các từ khóa.

· Lời giới thiệu: phải đúng với nội dung web, đúng ngữ pháp câu; không lặp lại những cụm từ đã viết trên tiêu đề, hoặc các từ trong tên của 'category'; không kết thúc câu bằng nhiều dấu chấm (..., !, ?), nói chung là chỉ sử dụng đúng một dấu chấm (.) để kết thúc câu.

Nếu bạn đã sẵn sàng bạn sẽ tiến hành điền thông tin vào các mục bên dưới gồm:

URL của site của bạn (nơi điền địa chỉ website):

http://v1study.com/public/images/article/dmoz-site-url.png

Tiêu đề của site:

http://v1study.com/public/images/article/dmoz-title-of-site.png

Mô tả cho site:

http://v1study.com/public/images/article/dmoz-site-description.png

Địa chỉ Email liên hệ của bạn:

http://v1study.com/public/images/article/dmoz-email-address.png

Mã xác nhận:

http://v1study.com/public/images/article/dmoz-user-verification.png

Cuối cùng, bạn hãy đọc kỹ các mục trong phần Submission Agreement rồi nhấn nút lệnh Submit để hoàn tất quy trình submit site của bạn. Một khi đã submit thành công thì sẽ hiện thông báo như sau:

http://v1study.com/public/images/article/dmoz-submission-received.png

Lưu ý: Trong thời gian khoảng từ hai tuần đến một vài tháng bạn sẽ nhận được kết quả. Có thể kết quả là bạn đăng ký thành công hoặc cũng có thể site của bạn không hoặc chưa được chấp nhận tại DMOZ, khi đó bạn cần điều chỉnh lại những nội dung trong site sao cho phù hợp với yêu cầu rồi đăng ký lại.

Practical 2

Bài tập 1:

Tạo 1 file có tên lab2-bai1.html chứa nội dung như sau:

Bài tập 2:

Tạo 1 file có tên lab2-bai2.html chứa nội dung như sau:

Bài tập 3:

Tạo 1 file có tên lab2-bai3.html chứa nội dung như sau:

Chú ý: Web page có tiêu đề trang (title) là: PRICAI 2013

Practical 3

Bài tập 1:

Tạo 1 file có tên lab3-bai1.html chứa nội dung như sau:

Bài tập 2:

Tạo 1 file có tên lab3-bai2.html chứa nội dung như sau:

Bài tập 3:

Tạo 1 file có tên lab3-bai3.html chứa nội dung như sau:

Practical 4

Lưu ý: Đặt toàn bộ nội dung của form (biểu mẫu) ở từng bài tập vào trong phần tử <form>…</form>.

Bài tập 1:

Tạo 1 file có tên lab4-bai1.html chứa nội dung như sau:

Bài tập 2:

Tạo 1 file có tên lab4-bai2.html chứa nội dung như sau:

Bài tập 3:

Tạo 1 file có tên lab4-bai3.html chứa nội dung như sau:

Bài tập 4:

Tạo 1 file có tên lab4-bai4.html chứa nội dung như sau:

Practical 5

Bài tập 1:

Tạo 1 file có tên lab5-bai1.html chứa nội dung như sau:

Yêu cầu:

+ Tiêu đề của trang là : Demo HTML5

+ Phải dùng các thẻ cấu trúc/ngữ nghĩa để thiết kế ; màu nền, kích thước cũng như màu chữ phải dùng CSS để tạo.

Bài tập 2:

Tạo 1 file có tên lab5-bai2.html chứa nội dung như sau:

Yêu cầu:

+ Tiêu đề của trang là: Demo CSS

+ Phải dùng các thẻ cấu trúc/ngữ nghĩa để thiết kế ; màu nền, kích thước cũng như màu chữ phải dùng CSS để tạo.

Practical 6

Bài tập 1:

Tạo 1 file có tên lab6-bai1.html chứa nội dung như sau:

Yêu cầu:

-       Ô bên trái, Ô bên phải: màu nền là màu đen, độ rộng 15%.

-       Màu nền của menu là  ‘#333333’, màu chữ là ‘#FFFF00’, kích thước chữ là 16px.

-       Khi người dùng di chuyển chuột chạm vào mục nào của menu thì màu nền của mục đó chuyển thành màu ‘#666666’, màu chữ của mục đó chuyển thành thành màu ‘green’ và kích thước chữ chuyển thành ‘18px’, còn khi di chuyển chuột ra khỏi thì nền cũng như chữ của mục đó chuyển về trạng thái ban đầu.

Practical 7

Sử dụng HTML và Dreamweaver tạo giao diện như hình dưới đây:

http://v1study.com/public/images/article/hdj-practical3.png

Trong đó:

- Đối với trường Trình độ ngoại ngữ:

+ Mục chọn “Chọn ngoại ngữ” đưa vào những lựa chọn sau:

Tiếng Anh

Tiến Pháp

Tiếng Đức

Tiếng Trung

Tiếng Nhật

Tiếng Hàn

Khác

+ Mục chọn “Chọn trình độ” đưa vào những lựa chọn sau:

Sơ cấp

Trung cấp

Cao cấp

Bản ngữ

- Đối với mục thông tin về Kỹ năng vi tính:

+ Trường Kỹ năng đưa vào những lựa chọn sau:

Phần mềm

Cơ sở dữ liệu

Ngôn ngữ lập trình

Mạng

Hệ điều hành

+ Trường Trình độ đưa vào những lựa chọn sau:

Sơ cấp

Trung cấp

Cao cấp

- Đối với mục thông tin về Kỹ năng “mềm”:

+ Trường Kỹ năng đưa vào những lựa chọn sau:

Kỹ năng Dịch vụ khách hàng

Kỹ năng đàm phán

Kỹ năng thuyết trình

Kỹ năng lãnh đạo

Kỹ năng giao tiếp

Tư duy sáng tạo

+ Trường Trình độ đưa vào những lựa chọn sau:

Sơ cấp

Trung cấp

Cao cấp

- Đối với mục thông tin Kỹ năng khác:

+ Trường Trình độ đưa vào những lựa chọn sau:

Sơ cấp

Trung cấp

Cao cấp

* Khi người sử dụng kích lên nút Clear thì mọi trường sẽ được xóa trắng.

* Các đối tượng Textbox và Textarea mặc định đặt ở chế độ disabled.

* Khi người dùng kích lên nút Save thì thông tin về kỹ năng, trình độ hoặc số năm sử dụng tương ứng sẽ được lưu vào đối tượng Textarea.

* Khi người dùng kích lên nút Next:

· Chỉ khi thông tin tại các trường Kỹ năngTrình độ được chọn thì các Textbox mới chuyển sang chế độ enabled để người dùng nhập liệu.

· Kiểm tra dữ liệu tại các trường Số năm sử dụng (nếu có) của các mục, nếu dữ liệu tại một trong các trường này không phải là số thì đưa ra thông báo: "Vui lòng điền lại thông tin vào mục Số năm sử dụng (nếu có)!".

· Nếu tất cả các thông tin đã hợp lệ thì đưa ra thông báo: "Những thông tin bạn nhập đã hoàn chỉnh, nhấn OK để tiếp tục, xin cảm ơn".

Practical 8

Sử dụng HTML và Dreamweaver tạo giao diện như hình 1 dưới đây:                                            

http://v1study.com/public/images/article/hdj-practical5.png

Trong đó: - Đối với trường Ngày sinh:

+ Mục chọn "Chọn ngày" đưa vào những lựa chọn từ 1 đến 31.

+ Mục chọn "Chọn tháng" đưa vào những lựa chọn từ "Tháng 1" đến "Tháng 12".

+ Đối với mục “Chọn năm”: Khi người dùng kích chuột vào mục này thì dòng chữ mờ trong mục này mất đi, và năm điền vào phải nằm trong khoảng từ 1940 đến 1993.

- Đối với trường Giới tính đưa vào 2 lựa chọn: NamNữ.

- Đối với trường Làm thế nào bạn biết chúng tôi? đưa vào những lựa chọn sau:

Website khác

Báo/Tạp chí

Bạn bè

Công cụ tìm kiếm

Chương trình truyền hình

Khác

* Địa chỉ Email không được phép thiếu ký tự @ và ký tự dấu chấm tại tên miền

* Mật khẩu nhập vào phải chuyển thành ký tự “l” và phải có ít nhất 6 ký tự, nhiều nhất 20 ký tự

* Khi người sử dụng kích chuột vào trường Họ thì dòng chữ mờ trong trường này mất đi

* Khi người dùng kích chuột vào mục “Năm sinh” của trường Ngày sinh thì dòng chữ mờ trong trường này mất đi.

* Khi người sử dụng kích lên nút Điền lại thông tin thì mọi trường sẽ được xóa trắng.

* Khi người dùng kích lên nút Đăng ký:

- Những trường có dấu * không được để trống:

- Nếu trường Email đăng nhập để trống thì đưa ra thông báo: “Vui lòng điền địa chỉ Email!” và focus đến trường này

- Nếu trường Nhập lại Email để trống thì đưa ra thông báo: “Vui lòng điền lại địa chỉ Email!” và focus đến trường này

- Nếu trường Nhập mật khẩu để trống thì đưa ra thông báo: “Vui lòng điền mật khẩu!” và focus đến trường này

- Nếu trường Xác nhận mật khẩu để trống thì đưa ra thông báo: “Vui lòng xác nhận mật khẩu!” và focus đến trường này

- Nếu trường Tên để trống thì đưa ra thông báo: “Vui lòng điền tên của bạn!” và focus đến trường này

- Nếu trường Họ để trống thì đưa ra thông báo: “Vui lòng điền vào Họ và Đệm của bạn!” và focus vào trường này

- Đối với trường Ngày sinh:

  • Nếu mục chọn “Chọn ngày” không được chọn thì đưa ra thông báo: “Vui lòng chọn Ngày sinh!” và focus đến mục này
  • Nếu mục chọn “Chọn tháng” không được chọn thì đưa ra thông báo: “Vui lòng chọn Tháng sinh!” và focus đến mục này
  • Nếu mục “Năm sinh” để trống thì đưa ra thông báo: “Vui lòng điền vào Năm sinh!” và focus đến mục này

- Nếu trường Giới tính không được chọn thì đưa ra thông báo: “Vui lòng chọn Giới tính!” và focus đến trường này

- Nếu trường Quốc gia để trống thì đưa ra thông báo: “Vui lòng điền vào Quốc gia!” và focus đến trường này

- Nếu trường Nơi cư ngụ không được chọn thì đưa ra thông báo: “Vui lòng chọn nơi cư ngụ!” và focus đến trường này

- Nếu trường Tôi đã đọc và đồng ý với Quy định bảo mật và Thỏa thuận sử dụng của Diễn đàn không được chọn thì đưa ra thông báo: “Vui lòng chọn “Tôi đã đọc và đồng ý với Quy định bảo mật và Thỏa thuận sử dụng của Diễn đàn” !” và focus đến trường này.

- Nếu dữ liệu nhập vào trong trường Email đăng nhập không hợp lệ thì đưa ra thông báo: "Địa chỉ Email của bạn không đúng, vui lòng kiểm tra lại!” và select đến trường này.

- Nếu dữ liệu trong các trường Email đăng nhập Nhập lại email không trùng khớp thì đưa ra thông báo: "Vui lòng kiểm tra lại địa chỉ Email!" và select đến trường Nhập lại email

- Nếu dữ liệu nhập vào trong trường Nhập mật khẩu không hợp lệ thì đưa ra thông báo: “Mật khẩu bạn nhập không đúng quy định, vui lòng kiểm tra lại!” và select đến trường này.

- Nếu dữ liệu trong các trường Nhập mật khẩu Xác nhận mật khẩu không trùng khớp thì đưa ra thông báo: “Vui lòng kiểm tra lại mật khẩu!” và select đến trường Xác nhận mật khẩu

- Nếu tất cả các thông tin đã hợp lệ thì đưa ra thông báo: "Những thông tin bạn nhập đã hoàn chỉnh, nhấn OK để tiếp tục, xin cảm ơn".

Practical 9

Bài tập 1:

Tạo 1 file có tên lab9-bai1.html chứa nội dung như sau:

http://v1study.com/public/images/article/hdj-lab9-1.png

Các yêu cầu sau được áp dụng :

  • Tên học viên không được để trắng.
  • Tên học viên chỉ bao gồm các ký tự thông thường, không được chứa các ký tự khác.
  • Số điện thoại không được để trắng. Số điện thoại có dạng: (Local Code) PhoneNumber

Trong đó :

Local Code : có 2 đến 4 chữ số bắt đầu bằng chữ số 0.

Phone Number : có từ 7 đến 9 chữ số

Ví dụ :  (04)5637511 là hợp lệ.

(0241)563751 là hợp lệ.

(234) 5637511 là không hợp lệ.

            045637511 là không hợp lệ.

Nếu thỏa mãn các yêu cầu trên, một hộp thoại thông báo : “Dữ liệu nhập vào là hợp lệ!”

Bài tập 2:

  1. Tạo 1 file có tên lab9-bai2.html.
  2. Viết một đoạn mã Javascript để nhận vào năm sinh với yêu cầu như sau:
  • Nếu người dùng không nhập liệu thì đưa ra thông báo yêu cầu phải nhập.
  • Nếu người dùng nhập dữ liệu không phải là số thì yêu cầu người dùng phải nhập lại.
  • Hãy kiểm tra rằng dữ liệu người dùng điền vào phải nằm trong khoảng từ 1950 đến 1990.
  • Nếu dữ liệu nhập vào đã hợp lệ hãy đưa ra thông báo để người dùng biết.

Bài tập 3:

  1. Tạo 1 file có tên lab9-bai3.html.
  2. Viết một đoạn mã Javascript để nhận vào email với yêu cầu như sau:
  • Nếu người dùng không nhập liệu thì đưa ra thông báo yêu cầu phải nhập.
  • Nếu người dùng nhập dữ liệu không phải là địa chỉ email thì yêu cầu người dùng phải nhập lại (bạn cần xây dựng mẫu email).
  • Nếu dữ liệu nhập vào đã hợp lệ hãy đưa ra thông báo để người dùng biết.

Bài tập 4:

  1. Tạo 1 file có tên lab9-bai4.html.
  2. Viết một đoạn mã Javascript để kiểm tra xem trong hai ô textbox, ô nào có số ký tự lớn hơn. Ví dụ trong hình vẽ sau:

http://v1study.com/public/images/article/hdj-lab9-2.png

Practical 10

EXERCISE 1:

Sử dụng HTML và Dreamweaver tạo giao diện như hình dưới đây:

http://v1study.com/public/images/article/hdj-lab10-1.png

Giao diện tuân thủ đúng yêu cầu như hình trên.

Hai dòng chữ trên cùng có màu xanh (Blue).

Các thao tác sau đây sẽ được thực hiện trên form:

- Khi nhấn vào nút “Xoa”, mọi thông tin người dùng đã nhập trên form sẽ bị xóa.

- Khi nhẫn vào nút “Huy”, một hộp thoại thông báo (MessageBox) sẽ được hiện thị với nội dung : “Bạn đã hủy bỏ việc gửi bản điều tra”. Sau đó, con trỏ sẽ được đặt tại ô (textarea) “Lý do bạn yêu quý nó”.

- Khi người dùng nhấn vào nút “Gui”, các yêu cầu sau đây cần được kiểm tra:

1. Nếu bạn chọn vào ô “CÓ” của con vật nào đó thì bạn bắt buộc phải nhập tên, nếu không nhập tên, một hộp thoại thông báo : “Bạn phải nhập tên con vật minh yêu quý”. Sau đó, con trỏ được đặt tại ô tương ứng để người dùng có thể nhập tên.

2. Bạn phải chọn ít nhất một con vật (CHÓ hoặc MÈO) trong ô lựa chọn CÓ tương ứng.

3. Nếu bạn chọn vào ô “CÓ” của con vật nào đó thì bạn bắt buộc phải chọn màu lông cho con vật đó, nếu không chọn, một hộp thoại thông báo : “Bạn phải chọn màu lông cho con vật yêu quý của bạn”.

4. Khi thông tin đã được nhập đầy đủ, trình duyệt sẽ đưa người dùng sang trang web: "http://v1study.com".

EXERCISE 2:

Viết một đoạn JavaScript trong trang HTML như hình 3 dưới đây. Khi nhấn vào nút “So sánh” chương trình sẽ so sánh độ dài 2 xâu trong hai ô chữ A và B. Nếu ô chữ nào có độ dài lớn hơn thì ô lựa chọn tương ứng sẽ được đánh dấu. Nếu bằng nhau thì ô bằng nhau sẽ được đánh dấu.

http://v1study.com/public/images/article/hdj-lab10-2.png

Xin mời xem đáp án tham khảo tại ĐÂY.

Practical 11

Question 0

Tạo thư mục HDJTEST trong C:\inetpub\wwwroot  folder, sau đó sử dụng DW tạo Site như sau:

http://v1study.com/public/images/article/hdj-practical11-img1.png

Khi làm xong, copy HDJTEST vào trong folder đã được yêu cầu.

Question 1

Tạo một template như dưới đây sử dụng HTML và DW:

http://v1study.com/public/images/article/hdj-practical11-img2.png

Yêu cầu:

- Màu nền của menu trái là green, màu chữ là yellow.

- Khi người dùng di chuột qua menu trái, màu nền của “Ô bên trái” chuyển sang red, nhưng màu nền của “Ô bên phải” không chuyển. Sau đó khi di chuột khỏi thì trả lại màu cũ (green).

- Tại menu trên, chỉ menu Register là Editable region.

Question 2:

Sử dụng template đã tạo trong câu 1 để tạo home.html hay home.htm, phải chắc rằng khi người dùng click vào  menu Register thì register.html hay register.htm được mở (menu Register phải liên kết sang register.html hay register.htm).

Question 3:

Sử dụng template được tạo trong câu 1 để tạo register.html (hay register.htm) như dưới:

http://v1study.com/public/images/article/hdj-practical11-img3.png

Nội dung:

- Phần Security Question:

+ Your Family name

+ Your first teacher name

Yêu cầu:

- Khi người dung click vào nút Clear, tất cả các trường phải được xóa.

- Khi người dung click vào nút Register, kiểm tra dữ liệu theo đinh dạng dưới đây:

+ Khi focus vào ô text thì nền của nó chuyển sang màu yellow, ngược lại chuyển về màu trắng (white).

+ Tất cả các trường có “*” trong nhãn phải được nhập liệu (không trống). Nếu một trong số đó trống một Message Box hiển thị “Your … must be inputted”(… là tên của trường đó).

+ Chiều dài của Password level1 và Password level2 phải lớn hơn 6.

+ Password level1 và Re-enter Password level1 phải giống nhau.

+ Password level1 và Password level2 phải khác nhau.

+ Email phải đúng định dạng: username@domainName (ví dụ: support@v1study.com).

Nếu không có lỗi xảy ra, hiển thị thông báo "You have registered success".

Practical 12

Question 0

Tạo thư mục HDJTEST trong C:\inetpub\wwwroot\, sau đó sử dụng DW tạo Site như sau: 

http://v1study.com/public/images/article/hdj-practical12-img1.png

Question 1

Tạo một template như dưới đây sử dụng HTML và DW:

http://v1study.com/public/images/article/hdj-practical12-img2.png

Yêu cầu:

  • Màu chữ ở Top menu và Left menu là màu có mã “#0000FF”
  • Khi người dùng di chuyển chuột chạm vào mục nào trên Top menu thì mục đó chuyển thành màu có mã “#00FF00”, khi di chuyển ra khỏi thì màu mục đó lại chuyển về mãu cũ
  • Mục HOME và REGISTER phải thiết lập các siêu liên kết, trong đó HOME liên kết tới trang index.html (Question 2), REGISTER liên kết tới trang register.html (Question 3)
  • Khi người dùng di chuyển chuột chạm vào mục nào của Left  menu thì kích thước của mục đó thay đổi thành 20, khi di chuyển chuột rời khỏi mục đó thì kích thước trở về như cũ mặc định là 14 (riêng mục Introduction và Courses không thay đổi)

Question 2:

Sử dụng template đã tạo trong Question 1 để tạo trang index.html hay index.htm. Nội dung của trang như sau:

http://v1study.com/public/images/article/hdj-practical12-img3.png

Question 3:

Sử dụng template được tạo trong Question 1 để tạo trang register.html (hay register.htm) như sau:

http://v1study.com/public/images/article/hdj-practical12-img4.png

Dữ liệu yêu cầu trong List/Menu:

- Birthday: month-date-year

  • Month: 1-12
  • Date: 1-31
  • Year: 1970-năm hiện tại.

- Course:

  • ACCP
  • ACNA
  • ITT
  • English

- Time: phần title phải hiển thị ra được thời gian như hình trên:

  • G: 7h30-9h30
  • H: 9h30-11h30
  • I: 13h30-15h30
  • K: 15h45-17h45
  • L: 17h45-19h45
  • M: 19h45-21h45

Yêu cầu khác:

- Khi người dùng click vào nút Cancel, tất cả các trường phải được xóa

- Khi người dùng click vào nút Register, kiểm tra dữ liệu theo đinh dạng dưới đây:

  • Khi focus vào một trường chứa nội dung thì nền của nó chuyển sang màu yellow, ngược lại chuyển về màu trắng (white)
  • Tất cả các trường có “*” trong nhãn phải được nhập liệu (không trống). Nếu một trong số đó trống thì cần đưa ra một thông báo
  • Last name và First name chỉ được chứa các ký tự a-z, A-Z, các ký tự có dấu và dấu cách (space)
  • Telephone chỉ chứa đúng 10 ký số, trong đó ký số đầu tiên phải là ký số 0
  • Mobile chưa 10-11 ký số, trong đó ký số đầu tiên phải là ký số 0
  • Nếu tất cả các dữ liệu đều hợp lệ thì đưa ra thông báo đăng ký thành công và điều hướng tới trang: http://v1study.com

Practical 13

Câu hỏi 1

Tạo một Form như Hình 1 dưới đây sử dụng HTML và Dreamweaver (tên trang web là login.html):

http://v1study.com/public/images/article/hdj-practical13-img1.png

Hình 1

- Khi người dùng kick vào nút Reset thì tất cả các trường phải được xóa.

- Nếu người dùng đã đăng ký tài khoản thì có thể nhập email và password. Lúc này cần phải kiểm tra email và password theo quy định sau thì mới đăng nhập được:

   + Email address và password phải được nhập.

   + Nếu email address là ‘admin@v1study.vn’ và password là ‘admin123’ thì mở ra trang successfully.html như Hình 3 dưới đây, nếu không thì đưa ra thông báo ‘login fail…’ như Hình 2 dưới đây.

http://v1study.com/public/images/article/hdj-practical13-img2.png

Hình 2

http://v1study.com/public/images/article/hdj-practical13-img3.png

Hình 3

- Nếu người dùng không đăng ký, anh ta có thể kick vào nút Registry để mở trang đăng ký register.html như Hình 4.

Câu hỏi 2

Tạo một form như Hình 4 dưới đây sử dụng HTML và Dreamweaver (tên trang web là register.html):

http://v1study.com/public/images/article/hdj-practical13-img4.png

Hình 4

- Nếu click vào một trường chứa nội dung nào đó thì màu nền sẽ chuyển sang màu pink, còn khi người dùng click khỏi trường đó thì màu nền lại trở về màu cũ.

- Khi người dùng kick vào nút Registry thì cần phải kiểm tra các thông tin sau:

- Tất các trường có dấu (*) phải được điền.

- Trường Họ và đệm, Tên chi chứa các ký tự a-z,A-Z và dấu cách.

- Trường Số điện thoại chỉ chứa các con số.

- Trường Email phải đúng định dạng (Ví dụ: support@v1study.com)

- Password: phải chứa ít nhất 6 ký tự.

- Xác nhận password phải giống Password.

Nếu tất cả các thông tin điền vào hợp lệ theo yêu cầu thì một thông báo như sau sẽ được hiển thị:

http://v1study.com/public/images/article/hdj-practical13-img5.png

Practical 14

Bài 1:

Tạo một biểu mẫu như sau sử dụng DreamWeaver:                                                                 

https://lh3.googleusercontent.com/-jolXpIB2vSE/VaY8OwXK5eI/AAAAAAAAAww/ij5K9iFwS4Q/s595-Ic42/hdj-6-1.png

- Khi người sử dụng click lên nút Reset thì mọi thông tin đã điền sẽ được xóa trắng.

- Khi người sử dụng click lên nút Booking thì những hành động sau sẽ được thực hiện :

  • Mọi trường không được để trống:
    • Nếu trường Customer Name là trống, Message Box sẽ hiện ra : “Please, enter your Name”, con trỏ chuột được focus về trường này.
    • Nếu trường Address bị bỏ trống, Message Box sẽ hiện ra : “Please, enter your Address”, the pointer is focused on this text.
    • If Email is empty, Message Box will display : “Please, enter your email address con trỏ chuột được focus về trường này.
    • Nếu trườngTelephone Number bị bỏ trống, Message Box sẽ hiện ra : “Please, enter your phone number”, con trỏ chuột được focus về trường này.
    • Nếu người sử dụng không chọn ít nhất một ô checkbox, Message Box sẽ hiện ra : “Please, choose at least one magazines”.
  • Số điện thoại cần được điền vào theo mẫu (Ccode)-Acode-Local number
    • CCode (Country Code) có 1 hay 2 số
    • ACode (Area Code) có 1 đến 3 số
    • Local Number có ít nhất là 6 số và nhiều nhất là 9 số.

Ví dụ : (84)-4-8344669

  • Email phải đúng định dạng. (Ví dụ : suport@aptech.vn)                                             

- Nếu tất cả các thông tin đã hợp lệ, một Message Box sẽ thông báo các thông tin sau :        

         Thanks, [title] [Customer Name] is a [Job]

         You are booking : [List of Magazines]

Sau đó form sẽ được submit.

[title] : phụ thuộc giới tính, nếu là nam thì giá trị là Mr, nữ giá trị là Mrs.

[List of Magazines] : phụ thuộc vào danh sách các lựa chọn Magazines.

[Job] : Khi người dùng chọn Other, job sẽ là Reader.

Example : Thanks, Mr Nguyen Van is a teacher

                 You are booking : Bussiness, Football.

Bài 2:

Viết script để đếm số ký tự người sử dụng đã gõ vào trong ô textbox sau đó hiển thị kết quả vào trong các ô radio với kết quả phù hợp, như sau:

https://lh3.googleusercontent.com/-SNHFGjhioV4/VaY8vr1Y6wI/AAAAAAAAAw8/GQSojBulGHI/s396-Ic42/hdj-6-2.png

Practical 15

Bài 1:

Tạo một biểu mẫu như sau sử dụng Dream Weaver MX:

https://lh3.googleusercontent.com/-P1BADgSxGIk/VaotsKfaDTI/AAAAAAAAAzA/nvmydnGf-CI/s580-Ic42/hdj-practical15.png
Hình 1

Viết mã Javascript thực hiện những hành động sau:

* Khi người sử dụng click chuột lên nút  Process thì nếu những trường thông tin sau trong form không được điền vào thì phải thông báo cho người sử dung:

- Trường First name không được phép để trống

- Trường Last name không được phép để trống

- Trường Address không được phép để trống

- Bạn phải chọn ít nhất một magazine

- Nếu tất cả dữ liệu trong form đã điền đúng thì hãy hiện ra thông báo confirm box như ở hình 2. Các tạp chí hiện thị đúng như người sử dụng đã lựa chọn.

- Nếu người sử dụng click vào nút OK thì ô thông báo (xem hình 3) sẽ xuất hiện. Giới tính và địa chỉ cần lấy chính xác giá trị mà người sử dụng đã lựa chọn.

- Nếu người sử dụng chọn vào nút Cancel thì hãy focus con trỏ chuột về trường Last name và người sử dụng có thể thay đổi các lựa chọn của họ.

- Khi người sử dụng click chuột lên nút Reset thì mọi trường trong form được xóa trắng

https://lh3.googleusercontent.com/-XNJb79nkb_Q/VaouQ4zzyNI/AAAAAAAAAzM/7wNADjZb9B0/s500-Ic42/hdj-practical15-h2.png

Hình 2

https://lh3.googleusercontent.com/-OBGcNMxbG38/VaouhhOKJdI/AAAAAAAAAzc/SRkvjON6ALI/s496-Ic42/hdj-practical15-h3.png

Hình 3

Bài 2:

Viết một đoạn mã Javascript để nhận vào năm snh của bạn. Hãy kiểm tra rằng số mà bạn điền vào phải nằm trong khoảng từ 1950 đến 1990. Giao diện được tạo ra bằng DreamWeaver.

Bài 3:

Hãy tạo rat rang html thực hiện việc copy dữ liệu từ ô textbox A sang textbox B với điều kiện chuyển các ký tự A thành ký tự B.

https://lh3.googleusercontent.com/-tDaL9WnIo68/Vaou799wdcI/AAAAAAAAAzo/47WecLZoK0c/s700-Ic42/hdj-practical15-h4.png

Hình 4

Giao diện được tạo ra bằng Dreamweaver.

Practical 16

Tạo một biểu mẫu mua hàng trực tuyến như hình vẽ sau:

https://lh3.googleusercontent.com/-Qa-pxAXT_2s/Va93DBH3CrI/AAAAAAAAA0Y/GfEGyggvwXU/s576-Ic42/hdj-practical-16.png

Hình 1

-Hãy thực hiện việc kiểm tra dữ liệu như sau:

  • Nếu người sử dụng không điền thông tin vào các trường: Họ và tên đệm, Tên, Địa chỉ, Thành phố
  • Số điện thoại phải điền theo mẫu: (034) 344-5555
  • Nếu người sử dụng chưa check vào ô: Chọn vào đây nếu địa chỉ của bạn khác với địa chỉ đã điền trong email thì ô text bên dưới sẽ bị mờ đi. Khi người sử dụng check vào thì sẽ hiện ra ô bên dưới cho phép đưa địa chỉ vào.
  • Khi người sử dụng nhấn chuột vào ô điền địa chỉ thì dòng chữ: Hãy điền địa chỉ giao hàng vào đây nếu khác trên sẽ tự động được xóa đi.
  • Kiểm tra thời gian hết hiệu lực (01/99)

- Sau khi các dữ liệu đã được điền đúng. Nếu người sử dụng nhấn vào nút Đồng ý thì mở một cửa sổ mới với các thông tin điền vào như Hình 2.

https://lh3.googleusercontent.com/-2gWq2NaOWrY/Va93Zqzt8WI/AAAAAAAAA0k/woFkkvVKUOI/s464-Ic42/hdj-practical-16-1.png

Hình 2

  • Nếu người sử dụng nhấn Cancel thì chuyển lại form mua hàng với yêu cầu focus vào ô Họ và tên đệm.
  • Nếu người sử dụng nhấn OK thì ô thông báo như hình 3 hiện ra.

https://lh3.googleusercontent.com/-rPAjjgzF450/Va93p-dOWvI/AAAAAAAAA0w/Ps8CdupJjrc/s345-Ic42/hdj-practical-16-2.png

Hình 3

Practical 17

Question 0:

Create a folder called 'HTML5CSS3' in folder C:\inetpub\wwwroot\, then use Adobe Dreamweaver CS6 create a Site as below:

https://lh3.googleusercontent.com/-qIAIAj889m8/VbyluddceqI/AAAAAAAAAFw/rQGuRxWDpns/s307-Ic42/hdj-practical-17-1.png

Question 1:

Design a Template as  following:

https://lh3.googleusercontent.com/-PSzbGySXEzE/VbyluarIbGI/AAAAAAAAAF0/-Ph3b58_hEg/s594-Ic42/hdj-practical-17-2.png

The requirements:

  1. The entire width of the template is '80% 'and the template should be placed at the center of the browser. 
  2. You may only use the structure/semantics element of the HTML5 standard to design template without <div> and <table> element, otherwise this section will not be scored.
  3. You must set the Editable Region for the Article.
  4. The border color and text color in all the blocks are 'green'.
  5. At the menu background color is '# CFF'.
  6. Setting up a link to home.html page for the 'Home' item and link to register.html for the 'Register' item.
  7. As you move your mouse touch the menu item, the background color of the item changed to '# CF9' and text color converted into 'blue', while moving the mouse leaves the item background color and text color to transfer the original color. Note that you must set this effect using CSS, then this section were counted.

Question 2:

You just load the template created in Question 1 for home.html page, then create content for page as following:

https://lh3.googleusercontent.com/-plpJMtigQ6c/Vbyml9TPSXI/AAAAAAAAAGI/FfARqTuSFFs/s823-Ic42/hdj-practical-17-3.png

The requirements:

If the user does not click on the 'click here', the page will automatically switch to register.html page after 5 seconds.

If users click on the 'click here' will turn the page register.html.

Question 3:

You just load the template created in Question 1 for register.html page, then create a form in page with content as below:                                                                           

https://lh3.googleusercontent.com/-8he79WkJrsU/Vbym5UCnY0I/AAAAAAAAAGU/Y7qEIO74ujY/s821-Ic42/hdj-practical-17-4.png

The requirements:

1. Students may only use the structure/semantics element to design Form.

2. When users click on the button 'Redo', all fields must be cleared.

3. When users click on the button 'Sign Up', the data need to be checked according to the following requirements:

  1. All fields marked '*' must be filled or selected data.
  2. When users focus on any field except the 'Gender', the color of the background which turns '# FF9', in contrast to the background color will turn the old.
  3. Length of 'Password' must be between 6 and 20 characters.
  4. 'Confirm Password' to like 'Password'.
  5. 'Phone' only include numbers from 10 to 11 and the first number is 0.
  6. Email to properly format: nick@domainname (for example: support@v1study.com).
  7. Facebook is a valid url.
  8. If the data on all the fields had to meet the requirements put out the message: "Congratulations on becoming a member of the website.".

Cách sử dụng AUDIO và VIDEO

HTML5 giới thiệu tính năng hỗ trợ các thiết bị media thông qua các phần tử <audio> và <video>, các phần tử này có thể dễ dàng nhúng các media vào các trang web.

Nhúng media

Việc nhúng media vào các trang web của bạn giờ đây đã trở nên quá dễ dàng, bạn chỉ cần làm như sau:

<video src="URL" controls>
Trình duyệt của bạn không hỗ trợ phần tử <code>video</code>.
</video>
 

Ví dụ trên phát một video mẫu từ website Theora, trong đó có hiển thị thêm thanh điều khiển cho phép bạn phát lại video.

Còn đây là ví dụ nhúng audio vào trang web của bạn:

<audio src="URL/audio.ogg" controls autoplay loop>
Trình duyệt của bạn không hỗ trợ phần tử <code>audio</code>
</audio>

, trong đó, thuộc tính src có thể là một URL file audio hoặc đường dẫn tới file audio trên máy tính của bạn.

Ví dụ trên thể hiện thêm các thuộc tính của phần tử <audio>, trong đó:

· controls : Hiển thị thanh điều khiển chuẩn dành cho audio trên trang web.

· autoplay : Thực hiện việc phát audio tự động.

· loop : Thực hiện việc lặp lại audio một cách tự động.

<audio src="audio.mp3" preload="auto" controls></audio>

Thuộc tính preload dùng để cho phép đệm những file có kích thước lớn. Nó gồm 3 giá trị sau đây:

· "none" : không đệm file

· "auto" : đệm file media

· "metadata" : chỉ đệm file metadata

Trong trường hợp có nhiều file nguồn audio ta có thể sử dụng các phần tử <source> để cung cấp video hoặc audio được mã hoá với các định dạng khác khau nhằm mục đích áp dụng cho các trình duyệt khác nhau. Ví dụ:

<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
</video>

Ví dụ trên sẽ hiển thị file Ogg trong trình duyệt hỗ trợ định dạng Ogg. Nếu trình duyệt không hỗ trợ định dạng Ogg thì trình duyệt có thể sử dụng file MPEG-4 thông qua thẻ <source> ở dưới.

Bạn cũng có thể chỉ định dạng mã hóa của file media được yêu cầu bằng cách sử dụng thuộc tính codecs, điều này sẽ giúp trình duyệt đưa ra được những quyết định thông minh hơn khi chọn file media. Ví dụ:

<video controls>
<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
</video>

Ví dụ trên đưa ra hai dạng mã hóa của video là Dirac và Speex. Nếu trình duyệt có hỗ trợ Ogg (file .ogg được chỉ định ở phần tử <source>) nhưng không phải là dạng mã hóa quy định thì video cũng sẽ không được nạp.

Trong trường hợp bạn không sử dụng thuộc tính type cho phần tử <source> thì kiểu của media sẽ được lấy từ server và trình duyệt sẽ kiểm tra xem có thể xử lý được nó hay không, nếu không xử lý được thì sẽ chuyển sang phần tử <source> tiếp theo để kiểm tra. Nếu không thể sử dụng được dữ liệu ở bất kỳ phần tử <source> nào thì sự kiện error sẽ được gửi tới phần tử <video>.

Còn trong trường hợp có sử dụng thuộc tính type thì nó sẽ được so sánh với các kiểu MIME mà trình duyệt có thể phát, và nếu nó không được nhận dạng thì server thậm chí còn không được truy vấn mà thay vào đó phần tử <source> tiếp theo được kiểm tra.

Điều khiển việc phát lại media

Mỗi khi bạn nhúng media vào trang web sử dụng các phần tử mới, bạn có thể lập trình để điều khiển chúng bằng code JavaScript. Ví dụ, để tiến hành phát lại media bạn có thể lập trình như sau:

var v = document.getElementsByTagName("video")[0];
v.play();

Dòng đầu tiên sẽ có nhiệm vụ lấy video đầu tiên trong trang web, dòng thứ 2 sẽ gọi phương thức play() của phần tử.

Việc điều khiển một thiết bị nghe nhạc có thể phát, tạm ngưng, tăng/giảm âm lượng sử dụng JavaScript giờ đây đã trở nên đơn giản hơn nhiều. Bạn có thể xem ví dụ dưới đây:

<audio id="demo" src="audio.mp3"></audio>
<div>
<button onclick="document.getElementById('demo').play()">Play the Audio</button>
<button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>

Dừng download media

Bạn có thể tiến hành lập trình tạm dừng việc phát lại media đơn giản chỉ bằng phương thức pause(), tuy nhiên trình duyệt vẫn download media cho tới khi phần tử media được huỷ bởi bộ dọn rác (garbage collection).

Dưới đây là đoạn code cho phép bạn tiến hành dừng việc download đồng thời với việc thực hiện hàm pause():

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//Hoặc:
mediaElement.removeAttribute("src");

Bằng cách huỷ thuộc tính src hoặc thiết lập về trạng thái rỗng (chuỗi rỗng) bạn có thể huỷ bộ giải mã bên trong phần tử dẫn đến việc dừng download.

Tìm kiếm qua media

Các phần tử media cung cấp việc hỗ trợ di chuyển vị trí phát lại hiện tại tới các điểm xác định trong nội dung của media. Điều này được thực hiện bằng cách  thiết lập giá trị cho thuộc tính currentTime (đơn vị là giây-second) của phần tử media.

Bạn có thể sử dụng thuộc tính seekable của phần tử để xác định dải tìm kiếm, khi đó chương trình sẽ trả về một đối tượng TimeRanges trong đó liệt kê các dải thời gian mà bạn có thể tìm kiếm. Ví dụ:

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // Trả về thời gian bắt đầu (trong vài giây)
mediaElement.seekable.end(); // Trả về thời gian kết thúc (trong vài giây)
mediaElement.currentTime = 122; // Tìm trong 122 giáy
mediaElement.played.end(); // Trả lại khoảng thời gian mà trình duyệt đã phát

Quy định phạm vi phát lại

Khi xác định URI của media cho một phần tử <audio> hay <video> thì bạn có thể tùy chọn bổ sung thêm thông tin nhằm xác định cho được phần media để để tiến hành phát. Bạn có thể thực hiện điều này bằng cách đặt thêm dải thời gian vào sau URI của file media. Dải thời gian được tạo theo cú pháp sau đây:

#t=[starttime][,endtime]

, trong đó, thời gian có thể là một số thực hoặc tuân theo định dạng hh:mm:ss. Ví dụ:

http://v1study.com/video.ogg#t=10,20 : Có nghĩa rằng video sẽ được phát ở giây thứ 10 và kết thúc ở giây thứ 20.

#t=,10.5 : Có nghĩa rằng video sẽ được phát trong khoảng từ 0 đến 10.5 giây.

#t=,02:00:00 : Có nghĩa rằng video sẽ được phát trong khoảng từ 0 đến 2 giờ.

#t=60 : Có nghĩa rằng video sẽ được phát ở giây thứ 60 cho đến khi kết thúc.

Các tùy chọn dự phòng

Bạn có thể đặt vào giữa thẻ mở và thẻ đóng của các phần tử media những tuỳ chọn dự phòng nhằm mục đích thay thế cho chính các phần tử media trong trường hợp trình duyệt không hỗ trợ các phần tử media đó.

Phần này sẽ cung cấp một số tuỳ chọn dự phòng cho phần tử <video>. Trong mỗi trường hợp nếu trình duyệt không hỗ trợ phần tử <video> thì tuỳ chọn dự phòng sẽ được sử dụng.

Sử dụng Flash

Bạn có thể sử dụng Flash để phát những đoạn video có định dạng flash (.swf, .flv, ...) bằng cách như thể hiện ở ví dụ dưới đây:

<video src="video.ogv" controls>
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>

Lưu ý rằng bạn không nên tích hợp classid trong thẻ <object> nhằm mục đích tạo tương thích với các trình duyệt khác ngoài trình duyệt Internet Explorer.

Phát các video Ogg sử dụng Java Applet

Bạn có thể sử dụng Java Applet Cortado làm dự phòng để phát các video OGG trong các trình duyệt có hỗ trợ Java nhưng không hỗ trợ phần tử <video>. Ví dụ:

<video src="my_ogg_video.ogg" controls width="320" height="240">
<object type="application/x-java-applet" width="320" height="240">
<param name="archive" value="cortado.jar">
<param name="code" value="com.fluendo.player.Cortado.class">
<param name="url" value="my_ogg_video.ogg">
<p>You need to install Java to play this file.</p>
</object>
</video>

Nếu video không được phát thì phần thông báo trong thẻ <p> (nằm trong phần tử <object>) sẽ được hiển thị, thông báo này giúp người dùng hiểu được lý do tại sao video không được phát để tiến hành khắc phục cho đúng.

Xử lý lỗi

Bắt đầu từ bản Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), việc xử lý lỗi đã được sửa lại để phù hợp với phiên bản HTML5 mới nhất. Theo đó, thay vì phần tử media gửi sự kiện error tới chính nó thì giờ đây sự kiện error được gửi tới phần tử <source> phát sinh lỗi, từ đó phát hiện ra nguồn media nào không được nạp. Xét ví dụ sau:

<video>
<source id="mp4_src" src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
<source id="3gp_src" src="video.3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'></source>
<source id="ogg_src" src="video.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
</video>

Vì Firefox không hỗ trợ MP4 và 3GP (do liên quan đến bản quyền), nên các phần tử <source> với các ID là "mp4_src" và "3gp_src" sẽ nhận được các sự kiện error trước khi tài nguyên Ogg được nạp. Các phần tử <source> sẽ lần lượt được lấy nguồn media theo thứ tự xuất hiện, nếu một nguồn media nào đó được lấy thì các phần tử <source> còn lại sẽ lập tức được cho dừng hoạt động lấy nguồn media.

Phát hiện khi không có nguồn nào được nạp

Để phát hiện điều này thì cần phải kiểm tra giá trị của thuộc tính networkState của phần tử media, nếu giá trị là NETWORK_NO_SOURCE thì chắc chắn rằng không có nguồn nào được nạp cả.

Nếu lúc đó ta thêm một nguồn media khác bằng cách thêm một phần tử <source> nữa thì trình duyệt sẽ cố gắng nạp nguồn media này.

Hiển thị nội dung dự phòng khi không có nguồn nào được giải mã

Có một cách khác để hiển thị nội dung dự phòng của video khi không nguồn nào được giải mã trong trình duyệt hiện thời, đó là thêm bộ xử lý lỗi vào phần tử <source> cuối cùng. Ví dụ:

<video controls>
<source src="dynamicsearch.mp4" type="video/mp4"></source>
<a href="dynamicsearch.mp4">
<img src="nguồn_ảnh" alt="Tìm kiếm ứng dụng động trong Firefox OS">
</a>
<p>Nhấp vào ảnh để mở video demo về tìm kiếm ứng dụng động.</p>
</video>
<script>
function fdemo() {
  var v = document.querySelector('video'),
  sources = v.querySelectorAll('source'),
  lastsource = sources[sources.length-1];
  lastsource.addEventListener('error', function(ev) {
    var d = document.createElement('div');
    d.innerHTML = v.innerHTML;
    v.parentNode.replaceChild(d, v);
  }, false);
}
fdemo();
</script>

Practical 18

Sử dụng HTML và Dreamweaver tạo giao diện như hình dưới đây:

http://v1study.com/public/images/article/hdj-practical5.png

Trong đó:

- Đối với trường Ngày sinh:

+ Mục chọn "Chọn ngày" đưa vào những lựa chọn từ 1 đến 31.

+ Mục chọn "Chọn tháng" đưa vào những lựa chọn từ "Tháng 1" đến "Tháng 12".

+ Đối với mục "Chọn năm": Khi người dùng kích chuột vào mục này thì dòng chữ mờ trong mục này mất đi, và năm điền vào phải nằm trong khoảng từ 1940 đến 2000.

- Đối với trường Giới tính đưa vào hai lựa chọn: Nam và Nữ.

- Đối với trường Làm thế nào bạn biết chúng tôi? đưa vào những lựa chọn sau:

  • Website khác
  • Báo/Tạp chí
  • Bàn bè
  • Công cụ tìm kiếm
  • Chương trình truyền hình
  • Khác.

* Địa chỉ Email không được phép thiếu ký tự @ và ký tự dấu chấm tại tên miền.

* Mật khẩu nhập vào phải chuyển thành ký tự "|" và phải có ít nhất 6 ký tự, nhiều nhất 20 ký tự.

* Khi người sử dụng kích chuột vào trường Họ thì dòng chữ mờ trong trường này mất đi.

* Khi kích vào mục "Năm sinh" của trường Ngày sinh thì dòng chữ mờ trong trường này mất đi.

* Khi người sử dụng kích nút Điền lại thông tin thì mọi trường sẽ được xóa trắng.

* Nếu kích nút Đăng ký:

- Tất cả những trường có dấu * đều không được để trống. Nếu trường nào trống thì hãy đưa ra một hộp thoại thích hợp để nhắc người dùng.

- Đối với trường Ngày sinh: Bắt buộc phải chọn cũng như điền cả ngày, tháng và năm sinh.

- Nếu dữ liệu nhập vào trong trường Email đăng nhập không hợp lệ thì đưa ra thông báo: "Địa chỉ Email của bạn không đúng, vui lòng kiểm tra lại!" và select trường này.

- Nếu Email đăng nhập và Nhập lại email không trùng khớp thì đưa ra thông báo: "Vui lòng kiểm tra lại địa chỉ Email!" và select nó.

- Nếu dữ liệu tại trường Nhập mật khẩu không hợp lệ thì đưa ra thông báo: "Mật khẩu bạn nhập không đúng quy định, vui lòng kiểm tra lại!" và select trường này.

- Nếu Nhập mật khẩu và Xác nhận mật khẩu không trùng khớp thì đưa ra thông báo: "Vui lòng kiểm tra lại mật khẩu!" và bôi đen trường Xác nhận mật khẩu.

- Nếu tất cả các thông tin đã hợp lệ thì đưa ra thông báo: "Những thông tin bạn nhập đã hoàn chỉnh, nhấn OK để tiếp tục, xin cảm ơn".

Test Theory

Bài tập lớn HDJ

Mục đích

Bài tập lớn này là nhằm mục đích củng cố phần kiến thức thiết kế giao diện cho trang web, đồng thời cũng là một bước làm quen với Project của module sắp tới.

Yêu cầu

+ Mỗi Sinh viên thiết kế một WebSite có dạng website thương mại điện tử, trong đó các bạn chỉ  dùng các thẻ cấu trúc/ngữ nghĩa kết hợp với phần CSS để thiết kế giao diện (Layout), tuyệt đối không được dùng thẻ <TABLE> và những thẻ con của thẻ này và thẻ <DIV>.

+ WebSite phải được thiết kế theo phương pháp template.

+ Mỗi WebSite bao gồm các trang sau:

  • Trang chủ: đặt tên là index.html. Trang này có thể chứa một trong các thông tin như: sản phẩm bán chạy nhất, sản phẩm được xem nhiều nhất, sản phẩm có giá cao nhất, … Trang này chứa ít nhất 06 sản phẩm, mỗi sản phẩm có các thông tin cơ bản gồm: ảnh sản phẩm, tên sản phẩm, giá sản phẩm, xem chi tiết sản phẩm (nhấn vào ảnh sẽ hiển thị trang xem thông tin chi tiết về sản phẩm đó).

  • Bên trái (phần Left) của trang chứa Menu về các hãng sản xuất, có ít nhất 06 hãng sản xuất. Khi nhấn chọn một hãng nào đó thì sẽ link đến trang chứa sản phẩm của hãng đó. Mỗi hãng phải chứa ít nhất 06 sản phẩm, mỗi sản phẩm cũng chứa những thông tin cơ bản như trên.

  • Trang xem chi tiết sản phẩm : đặt tên là chitietsanpham_<Tên sản phẩm>.html. Khi click vào link xem chi tiết sản phẩm ở trang index.html hoặc ở trang sản phẩm theo hãng thì sẽ liên kết đến trang này. Như vậy có bao nhiêu sản phẩm ở trang index.html và ở các hãng sẽ có bấy nhiêu trang chitietsanpham_<Tên sản phẩm>.html.

  • Trang đăng ký tài khoản, yêu cầu check form chi tiết.

  • Trang đăng nhập.

Gợi ý

Sinh viên có thể tham khảo các website thương mại điện tử trên mạng để thiết kế.

Thời gian làm bài tập lớn

02 tuần tính từ ngày giao bài tập lớn.

Lời tựa

Flash là một công nghệ rất hiệu quả, phổ biến và cho phép lập trình viên có thể tạo ra những ứng dụng với đầy đủ các hiệu ứng hình ảnh, âm thanh đặc sắc. Những công nghệ tương tự như Java Applet hay một “đứa con” sáng giá của Microsoft là Silverlight cũng không thể đứng vững và cạnh tranh được với Flash. Nhưng một vấn đề nảy sinh ở đây là khả năng tương tác giữa các công nghệ này với các thành phần xung quanh nó (như các thẻ HTML) dường như không thể. Chúng bị cô lập và hoạt động độc lập với thế giới bên ngoài.

Giải pháp là quay trở lại sử dụng thuần HTML, Javascript và CSS, lập trình viên vẫn có thể tạo được ra ứng dụng với hiệu ứng đặc biệt và không bị các giới hạn mà những công nghệ trên gặp phải. Nhưng trở ngại lớn nhất là không có đủ API để tạo ra được những ứng dụng tương tự như trên Flash. Và tốc độ của các ứng dụng thuần HTML khá chậm, hầu như không thể chấp nhận được với một game có yêu cầu cấu hình trung bình.

Nhưng với sự ra đời của HTML5 cùng với các thành phần và API mới, giới hạn trên đã bị phá bỏ và đang từng bước thay thế dần các công nghệ như Flash. Với các ứng dụng cần những hiệu ứng đồ họa và chuyển động đặc biệt, lập trình viên có thể sử dụng Canvas với kiểu bitmap hoặc SVG với kiểu vector. Không chỉ áp dụng cho việc thiết kế các trang web trực quan, HTML5 còn được áp dụng để tạo ra các thư viện đồ họa giúp tạo ra các ứng dụng đồ thị, game trong cả môi trường 2D và 3D như những ứng dụng trên desktop.

Một điều đáng mừng nữa là HTML, Javascript và CSS không còn bị giới hạn trên trình duyệt mà có thể được triển khai trên desktop dưới dạng các widget, trên các thiết bị di động và có thể bất kì thiết bị nào. Như vậy, lập trình viên không cần sử dụng hay yêu cầu người dùng cài đặt bất kì thư viện nào để có thể chạy được các ứng dụng của họ. Một lợi thế rất lớn mà chỉ có HTML mới có thể đạt được. Tuy nhiên việc xây dựng game trên trình duyệt có thể là một trải nghiệm khó khăn vì phải cân nhắc giữa việc chọn lựa giữa các thư viện hiện đại, đầy đủ chức năng hay làm theo các API cấp thấp của HTML (thông qua Javascript).

Giới thiệu

HTML5 được hỗ trợ hầu trên tất cả trình duyệt. Nó là một tập hợp các tính năng đặc biệt. nhưng ta có thể tìm thấy hỗ trợ cho một số phần đặc trưng như canvas, video hoặc định vị địa lý. Những đặc điểm kỹ thuật HTML5 cũng xác định làm thế nào những dấu ngoặc nhọn tương tác với JavaScrip, thông qua các tài liệu thông qua các tài liệu Object Model (DOM) HTML5 không chỉ xác định một tag <video>, đó cũng là một DOM API tương ứng cho các đối tượng video trong DOM. Bạn có thể sử dụng API này để tìm kiếm hỗ trợ cho các định dạng video khác nhau, nghe nhạc, tạm dừng một đoạn video, mute audio , theo dõi bao nhiêu video đã được tải về, và mọi thứ khác bạn cần phải xây dựng một trải nghiệm người dùng phong phú xung quanh tag <video> .

Không cần phải vứt bỏ bất kì thứ gì

Ta không thể phủ nhận rằng HTML 4 là các định dạng đánh dấu thành công nhất từ trước đến nay. HTML5 được xây dựng dựa trên thành công đó. Bạn không cần phải bỏ những đánh dấu hiện có. Bạn không cần phải học lại những điều bạn đã biết. Nếu ứng dụng web của bạn trước đây sử dụng HTML 4, nó vẫn sẽ hoạt động trong HTML5. 

Bây giờ, nếu bạn muốn cải thiện các ứng dụng web, bạn đã đến đúng nơi. Ví dụ cụ thể: HTML5 hỗ trợ tất cả các hình thức kiểm soát từ HTML 4, nhưng nó cũng bao gồm điều khiển đầu vào mới. Một số trong số này là quá hạn bổ sung như các thanh trượt và date pickkers, những thành phần khác tinh tế hơn.

Ví dụ, các loại email input trông giống như một textbox, nhưng các trình duyệt linh động sẽ tùy biến bàn phím trên màn hình của họ để có thể dễ dàng hơn khi nhập địa chỉ email. Các trình duyệt cũ không hỗ trợ các loại email input sẽ xem nó như là một văn bản thông thường, và hình thức vẫn làm việc không có thay đổi đánh dấu hoặc kịch bản hack. Điều này có nghĩa là bạn có thể bắt đầu cải thiện các hình thức web của bạn ngày hôm nay, ngay cả khi một số khách truy cập vào web của bạn.

Rất dễ dàng để bắt đầu

"Nâng cấp" lên HTML5 có thể đơn giản chỉ bằng việc thay đổi thẻ DOCTYPE của bạn. DOCTYPE cần phải nằm trong dòng đầu tiên của tất cả các trang HTML. Các phiên bản trước của HTML được định nghĩa rất nhiều loại doctype, và lựa chọn một doctype đúng rất rắc rối. Trong HTML5 chỉ có một DOCTYPE:

<!DOCTYPE html>

Nâng cấp lên DOCTYPE HTML5 sẽ không phá vỡ cấu trúc tài liệu của bạn, bởi vì các thẻ lỗi thời trước đây được định nghĩa trong HTML 4 vẫn được vẽ ra trong HTML5. Nhưng nó cho phép bạn sử dụng và xác nhận các thẻ mới như <article> <section> , <header> , và <footer>...

Web Storage (DOM Storage)

HTML5 bổ sung rất nhiều API mới mà lập trình viên có thể sử dụng để hỗ trợ cho các ứng dụng game của mình. Ví dụ như lưu lại dữ liệu với Web Storage, Web Sql, Indexed DB, thực hiện công việc song song với Web Worker, giao tiếp với server thông qua Web Socket. Do thời lượng có lượng, tôi chỉ trình bày một phần nhỏ trong số này.

HTML5 cung cấp một tính năng lưu trữ dữ liệu tại client với dung lượng giới hạn lớn hơn nhiều so với cookie. Tính năng này được gọi là Web Storage và được chia thành hai đối tượng là localStorage và sessionStorage. Bài viết này sẽ giúp bạn nắm được các kiến thức đầy đủ về sử dụng hai đối tượng này trong việc lập trình web.

Giới thiệu

Hiện nay, mỗi cookie chỉ cho phép lưu trữ tối đa 4KB và vài chục cookie cho một domain. Vì thế cookie chỉ được dùng để lưu trữ những thông tin đơn giản và ngắn gọn như email, username, ... giúp người dùng đăng nhập tự động vào trang web. Điều này khiến cho những trang web muốn nâng cao hiệu suất làm việc bằng cách cache dữ liệu tại client hầu như không thể thực hiện được.

Sự xuất hiện của Web Storage là một điểm nhấn cho việc ra đời các ứng dụng web có khả năng tương tác và nạp dữ liệu tức thì trên trình duyệt. Một hiệu quả nữa là dung lương truyền tải qua mạng có thể được giảm thiểu đáng kể. Ví dụ một ứng dụng tra cứu sách trực tuyến, các sách đã được tra sẽ được lưu lại trên máy của người dùng. Khi cần tra lại, máy người dùng sẽ không cần kết nối đến server để tải lại những dữ liệu cũ.

Với những ứng dụng web có cơ sở dữ liệu nhỏ gọn, lập trình viên có thể thực hiện việc cache “âm thầm” cơ sở dữ liệu xuống client và sau đó người dùng có thể thoải mái tra cứu mà không cần request đến server.

Interface Storage

interface Storage {

readonly attribute unsigned long length;

DOMString? key(unsigned long index);

getter DOMString getItem(DOMString key);

setter creator void setItem(DOMString key, DOMString value);

deleter void removeItem(DOMString key);

void clear();

};

Như bạn thấy, các dữ liệu lưu trữ trong Storage chỉ là kiểu chuỗi, với các loại dữ liệu khác số nguyên, số thực, bool, ... bạn cần phải thực hiện chuyển đối kiểu. Mỗi đối tượng Storage là một danh sách các cặp key/value, đối tượng này bao gồm các thuộc tính và phương thức:

- length: số lượng cặp key/value có trong đối tượng.

- key(n): trả về tên của key thứ n trong danh sách.

- getItem(key): trả về value được gắn với key.

- setItem(key,value): thêm hoặc gán một cặp key/value vào danh sách.

- removeItem(key): xóa cặp key/value khỏi danh sách.

- clear: xóa toàn bộ dữ liệu trong danh sách.

Bên cạnh đó, đối tượng Storage còn có thể được truy xuất qua các thuộc tính là các key trong danh sách.

Ví dụ:

localStorage.abc="123";

// equivalent to:

// localStorage.setItem("abc","123");

Local Storage và Session Storage

Hai đối tượng này là được tạo ra từ interface Storage, bạn sử dụng hai đối tượng này trong javascript qua hai biến được tạo sẵn là window.localStorage và window.sessionStorage. Hai lợi ích mà chúng mang lại là:

- Dễ sử dụng: bạn có thể truy xuất dữ liệu của hai đối tượng này thông qua các thuộc tính hoặc các phương thức. Dữ liệu được lưu trữ theo từng cặp key/value và không cần bất kì công việc khởi tạo hay chuẩn bị nào.

- Dung lượng lưu trữ lớn: Tùy theo trình duyệt, bạn có thể lưu trữ từ 5MB đến 10MB cho mỗi domain. Theo Wikipedia thì con số này là: 5MB trong Mozilla Firefox, Google Chrome,và Opera, 10MB trong Internet Explorer.

Phạm vi:

- sessionStorage: giới hạn trong một cửa sổ hoăc thẻ của trình duyệt. Một trang web được mở trong hai thẻ của cùng một trình duyệt cũng không thể truy xuất dữ liệu lẫn nhau. Như vậy, khi bạn đóng trang web thì dữ liệu lưu trong sessionStorage hiện tại cũng bị xóa.

- localStorage: có thể truy xuất lẫn nhau giữa các cửa sổ trình duyệt. Dữ liệu sẽ được lưu trữ không giới hạn thời gian.

Đối với localStorage:

Bạn có thể đọc và dịch nguyên văn tiếng Anh dưới đây:

“Each domain and subdomain has its own separate local storage area. Domains can access the storage areas of subdomains, and subdomains can access the storage areas of parent domains. For example, localStorage['example.com'] is accessible to example.com and any of its subdomains. The subdomainlocalStorage['www.example.com'] is accessible to example.com, but not to other subdomains, such as mail.example.com.”

Bạn có thể xem thêm về localStorage tại: http://v1study.com/html5-web-storage-a423.html#localstorage

Sử dụng

Bạn có thể tạo một tập tin HTML với nội dung phía dưới để chạy trên trình duyệt. Ở đây ta sử dụng Chrome vì nó cung cấp sẵn cửa sổ xem phần Resources trong Google Chrome Developer Tools (Ctrl + Shift + I). Nội dung của tập tin HTML như sau:

<!DOCTYPE html>

<html>

<body>

<script type="text/javascript">

sessionStorage.myVariable="Hello. ";

localStorage.myVariable="Nice to meet you!";

document.write(sessionStorage.myVariable);

document.write(localStorage.myVariable);

</script>

</body>

</html>

Kết quả hiển thị:

http://v1study.com/public/images/article/vi-du-sessionstorage-localstorage.png

Trong giao diện xem Resources, bạn có thể mở phần Console để gõ các lệnh javascript tương tác với trang web hiện tại. Ví dụ ở đây ta thêm các giá trị mới vào trong localStorage và dùng alert() để hiển thị chúng lên:

http://v1study.com/public/images/article/vi-du-them-gia-tri-vao-localstorage.png

Storage event

Đối tượng Window trong javascript cung cấp một event với tên “storage”. Event này được kích hoạt mỗi khi storageArea bị thay đổi.

interface StorageEvent : Event {

readonly attribute DOMString key;

readonly attribute DOMString? oldValue;

readonly attribute DOMString? newValue;

readonly attribute DOMString url;

readonly attribute Storage? storageArea;

};

Event này có thể không hoạt động khi bạn xem tập tin HTML ở máy cục bộ và chỉ được kích hoạt ở những cửa sổ/thẻ khác. Tức là khi bạn mở nhiều cửa sổ trình duyệt truy xuất đến cùng domain, nếu bạn thay đổi một đối tượng Storage bên cửa sổ này thì các cửa sổ còn lại sẽ được kích hoạt event “storage”, còn cửa sổ hiện tại sẽ không xảy ra gì cả.

<!DOCTYPE html>

<html>

<body>

<button onclick="changeValue();">Change Value</button>

<script type="text/javascript">

localStorage.clear();

console.log(localStorage);

if (window.addEventListener)

  window.addEventListener('storage', storage_event, false);

else if (window.attachEvent) // IE

  window.attachEvent('onstorage', storage_event, false);

function storage_event(event){

  console.log(event);

}

function changeValue(){

  localStorage.myValue=Math.random();

}

</script>

</body>

</html>

Thêm các phương thức vào Storage

Các phương thức của Storage có thể không đủ đáp ứng yêu cầu của bạn, vì vậy bạn có thể thêm một vài phương thức mới vào để sử dụng khi cần thiết. Ví dụ ta sẽ thêm phương thức search() để lọc ra các giá trị chứa từ khóa cần tìm kiếm.

Storage.prototype.search = function(keyword) {

var array=new Array();

var re = new RegExp(keyword,"gi");

for (var i = 0; i < this.length; i++) {

  var value=this.getItem(this.key(i));

  if(value.search(re)>-1)

    array.push(value);

  }

  return array;

}

Phương thức trên sử dụng biểu thức chính quy để tìm kiếm theo hai tùy chọn “g” (tìm kiếm toàn bộ chuỗi) và “i” (không phân biệt hoa thường). Phương thức string.search() trả về vị trí của kí tự đầu tiên khớp với từ khóa tìm kiếm, ngược lại là -1 nếu không tìm thấy.

Web SQL Database

Web SQL Database là một công nghệ kết hợp giữa trình duyệt và SQLite để hỗ trợ việc tạo và quản lý database ở phía client. Các thao tác với database sẽ được thực hiện bởi javasc ript và sử dụng các câu lệnh SQL để truy vấn dữ liệu.

Giới thiệu

Lợi ích của SQLite là có để được tích hợp vào các ứng dụng với một thư viện duy nhất để truy xuất được database. Chính vì vậy, bạn có thể sử dụng nó làm cơ sở dữ liệu cho những ứng dụng nhỏ và không cần thiết cài đặt bất kì phần mềm hoặc driver nào. Hiện tại Web SQL Database được hỗ trợ trong các trình duyệt Google Chrome, Opera và Safari.

Trong javascript, bạn sử dụng các phương thức chính sau để làm việc với Web SQL Database.

openDatabase: mở một database có sẵn hoặc tạo mới nếu nó chưa tồn tại.

transaction / readTransaction: hỗ trợ thực hiện các thao tác với database và rollback nếu xảy ra sai sót.

executeSql: thực thi một câu lệnh SQL.

Open Database

Phương thức này có nhiệm vụ mở một database có sẵn hoặc tạo mới nếu nó chưa tồn tại. Phương thức này được khai báo như sau:

Database openDatabase(

in DOMString name,

in DOMString version,

in DOMString displayName,

in unsigned long estimatedSize,

in optional DatabaseCallback creationCallback

);

Tham số:

- name: tên của database.

- version: phiên bản. Hai database trùng tên nhưng khác phiên bản thì khác nhau.

- displayname: mô tả.

- estimatedSize: dung lượng được tính theo đơn vị byte.

- creationCallback: phương thức callback được thực thi sau khi database mở/tạo.

Ví dụ tạo một database với tên “mydb” và dung lượng là 5 MB:

var db = openDatabase("mydb", "1.0", "My First DB", 5 * 1024 * 1024);

Transaction

Bạn cần thực thi các câu SQL trong ngữ cảnh của một transaction. Một transaction cung cấp khả năng rollback khi một trong những câu lệnh bên trong nó thực thi thất bại. Nghĩa là nếu bất kì một lệnh SQL nào thất bại, mọi thao tác thực hiện trước đó trong transaction sẽ bị hủy bỏ và database không bị ảnh hưởng gì cả.

Interface Database hỗ trợ hai phương thức giúp thực hiện điều này là transaction() và readTransaction(). Điểm khác biệt giữa chúng là transaction() hỗ trợ read/write, còn readTransaction() là read-only. Như vậy sử dụng readTransaction() sẽ cho hiệu suất cao hơn nếu như bạn chỉ cần đọc dữ liệu.

void transaction(

in SQLTransactionCallback callback,

in optional SQLTransactionErrorCallback errorCallback,

in optional SQLVoidCallback successCallback

);

Ví dụ:

var db = openDatabase("mydb", "1.0", "My First DB", 5 * 1024 * 1024);

db.transaction(function (tx) {

// Sử dụng đối tượng tx để thực thi các câu lệnh SQL

});

Execute SQL

executeSql() là phương thức duy nhất để thực thi một câu lệnh SQL trong Web SQL. Nó được sử dụng cho cả mục đích đọc và ghi dữ liệu.

void executeSql(

in DOMString sqlStatement,

in optional ObjectArray arguments,

in optional SQLStatementCallback callback,

in optional SQLStatementErrorCallback errorCallback

);

Ví dụ 1: tạo bảng Customers và thêm hai dòng dữ liệu vào bảng này.

db.transaction(function (tx) {

tx.executeSql("CREATE TABLE IF NOT EXISTS CUSTOMERS(id unique, name)");

tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (1, 'peter')");

tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (2, 'paul')");

});

Tuy nhiên cách thực thi SQL trên không được rõ ràng và có thể bị các vấn đề về bảo mật như SQL injection. Vì vậy tốt hơn bạn nên để các tham số cần truyền cho câu SQL trong một mảng và đặt vào làm tham số thứ 2 của phương thức executeSql(). Các vị trí trong câu SQL chứa tham số sẽ được thay thế bởi dấu „?‟:

tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (?,?)", [1,"peter"]);

tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (?,?)", [2,"paul"]);

Web Worker

Với công nghệ phần cứng hiện nay, việc sử dụng đa luồng đã trở nên một phần không thể thiếu trong các phần mềm. Tuy nhiên, công nghệ thiết kế web vẫn chưa tận dụng được sức mạnh này.

Với các công việc đòi hỏi một quá trình xử lý lâu, lập trình viên thường phải sử dụng những thủ thuật như setTimeout(), setInterval(),... để thực hiện từng phần công việc. Hiện nay, để giải quyết vấn đề này, một API mới dành cho javascript đã xuất hiện với tên gọi Web Worker.

Giới thiệu

Đối tượng Web Worker được tạo ra sẽ thực thi trong một thread độc lập và chạy ở chế độ nền nên không ảnh hưởng đến giao diện tương tác của trang web với người dùng. Với đặc điểm này, bạn có thể sử dụng Web Workert các công việc đòi hỏi thời gian xử lý lâu nạp dữ liệu, tạo cache,...

Điểm hạn chế của Web Worker là không thể truy xuất được thành phần trên DOM, và cả các đối tượng window, document hay parent. Mã lệnh các công việc cần thực thi cũng phải được cách ly trong một tập tin script.

Việc tạo một Web Worker sẽ cần thực hiện như sau:

var worker = new Worker('mytask.js');

Tập tin script sẽ được tải về và Worker chỉ được thực thi sau khi tập tin này tải hoàn tất. Trong tập tin script này, ta sẽ xử lý sự kiện „message‟ của Worker từ các dữ liệu nhận được thông qua phương thức postMessage(). Phương thức này chấp nhận một tham số chứa thông điệp cần gửi đến tập tin script để xử lý. Dữ liệu này sẽ được lấy thông qua thuộc tính data của tham số event trong hàm xử lý sự kiện message. Quy trình này được mô tả trong hình sau:

v1study.com/public/images/article/game2d-web-worker-exam1.png

Ví dụ đơn giản nhất

Tạo hai tập tin sau trong cùng một thư mục:

mytask.js:

this.onmessage = function (event) {

var name = event.data;

postMessage("Hello "+name);

};

Test.html:

<!DOCTYPE html>

<body>

<input type="text" id="username" value="2" />

<br />

<button id="button1">Submit</button>

<script>

worker = new Worker("mytask.js");

worker.onmessage = function (event) {

alert(event.data);

};

document.getElementById("button1").onclick = function() {

var name = document.getElementById("username").value;

worker.postMessage(name);

};

</script>

</body>

</html>

Bây giờ bạn chạy thử và nhấn nút Submit, một thông điệp sẽ hiển thị với nội dung tương tự “Hello V1Study”.

Kết luận

Với các công việc đơn giản, lập trình viên sẽ gửi đi một dữ liệu kiểu mảng bao gồm tên lệnh và các dữ liệu cần xử lý. Worker sẽ phân tích dữ liệu nhận được và gọi các phương thức xử lý tương ứng. Tuy nhiên, một Worker bạn tạo ra chỉ nên dành riêng để thực hiện một công việc cụ thể.

Bởi vì mục đích chính của việc tạo ra chúng là để làm những công việc “nặng nhọc”. Cuối cùng, khi đã hoàn tất công việc, bạn hãy giải phóng cho Worker bằng cách dùng phương thức worker.terminate().

Bạn có thể xem demo sau về cách sử dụng Web Worker để thực hiện đồng thời việc tính toán tìm các số nguyên tố và cập nhật lại canvas:

http://v1study.com/public/images/article/game2d-canvas-is-running.png

Tạo chuyển động với WindowAnimationTiming API

Thay vì đặt timeout để gọi các phương thức vẽ lại hình ảnh, cách tốt nhất mà bạn nên sử dụng để tạo các hiệu ứng chuyển động trong canvas là dùng API WindowAnimationTiming, thông qua phương thức chính là requestAnimationFrame().

setTimeout và setInterval

Cách truyền thống mà bạn dùng để tạo các hiệu ứng đồ họa chuyển động với javascript là gọi liên tục công việc update và draw sau những khoảng thời gian xác định thông qua phương thức setInterval() hoặc setTimeout(). Mỗi lần gọi, một frame (khung hình) mới sẽ được tạo ra và vẽ đè lên màn hình cũ.

Khó khăn của phương pháp này là khó xác định được giá trị thời gian thích hợp dựa trên mỗi thiết bị được sử dụng (thông thường khoảng 60 fps – frames per second). Ngoài ra với những hiệu ứng phức tạp thì việc update/draw có thể diễn ra lâu hơn so với thời gian giữa hai lần gọi.

Cách tổng quát để giải quyết vấn đề trên là thực hiện tính toán dựa vào khoảng cách thời gian giữa lần gọi trước đó và hiện tại, sau đó xác định bỏ qua một vài bước draw hoặc thay đổi giá trị timeout cho phù hợp.

WindowAnimationTiming

Một tính năng mới ra đời cho phép bạn đơn giản hóa công việc này là API WindowAnimationTiming.

Đây là một interface bao gồm hai phương thức là requestAnimationFrame() và cancelAnimationFrame(). Việc xác định thời điểm cập nhật frame sẽ được tự động chọn giá trị thích hợp nhất.

interface WindowAnimationTiming {

long requestAnimationFrame(FrameRequestCallback callback);

void cancelAnimationFrame(long handle);

};

Window implements WindowAnimationTiming;

callback FrameRequestCallback = void (DOMTimeStamp time);

requestAnimationFrame: gửi request đến trình duyệt thực hiện một hành động update/draw frame mới thông qua tham số callback. Các request này sẽ được lưu trong đối tượng document với các cặp <handle, callback> và được thực hiện lần lượt. Giá trị handle là một số định danh được tạo ra và trả về sau khi gọi phương thức này.

cancelAnimationFrame: hủy một request được tạo ra requestAnimationFrame với tham số là handle của request.

Ngoài ra còn có thuộc tính window.mozAnimationStartTime (chỉ mới được hỗ trợ trên Firefox) chứa giá trị milisecond là khoảng cách từ mốc thời gian (1/1/1970) đến thời điểm bắt đầu của request cuối cùng được thực hiện. Giá trị này tương đương với giá trị trả về của Date.now() hoặc Date.getTime(), mốc thời gian là bao nhiêu không quan trọng nhưng nó giúp bạn biết được khoảng thời gian giữa hai lần thực hiện request.

Lợi ích và hiệu quả

Microsoft cho ta một ví dụ trực quan về hiệu quả của requestAnimationFrame() so với setTimeout() tại trang requestAnimationFrame API. Qua ví dụ này, ta thấy được số lần gọi callback (update) thực tế của setTimeout() lớn hơn so với dự tính. Ngoài ra các kết quả cho thấy hiệu suất của việc thực thi callback, CPU, mức tiêu tốn năng lượng và ảnh hướng đến các tác vụ nền của requestAnimationFrame() hơn hẳn so với setTimeout():

  setTimeout requestAnimationFrame
Expected callbacks  40543  40544
Actual callbacks  41584  40544
Callback Efficiency 59.70%  100.00%
Callback Efficiency Medium High
Power Consumption Medium Low
Background Interference High Low

 Một hiệu quả khác các animation sẽ tự động dừng lại nếu tab chứa nó không được hiển thị (khi bạn chuyển sang một tab khác của trình duyệt). Điều này giúp hạn chế được tài nguyên sử dụng một cách hợp lý.

Sử dụng

Kiểm tra trình duyệt hỗ trợ:

Tùy theo trình duyệt mà tên của phương thức này sẽ có những prefix khác nhau (vendor):

_reqAnimation = window.requestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.msRequestAnimationFrame ||

window.oRequestAnimationFrame;

if(_reqAnimation)

  update();

else

  alert("Your browser doesn't support requestAnimationFrame.");

Ví dụ hoàn chỉnh:

<HTML>

<head>

<script>

const RADIUS = 20;

var cx = 100;

var cy = 100;

var speedX = 2;

var speedY = 2;

var _canvas;

var _context;

var _reqAnimation;

var _angle = 0;

function update(time) {

  cx += speedX;

  cy += speedY;

  if(cx<0 || cx > _canvas.width)

    speedX = -speedX;

  if(cy<0 || cy > _canvas.height)

    speedY = -speedY;

  // draw

  _context.clearRect(0, 0, _canvas.width, _canvas.height);

  _context.beginPath();

  _context.arc(cx, cy, RADIUS, 0, Math.PI*2, false);

  _context.closePath();

  _context.fill();

  _reqAnimation(update);

}

window.onload = function(){

  _canvas = document.getElementById("canvas");

  _context = _canvas.getContext("2d");

  _context.fillStyle = "red";

  cx = _canvas.width/2;

  cy = _canvas.height/2;

  _reqAnimation = window.requestAnimationFrame ||

  window.mozRequestAnimationFrame ||

  window.webkitRequestAnimationFrame ||

  window.msRequestAnimationFrame ||

  window.oRequestAnimationFrame ;

  if(_reqAnimation)

    update();

  else

    alert("Your browser doesn't support requestAnimationFrame.");

};

</script>

</head>

<body>

<canvas id="canvas" width="400px" height="300px" style="border: 1px solid"></canvas>

</body>

</HTML>

Vẽ ảnh và thao tác với pixel

HTML5 xác định <canvas> như một bitmap phụ thuộc vào độ phân giải, được sử dung để vẽ đồ thị, đồ họa game hoặc hình ảnh trực quan khác. Canvas là hình chữ nhật trên trang và có thể sử dụng JavaScript để vữ bất cứ điều gì bạn muốn. HTML5 định nghĩa một tập các chức năng (canvas API) để vẽ hình dạng, xác định đường dẫn, tạo gradient.

HTML5 Canvas là một JavaScript API để mã hóa các bản vẽ. Canvas API cho phép định nghĩa một đối tượng canvas như là thử <canvas> trên trang HTML ,chúng ta có thể vẽ bên trong nó. <canvas> là một khối không gian vô hình, mặc định là 300x250 pixels (trên tất cả trình duyệt).

Chúng ta có thể vẽ cả hình 2D và 3D (WebGL). 2D có sẵn trong tất cả các trình duyệt Web hiện đại, IE9, và thông qua thư viện excanvas.js trong các phiên bản IE hiện tại.

Canvas 2D cung cấp một API đơn giản nhưng mạnh mẽ để có thể vẽ một cách nhanh chóng trên bề mặt bitmap 2D. Không có định dạng tập tin, và bạn chỉ có thể vẽ bằng cách sử dụng script. Bạn không có bất kỳ các nút DOM cho các hình khối bạn vẽ - bạn đang vẽ pixels, không phải vectơ và chỉ là các điểm ảnh được ghi nhớ.

Một số tính năng của Canvas:

  • Vẽ hình ảnh
  • Tô màu
  • Tạo hình học và các kiểu mẫu
  • Văn bản
  • Sao chép hình ảnh, video, những canvas khác
  • Thao tác điểm ảnh
  • Xuất nội dung của một thẻ <canvas> sang tập tin ảnh tĩnh.

Vẽ ảnh và thao tác với pixel

Muốn tạo ra những hiệu ứng đồ họa đặc biệt khi sử dụng canvas, bạn không thể chỉ sử dụng các thuộc tính và phương thức có sẵn của đối tượng context. Chính vì vậy, bài viết này sẽ giới thiệu cho bạn cách vẽ ảnh và thao tác với các pixel từ đối tượng ImageData.

1. Nạp và vẽ ảnh

Để vẽ một ảnh ra canvas, ta tạo một đối tượng image và thực hiện phương thức context.drawImage() trong sự kiện load của image. Như vậy để đảm bảo rằng hình ảnh chỉ được vẽ sau khi đã được nạp hoàn tất. Ngoài ra, bạn nên đặt sự kiện load trước khi gán đường dẫn cho ảnh. Nếu không image có thể được load xong trước khi bạn gắn sự kiện load cho nó.

Phương thức drawImage() có ba overload sau:

- Vẽ image tại một vị trí destX, destY:

context.drawImage(image,destX,destY);

- Vẽ image tại vị trí destX, destY và kích thước destWidth, destHeight:

context.drawImage(image,destX,destY,destWidth,destHeight);

- Cắt image tại vị trí [sourceX, sourceY, sourceWidth, sourceHeight] và vẽ tại [destX, destY, destWidth, destHeight]:

context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

Ví dụ:

window.onload = function(){

var canvas = document.getElementById("mycanvas");

var context = canvas.getContext("2d");

var img = new Image();

img.onload = function(){

context.drawImage(img, 10, 10,50,50);

};

img.src = "foo.png";

};

2. Thao tác với pixel

Một ảnh bao gồm một mảng các pixel với các giá trị red, green, blue và alpha (RGBA). Trong đó alpha là giá trị xác định độ mờ đục (opacity) của ảnh. Giá trị alpha càng lớn thì độ màu sắc càng rõ nét và màu sắc sẽ trở nên trong suốt nếu alpha là 0.

Trong Canvas 2D API, dữ liệu ảnh được lưu trong một đối tượng ImageData với 3 thuộc tính là width, height và data. Trong đó data là một mảng một chiều chứa các pixel. Mỗi pixel chứa 4 phần tử tương ứng là R,G,B,A.

Như vậy với một ảnh có kích thước 10×20 ta sẽ có 200 pixel và có 200*4=400 phần tử trong mảng ImageData.data.

http://v1study.com/public/images/article/game2d-mau-sac.png

Bạn có thể tham khảo thông tin về các API này tại: http://www.whatwg.org/specs/web-

apps/current-work/multipage/the-canvas-element.HTML#pixel-manipulation:

imagedata = context.createImageData(sw, sh)

Trả về một đối tượng ImageData với kích thước sw x sh. Tất cả pixel của đối tượng này có màu đen trong suốt.

imagedata = context.createImageData(imagedata)

Trả về đối tượng ImageData với kích thước bằng với đối tượng trong tham số. Tất cả pixel có màu đen trong suốt.

imagedata = context.getImageData(sx, sy, sw, sh)

Trả về một đối tượng ImageData chứa dữ liệu ảnh vùng chữ nhật (xác định bởi các tham số) của canvas.

Ném NotSupportedError exception nếu như có bất kì tham số nào không phải là số hợp lệ. Ném

IndexSizeError exception nếu width hoặc height là zero.

imagedata.width

imagedata.height

Trả về kích thước thật của đối tượng ImageData, tính theo pixel.

imagedata.data

Trả về mảng một chiều chứa dữ liệu dạng RGBA, mỗi giá trị nằm trong khoảng 0 đến 255.

context . putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])

Vẽ dữ liệu từ đối tượng ImageData lên canvas tại vị trí dx, dy. Nếu như hình chữ nhật (từ các tham số dirtyX, dirtyY, dirtWidth, dirtyHeight) được xác định, thì phần dữ liệu của ImageData trong vùng chữ nhật này mới được vẽ lên canvas.

http://v1study.com/public/images/article/game2d-imagedata-canvas.png

Các thuộc tính xác định hiệu ứng vẽ của context sẽ bị bỏ qua khi phương thức này được gọi. Các pixel từ canvas sẽ được thay thế hoàn toàn bởi ImageData mà không có các sự kết hợp màu sắc, hiệu ứng, ... với các dữ liệu ảnh sẵn có trên canvas.

Một trong những ví dụ thường gặp và đơn giản nhất là đảo ngược màu của ảnh. Điều này được thực hiện bằng cách lấy giá trị màu tối đa (255) trừ đi giá trị của mỗi kênh màu RGB hiện tại của mỗi pixel. Giá trị alpha sẽ để giá trị tối đa để ảnh được rõ nét nhất.

<HTML>

<head>

<script>

window.onload = function(){

var img = new Image();

img.onload = function(){

invertColor(this);

};

img.src="panda.jpg";

};

function invertColor(img){

var canvas = document.getElementById("mycanvas");

var context = canvas.getContext("2d");

// draw image at top-left corner

context.drawImage(img,0,0);

// draw original image right beside the previous image

context.drawImage(img,img.width,0);

// get ImageData object from the left image

var imageData = context.getImageData(0, 0, img.width,

img.height);

var data = imageData.data;

for (var i = 0; i < data.length; i += 4) {

data[i] = 255 - data[i]; // red

data[i + 1] = 255 - data[i+1]; // green

data[i + 2] = 255 - data[i+2]; // blue

data[i + 3] = 255; // alpha

}

context.putImageData(imageData,0,0);

}

</script>

</head>

<body>

<canvas id="mycanvas" width="600" height="250"></canvas>

</body>

</HTML>

Kết quả:

http://v1study.com/public/images/article/game2d-ket-qua-vi-du.png

Bạn có thể thêm các tham số để tạo một “dirty rectangle” trong phương thức putImageData() nếu muốn vẽ ImageData lên một vùng chữ nhật xác định của canvas.

Ví dụ ta chọn cùng một vùng chữ nhật trên ImageData và vẽ lên hai vùng chữ nhật khác nhau trên canvas để được kết quả sau:

context.putImageData(imageData,0,0,0,0,img.width/2,img.height/2);

context.putImageData(imageData,img.width,0,0,0,img.width/2,img.height/2);

http://v1study.com/public/images/article/game2d-ket-qua-vi-du1.png

Vẽ hình bằng chuột

Trong phần này, ta sẽ tìm hiểu cách bắt và xử lý các thao tác chuột trên Canvas để thực hiện một ứng dụng vẽ hình đơn giản. Bên cạnh đó, bạn có thể biết được cách để lưu và phục hồi lại dữ liệu của canvas khi cần thiết.

1. Xác định tọa độ chuột

Để xác định được tọa chuột trên canvas, ta sẽ sử dụng tham số của các sự kiện như mousedown, mousemove, ... Tham số của các sự kiện này chứa tọa độ chuột lưu trong hai biến pageX và pageY. Ta sẽ dùng tọa độ này trừ đi tọa độ của canvas (canvas.offsetLeft và canvas.offsetTop) để lấy được vị trí chính xác của chuột trên canvas.

Đầu tiên là việc mô phỏng công cụ Pen cho phép vẽ tự do trong canvas:

<HTML>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

var preX;

var preY;

var paint;

var canvas;

var context;

$(function(){

  canvas = document.getElementById("canvas");

  context = canvas.getContext("2d");

  $('#canvas').mousedown(function(e){

    preX = e.pageX - this.offsetLeft;

    preY = e.pageY - this.offsetTop;

    paint = true;

  });

  $('#canvas').mousemove(function(e){

    if(paint){

      var x = e.pageX - this.offsetLeft;

      var y = e.pageY - this.offsetTop;

      context.moveTo(preX,preY);

      context.lineTo(x,y);

      context.stroke();

      preX = x;

      preY = y;

    }

  });

  $('#canvas').mouseenter(function(e){

    if(paint) {

      preX = e.pageX - this.offsetLeft;

      preY = e.pageY - this.offsetTop;

    }

  });

  $("#canvas").mouseup(function(){

    paint = false;

  });

  $('#canvas').mouseleave(function(e){

    paint = false;

  });

});

</script>

</head>

<body>

<canvas id="canvas" width="500px" height="500px" style="border: 1px solid gray;"></canvas>

</body>

</HTML>

2. Lưu nội dung của Canvas

Để lưu lại dữ liệu của Canvas nhằm phục hồi khi cần thiết (chẳng hạn như chức năng Undo, Redo), ta sẽ sử dụng phương thức context.getImageData().Ta sẽ sử dụng phương pháp này để thực hiện chức năng vẽ đoạn thẳng trên Canvas. Trước khi bắt đầu vẽ một đoạn thằng, canvas cần được lưu lại nội dung và mỗi khi chuột di chuyển, ta sẽ phục hồi lại nội dung được lưu đó đồng thời vẽ một đoạn thẳng từ điểm bắt đầu đến vị trí chuột.

Ta cũng sửa ví dụ trên thành một jQuery plugin để tiện sử dụng:

<HTML>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

(function( $ ) {

  var preX;

  var preY;

  var tool; // pen, line

  var canvas;

  var context;

  var imageData;

  var paint;

  $.fn.makeDrawable = function() {

    canvas = this[0];

    if( !$(canvas).is("canvas") )

      throw "The target element must be a canvas";

    context = canvas.getContext("2d");

    $(canvas).mousedown(function(e){

    preX = e.pageX - canvas.offsetLeft;

    preY = e.pageY - canvas.offsetTop;

    paint = true;

    if(tool=="line"){

      imageData = context.getImageData(0, 0, canvas.width,

      canvas.height);

    }

  });

  $(canvas).mousemove(function(e){

    if(paint){

      var x = e.pageX - canvas.offsetLeft;

      var y = e.pageY - canvas.offsetTop;

      if(tool=="pen"){

        context.moveTo(preX,preY);

        context.lineTo(x,y);

        context.stroke();

        preX = x;

        preY = y;

      }

      else if(tool=="line"){

        canvas.width=canvas.width; // clear canvas

        content

        context.putImageData(imageData,0,0);

        context.moveTo(preX,preY);

        context.lineTo(x,y);

        context.stroke();

      }

    }

  });

  $(canvas).mouseup(function(e){

    if(tool=="line"){

      var x = e.pageX - canvas.offsetLeft;

      var y = e.pageY - canvas.offsetTop;

      context.moveTo(preX,preY);

      context.lineTo(x,y);

      context.stroke();

    }

    paint = false;

  });

  $(canvas).mouseleave(function(e){

    paint = false;

  });

  return $(canvas);

};

$.fn.setTool = function(newTool) {

  tool=newTool;

  return $(canvas);

}

$.fn.clear = function() {

  canvas.width=canvas.width;

  return $(canvas);

}

})( jQuery );

$(function(){

  $("#canvas").makeDrawable();

  $("#button1").click(function(){

    $("#canvas").clear();

  });

  $("#pen").change(function(){

    if(this.value)

      $("#canvas").setTool("pen");

  });

  $("#line").change(function(){

    if(this.value)

    $("#canvas").setTool("line");

  });

  $("#canvas").setTool("pen");

});

</script>

</head>

<body>

<div>

<button id="button1">Clear</button>

<input name="tool" type="radio" id="pen" checked="true">Pen</input>

<input name="tool" type="radio" id="line">Line</input>

</div>

<canvas id="canvas" width="500px" height="500px" style="border: 1px solid gray;"></canvas>

</body>

</HTML>

 

Kết quả:

http://v1study.com/public/images/article/game2d-ket-qua-vi-du-ve-bang-chuot.png

Chọn và di chuyển đối tượng

Thay vì lưu trữ nội dung của Canvas dưới dạng ImageData, ta có thể lưu trữ các đối tượng đồ họa dưới dạng cấu trúc dữ liệu và thực hiện vẽ từng phần tử lên Canvas. Với phương pháp này, ta sẽ minh họa bằng một ví dụ sử dụng chuột để chọn và di chuyển các hình vẽ trên Canvas.

1. Tạo cấu trúc dữ liệu

Đầu tiên ta sẽ tạo một lớp Rect dùng để chứa dữ liệu của một hình chữ nhật. Lớp này ngoài các biến lưu trữ tọa độ, kích thước và trạng thái (selected) thì cần một phương thức dùng để kiểm tra xem một tọa độ [x,y] có nằm bên trong nó không. Ta gọi phương thức này là isContain() và có kiểu trả về là boolean. Mã nguồn của lớp này có dạng:

function Rect() {

this.isSelected = false;

this.x = 0;

this.y = 0;

this.width = 1;

this.height = 1;

}

Rect.prototype.isContain = function(x,y){

var right = this.x + this.width;

var bottom = this.y + this.height;

return x > this.x && x < right &&

y > this.y && y < bottom;

}

Tiếp theo, ta tạo một lớp ShapeList dùng để chứa các đối tượng Rect trong một kiểu dữ liệu mảng. Ngoài ra, ShapeList sẽ có thêm một biến dùng để chỉ ra đối tượng Rect đang được chọn (selectedItem), và hai biến dùng để lưu vị trí của chuột khi click lên một đối tượng Rect (offsetX, offsetY). Hai biến offset này dùng để tính tọa độ chính xác khi người dùng sử dụng chuột để di chuyển đối tượng Rect.

ShapeList còn có hai phương thức:

- addItem(): thêm một đối tượng Rect vào danh sách.

- selectAt(): tìm và chọn đối tượng Rect chứa tọa độ [x,y]. Ta sẽ duyệt ngược từ cuối mảng để đảm bảo các đối tượng nằm sau sẽ được chọn trước trong trường hợp nhiều Rect cùng chứa điểm [x,y].

function ShapeList(){

this.items = [];

this.selectedItem = null;

this.offsetX = -1;

this.offsetY = -1;

}

ShapeList.prototype.addItem = function(x,y,width,height){

var rect = new Rect;

rect.x = x;

rect.y = y;

rect.width = width;

rect.height = height;

this.items.push(rect);

}

ShapeList.prototype.selectAt = function(x,y){

if(this.selectedItem)

this.selectedItem.isSelected = false;

this.selectedItem = null;

for (var i = 0; i < this.items.length; i++) {

var rect = this.items[i];

if(rect.contains(x,y))

{

this.selectedItem = this.items[i];

this.offsetX = x - this.items[i].x;

this.offsetY = y - this.items[i].y;

this.items[i].isSelected = true;

break;

}

}

}

2. Các phương thức vẽ bằng context

function draw(){

clear();

for (var i = _list.items.length-1;i>=0; i--) {

drawRect(_list.items[i]);

}

}

function drawRect(rect){

_context.fillRect(rect.x,rect.y,rect.width,rect.height);

if(rect.isSelected)

{

_context.save();

_context.strokeStyle = "red";

_context.strokeRect(rect.x,rect.y,rect.width,rect.height);

_context.restore();

}

}

3. Các sự kiện chuột của Canvas

Trong các sự kiện này, ta sẽ dùng cờ _ismoving để xác định xem một đối tượng có đang được chọn hay không và thực hiện di chuyển đối tượng ShapeList.selectedItem trong mousemove. Giá trị _ismoving này sẽ được xác định trong sự kiện mousedown và bị hủy khi mouseup.

function canvas_mousedown(e){

var x = e.pageX - _canvas.offsetLeft;

var y = e.pageY - _canvas.offsetTop;

_list.selectAt(x,y)

if(!_list.selectedItem)

_list.addItem(x-RECT_SIZE,y-
RECT_SIZE,RECT_SIZE*2,RECT_SIZE*2);

_ismoving = true;

draw();

}

function canvas_mousemove(e){

if(_ismoving && _list.selectedItem){

var x = e.pageX - _canvas.offsetLeft;

var y = e.pageY - _canvas.offsetTop;

_list.selectedItem.x = x - _list.offsetX;

_list.selectedItem.y = y - _list.offsetY;

draw();

}

}

function canvas_mouseup(e){

_ismoving = false;

}

Kết quả:

http://v1study.com/public/images/article/game2d-ket-qua-vi-du-di-chuyen-doi-tuong.png

Sử dụng bàn phím

Bàn phím là thiết bị không thể thiếu và là phương tiện rất quan trọng để thực hiện các chức năng của các ứng dụng tương tác với người dùng. Trong bài viết này, ta sẽ hướng dẫn cách bắt sự kiện bàn phím trong canvas và dùng nó để điều khiển góc xoay và hướng di chuyển của đối tượng đồ họa.

1. Bắt sự kiện bàn phím

Để bắt sự kiện này, bạn có thể đăng kí trực tiếp cho đối tượng window, tuy nhiên điều này sẽ gây ra những rắc rối khi trang của bạn có quá nhiều thành phần. Cách tốt nhất là đăng kí riêng cho canvas các hàm xử lý. Tuy nhiên, để canvas có thể focus được, bạn cần xác định thuộc tínhTabIndex của nó:

<canvas id=”canvas” width=”300′′ height=”200′′ tabindex=”1′′ style=”border: 1px solid;”></canvas>

Sau đó bạn đăng kí các sự kiện cần thiết cho canvas. Khi chạy trên trình duyệt, bạn cần phải click chuột vào canvas để nó nhận được focus trước khi thực hiện các thao tác bàn phím.

_canvas.onkeydown = canvas_keyDown;

function canvas_keyDown(e){

  alert(e.keyCode);

}

Tham số event truyền vào hàm xử lý sẽ chứa các thuộc tính cần thiết để bạn xác định được phím nào được nhấn. Ở đây, bạn chỉ cần quan tâm đến thuộc tính keyCode lưu mã của phím được nhấn. Do các giá trị keyCode có kiểu số nên rất khó nhớ và kiểm tra, may mắn là ta tìm được trang “Javascript Keycode Enums” liệt kê sẵn các keyCode dưới dạng enum của một đối tượng.

Ta sửa lại một chút để tiện sử dụng hơn:

var Keys = {

  BACKSPACE: 8,

  TAB: 9,

  ENTER: 13,

  SHIFT: 16,

  CTRL: 17,

  ALT: 18,

  PAUSE: 19,

  CAPS_LOCK: 20,

  ESCAPE: 27,

  SPACE: 32,

  PAGE_UP: 33,

  PAGE_DOWN: 34,

  END: 35,

  HOME: 36,

  LEFT_ARROW: 37,

  UP_ARROW: 38,

  RIGHT_ARROW: 39,

  DOWN_ARROW: 40,

  INSERT: 45,

  DELETE: 46,

  KEY_0: 48,

  KEY_1: 49,

  KEY_2: 50,

  KEY_3: 51,

  KEY_4: 52,

  // ...

};

2. Kiểm tra trạng thái của nhiều phím

Một khó khăn của các sự kiện bàn phím trong javascript là chỉ có thể xác định được duy nhất một phím nhấn thông qua thuộc tính event.keyCode. Để có thể kiểm tra được trạng thái của nhiều phím được nhấn cùng lúc, ta phải lưu trạng thái của chúng lại khi sự kiện keyDown xảy ra và xóa trạng thái đó đi trong sự kiện keyUp.

var _keypressed = {};

function canvas_keyDown(e){

  _keypressed[e.keyCode] = true;

}

function canvas_keyUp(e){

  _keypressed[e.keyCode] = false;

}

3. Giới hạn các phím được bắt

Sử dụng phương pháp trên, bạn cần lọc các phím cần sử dụng để đối tượng _keypressed không lưu các giá trị không cần thiết. Một cách đơn giản nhất là sử dụng mảng để lưu keyCode của các phím này và kiểm tra trong các sự kiện bàn phím:

const AVAILABLE_KEYS =

  [ Keys.UP_ARROW,

  Keys.DOWN_ARROW,

  Keys.LEFT_ARROW,

  Keys.RIGHT_ARROW

  ];

function canvas_keyDown(e){

  if(AVAILABLE_KEYS.indexOf(e.keyCode)!=-1){

    _keypressed[e.keyCode] = true;

  }

}

function canvas_keyUp(e){

  if(_keypressed[e.keyCode]){

    _keypressed[e.keyCode] = false;

  }

}

Chuyển động trong Canvas

Một ví dụ đơn giản để khi làm quen với đồ họa và chuyển động trong lập trình là viết một ví dụ bóng nảy bên trong một vùng cửa sổ (canvas). Một quả bóng sẽ được vẽ bên trong canvas và chuyển động theo một hướng xác định. Khi chạm bất kì thành tường nào, bóng sẽ đổi hướng chuyển động tùy theo hướng di chuyển.

1. Cơ bản

Ta xác định hai giá trị speedX và speedY tương ứng với tốc độ di chuyển theo phương ngang và dọc của trái bóng. Hướng di chuyển của bóng phụ thuộc vào giá trị âm hoặc dương của speedX và speedY.

Trong ví dụ này, thành tường là các biên của canvas và chỉ có hai phương là ngang và dọc.

Nguyên lý hoạt động rất đơn giản: khi bóng tiếp xúc với biên dọc của canvas, ta sẽ đổi chiều của speedY và với biên ngang ta sẽ đổi chiều của speedX.

Trong lớp Ball sau, ta sẽ bổ sung thêm các thuộc tính right, bottom để tiện khi kiểm tra va chạm.

Hai thuộc tính cx và cy là vị trí tâm của bóng và sẽ được khởi tạo ngẫu nhiên sao cho nó luôn nằm hoàn toàn bên trong canvas.

Tập tin Ball.js:

function Ball(mapWidth, mapHeight){

  this.mapWidth = mapWidth;

  this.mapHeight = mapHeight;

  this.radius = 20;

  this.speedX = 3;

  this.speedY = 3;

  this.cx = Math.floor(Math.random()*(this.mapWidth-2*this.radius)) + this.radius;

  this.cy = Math.floor(Math.random()*(this.mapHeight-2*this.radius)) + this.radius;

}

Ball.prototype.draw = function(context){

  context.beginPath();

  context.fillStyle = "red";

  context.arc(this.cx,this.cy,this.radius,0,Math.PI*2,true);

  context.closePath();

  context.fill();

}

Ball.prototype.move = function(){

  this.cx += this.speedX;

  this.cy += this.speedY;

  this.left = this.cx - this.radius;

  this.top = this.cy - this.radius;

  this.right = this.cx + this.radius;

  this.bottom = this.cy + this.radius;

}

Ball.prototype.checkCollision = function(shapes) {

  if(this.left <= 0 || this.right >= this.mapWidth)
    this.speedX = -this.speedX;

  if(this.top <= 0 || this.bottom >= this.mapHeight)
    this.speedY = -this.speedY;

}

Sample.HTML:

<HTML>

<head>

<script src="ball.js"></script>

<script>

var _canvas;

var _context;

var _ball;

function draw(){

  _context.clearRect(0,0,_canvas.width,_canvas.height);

  _ball.draw(_context);

}

function update(){

  _ball.move();

  _ball.checkCollision();

  draw();

}

window.onload = function(){

  var interval = 10;

  _canvas = document.getElementById("canvas");

  _context = _canvas.getContext("2d");

  _ball = new Ball(_canvas.width,_canvas.height);

  setInterval("update()",interval);

}

</script>

</head>

<body>

<canvas id="canvas" width="400px" height="300px" style="border: 1px solid gray;"></canvas>

</body>

</HTML>

2. Thêm hiệu ứng bóng di chuyển

Để ví dụ không quá đơn điệu, ta sẽ thêm các ảnh bóng mờ di chuyển phía sau trái bóng chính. Ta sẽ lưu các vị trí bóng di chuyển qua vào một mảng có tối đa 10 phần tử và vẽ ra canvas trong hàm draw(). Phương thức Ball.draw() cần chỉnh sửa một chút để cho phép nhận tham số alpha xác định độ mờ đục. Tham số alpha này có giá trị nằm giữa đoạn 0 và 1:

Ball.prototype.draw = function(context,alpha){

  if(!alpha)

    alpha = 255;

  context.beginPath();

  context.fillStyle = "rgba(255, 100, 100," + alpha + ")";

  context.arc(this.cx,this.cy,this.radius,0,Math.PI*2,true);

  context.closePath();

  context.fill();

}

Để các trái bóng không nằm quá sát nhau, ta chỉ thực hiện lưu vị trí của bóng sau mỗi 5 lần bóng di chuyển hay sau mỗi 5 lần phương thức update() được gọi. Phương thức traceBall() sau sẽ tạo ra một đối tượng Ball mới với hai giá trị cx và cy lấy từ trái bóng chính và lưu vào mảng _balls.

Khi chiều dài của mảng _balls vượt quá 10, ta dùng phương thức Array.splice() để cắt đi phần tử nằm ở đầu mảng:

function traceBall(ball){

  var b = new Ball;

  b.cx = ball.cx;

  b.cy = ball.cy;

  _balls.push(b);

  if(_balls.length>10)

    _balls.splice(0,1);

}

Kết quả:

http://v1study.com/public/images/article/game2d-bong-di-chuyen.png

3. Kiểm tra va chạm

Phần quan trọng của ví dụ này nằm ở phương thức kiểm tra va chạm của trái bóng. Phương thức này sẽ duyệt qua tất cả các chướng ngại vật và kiểm tra khoảng cách của nó so với chướng ngại vật theo hai phương dọc và ngang.

Với ví dụ này, ta kiểm tra va chạm ở mức rất đơn giản nên việc phản xạ của trái bóng chưa hoàn toàn chính xác. Ta sẽ giới thiệu các kĩ thuật kiểm tra va chạm và di chuyển trong các bài viết sau.

Phương thức kiểm tra va chạm của lớp Ball:

Ball.prototype.checkCollision = function(shapes) {

  if(this.left <= 0 || this.right >= this.mapWidth)
    this.speedX = -this.speedX;

  if(this.top <= 0 || this.bottom >= this.mapHeight)
    this.speedY = -this.speedY;

  for(var i = 0; i < shapes.items.length ; i++){

    var item = shapes.items[i];

    var hCollision = false;

    var vCollision = false;

    if( this.right >= item.left && this.left <= item.right && // the ball is

    ((this.cy < item.top && this.bottom >= item.top) || // on or

    (this.cy > item.bottom && this.top <= item.bottom)))

    // under the rectangle

    {

      this.speedY = -this.speedY;

      vCollision = true;

    }

  if(this.bottom >= item.top && this.top <= item.bottom &&

// the ball is in the

((this.cx < item.left && this.right >= item.left) ||

// left or

(this.cx > item.right && this.left <= item.right))) // right side of the rectangle

{

  this.speedX = -this.speedX;

  hCollision = true;

}

if(hCollision || vCollision)

  break;

}

}

Minh họa:

http://v1study.com/public/images/article/game2d-kiem-tra-va-cham.png

Solution Practical 10

Đáp án tham khảo bài tập HTML5 > Practicals > Practical 10.

Exercise 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Solution Practical 10 - Exercise 1</title>
<style>
#wrapper{width:80%; margin:0 auto; box-sizing:border-box;}
section{box-sizing:border-box; border:grey thin solid;}
</style>
<script>
function fCheck(){
    with(frm){
        if(cho.checked==false && meo.checked==false){
            alert('Bạn phải chọn ít nhất một con vật!');
            cho.focus();
            return false;
        }
        if(cho.checked==true){
            if(tencho.value==""){
                alert('Bạn cần điền tên con chó!');
                tencho.focus();
                return false;
            }
            if(maucho[0].checked==false && maucho[1].checked==false && maucho[2].checked==false){
                alert('Bạn phải chọn màu lông!');
                maucho[0].focus();
                return false;
            }
        }
        if(meo.checked==true){
            if(tenmeo.value==""){
                alert('Bạn cần điền tên con mèo!');
                tenmeo.focus();
                return false;
            }
            if(maumeo[0].checked==false && maumeo[1].checked==false && maumeo[2].checked==false){
                alert('Bạn phải chọn màu lông!');
                maumeo[0].focus();
                return false;
            }
        }
    }
}
function fHuy(){
    alert("Bạn đã hủy bỏ việc gửi bản điều tra");
    frm.lydo.focus();
}
</script>
</head>

<body>
<form name="frm" onsubmit="return fCheck();" action="http://v1study.com">
<section id="wrapper">
    <section style="text-align:center;color:blue;float:left;width:100%;">
        <h2>BẢNG ĐIỀU TRA VÂN NUÔI YÊU THÍCH</h2>
        <P>Trả lời các câu hỏi sau về các con vật yêu thích của bạn</P>
    </section>
    <section style="float:left;width:100%;">
        <section style="border:violet 3px solid; float:left;width:100%;">
            <section style="border:none; width:19.8%;height:30px; float:left;margin:0.2% 0 0.2% 0.2%;"></section>
            <section style="border:violet thin solid;width:39.6%; height:30px; float:left; margin:0.2% 0.2%; text-align:center; line-height:30px;">CHÓ</section>
            <section style="border:violet thin solid; width:39.8%; height:30px; float:left; margin:0.2% 0.2% 0.2% 0; text-align:center; line-height:30px;">MÈO</section>
            <section style="border:violet thin solid; width:19.8%; height:30px; float:left; margin:0.2% 0 0.2% 0.2%; line-height:30PX;">BẠN NUÔI</section>
            <section style="border:violet thin solid; width:39.6%; height:30px; float:left; margin:0.2% 0.2%; text-align:center; line-height:30px;"><input type="checkbox" name="cho" /> CÓ</section>
            <section style="border:violet thin solid; width:39.8%; height:30px; float:left; margin:0.2% 0.2% 0.2% 0; text-align:center; line-height:30px;"><input type="checkbox" name="meo" /> CÓ</section>
            <section style="border:violet thin solid; width:19.8%; height:30px; float:left; margin:0.2% 0 0.2% 0.2%; line-height:30px;">TÊN</section>
            <section style="border:violet thin solid; width:39.6%; height:30px; float:left; margin:0.2% 0.2%; text-align:center; line-height:30px;"><input type="text" name="tencho" /></section>
            <section style="border:violet thin solid; width:39.8%; height:30px; float:left; margin:0.2% 0.2% 0.2% 0; text-align:center; line-height:30px;"><input type="text" name="tenmeo" /></section>
            <section style="border:violet thin solid; width:19.8%; height:30px; float:left; margin:0.2% 0 0.2% 0.2%; line-height:30PX;">MÀU LÔNG</section>
            <section style="border:violet thin solid; width:39.6%; height:30px; float:left; margin:0.2% 0.2%; text-align:center; line-height:30px;"><input type="radio" name="maucho" /> Đen<input type="radio" name="maucho" /> Trắng <input type="radio" name="maucho" /> Khác</section>
            <section style="border:violet thin solid; width:39.8%; height:30px; float:left; margin:0.2% 0.2% 0.2% 0; text-align:center; line-height:30px;"><input type="radio" name="maumeo" /> Đen<input type="radio" name="maumeo" /> Trắng <input type="radio" name="maumeo" /> Khác</section>

        </section>
    </section>
    <section style="border:grey 2px solid; ">
        <section style="text-decoration:underline; text-align:center; color:violet; font-style:italic; font-weight:bold; border:none;">Lý do bạn yêu quý nó</section>
        <section style="text-align:center; margin-top:20px; border:none;"><textarea name="lydo" rows="2" cols="20"></textarea></section>
    </section>
    <section style="border:grey 2px solid;">
        <section style="text-align:center; margin-top:20px; border:none;"><input type="button" value="Huy" onclick="fHuy();" /> <input type="reset" value="Xoa" /><br /><br /> <input type="submit" value="Gui" /></section>
    </section>
</section>
</form>
</body>
</html>

Demo tạo site

Làm bài tập thiết kế form

Tạo site + template trong CS6

Tối ưu hóa ảnh

Nếu ảnh hiển thị (slideshow chẳng hạn) có kích thước lớn dẫn đến tải ảnh chậm, bạn nên cân nhắc chuyển ảnh sang định dạng webp.