Tạo các trang Web hiện đại bằng cách sử dụng HTML5 và CSS3

Triển khai thực hiện các phần tử canvas và video trong HTML5

Kể từ khi Mạng toàn cầu (World Wide Web) xuất hiện vào đầu những năm 1990, HTML đã phát triển để trở thành một ngôn ngữ đánh dấu tương đối mạnh mẽ, có thể được sử dụng để tạo các trang Web và các ứng dụng trực quan tuyệt đẹp và tương tác, trong khi vẫn nhận được tài trợ của các đối tác gần gũi của nó JavaScript và CSS. Hướng dẫn này là một giới thiệu năng động về HTML5 và CSS3. Nó cung cấp thông tin về chức năng và cú pháp cho nhiều phần tử mới và các API mà HTML5 phải cung cấp, cũng như các bộ chọn mới, các hiệu ứng, và các tính năng mà CSS3 mang đến cho bảng. Cuối cùng, nó sẽ cho bạn thấy cách phát triển một trang Web mẫu sử dụng nhiều các tính năng mới này. Khi hoàn thành hướng dẫn này, bạn sẽ sẵn sàng để xây dựng các trang Web hoặc các ứng dụng riêng của mình được vận hành bằng HTML5 và CSS3.

Joe Lennon, Nhà phát triển phần mềm, Core International

Joe Lennon là một nhà phát triển phần mềm 24 tuổi đến từ Cork, Ireland. Joe là tác giả của cuốn sách Beginning CouchDB, (Khởi đầu với CouchDB) do Apress sắp xuất bản, và đã đóng góp một số bài viết và hướng dẫn kỹ thuật cho developerWorks IBM. Trong lúc rảnh rỗi, Joe thích chơi bóng đá (soccer), lang thang với các tiện ích, và làm việc trên gamerscore Xbox 360 của mình. Có thể liên hệ với ông qua trang Web của ông tại địa chỉ www.joelennon.ie



15 11 2011

Trước khi bạn bắt đầu

Hướng dẫn này thừa nhận một số kinh nghiệm cơ bản với HTML, CSS, và JavaScript. Nó cho rằng bạn đã biết rõ một phần tử hoặc thẻ HTML là gì, một thuộc tính có nghĩa là gì, cú pháp cơ bản của ngôn ngữ đánh dấu HTML, cấu trúc chung của một trang Web, và v.v. Về CSS, hướng dẫn này cho rằng bạn đã quen với các bộ chọn dựa trên phần tử, lớp và mã định danh (ID), cú pháp của một đặc tính CSS, và cách bao gồm CSS trong các trang Web của bạn bằng cách sử dụng các bảng định tuyến nội tuyến hoặc bên ngoài. Cuối cùng, hướng dẫn này cũng giả định rằng bạn có một số kiến thức làm việc của JavaScript, chẳng hạn như biến, hàm, câu lệnh if và vòng lặp là gì, cũng như cách đưa mã JavaScript vào các trang Web của bạn. Nếu bạn cảm thấy rằng bạn cần phải xem lại bất kỳ một trong các công nghệ này trước khi bạn bắt đầu, hãy nhảy qua phần đầu đến phần Tài nguyên với một số hướng dẫn và các bài viết có ích sẽ giúp bạn nhanh chóng nắm được những kiến thức cơ bản về phát triển HTML, CSS, và JavaScript.

Về hướng dẫn này

Trên mười năm qua hay cũng chừng ấy, các khái niệm như Web 2.0, Rich Internet Applications (RIA - Các ứng dụng Internet phong phú), và Semantic Web (Web ngữ nghĩa) tất cả đã đẩy HTML, CSS, và JavaScript đến và vượt quá các giới hạn của chúng, thường dựa vào các trình cắm thêm chẳng hạn như Adobe® Flash để thúc đẩy các thành phần như video và âm thanh, cũng như các ứng dụng tương tác và đồ họa ở mức độ cao. Khung công tác phát triển Adobe Flex, nền tảng Silverlight của, Microsoft® và JavaFX tất cả đều quan tâm chu đáo đến sự hỗ trợ mà ở đó các điểm yếu của HTML làm cho các nhà phát triển thực hiện rất khó khăn. Tuy nhiên, với HTML5, ngôn ngữ đánh dấu đang gây ấn tượng trở lại, với sự hỗ trợ đa phương tiện đầy đủ, lưu trữ cục bộ và sự hỗ trợ ứng dụng không nối mạng, API vẽ 2D nguyên gốc, và một loạt của các API phát triển ứng dụng mới, tất cả được đưa ra với mục đích chứng tỏ rằng HTML, CSS, và JavaScript có thể cung cấp đầu vào phong phú cho các trang Web và các ứng dụng của bạn.

Nhiều người coi HTML5 là một trong những công nghệ mới quan trọng nhất được dự kiến xuất hiện vào năm 2010, và đã có một số cuốn sách được viết về đề tài này, một số trong đó được dự kiến xuất bản sớm vào tháng Ba năm nay. Trong nhiều năm, Web đã dựa vào các trình cắm thêm bên ngoài để phân phối các tính năng mà trình duyệt Web vốn không thể hỗ trợ được, cụ thể là về vẽ 2D, hình ảnh động, và đa phương tiện. Các phiên bản mới nhất của đặc tả HTML và CSS đều nhằm mục đích loại bỏ yêu cầu phải có các thành phần trình duyệt bổ sung này để tạo điều kiện thuận lợi cho các tính năng như vậy, cũng như làm giảm số lượng mã JavaScript cần thiết (hoặc loại bỏ hoàn toàn yêu cầu phải có mã JavaScript, trong một số trường hợp) cho những tính năng ít quan trọng như là kéo và thả hàng, phân chia hàng, và nhiều hơn nữa. Hãy làm theo hướng dẫn này để tìm hiểu cách lợi dụng HTML5.

Các điều kiện tiên quyết

HTML5 là một đặc tả tương đối mới mẻ, và kết quả là, sự hỗ trợ của trình duyệt khá hạn chế (tại thời điểm viết bài này). Mã được trình bày trong hướng dẫn này được xây dựng càng tương thích giữa các trình duyệt với nhau càng tốt, nhưng có một số tính năng sẽ không hoạt động trong tất cả các trình duyệt. Bất kỳ tính năng nào hiện là riêng cho trình duyệt sẽ được xác định rõ trong hướng dẫn này. Để đảm bảo rằng bạn có thể trải nghiệm tất cả các tính năng mới này, điều quan trọng là bạn nên cài đặt các phiên bản mới nhất của các trình duyệt Web sau đây trên hệ thống của bạn khi đang phát triển các ứng dụng HTML5 và CSS3:

Bạn không cần bất kỳ phần mềm cụ thể nào để viết mã HTML và CSS; trình soạn thảo văn bản cơ bản bất kỳ sẽ làm (chẳng hạn như Notepad, vi, emacs, và v.v..). Trong hướng dẫn này, giả định rằng mã nguồn được lưu trữ trong một thư mục trên máy tính cục bộ của bạn — bạn không cần phải sử dụng một máy chủ Web hoặc tải lên các tệp vào một dịch vụ lưu trữ trên máy chủ Web.


Các tính năng mới trong HTML5

Trong phần này, bạn sẽ khám phá một số trong các tính năng mới quan trọng mà HTML5 cần phải cung cấp. Trước tiên, bạn sẽ tìm hiểu về các phần tử ngữ nghĩa mới nhằm mục đích cung cấp nghĩa cho các phần khác nhau của một trang Web hiện đại: các tiêu đề (header), các chân trang (footer), các thanh chuyển hướng, các thanh phụ, và v.v.. Tiếp theo, bạn sẽ tìm hiểu về phần tử <canvas> và các JavaScript API vẽ 2D mới quan trọng mà bạn có thể sử dụng để tạo hình dạng, văn bản, các hình ảnh động, các chuyển cảnh, và nhiều hơn nữa. Tiếp theo, bạn sẽ thấy cách các phần tử <audio> và <video> mới dự kiến thay thế sự phụ thuộc hiện tại của trang Web vào Flash như một nền tảng phân phối đa phương tiện. Tiếp nữa, bạn sẽ được giới thiệu về các API lưu trữ cục bộ và sự hỗ trợ cho các ứng dụng không nối mạng, sẽ tiếp tục làm cho các ứng dụng Web phù hợp với các bản sao trên máy tính để bàn của chúng về chức năng, ngay cả khi không kết nối vào mạng hoặc Internet. Phần này được hoàn tất bằng một tổng quan tóm tắt về các phần tử, các thuộc tính, và các API mới khác được đề xuất trong đặc tả HTML5 hiện nay.

Các phần tử ngữ nghĩa

Đặc tả HTML5 bao gồm một loạt các phần tử ngữ nghĩa mới được sử dụng để đưa ra một số nghĩa cho các phần hoặc các bộ phận khác nhau của một trang Web, chẳng hạn như tiêu đề, chân trang, chuyển hướng, và v.v.. Trong các phiên bản trước của HTML, bạn thường sử dụng các phần tử <div> để tạo những bộ phận này, sử dụng ID hoặc các thuộc tính lớp để phân biệt chúng với nhau. Vấn đề là điều này không có nghĩa ngữ nghĩa, vì không có các quy tắc nghiêm ngặt quy định phải chỉ rõ các tên lớp hoặc các ID nào được sử dụng, làm cho việc xác định vùng cụ thể nào đang làm việc trở nên vô cùng khó khăn đối với phần mềm. HTML5 giúp làm giảm bớt những vấn đề này, làm cho việc phân tích cú pháp cấu trúc ngữ nghĩa của một tài liệu trở nên dễ dàng hơn đối với các trình duyệt Web.

Thật đáng giá để nói rằng việc tiếp tục sử dụng các phần tử <div> trong HTML5 là hoàn toàn hợp lệ, nhưng để công việc của bạn được nâng cấp dễ dàng, điều quan trọng là bạn sử dụng các phần tử ngữ nghĩa ở nơi có liên quan. Mặt khác, điều cần thiết là bạn tránh sử dụng các phần tử mới cho các mục đích khác hơn so với dự định của chúng. Ví dụ, không nên sử dụng phần tử <nav> cho nhóm các liên kết bất kỳ; nó được dự kiến để bao quanh khối chuyển hướng chính trên trang đó.

Các phần tử ngữ nghĩa chính mà HTML5 giới thiệu là:

<header (tiêu đề)>
Phần tử này được sử dụng để định nghĩa một tiêu đề cho một số phần của một trang Web, có thể là toàn bộ trang, một phần tử <article>, hoặc một phần tử <section>.
<footer (chân trang)>
Giống như phần tử <header>, phần tử mới này định nghĩa một chân trang cho một số phần của một trang. Một chân trang không cần ở cuối của một trang, một phần tử article (bài viết), hoặc một phần tử section (phần), như nó thường làm.
<nav (chuyển hướng)>
Đây là một thùng chứa cho các liên kết chuyển hướng ban đầu trên một trang Web. Phần tử này không được dự kiến sử dụng với tất cả các nhóm các liên kết và chỉ nên được dùng cho các khối chuyển hướng lớn. Nếu bạn có một phần tử <footer> có chứa các liên kết chuyển hướng, thì bạn không cần bọc các liên kết này trong một phần tử <nav>, do phần tử <footer> cũng sẽ đáp ứng cho riêng nó.
<article (bài viết)>
Phần tử <article> được sử dụng để định nghĩa một mục độc lập trên trang có thể dùng cho riêng nó, chẳng hạn như một mục tin tức, bài viết trên blog, hoặc nhận xét. Thường sử dụng các nguồn cung cấp RSS để cung cấp các mục này.
<section (phần)>
Phần tử này đại diện cho một phần của một tài liệu hoặc ứng dụng, chẳng hạn như một chương hoặc một phần của một bài viết hoặc hướng dẫn. Ví dụ, phần bạn đang đọc bây giờ có thể được bao quanh bởi một phần tử <section> trong HTML5. Các phần tử <section> thường có một tiêu đề, mặc dù cũng không cần thiết lắm. Ví dụ, tiêu đề cho phần bạn đang đọc bây giờ sẽ chứa văn bản "Các phần tử ngữ nghĩa".
<aside (nhận xét)>
Phần tử mới này có thể được sử dụng để đánh dấu một thanh phụ hoặc một số nội dung khác được cho là có phần tách rời với nội dung xung quanh nó. Một ví dụ về điều này có thể là các khối quảng cáo.
<hgroup>
Trong một số trường hợp, một trang, bài viết, hoặc một phần có thể cần nhiều hơn một tiêu đề, chẳng hạn như ở đây bạn có một tiêu đề và phụ đề. Ví dụ, hướng dẫn này có tiêu đề "Tạo các trang Web hiện đại sử dụng HTML5 và CSS3" và phụ đề "Triển khai các phần tử canvas và video trong HTML5". Bạn có thể bọc tiêu đề và phụ đề này trong phần tử <hgroup> , bằng cách sử dụng một phần tử <h1> cho tiêu đề chính và một phần tử <h2> cho phụ đề.

Trang Web mẫu ở cuối hướng dẫn này gồm có một số các phần tử ngữ nghĩa mới này, và tôi sẽ giải thích cú pháp của chúng và sử dụng chi tiết hơn tại thời điểm đó.

Phần tử <canvas>

Phần tử <canvas> (khung nền ảnh) được Apple® phát triển để sử dụng trong các widget (tiện ích) của Mac OS X Dashboard và trong Safari, nhưng sau đó đã được Mozilla® và Opera® chấp nhận trong các trình duyệt Web của họ. Phần tử này đã được tiêu chuẩn hóa và đã bao gồm trong đặc tả HTML5, cùng với một loạt các API vẽ 2D có thể được sử dụng để tạo các hình dạng, văn bản, các chuyển cảnh, và hình ảnh động bên trong phần tử này.

Nhiều người tin rằng phần tử <canvas> là một trong những khía cạnh quan trọng nhất của HTML5 do nó tạo điều kiện sản xuất các biểu đồ, các trò chơi tương tác, các ứng dụng vẽ, và các đồ họa khác đang hoạt động mà không cần cần các trình cắm thêm bên ngoài, chẳng hạn như Adobe Flash.

Chính phần tử <canvas> là khá cơ bản, định nghĩa chiều rộng, chiều cao, và mã định danh (ID) duy nhất cho đối tượng. Sau đó nhà phát triển phải sử dụng một loạt các JavaScript API để thực sự vẽ các đối tượng trên khung nền ảnh (canvas), thường khi trang Web đã hoàn tất dựng hình. Những API này cho phép nhà phát triển vẽ hình dạng và các đường kẻ, phết màu, độ mờ đục và các gradient (độ dốc); tạo văn bản; chuyển đổi các đối tượng khung nền ảnh; và thể hiện hình ảnh động. Các API cũng cho phép phần tử <canvas> tương tác và đáp ứng với đầu vào người dùng chẳng hạn như các sự kiện chuột và các sự kiện bàn phím, tạo điều kiện thuận lợi cho việc sản xuất các trò chơi và các ứng dụng Web trên khung nền ảnh. Bạn sẽ thấy một ví dụ về phần tử <canvas> đang hoạt động trong trang Web HTML5/CSS3 mẫu sau trong hướng dẫn này.

Phát <audio> và <video>

Trong những năm gần đây, tính phổ biến của các trang Web chia sẻ video như YouTube và các nền tảng phân phối nội dung như Hulu đã chứng kiến một sự bùng nổ to lớn trong việc sử dụng Web để tạo luồng đa phương tiện. Thật không may, người ta không thể xây dựng được Web với nội dung theo ý đồ này, và kết quả là, định dạng tệp Flash Video (.flv) và các nền tảng Adobe Flash nhìn chung đã làm đơn giả hóa việc cung cấp các video và âm thanh.

Tuy nhiên, HTML5 bao gồm cả sự hỗ trợ cho hai phần tử mới, <audio> và <video>, cho phép các nhà phát triển Web bao gồm các nội dung đa phương tiện mà không cần người dùng cài đặt các trình cắm thêm của trình duyệt. Một số trình duyệt, gồm có Mozilla Firefox, Apple Safari, Google Chrome, đã bắt đầu hỗ trợ các phần tử mới này và cung cấp các nút điều khiển phát lại của trình duyệt chuẩn, nên chắc là người dùng sẽ chọn sử dụng chúng. Ngoài ra, một tập hợp các JavaScript API chuẩn đã được cung cấp để cho phép các nhà phát triển tạo các nút điều khiển phát lại riêng của họ, chắc là họ muốn làm như vậy. Một lợi thế quan trọng để phát lại đa phương tiện nguyên gốc là về mặt lý thuyết nó đòi hỏi ít tài nguyên CPU hơn, điều này cho phép tiết kiệm năng lượng.

Tuy nhiên, một vấn đề quan trọng với các phần tử đa phương tiện mới này là các định dạng tệp được từng trình duyệt hỗ trợ và các vấn đề cấp phép bằng sáng chế thường đi cùng với các bộ mã hóa/giải mã (codec) khác nhau dùng để mã hóa các tệp này. Mozilla và Opera muốn sử dụng các thùng chứa video Theora và codec mã nguồn mở, không đòi hỏi cấp giấy phép bằng sáng chế để bao gồm các codec đó trong trình duyệt Web. Mặt khác, Apple và Google không hài lòng với chất lượng của Theora, cụ thể đối với việc phân phối các nội dung độ nét cao (HD) trên những trang Web giống như YouTube. Họ thích codec H.264, thường có trong các tệp MP4, MOV, hoặc MKV.

Tuy nhiên, vấn đề không chỉ với video, do có các vấn đề tương tự với các codec âm thanh. Các định dạng MP3 và AAC bị hạn chế bởi các bằng sáng chế, trong khi định dạng Vorbis thì không. Vấn đề với âm thanh Vorbis là nó không được sử dụng rộng rãi, do các máy phương tiện di động và nhiều ứng dụng phần mềm phương tiện không hỗ trợ nó.

Có rất nhiều quyết định được đưa ra về các phần tử <video> về <audio> của HTML5 trong tương lai gần, và sẽ rất thú vị để xem các codec và các định dạng nào được đơn giản hóa theo khuyến cáo cuối cùng. Trong khi đó, bạn có thể cố gắng hỗ trợ tất cả các trình duyệt bằng cách làm cho video có sẵn theo một loạt các định dạng và bằng cách cung cấp video Flash như là một sự thay thế. Chúng ta hãy hy vọng rằng quyết định cuối cùng được thực hiện, và nó không để cho các nhà cung cấp trình duyệt quyết định hỗ trợ các định dạng nào, vì điều đó về cơ bản sẽ làm cho những phần tử mới này vô dụng.

Một lần nữa, bạn sẽ thấy phần tử <video> đang hoạt động sau nữa trong hướng dẫn này.

Các ứng dụng không nối mạng và lưu trữ cục bộ

Các nhà phát triển Web có truyền thống sử dụng các cookie để lưu trữ thông tin trên máy tính cục bộ của khách truy cập, cho phép một trang Web đọc lại thông tin này tại một điểm sau đó. Trong khi các cookie rất có ích để lưu trữ dữ liệu cơ bản, thì chúng lại bị hạn chế bởi thực tế là các trình duyệt Web thường không cần thiết giữ lại hơn 20 cookie cho mỗi một máy chủ Web hoặc nhiều hơn 4KB dữ liệu cho mỗi cookie (bao gồm cả tên và giá trị). Ngoài ra, chúng được gửi đến máy chủ Web với mọi yêu cầu HTTP, gây ra lãng phí tài nguyên.

HTML5 cung cấp một giải pháp cho các vấn đề này bằng các Local Storage API (API lưu trữ cục bộ ), được trình bày trong một đặc tả riêng với tài liệu HTML5 chính. Tập các API này cho phép các nhà phát triển lưu trữ thông tin trên máy tính của khách truy cập trong khi vẫn có cơ sở để tin chắc rằng chúng vẫn có ở đó sau này. Ngoài ra, thông tin có thể truy cập ở bất kỳ điểm nào (ngay cả sau khi trang đã được đưa ra) và không được tải tự động với mỗi yêu cầu HTTP. Đặc tả này gồm có các hạn chế cùng nguồn gốc (same-origin), để ngăn cản các trang Web khỏi bị các trang Web khác đọc hoặc thay đổi dữ liệu đã lưu.

Hầu hết các trình duyệt đều lưu trữ các trang Web trong bộ nhớ nhanh cục bộ, cho phép xem chúng ngay cả khi người dùng không nối mạng. Việc này hoạt động tốt với các trang tĩnh, nhưng nó không có sẵn cho nội dung động thường dựa vào cơ sở dữ liệu, chẳng hạn như Gmail, Facebook, Twitter. HTML5 cung cấp sự hỗ trợ cho các ứng dụng không nối mạng, ở đây trình duyệt tải tất cả các tệp cần thiết để sử dụng không cần nối mạng ứng dụng, và khi người dùng sử dụng không nối mạng ứng dụng, trình duyệt có thể cho phép các thay đổi bất kỳ được thực hiện trong quá trình này được tải lên máy chủ khi chúng kết nối lại vào mạng Internet.

Cải tiến biểu mẫu Web

Nếu bạn đã tạo các ứng dụng Web từ trước, bạn có khả năng quen hơn với tập các nút điều khiển biểu mẫu của HTML, một số trong đó được triển khai thực hiện bằng cách sử dụng phần tử <input>. Trong HTML 4, các kiểu đầu vào sau đây đã được hỗ trợ:

  • button (nút ấn)
  • checkbox (hộp kiểm tra)
  • file (tệp)
  • hidden (ẩn)
  • image (hình ảnh)
  • password (mật khẩu)
  • reset (thiết lập lại)
  • radio (nút tròn)
  • submit (trình lên)
  • text (văn bản)

Ngoài ra, có một số phần tử khác được sử dụng theo các biểu mẫu như <select> và <textarea>. Các nút điều khiển của biểu mẫu này cung cấp nhiều chức năng cho các trường biểu mẫu cơ bản như tên, số điện thoại, và địa chỉ — giống như bạn có thể thấy trên một biểu mẫu liên hệ. Tuy nhiên, Web là một nền tảng đã phát triển vượt xa giai đoạn mà ở đó các biểu mẫu HTML được sử dụng để trình lên các biểu mẫu liên hệ — bây giờ chúng được sử dụng để trình lên dữ liệu ứng dụng để xử lý bên phía máy chủ. Kết quả là, chính các nhà phát triển ứng dụng Web liên tục thấy mình cần một số nút điều khiển biểu mẫu tinh vi hơn, chẳng hạn như các nút quay tròn, các thanh trượt, các nút chọn ngày/giờ, các nút chọn màu sắc, và v.v..

Để cung cấp các kiểu nút điều khiển này, các nhà phát triển cần sử dụng một thư viện JavaScript bên ngoài để cung cấp các thành phần giao diện người dùng (UI), hoặc sử dụng một khung công tác phát triển thay thế khác như Adobe Flex, Microsoft Silverlight, JavaFX. HTML5 nhằm mục đích lấp đầy một số các khoảng trống do phiên bản trước của nó để lại trong lĩnh vực này bằng cách cung cấp toàn bộ các kiểu đầu vào khác nhau của biểu mẫu mới:

  • color (màu)
  • date (ngày)
  • datetime (ngày giờ)
  • datetime-local (ngày giờ địa phương)
  • email (thư điện tử)
  • month (tháng)
  • number (số)
  • range (phạm vi)
  • search (tìm kiếm)
  • tel (điện thoại)
  • time (thời gian)
  • url (địa chỉ)
  • week (tuần)

Lúc này, việc hỗ trợ cho các trường biểu mẫu mới còn khá hạn chế. Trình duyệt Mobile Safari trên iPhone sử dụng của một số các kiểu mới này để thay đổi kiểu trình bày bàn phím cho người sử dụng (ví dụ, với các kiểu e-mail, ký hiệu @ và các phím tắt .com sẽ được hiển thị). Ngoài ra, Opera cung cấp một số widget mới cho nhiều nút điều khiển này, bao gồm một nút quay tròn cho kiểu số và một nút chọn ngày của lịch cho các kiểu có liên quan đến ngày. Kiểu có sẵn phổ biến nhất trong các đề xuất mới này là kiểu phạm vi, được Opera, Safari và Google Chrome biểu thị là một thanh trượt.

Ngoài các kiểu đầu vào mới, HTML5 cũng hỗ trợ hai tính năng chính mới cho các trường biểu mẫu. Tính năng đầu tiên trong số này là trọng tâm tự động, để ra lệnh cho một trình duyệt tự động tập trung vào một trường biểu mẫu cụ thể khi trang được biểu thị, mà không đòi hỏi mã JavaScript làm như vậy. Tính năng nâng cao thứ hai là thuộc tính giữ chỗ, cho phép nhà phát triển định nghĩa văn bản sẽ xuất hiện trong một nút điều khiển có dạng hộp văn bản khi nội dung của nó rỗng. Một ví dụ về điều này là một hộp tìm kiếm ở đó nhà phát triển không muốn sử dụng một nhãn bên ngoài hộp cho chính nó. Thuộc tính giữ chỗ cho phép nhà phát triển định rõ văn bản sẽ hiển thị khi giá trị của nút điều khiển rỗng, và nút điều khiển đó không tập trung vào. Một ví dụ về điều này được thể hiện trong Hình 1.

Hình 1. Thuộc tính giữ chỗ đang hoạt động
Các trường đầu vào text sau được hiển thị: Name, Email,Phone, Callback on, và Priority. Trường tên có tên là Joe Lennon. Các trường Email và Phone có văn bản giữ chỗ màu xám. Một nút ở dưới đáy là 'Request call.'

Như Hình 1 cho thấy, văn bản giữ chỗ của địa chỉ e-mail và số điện thoại xuất hiện với màu xám, khi trường này rỗng và không tập trung vào. Ảnh chụp màn hình này cũng cho thấy một ví dụ về một kiểu đầu vào phạm vi, ở đây được biểu diễn bằng một thanh trượt trong trình duyệt Safari. Ảnh chụp màn hình này được chụp từ trang Web mẫu được thảo luận sau nữa trong hướng dẫn này.

Các tính năng mới khác

HTML5 bao gồm rất nhiều tính năng mới; không thể trình bày tất cả chúng trong hướng dẫn này. Phần này đưa ra một cái nhìn tổng quan ngắn gọn về một số các cải tiến khác trong đặc tả này.

Web worker (Các trình làm việc trên nền Web)
Tính năng này cho phép mã JavaScript được thiết lập để chạy trong một quá trình nền đang tạo điều kiện thuận lợi cho sự phát triển của các ứng dụng đa luồng. Lợi ích chủ yếu mà Các trình làm việc trên nền Web (Web workers) cung cấp cho các nhà phát triển là có thể xử lý tính toán tập trung trong nền mà không ảnh hưởng đến tốc độ của giao diện người dùng.
Geolocation (Định vị địa lý)
HTML5 có một API định vị địa lý cho phép một ứng dụng Web xác định vị trí địa lý hiện tại của bạn, giả sử thiết bị mà bạn đang nhắm tới cung cấp các tính năng để tìm kiếm các thông tin như vậy (ví dụ, GPS trên điện thoại di động). Nếu bạn không có một thiết bị hỗ trợ tính năng này (chẳng hạn như một điện thoại thông minh iPhone hoặc Android 2.0), bạn có thể sử dụng Firefox và tải về một trình cắm thêm để cho phép bạn thiết lập vị trí của mình bằng tay.
Kéo và thả
Một tính năng thú vị khác chứa trong một API kéo và thả. Cho đến nay, việc thực hiện kéo và thả không có các trình cắm thêm đã lệ thuộc vào một số mã JavaScript rất phức tạp hoặc sử dụng một thư viện JavaScript như script.aculo.us.
Tạo tin nhắn giữa các tài liệu
Tính năng này cho phép các tài liệu trong các cửa sổ khác nhau (và với iframes khác nhau) gửi và nhận tin nhắn với nhau. Tính năng này đã chứng tỏ rất có ích cho sự phát triển của các widget và các ứng dụng được lưu trữ trên các máy chủ khác với máy chủ của trang Web ban đầu (tương tự như các ứng dụng Facebook).
Và nhiều tính năng khác
Các tính năng khác mới được HTML5 giới thiệu bao gồm các kiểu MIME và đăng ký trình xử lý giao thức, vì vậy các ứng dụng Web có thể được đăng ký như các ứng dụng mặc định với một kiểu tệp hoặc giao thức cụ thể; quản lý lịch sử trình duyệt, mà cho đến bây giờ vẫn cần phải được thực hiện thủ công hoặc bằng cách sử dụng một khung công tác JavaScript bên ngoài; và một loạt các phần tử và các thuộc tính mới khác làm cho các nhà phát triển Web thực hiện dễ dàng hơn.

Các tính năng mới trong CSS3

Phần này giới thiệu cho bạn các tính năng mới có thể tìm thấy trong các đặc tả CSS cấp 3 — bao gồm các bộ chọn CSS mới ví dụ như các lớp có cấu trúc, dựa vào trạng thái, và giả phủ định; cũng như các kiểu bộ chọn mới khác. Nó cũng cho thấy nhiều hiệu ứng mà CSS3 cung cấp trước đây đã đòi hỏi các hình ảnh được tạo ra bằng cách sử dụng một ứng dụng riêng biệt và được lưu trữ dưới dạng GIF, JPG, PNG. Các hiệu ứng này bao gồm các hình bóng rơi trên văn bản và các hộp, các góc được làm tròn trên các đường viền, và sử dụng tính mờ đục để tạo ra một sự xuất hiện mờ. Nhiều tính năng trong số đó (chẳng hạn như độ mờ đục và các góc được làm tròn) là tương đối phổ biến trong sử dụng do thực tế là chúng làm giảm nhiều khả năng tùy chỉnh trong các trình duyệt Web di sản. Tiếp theo, bạn sẽ tìm hiểu về các cách bố trí nhiều cột mới mà bạn có thể tạo ra chúng khi sử dụng CSS3. Các cách bố trí này là một sự tạo mẫu cho bố cục tờ báo ở nơi văn bản sẽ trải dài trên một số các cột đã đặt hoặc theo chiều rộng cột cụ thể khi cần. Một tính năng khác sẽ được thảo luận là vấn đề bao gồm các phông chữ Web phi tiêu chuẩn nhờ sử dụng thẻ @font-face. Cuối cùng, sẽ giới thiệu một số các tính năng CSS3 mới khác, chẳng hạn như sự hỗ trợ cho HSL (Hue, Saturation và Lightness - Màu sắc, độ bão hòa, cường độ ánh sáng) và các mô hình màu RGBA (Đỏ, Xanh lá cây, Xanh da trời, và Alpha).

Các bộ chọn mới

Bộ chọn CSS đề cập đến cách thức để định kiểu (các) phần tử HTML theo một bảng định kiểu. Ví dụ, để đặt một đường viền xung quanh tất cả các phần tử <div> bạn sẽ sử dụng bộ chọn div: div { border: 1px solid #000; }.

Để quét một màu nền cho tất cả các phần tử có làm nổi bật lớp, bạn sẽ sử dụng bộ chọn: .highlight { background-color: yellow; }.

Cuối cùng, để thay đổi độ rộng của một phần tử có giá trị thuộc tính ID là myDiv, bạn sẽ sử dụng: #myDiv { width: 250px; }.

Tất nhiên, có thể kết hợp các bộ chọn này, do đó để chọn tất cả các phần tử <div> có làm nổi bật lớp highlight, bạn sẽ sử dụng div.highlight, hoặc chọn phần tử <div> có ID là myDiv bạn sẽ sử dụng div#myDiv.

Ngoài các bộ chọn đơn giản này, CSS cũng bao gồm (và đã thực hiện kể từ các phiên bản trước) một loạt các bộ chọn phức tạp hơn. Ví dụ, bạn có thể sử dụng bộ chọn input[type="text"] để chọn chỉ các phần tử đầu vào có chứa một kiểu thuộc tính có giá trị là text. Hoặc bạn có thể sử dụng lớp-giả :hover để định kiểu một phần tử khi chuột ở trên nó, ví dụ: a:hover { color: red; }.

Có nhiều bộ chọn hơn nữa, tất cả các bộ chọn đều được cung cấp để làm cho việc chọn lựa một phần tử theo kiểu dáng dễ dàng hơn. Với CSS3, thậm chí có nhiều bộ chọn mới hơn đã được thêm vào hòa trộn, tất cả chúng đều giúp nhà phát triển thực hiện dễ dàng hơn và làm giảm số lượng mã HTML và JavaScript cần phải viết.

Các bộ chọn thuộc tính

E[foo^="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó bắt đầu chính xác bằng chuỗi bar
E[foo$="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó kết thúc chính xác bằng chuỗi bar
E[foo*="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó chứa chuỗi bar

Các lớp-giả có cấu trúc

E:root
Chọn một phần tử, E, gốc của tài liệu (thẻ <html>)
E:nth-child(n)
Chọn một phần tử, E, phần tử con thứ n của phần tử cha mẹ của nó
E:nth-last-child(n)
Chọn một phần tử, E, phần tử con cuối cùng thứ n của phần tử cha mẹ của nó
E:nth-of-type(n)
Chọn một phần tử, E, phần tử anh chị em thứ n của kiểu của nó
E:nth-last-of-type(n)
Chọn một phần tử, E, phần tử anh chị em cuối cùng thứ n của kiểu của nó
E:last-child
Chọn một phần tử, E, mà phần tử của nó là phần tử con cuối cùng của phần tử cha mẹ của nó (Lưu ý rằng E:first-child đã được định nghĩa trước trong CSS2)
E:first-of-type
Chọn một phần tử, E, phần tử anh chị em đầu tiên của kiểu của nó
E:last-of-type
Chọn một phần tử, E, phần tử anh chị em cuối cùng của kiểu của nó
E:only-child
Chọn một phần tử, E, phần tử con duy nhất của phần tử cha mẹ của nó
E:only-of-type
Chọn một phần tử, E, phần tử anh chị em duy nhất của kiểu của nó
E:empty
Chọn một phần tử, E, không có phần tử con nào (bao gồm cả các nút văn bản)

Lớp-giả target

E:target
Chọn một phần tử, E, là đích của URI đang biểu thị

Phần tử UI nói đến các lớp-giả

E:enabled
Chọn một phần tử giao diện người dùng, E, được kích hoạt
E:disabled
Chọn một phần tử giao diện người dùng, E, bị vô hiệu hóa
E:checked
Chọn một phần tử giao diện người dùng, E (một nút radio hay hộp kiểm tra), được đánh dấu chọn hoặc được chọn

Các lớp-giả Negation

E:not(s)
Chọn một phần tử, E, không khớp với bộ chọn đơn giản s

Bộ kết hợp anh chị em chung

E ~ F
Chọn một phần tử, F, có một phần tử E đứng trước

Sự hỗ trợ của trình duyệt cho các bộ chọn thuộc tính mới và bộ kết hợp anh chị em chung là tuyệt vời, do chúng làm việc trên hầu như tất cả các trình duyệt Web hiện đại. Sự hỗ trợ cho các lớp-giả mới có trong các phiên bản mới nhất của hầu hết các trình duyệt, nhưng bạn có thể cần có cả các bản thay thế cho các trình duyệt cũ hơn như Internet Explorer 6/7 và Firefox 3.0.

Các hiệu ứng mới

Mặc dù các bộ chọn mới có lẽ là những tính năng làm giảm đau đầu cho các nhà phát triển nhiều nhất, những cải tiến mà mọi người muốn nhìn thấy là các hiệu ứng mới sáng chói có sẵn. Các hiệu ứng này được đơn giản hóa thông qua một loạt các đặc tính CSS mới, bao gồm:

  • nền (bây giờ mới hỗ trợ nhiều nền)
  • mẫu-nền
  • gốc-nền
  • kích thước-nền
  • bán kính-đường viền (các góc được làm tròn)
  • hình ảnh-đường viền
  • màu sắc-đường viền (các đườmg viền gradient)
  • hình bóng-hộp (bóng rơi trên các hộp không có hình ảnh)
  • kích thước-hộp
  • độ mờ
  • khoảng trống-đường bao
  • chỉnh lại kích thước
  • tràn-văn bản
  • hình bóng-văn bản
  • bọc-từ

Trang Web HTML5/CSS3 mẫu mà bạn sẽ tạo ở cuối của hướng dẫn này sẽ hiển thị một số những hiệu ứng mới đang hoạt động.

Các bố trí nhiều cột

Các cách bố trí nhiều cột CSS3 tính đến văn bản được trải rộng trên một số cột, giống như bạn có thể thấy trong một tờ báo. Điều này có thể được thực hiện theo hai cách, hoặc sử dụng đặc tính độ rộng cột, ở đó bạn định nghĩa mỗi cột sẽ rộng bao nhiêu (số lượng các cột được xác định bởi các vùng có sẵn cho thùng chứa), hoặc bằng cách sử dụng đếm-cột, ở đó bạn định nghĩa số lượng các cột cần được sử dụng. Sau đó độ rộng sẽ thay đổi dựa vào vùng có sẵn cho mỗi cột.

Các tính năng khác về các cách bố trí nhiều cột bao gồm đặc tính khoảng hở-cột, cho phép nhà phát triển định nghĩa khoảng không gian cần có giữa các cột khi sử dụng phương thức độ rộng-cột. Một sự bổ sung có ích khác là đặc tính quy tắc-cột, cho phép một quy tắc định kiểu-đường viền được đặt giữa các cột. Cuối cùng có đặc tính là phân phối-không gian-cột, xác định cách để lại khoảng trống cần được phân bổ giữa các cột.

Các cách bố trí các cột hiện được các trình duyệt Mozilla và WebKit hỗ trợ. Hiện nay, các cách bố trí này được thực hiện bằng các đặc tính độc quyền tạm thời được bắt đầu bằng - moz hay -Webkit, tương ứng. Khi đặc tả này đã được hoàn tất, các trình duyệt này cuối cùng sẽ chuyển sang các đặc tính tiêu chuẩn CSS.

Các phông chữ Web

Các phông chữ Web đã thực sự được đề xuất cho CSS2 và đã có sẵn trong Microsoft Internet Explorer từ phiên bản 5. Thật không may, việc này đòi hỏi sử dụng định dạng phông chữ .eot độc quyền (Embedded Open Type - Kiểu mở nhúng), và không ai trong số các nhà cung cấp trình duyệt khác lại chọn triển khai nó. Kết quả là, các phông chữ Web không bao giờ thực sự được chọn trên các trang Web dựa vào CSS2.

Tuy nhiên, với các phiên bản mới nhất của các trình duyệt Firefox, Safari, Chrome, và Opera, bây giờ bạn có thể sử dụng quy tắc @font-face để sử dụng bất kỳ các phông chữ được cấp phép .ttf (TrueType) hoặc .otf (OpenType) trên trang Web của mình. Một ví dụ về quy tắc quy tắc @font-face như sau: @font-face { font-family: Alexa; src: url('Alexa.otf'); }.

Bây giờ bạn có thể sử dụng phông chữ này theo các quy tắc CSS riêng của bạn, chẳng hạn như: article p { font-family: Alexa, Arial, Helvetica, sans-serif; }.

Hãy nhớ rằng các phông chữ giống như các hình ảnh — nếu chúng không phải là của riêng bạn thì bạn có thể cần giấy phép để sử dụng chúng trên Web. Ngoài ra, bạn có thể trả tiền (hoặc tải về miễn phí) cho một số phông chữ trả phí một lần để có thể đưa các phông này vào các trang Web của bạn khi bạn thích.

Các tính năng mới khác

CSS3 cũng bao gồm nhiều tính năng mới khác, gồm sự hỗ trợ cho các giá trị màu mới, đặc biệt là HSL (Hue, Saturation, Lightness) và hai giá trị màu có các đặc tính alpha — RGBA (Red, Green, Blue, Alpha) và HSLA (Hue, Saturation, Lightness, Alpha). Các truy vấn phương tiện sẽ cho phép bạn định nghĩa kiểu dáng khác nhau cho các thiết bị khác nhau dựa vào kích thước khung nhìn của chúng. Ví dụ, bạn có thể cung cấp kiểu dáng cụ thể cho các thiết bị có khung nhìn thấp hơn 500 điểm ảnh (chẳng hạn như điện thoại thông minh, PDA hoặc các thiết bị di động khác). Mô đun tiếng nói của CSS3 cho phép bạn điều khiển các đặc tính tiếng nói cho một trình đọc màn hình, bao gồm cả âm lượng, sự cân bằng, tốc độ, nén, và nhiều hơn nữa.


Kết hợp tất cả lại với nhau: Trang HTML5/CSS3 mẫu

Ở giai đoạn này, chắc bạn muốn nhúng tay vào và bắt đầu tạo các trang sử dụng các tính năng mới quan trọng mà HTML5 và CSS3 cần cung cấp. Trong phần này, bạn sẽ tạo một trang HTML có chứa nhiều tính năng mới này. Phần này của hướng dẫn sẽ chia sự phát triển của trang thành các phần con như sau:

  • Cấu trúc trang HTML5 cơ bản
  • Sử dụng các phần tử ngữ nghĩa mới
  • Giới thiệu phần tử <video>
  • Cải tiến biểu mẫu Web
  • Phần tử <canvas> và API vẽ 2D

Toàn bộ mã nguồn sẽ được xây dựng trong một tệp HTML duy nhất, có tên là index.html (xem phần Tải về). Bạn có thể mở tệp này từ bất kỳ vị trí nào trên máy tính của bạn; không cần triển khai tệp này lên một máy chủ Web để tải về. Một số trình duyệt có thể cung cấp cho bạn các cảnh báo về việc chạy kịch bản lệnh cục bộ, vì vậy hãy chắc chắn theo dõi các tính năng tạo kịch bản động nếu được yêu cầu.

Trong lúc thực hiện, hãy bổ sung thêm các quy tắc CSS cho trang này vào một tệp bảng định kiểu bên ngoài, có tên là styles.css. Bạn sẽ thấy một số ví dụ về các đặc tính CSS3 mới như là bán kính-đường viền,hình bóng-văn bản, hình bóng-hộp trong trang mẫu này.

Dù sao, thế cũng đủ cho công việc này rồi, vậy chúng ta hãy bắt đầu với một số HTML5!

Cấu trúc trang HTML5 cơ bản

Như bạn đã biết rõ, các trình duyệt Web có thể hoạt động trong các chế độ khác nhau tùy thuộc vào việc có sẵn một doctype (kiểu văn bản hợp lệ) trong một tài liệu HTML không. Nếu không tìm thấy doctype hợp lệ nào, trình duyệt sẽ hoạt động trong chế độ quirks, trong đó một số tính năng phi tiêu chuẩn được duy trì để tương thích ngược. Nếu tìm thấy có doctype hợp lệ, trình duyệt sẽ hoạt động trong chế độ các chuẩn, theo các chuẩn W3C và IETF.

Kiểu văn bản cho HTML5 là rất đơn giản: <!doctype html>.

Bạn nên đặt dòng này ở đầu mỗi trang HTML5 mà bạn tạo. Chúng ta hãy tiếp tục và định nghĩa các phác thảo cơ bản cho trang index.html. Có thể tìm thấy đoạn mã này trong Liệt kê 1.

Liệt kê 1. Cấu trúc tài liệu HTML5 cơ bản
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Demo</title>
        <link rel="stylesheet" href="styles.css" />
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
        <![endif]-->
    </head>
    <body>

    </body>
</html>

Bạn có thể nhận thấy rằng không giống như các hương vị XHTML gần đây của HTML, thẻ <html> đang mở không còn đòi hỏi các thuộc tính xmlns hoặc xml:lang nữa, và chỉ riêng thuộc tính lang cũng đủ. Tương tự như vậy, phần tử <meta> mô tả một tập ký tự thuộc tính tốc ký mới để định nghĩa mã hóa ký tự của trang. Thật đáng giá để nói rằng những thay đổi này chỉ làm dễ dàng hơn và làm giảm số lượng mã cần thiết để thực hiện các nhiệm vụ đơn giản. Các phương thức cũ vẫn hoàn toàn hợp lệ.

Bạn cũng có thể tự hỏi tại sao phần tử <link> không mô tả thuộc tính type (kiểu). CSS chỉ được hỗ trợ kiểu bảng định kiểu hiện nay, và tất cả các trình duyệt hiện đại sẽ thừa nhận kiểu text/css nếu không có kiểu nào được cung cấp, vì vậy kiểu không phải là bắt buộc. Vậy, hoàn toàn có thể cung cấp thuộc tính type nếu bạn muốn như vậy.

Điểm cuối cùng đáng chú ý trong Liệt kê 1 là phần tử <script>, nó tải tệp JavaScript html5.js được lưu trữ trên máy chủ ngoài. Khi các trình duyệt Microsoft Internet Explorer (phiên bản 8) không hỗ trợ các phần tử HTML5 mới, trình duyệt này không nhận ra các phần tử như <article>, <section>, <header>, và v.v. Nó không chỉ không nhận ra những phần tử này, mà còn ngăn cản chúng được định kiểu. Nỗ lực thành công để tránh các vấn đề này là sử dụng hàm JavaScript document.createElement() để tạo các phần tử giả cho mỗi thẻ. Kịch bản lệnh này sẽ thực hiện việc này cho tất cả các phần tử HTML5 mới do đó bạn không phải lo lắng về nó. Tôi khuyên bạn nên bao gồm cả kịch bản lệnh này trong tất cả các công việc HTML5 của bạn.

Tiếp theo, bạn sẽ thêm một số các phần tử ngữ nghĩa mới vào trang này để tạo cấu trúc hình ảnh của trang. Bạn cũng sẽ tạo ra một số quy tắc của bảng định kiểu để làm cho trang này trông dễ coi hơn.

Sử dụng các phần tử ngữ nghĩa mới

Để minh họa cách các phần tử ngữ nghĩa HTML5 mới nên được sử dụng như thế nào, bây giờ bạn sẽ thêm những các phần tử ngữ nghĩa này vào tệp index.html. Cấu trúc cơ bản của các phần tử này sẽ tuân thủ nét phác thảo sau đây:

  • header (tiêu đề)
    • hgroup
  • nav (chuyển hướng)
  • article (bài viết)
    • header (tiêu đề)
    • section (phần)
      • header (tiêu đề)
  • footer (chân trang)

Như bạn thấy, trang này sẽ tự mở ra với một header (tiêu đề), theo sau bởi một nav (chuyển hướng), sau đó một article bài viết), và cuối cùng là một footer (chân trang). header sẽ có nhiều nhóm tiêu đề sử dụng phần tử hgroup. article sẽ có một tiêu đề cũng như một phần tử section cũng có tiêu đề riêng của nó. Mã cho cấu trúc này được thể hiện trong Liệt kê 2, và nên được thêm vào giữa thẻ <body> mở và đóng của Liệt kê 1.

Liệt kê 2. Khi sử dụng các phần tử ngữ nghĩa HTML5
<header>
    <hgroup>
        <h1>Company Name</h1>
        <h2>An example of HTML5 and CSS3 in action</h2>
    </hgroup>
</header>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

<article>
    <header>
        <time datetime="2010-01-12" pubdate>
            <span>Jan</span> 12
        </time>
        <h1>
            <a href="#" title="Link to this post" 
rel="bookmark">Article Heading</a>
        </h1>
    </header>
    <p>This is an article that demonstrates some of the new features 
that HTML5 and CSS3 has to offer. This article contains several sections, each 
with its own heading, as well as a video element which will play a video without 
Flash on browsers that support it.</p>
    <section>
        <header>
            <h1>This is a section heading</h1>
        </header>
        <p>This is an example of a basic section of a document. 
A section can refer to different parts of a document, application, or page. 
According to the draft W3C spec, HTML5 sections usually have headings.</p>
    </section>
</article>

<footer>
    <p>&copy; 2009 Company Name. All rights reserved.</p>
</footer>

Đoạn mã trong Liệt kê 2 tương đối rõ ràng. Phần tử <header> > chính bao gồm một phần tử <hgroup> có hai nhóm tiêu đề: một phần tử tiêu đề <h1> và một phần tử phụ đề <h2>. Phần tử <nav> chính là một danh sách không theo thứ tự có ba mục, mỗi một mục liên kết đến một trang hư cấu trên trang Web đó. Phần tử <article> chứa <header> riêng của mình, có một phần tử <time> chỉ ngày công bố bài viết. Bạn sẽ thấy rằng phần tử này có chứa một thuộc tính datetime (ngày giờ), để chỉ rõ một biểu mẫu chuẩn hóa của ngày đăng bài để các máy tính có thể đọc nó dễ dàng. Nội dung của phần tử time (thời gian) là "Jan 12" (12 tháng Giêng) để mọi người thấy dễ đọc hơn. Thuộc tính pubdate cho biết rằng đây là ngày công bố bài viết theo yêu cầu.

Bên dưới tiêu đề là một đoạn HTML bình thường, và theo sau nó là một phần tử <section> mới, có chứa một <header> có tiêu đề và một đoạn của phần này. Bạn sẽ tạo ra nhiều phần hơn nữa với các vùng bổ sung của trang được tạo trong các phần còn lại của hướng dẫn này.

Nếu bạn mở trang này trong trình duyệt của bạn, nó sẽ trông không đẹp lắm, vì nó vẫn còn chưa được định kiểu với CSS. Hãy thêm một số kiểu dáng để làm cho các trang trông đẹp hơn một chút. Hãy thêm đoạn mã của Liệt kê 3 vào tệp styles.css.

Liệt kê 3. Các kiểu dáng CSS cho các phần tử HTML5 ngữ nghĩa mới
 * {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    width: 480px; margin: 0px auto;
}

header h1 {
    font-size: 36px; margin: 0px;
}

header h2 {
    font-size: 18px; margin: 0px; color: #888;
    font-style: italic;
}

nav ul {
    list-style: none; padding: 0px; display: block;
    clear: right; background-color: #666;
    padding-left: 4px; height: 24px;
}

nav ul li {
    display: inline; padding: 0px 20px 5px 10px;
    height: 24px; border-right: 1px solid #ccc;
}

nav ul li a {
    color: #EFD3D3; text-decoration: none;
    font-size: 13px; font-weight: bold;
}

nav ul li a:hover {
    color: #fff;
}

article > header time {
    font-size: 14px; display: block; width: 26px;
    padding: 2px; text-align: center; background-color: #993333;
    color: #fff; font-weight: bold; -moz-border-radius: 6px;
    -webkit-border-radius: 6px; border-radius: 6px; float: left;
    margin-bottom: 10px;
}

article > header time span {
    font-size: 10px; font-weight: normal;
    text-transform: uppercase;
}

article > header h1 {
    font-size: 20px; float: left;
    margin-left: 14px; text-shadow: 2px 2px 5px #333;
}

article > header h1 a {
    color: #993333;
}

article > section header h1 {
    font-size: 16px;
}

article p {
    clear: both;
}

footer p {
    text-align: center; font-size: 12px;
    color: #888; margin-top: 24px;
}

Hầu hết các quy tắc CSS này đều chứa các đặc tính đã có sẵn trong CSS vào lúc này, nhưng bạn có thể nhận thấy rằng quy tắc article > header time chứa các thuộc tính bán kính-đường viền (bao gồm các đặc tính riêng biệt của trình duyệt cho các trình duyệt dựa trên Mozilla và WebKit). Quy tắc này thêm góc được làm tròn cho hộp ngày/giờ trên các trình duyệt được hỗ trợ, chẳng hạn như Firefox, Safari, và Chrome.

Bạn cũng sẽ nhận thấy việc sử dụng đặc tính hình bóng-văn bản theo quy tắc article > header h1. Hầu hết các trình duyệt hiện đại đều hỗ trợ đặc tính này.

Những điều thú vị về cả hai đặc tính của CSS3 được giới thiệu trong phần này là chúng làm giảm khả năng tùy chỉnh. Nói cách khác, nếu trình duyệt Web của khách truy cập không hỗ trợ những đặc tính mới này, thì đơn giản là chúng sẽ bị bỏ qua và các phần tử sẽ được định kiểu theo các đặc tính được hỗ trợ khác bất kỳ. Trang này bao gồm các nội dung hiện có của nó sẽ trông giống như ảnh chụp màn hình trong Hình 2 (ít nhất đây là cách nhìn thấy nó trong Safari 4 trên Mac OS X).

Hình 2. Các phần tử ngữ nghĩa HTML5 đang hoạt động
Ảnh chụp màn hình cho thấy các biểu mẫu text khác nhau được HTML5 và CSS3 tạo ra, chứa tiêu đề trang có màu, gạch dưới và tiêu đề phần chữ đậm.

Tiếp theo, bạn sẽ được giới thiệu về phần tử <video> và cách sử dụng nó để chứa một tệp video Theora trong trang HTML5 của bạn.

Giới thiệu phần tử <video>

Bây giờ bạn sẽ thêm một video vào trang index.html cùng với một tập các nút điều khiển phát lại được cung cấp theo trình duyệt. Xin lưu ý rằng video có trong ví dụ mẫu này là một đoạn video Theora, chỉ có thể được phát trên trình duyệt Firefox và Google Chrome. Safari hiện tại chỉ hỗ trợ các video được mã hóa H.264. Thêm đoạn mã của Liệt kê 4 vào bên dưới thẻ </section> đóng cuối cùng của Liệt kê 2, nhưng ở bên trên thẻ </article> đóng.

Liệt kê 4. Thêm một video vào trang
<section>
    <header>
        <h1>This is a video section</h1>
    </header>
    <p>
        <video src="http://www.double.co.nz/video_test/transformers480.ogg" 
controls autoplay>
            <div class="no-html5-video">
                <p>This video will work in Mozilla Firefox or Google 
Chrome only.</p>
            </div>
        </video>
    </p>
</section>

Như bạn thấy, trước tiên bạn tạo một phần mới mà ở đó video sẽ được hiển thị trên trang này. Phần mới này có một tiêu đề tiếp theo là chính đoạn video đó. Đoạn video mà tôi đang sử dụng ở đây là một đoạn phim quảng cáo cho bộ phim Transformers đầu tiên và được tải từ một trang Web ngoài bằng cách sử dụng thuộc tính src. Thuộc tính controls ra lệnh cho trình duyệt hiển thị các nút điều khiển chuẩn của trình duyệt để phát lại video. Và thuộc tính autoplay, cũng ra lệnh cho trình duyệt bắt đầu phát đoạn video tự động.

Giữa các thẻ <video> mở và đóng tôi đã tạo ra một phần tử <div> có lớp no-html5-video, để hiển thị một thông báo tới những người dùng đang cố gắng xem video trong một trình duyệt không hỗ trợ phần tử <video> hoặc không hỗ trợ codec video của Theora.

Trước khi bạn tiếp tục và bắt đầu trang này trong trình duyệt của mình, hãy thêm một số quy tắc mới vào trang styles.css. Chỉ cần thêm các quy tắc từ Liệt kê 5 vào dưới cùng của tệp này.

Liệt kê 5. Các quy tắc CSS cho phần video
article > section video {
    width: 480px; height: 200px;
}
article > section div.no-html5-video,
article > section div#no-canvas {
    width: 480px; height: 40px; border: 1px solid #993333;
    text-align: center; color: #993333; font-size: 13px;
    font-style: italic; background-color: #F7E9E9;
}

Các quy tắc này chỉ đơn giản định nghĩa kích thước của các phần tử thùng chứa video, cũng như thông báo lỗi cho những khách truy cập đang sử dụng các trình duyệt không hỗ trợ video HTML5 hoặc định dạng Theora. Nếu bạn mở trang Web trong Firefox hoặc Chrome, bạn sẽ thấy một video trông như sau (xem Hình 3).

Hình 3. Video HTML5 đang hoạt động
Một cửa sổ đang phát video, có một nút của bộ theo dấu thời gian và âm lượng ở dưới đáy.

Đẹp thật? Bây giờ hãy thử mở nó trong một trình duyệt như Internet Explorer hay Opera. Bạn sẽ thấy một lỗi như thông báo được hiển thị dưới đây trong Hình 4. Lưu ý rằng nếu bạn cố gắng xem nó trong Safari thì trình duyệt này chỉ có thể hiển thị máy phát video của mình, chứ không phát đoạn video đó.

Hình 4. Lỗi không hỗ trợ video HTML5
Một cửa sổ tương tự như trong hình trước, nhưng lúc này có đọc thông báo lỗi, 'Video sẽ chỉ làm việc với Mozilla Firefox hoặc Google Chrome.'

Tiếp theo, bạn sẽ tạo một biểu mẫu có một số tính năng biểu mẫu Web mới như văn bản giữ chỗ, trọng tâm tự động, và các kiểu đầu vào mới chẳng hạn như phạm vi, datetime, và email.

Cải tiến biểu mẫu Web

Một trong những khía cạnh của HTML5 bị coi nhẹ hơn là việc đưa vào một số nút điều khiển dựa theo biểu mẫu mới để giúp các nhà phát triển thực hiện dễ dàng hơn nhiều khi tạo các ứng dụng Web dựa vào biểu mẫu. Hiện nay, sự hỗ trợ cho các nút điều khiển mới về mặt các widget và chức năng của trình duyệt còn khá mỏng, nhưng chúng làm giảm khả năng tùy chỉnh như các hộp văn bản thông thường nên bây giờ bạn có thể an toàn sử dụng chúng trong mã của bạn, và khi sự hỗ trợ cho trình duyệt được cải thiện, các tính năng này sẽ bật lên tự động.

Thêm mã từ Liệt kê 6 trực tiếp bên dưới thẻ </section> đóng cho phần video mà bạn đã tạo trong Liệt kê 4.

Liệt kê 6. Thêm một biểu mẫu Web
<section>
    <header>
        <h1>This is a feedback form</h1>
    </header>
    <p><form>
        <label for="contact_name">Name:</label>
        <input id="contact_name" placeholder="Enter your name" 
autofocus><br />
        <label for="contact_email">E-mail:</label>
        <input type="email" id="contact_email" placeholder="Enter 
your email address"><br />            
        <label for="contact_phone">Phone:</label>
        <input type="tel" id="contact_phone" placeholder="Enter your 
phone number"><br />
        <label for="contact_callback">Callback on:</label>            
<input type="datetime" id="contact_callback"><br />
        <label for="contact_priority">Priority:</label>
        <input type="range" min="1" max="5" value="1" 
id="contact_priority"><br /><br />
        <input type="submit" value="Request Call">
    </form></p>
</section>

Phần tử biểu mẫu đầu tiên trong Liệt kê 6 không có bất kỳ thuộc tính type nào, và kết quả là nó sẽ đặt mặc định với một nút điều khiển văn bản. Bạn sẽ nhận thấy rằng biểu mẫu này có văn bản giữ chỗ "Hãy nhập tên của bạn" và được thiết lập trọng tâm tự động. Việc hỗ trợ các trình duyệt sẽ tự động chuyển trọng tâm vào phần tử này khi trang đã được biểu thị.

Phần tử tiếp theo là kiểu "email" và lại chứa một giá trị văn bản giữ chỗ. Trình duyệt duy nhất nhận ra kiểu phần tử đầu vào này là đặc trưng riêng là Opera, trong trường này phần tử này hiển thị một biểu tượng thư để nói rằng nó là một trường email.

Trường quan tâm tiếp theo là trường datetime với nhãn "Callback on:". Về hỗ trợ cho các trình duyệt, trường này sẽ hiển thị một nút chọn ngày và thời gian. Trong Opera, trường này hiển thị làm hai nút điều khiển, một hộp văn bản có một nút chọn ngày (datepicker) và một nút quay tròn cho thời gian.

Cuối cùng, bạn sẽ thấy một nút điều khiển của kiểu range (phạm vi), có giá trị thiết lập là min (tối thiểu), max (tối đa), và các thuộc tính giá trị. Safari, Chrome, và Opera biểu thị nút điều khiển này dưới dạng một thanh trượt, có giá trị tối thiểu là 1, được chọn theo mặc định, và giá trị tối đa là 5. Các trình duyệt không được hỗ trợ chỉ đơn giản hiển thị nút điều khiển này là một hộp văn bản có giá trị văn bản đặt tới 1.

Tiếp theo, chúng ta hãy thêm một số tính năng độc đáo và hấp dẫn vào để làm thay đổi một biểu mẫu khá buồn tẻ và nhàm chán. Hãy thêm các quy tắc sau đây (xem Liệt kê 7) vào tệp styles.css của bạn.

Liệt kê 7. Các quy tắc CSS của biểu mẫu Web
article > section form {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
    padding: 10px; margin-bottom: 30px;
}

article > section label {
    font-weight: bold; font-size: 13px;
}

article > section input {
    margin-bottom: 3px; font-size: 13px;
}

Khi xem xét Liệt kê 7 chi tiết hơn, bạn sẽ thấy rằng bán kính đường viền đã được thêm vào thùng chứa biểu mẫu để làm tròn các góc hộp. Ngoài ra, một hình bóng hộp đã được thêm vào phần tử này cùng với một màu nền màu xám nhạt và một số vật đệm.

Trước tiên, hãy xem xét biểu mẫu này khi nó xuất hiện trong Opera, trình duyệt này có sự hỗ trợ nhiều nhất cho các kiểu đầu vào của biểu mẫu Web HTML5 mới (xemHình 5).

Hình 5. Các cải tiến biểu mẫu Web trong Opera
Một biểu mẫu trả về tương tự như hình 1, nhưng có các tính năng bổ sung như là một biểu tượng email bên cạnh nhãn 'Email', một trường ngày giờ với nhãn'Callback on:' và một phạm vi cho nhãn 'Priority'.

Bạn có thể thấy biểu tượng thư bên cạnh trường email, và các nút điều khiển mới cho trường datetime. Việc nhấn vào trường thả xuống của nút quay tròn sẽ mở ra tiện ích (widget) lịch của Opera, như hiện thị trong Hình 6 bên dưới.

Hình 6. Widget lịch của Opera
Widget lịch của Opera, đặt vào tháng 2 năm 2020

Bạn cũng có thể thấy một nút điều khiển thanh trượt không hấp dẫn lắm như Opera đã đưa ra. Tuy nhiên, thật thất vọng, Opera không hỗ trợ các đặc tính bán kính đường viền hoặc hình bóng hộp, và kết quả là, cả hai hiệu ứng này đều đã không được đưa vào biểu mẫu này. Bây giờ chúng ta hãy mở nó trong Safari để xem các hiệu ứng CSS3 này trông thế nào (xem Hình 7).

Hình 7. Các cải tiến biểu mẫu Web trong trình duyệt Safari
Một biểu mẫu trả về tương tự cho hình 1, nhưng có các góc làm tròn và hiệu ứng hình bóng hộp

Safari dựa trên WebKit đã biểu thị một cách chính xác hiệu ứng các góc tròn và hình bóng hộp, và nó có một hiệu ứng hình ảnh đẹp nhưng đơn giản. Các hiệu ứng tương tự cũng sẽ làm việc trong Mozilla Firefox và Google Chrome. Bạn có thể nhận thấy rằng Safari hỗ trợ tính năng văn bản giữ chỗ và cũng triển khai một thanh trượt (phải nói là sự thay thế đẹp hơn hẳn của Opera) hiện có của kiểu đầu vào phạm vi. Trong phần cuối cùng của hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng phần tử <canvas> và API vẽ 2D để tạo một hình ảnh bitmap mặt cười đơn giản.

Phần tử <canvas> và API vẽ 2D

Để bắt đầu với phần tử <canvas>, trước tiên bạn cần phải thêm chính phần tử này vào trang đó. Trực tiếp bên dưới đoạn mã mà bạn đã thêm vào tệp index.html cho biểu mẫu Web trong phần trước, hãy thêm đoạn mã từ Liệt kê 8 Liệt kê 8.

Ví dụ 8. Thêm phần tử <canvas> vào trang này
<section>
    <header>
        <h1>This is an 2D Canvas section</h1>
    </header>

    <p>
        <canvas id="my_canvas" width="480" height="320"></canvas>
        <div id="no-canvas">
            <p>You need a Canvas-compatible browser to view this area.</p>
        </div>
    </p>
</section>

Đoạn mã này là tương đối đơn giản. Bạn chỉ cần khai báo phần tử canvas, cho nó một chiều rộng, chiều cao, và một thuộc tính duy nhất ID. Các trình duyệt Mozilla và WebKit có ý kiến khác nhau về việc liệu thẻ <canvas> cần có một thẻ đóng riêng biệt không, nhưng cả hai sẽ được đưa ra cùng một cách, miễn là bạn không đặt bất kỳ đoạn mã nào giữa thẻ mở và đóng. Bạn sẽ sử dụng mã JavaScript để hiển thị các thông báo lỗi no-canvas (không có canvas nào) cho những người dùng các phần tử đó, những người đang sử dụng một trình duyệt không được hỗ trợ vào lúc này.

Tiếp theo, bạn cần phải thêm mã JavaScript để khai thác các API vẽ 2D để tạo các hình ảnh trên khung nền ảnh (canvas). Trong tệp index.html, ngay trước thẻ </head> đóng gần đầu của tệp, hãy thêm đoạn mã sau (xem Liệt kê 9):

Liệt kê 9. Tạo kịch bản lệnh phần tử canvas
<script>
function loadCanvas() {
    var canvas = document.getElementById('my_canvas');
    if(canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(245,160,150,0,Math.PI*2,true);
        ctx.fillStyle = "rgb(255,255,204)";
        ctx.fill();
        ctx.stroke();

        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(200,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(280,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(240,170,20,4,Math.PI*2,true);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(240,190,60,0,Math.PI,false);
        ctx.stroke();
    } else {
        document.getElementById('my_canvas').style.display = 'none';
        document.getElementById('no-canvas').style.display = 'block';
    }
}
</script>

Liệt kê 9 thêm một khối mã JavaScript vào phần tử đầu trang này, khi định nghĩa một hàm có tên loadCanvas. Hàm này khởi tạo một biến có tên là canvas bằng cách chọn phần tử này có ID duy nhất là my_canvas. Sau đó nó sử dụng một câu lệnh if (nếu) để xác định xem nó có thể nhận được một ngữ cảnh khung nền ảnh từ phần tử này không. Nếu có thể, thì phần tử <canvas> được trình duyệt hỗ trợ; nếu không, thì không có sự hỗ trợ nào cho trình duyệt và khung nền ảnh sẽ được ẩn đi và được thay thế bằng thông báo lỗi. Việc này được nhắc đến trong khối mã khác của câu lệnh if, về phía cuối của hàm này.

Nếu phát hiện thấy có hỗ trợ canvas, hàm này nhận được một bối cảnh 2D có tên là ctx, thì ngữ cảnh 2D này được dùng để vẽ các hình trên khung nền ảnh. Trong hàm này, có 5 hình được tạo ra. Đầu tiên, gọi hàm ctx.beginPath() để bắt đầu vẽ đường thẳng. Tiếp theo dùng hàm ctx.arc() để vẽ một cung tròn đầy đủ, có bán kính 150 pixels (điểm ảnh), gần trung tâm của khung nền ảnh. Kiểu dáng phủ đầy được thiết lập có màu vàng, trước khi gọi các hàm ctx.fill()ctx.stroke(), khi tạo một vòng tròn lớn màu vàng có một đường bao màu đen. Đây là khuôn mặt chính.

Kiểu dáng phủ đầy được thiết lập với màu đen cho các hình tiếp theo được vẽ là đôi mắt. Lúc này vòng tròn khép kín được tạo bằng hàm ctx.arc() có bán kính chỉ khoảng 15 pixels, và gọi hàm ctx.fill() để vẽ chúng.

Khối mã tiếp theo tạo mũi, đó là một cung tròn không phải là một vòng tròn khép kín và được đặt ở dưới và giữa hai mắt mà chúng ta vừa tạo. Mũi không cần được phủ đầy, do đó, sử dụng hàm ctx.stroke() để thay thế.

Cuối cùng, một cung nửa vòng tròn lớn được vẽ nhẹ nhàng bên dưới mũi để tạo cái miệng. Kết quả sẽ trông giống nhau trong tất cả các trình duyệt có hỗ trợ phần tử <canvas> (hầu hết các trình duyệt hiện đại bao gồm cả Firefox, Safari, Chrome, và Opera — ngay cả Internet Explorer — có thể hỗ trợ cách vẽ này với sự giúp đỡ của một số thư viện JavaScript thông minh).

Thay đổi cuối cùng mà bạn cần thực hiện đối với tệp index.html là thay đổi phần tử <body> để gọi hàm loadCanvas() khi cửa sổ đã nạp xong. Đơn giản chỉ cần thay thế thẻ <body> mở bằng dòng sau: <body onload="loadCanvas();">.

Cuối cùng, chỉ cần thêm các quy tắc sau đây vào tệp styles.css để thêm một số hình bóng hộp đẹp mắt vào thùng chứa khung nền ảnh (xem Liệt kê 10).

Liệt kê 10. Các quy tắc CSS Canvas
article > section div#no-canvas {
    display: none;
}

canvas {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
}

Kết quả cuối cùng trông giống như ảnh trong Hình 8.

Hình 8. Khung nền ảnh mặt cười
Một mặt cười như được mô tả trong các đoạn trước

Hình đó đã kết thúc trang mẫu cho hướng dẫn này. Trong phần này, bạn đã sử dụng HTML5 và CSS3 để làm việc với các phần tử ngữ nghĩa HTML5 mới, đã khai thác một số hiệu ứng mới đẹp mắt của CSS3, xem đoạn video trong trình duyệt không có bất kỳ trình cắm thêm flash nào, đã thấy một số widget biểu mẫu mới, và đã tạo một ảnh đồ họa khuôn mặt cười trên một khung nền ảnh bằng cách sử dụng các JavaScript API.


Tóm tắt

Hướng dẫn này dùng như một giới thiệu thực hành về phát triển HTML5 và CSS3. HTML5 có rất nhiều ở giai đoạn đầu phát triển, và thật là thú vị để xem các tính năng mới do nó đề xuất được các nhà cung cấp trình duyệt khác nhau chấp nhận như thế nào. Hiện nay, vì các trình duyệt chủ yếu, Opera, Safari, Firefox và Chrome đang cung cấp sự hỗ trợ để cải tiến hơn nữa với mỗi bản phát hành, và người ta hy vọng sẽ thấy một lượng lớn các tính năng HTML5 được hỗ trợ vào cuối năm 2010.

Tuy nhiên, một số vấn đề có thể ngăn chặn HTML5 trở nên phổ biến rộng rãi trong tương lai gần. Vấn đề thực sự đầu tiên là thiếu sự hỗ trợ từ Microsoft Internet Explorer, trình duyệt Web được sử dụng rộng rãi nhất trên thị trường. Không chắc các nhà phát triển sẽ có thể thử nghiệm các tính năng HTML5 bất kỳ trên IE cho đến khi phiên bản beta đầu tiên của IE9 được phát hành. Ít nhất vào lúc này, các trang Web phát triển cho HTML5 làm giảm hoàn toàn khả năng tùy chỉnh trên IE8, và với một chút công việc phụ, các thay thế có thể được đưa ra để cung cấp các giải pháp cho người sử dụng IE.

Một vấn đề chính khác là vấn đề xung quanh các codec video và các thùng chứa. Cứ tình hình thế này, thì các phần tử <video> sẽ không thay thế cho Flash video làm chuẩn video cho Web. Với các trình duyệt khác nhau đang ủng hộ các codec khác nhau, nên để sử dụng Flash vẫn còn dễ dàng hơn nhiều so với mã hóa video của bạn với Theora và H.264. Ở đây hy vọng rằng có một số cách đột phá được thực hiện trong năm nay về video HTML5. Tóm lại, HTML5 và CSS3 là các chuẩn thú vị, và bạn có thể bắt đầu nâng cấp dễ dàng các trang Web của mình cho phù hợp với các đặc tả mới này ngay từ bây giờ. Sau các bước được vạch ra trong hướng dẫn này, bạn cần thành thạo hơn để tiến lên phía trước và khám phá một số tính năng thú vị khác mà HTML5 cần cung cấp.


Tải về

Mô tảTênKích thước
HTML5 exampleshtml5.examples.zip3KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

  • Theora là một định dạng nén video nguồn mở và miễn phí của Quỹ Xiph.org.
  • O3D AP: O3D là một API Web mã nguồn mở để tạo các ứng dụng 3D tương tác, phong phú trong trình duyệt.
  • Tải về các phiên bản đánh giá sản phẩm của IBM, và lấy các công cụ phát triển ứng dụng thực hành của bạn và các sản phẩm phần mềm trung gian từ DB2, Lotus, Rational, Tivoli, và WebSphere
  • Đổi mới dự án phát triển nguồn mở tiếp theo của bạn bằng phần mềm dùng thử của IBM, có sẵn để tải về hoặc trên đĩa DVD.

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=SOA và dịch vụ Web
ArticleID=774876
ArticleTitle=Tạo các trang Web hiện đại bằng cách sử dụng HTML5 và CSS3
publish-date=11152011