Lập trình web

Khái niệm cơ bản về HTML5 - Giới thiệu tính năng & một số ví dụ mẫu

Chia sẻ nhanh

Sau khi phân tích các số liệu thống kê lượng truy cập trên website, chúng tôi nhận ra rằng để có thể tạo ra một môi trường nghiên cứu tốt cho các web designer thì cần phải đi sâu vào các khái niệm cơ bản. Có được như vậy, mới giúp họ cải thiện kỹ năng và bắt đầu sự nghiệp của minh.

HTML5 Introduction   What is HTML5 Capable of, Features, and Resources Photo

Chúng tôi đã đưa ra rất nhiều các ví dụ, các tips & tricks cho designer cũng như coder nhưng hai điều cơ bản nhất còn thiếu sót của chúng tôi đó chính là khái niệm về HTML5 và CSS3. Chính vì vậy, trong thời gian tới, chúng tôi sẽ đi sâu vào các công nghệ này, tìm hiểu bóc tách sự khác biệt trong các phiên bản và đồng thời tạo ra một số các hướng dẫn cơ bản cho các bạn.

HTML5 là gì?


Có lẽ nhiều bạn đã nghe về thuật ngữ HTML5 xuất hiện bên cạnh những sản phẩm của Apple và Google.

HTML5 là sự phát triển mạnh mẽ đột biến của HTML, viết tắt của cụm từ Hyper Text Markup Language. Đây là hình thức định dạng cốt lõi của hầu hết các website trên internet. HTML5 với phiên bản đầu tiên được hình thành trong năm 2008 nhưng mãi tới năm 2011 mới chính thức được ra mắt với một ánh hào nhoáng của công nghệ hiện đại. Tuy nhiên, trong thời điểm đó rất nhiều trình duyệt chưa kịp thay đổi để hỗ trợ nó. Đến ngày nay, hầu hết các trình duyệt phổ biến như Chrome, Safari, Firefox, Opera, IE đều hỗ trợ HTML5. Điều đó đã tạo ra một cuộc cách mạng lớn cho nền công nghệ web.

Cùng với CSS3, HTML5 vẫn tiếp tục được phát triển. W3C đang thêm vào đó nhiều tính năng hơn nữa.

HTML5 là sự kế thừa của HTML 4.01, được phát hành đầu tiên vào năm 1999. Việc tạo ra một ngôn ngữ mới dựa theo các tiêu chuẩn như:
- Các tính năng mới phải dựa trên HTML, CSS, DOM, và JavaScript
- Làm giảm nhu cầu cho các plugins bên ngoài (như Flash)
- Xử lý lỗi tốt hơn
- Đánh dấu để thay thế kịch bản
- HTML5 nên phát triển cho các thiết bị độc lập
- Quá trình phát triển nên được công khai nhằm cho các tổ chức khác có thể lấy làm cơ sở phát triển.
Là một nền tảng cần thiết để sinh ra HTML5.

Những thay đổi mới.

Với HTML5, quá trình mã hóa trở nên dễ dàng và hợp lý hơn. Các tính năng độc đáo và ấn tượng của HTML5 không những có trong tiến trình sử lý đa phương tiện như <video>, <audio>,<canvas> mà còn tích hợp các nội dung đồ họa vector (những gì chúng ta biết trước đây chính là thẻ <object>). Điều này có nghĩa rằng media và vector trên website được xử lý và thực hiện dễ dàng hơn, nhanh hơn mà ko cần phải bổ sung bất kì phần mềm liên quan hoặc thư viện API nào khác.

Có rất rất nhiều thẻ mới được thêm vào, nhưng dưới đây, tôi sẽ chỉ mô tả một số thẻ quang trọng nhất. Phần còn lại các bạn có thể tìm thấy trong phần HTML5 của W3C.

<article> thẻ này định nghĩa một bài viết hoặc bình luận của người dùng. Nó độc lập với content của website.
<aside> thẻ này đánh dấu nội dung bên cạnh của trang hiện tại. Ví dụ như một slidebar.
<header><footer> hai thẻ này giúp bạn không cần định nghĩa id cho tiêu đề và cuối trang.
<nav> thẻ này định nghĩa phần menu điều hướng cho website.
<section> đây là một thẻ quan trọng, nó giúp bạn xác định các thành phần khác nhau trong website. Bạn có thể gộp chung các div cùng nội dung vào trong thẻ này để dễ dàng quản lý.
<audio>, <video> hai thẻ này giúp bạn hiển thị một đoạn phim hoặc một bài hát trên website đơn giản hơn rất nhiều.
<embed> thẻ này xác định một container các plugin tương tác với ứng dụng bên ngoài.
<canvas> thẻ thú vị này cho phép bạn vẽ đồ họa mà không cần phải qua bất kì đoạn mã hỗ trợ nào (chủ yếu là javascript).

Một điều quan trọng mà các bạn nên lưu ý là các thẻ mới của HTML5 không chỉ được sử dụng 1 lần. Ví dụ, header và footer sẽ không chỉ đánh dấu sự bắt đầu và kết thúc của một trang mà có thể là một phần nội dung nào đó. Điều này có nghĩa, hai thẻ này có khả năng được sử dụng nhiều lần trong toàn bộ trang. Bạn có thể xem trong hình minh họa dưới đây:

HTML5 Introduction   What is HTML5 Capable of, Features, and Resources Photo

Trong ví dụ mẫu trên, các bạn có thể thấy cấu trúc cơ bản của một website sử dụng HTML5. Vâng, các bạn thấy khai báo DOCTYPE vô cùng đơn giản. Tôi nhớ trong thời gian trước, để khai báo phần mở đầu <html lang="en"> v.v.. rất khó để nhớ, tôi đều phải tìm kiếm trên internet hoặc copy từ website này sang website khác. Nó quả là một sự rút ngắn tuyệt vời.

Các thẻ sau đây của HTML4.01 bị loại bỏ trong HTML5, các trình duyệt cũng không hỗ trợ các thẻ này. Chính vì vậy, nếu bạn là một người phát triển website thì đây là lúc bạn kiểm tra, loại bỏ và thay thế chúng trên các dự án đã hoàn thành.

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

Những điều cần biết về HTML5.

Điều quan trọng mà các bạn phải nhớ rằng, HTML5 được xây dựng trên sự thành công của phiên bản trước của nó - HTML4.01 - phiên bản tốt nhất từ trước đến nay. Để điều khiển nó tốt nhất, bạn không cần phải quên đi tất cả mọi thứ về các phiên bản khác. Bạn không phải học một ngôn ngữ hoàn toàn mới ở đây, hãy giữ nguyên cú pháp yêu thích của bạn và định dạng lại nó trên nền tảng mới.
Trong trường hợp bạn hoàn toàn không có kiến thức về HTML và bạn muốn bắt đầu ngay bây giờ, tôi khuyên bạn nên bắt đầu với HTML 4.01 và chỉ khi bạn làm chủ được nó thì hãy chuyển sang HTML5. Bắt đầu phiên bản mới nhất giống như bạn học chạy trước khi tập đi vậy.
Mặt tích cực của việc nghiên cứu HTML5 là bạn có thể làm mọi thứ, tất cả các trình duyệt đều hỗ trợ bạn. Từ video để lưu trữ tới các biểu đồ phân tích v.v... Nếu bạn thạo và đã làm chủ được HTML 4.01 , muốn gắn bó lâu dài với nó thì đó là một sai lầm. Bạn sẽ ở lại với công nghệ lạc hậu trong khi mọi người đều bước trước bạn.

Sự ra đời của HTML5 là để duy trì nhu cầu cần thiết hiện nay và đặc biệt hơn nó vẫn liên tục được phát triển. Nó có thể thống trị ngành công nghiệp website trong một thời gian dài.


Một vài ví dụ

Để thực sự có một sự cảm nhận tốt nhất về hiển thị của HTML5, tôi sẽ giới thiệu một số website, công cụ tạo trên nền tảng công nghệ này. Bạn có thể xem mình làm được điều gì ở đó.


1. Read
Là một website dành cho WordPress. Với minimalistic vô cùng đơn giản dễ hiểu và dễ sử dụng. Điều đặc biệt là bạn ko phải trả bất kì khoản tiền nào khi sử dụng nó.



2. SmartStart.
Là một công cụ tốt với nhiều template HTML5.



3.BIZfolio.
Cũng được thực hiện với HTML5 nhưng nó được phát triển để hoạt động với Drupal



4. Poker Blind
Với bộ đếm thời gian đơn giản sử dụng HTML5, bạn có thể ứng dụng nó trong rất nhiều trường hợp như Open Day v.v...



5. Coolendar
Là một ứng dụng quản lý calendar tuyệt với. Nó có thể tương thích với máy tính hoặc các thiết bị khác như Android và iOS



6. Scribd
Được phát triển bằng HTML5, dễ dàng cho phép chia sẻ file hoặc tài liệu



Bên cạnh các công cụ tiện ích hay các trang web, các nhà phát triển còn tạo ra các trò chơi chỉ dựa trên HTML5 thay vì Flash trước đó. Dưới đây là một số trò chơi rất cuốn hút. Bạn có thể kiểm tra để thấy sự thú vị của nó.



Bắt đầu với HTML5 từ đâu

HTML5 không thể được giản dạy trong giới thiệu ngắn gọn như trong bài viết này. Có hai cách để tìm hiểu nó mà tôi thấy đó là: Xem thật nhiều ứng dụng và nghiên cứu tài liệu. Cuốn sách mà tôi thấy thực sự hay khi đọc nó là cuốn sách hướng dẫn HTML5 của Jeremy Keith.

Để giúp bạn nhiều hơn, trong thời gian tới, tôi sẽ tập hợp nhiều ví dụ, hướng dẫn chi tiết về HTML5. Tôi hi vọng rằng các bạn sẽ thấy sự lý thú và kì diệu của nó.









Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?