Blog

Tổng quan về HTML5

HTML5 và các thẻ mới giúp bạn tổ chức trang và cung cấp thông tin cấp cao về thiết kế trang web, tạo các biểu mẫu, sử dụng và giá trị của các API, và các khả năng sáng tạo mà Canvas cung cấp.

html5

HTML5 cung cấp các công cụ quản lý dữ liệu, đồ họa, video, và âm thanh có hiệu quả. Nó tạo điều kiện cho sự phát triển của các ứng dụng giữu các trình duyệt với nhau cho trang web cũng như cho các thiết bị di động. Ngày nay khi mà công nghệ điện toán đám mấy ngày càng phát triển thì sự ra đời của HTML5 là rất hợp lý. HTML5 có tính linh hoạt rộng, cho phép phát triển các trang web thú vị và có khả năng tương tác.

Khả năng của HTML5

  • Các thẻ mô tả chính xác những gì chúng được thiết kế để chứa đựng.
  • Tăng cường khả năng truyền thông trên mạng.
  • Cải thiện khả năng lưu trữ chung.
  • Cải thiện tốc độ nạp và lưu trang, truy vấn dữ liệu tốt hơn.
  • Cải thiện xử lý biểu mẫu trình duyệt.
  • Hỗ trợ CSS3 để quản lý giao diện người dùng đồ họa(GUI).
  • Một API(Applicatiion Programming Interface) cơ sở dữ liệu dựa trên SQL cho phép lưu trữ cục bộ phía máy khách.
  • Canvas, đặc tả Geolocation API(API định vị toàn cầu)..cũng được thêm vào HTML5.
  • Các biểu mẫu được cải tiến nhằm làm giảm nhu cầu tải về mã Javascript.

Trên đây tôi đã nói sơ lược về HTML5-chỉ là sơ thôi nha-HTML5 còn nhiều điểm thú vị lắm. Nếu bạn còn muốn tiếp tục thì chúng ta sẽ vào nội dung chính ngay bây giờ.

Những thẻ mới giúp cải thiện bố cục của trang.

Bạn muốn tạo một trang web cho riêng mình, có rất nhiều cách. Ngày nay công nghệ phát triển, rất nhiều mã nguồn mở cho bạn lựa chọn như  Wordpress, joomla,..bạn chỉ cần tải về và chỉnh sử tùy theo sở thích. Nhưng tin tôi đi, việc tự mình code ra một trang web sẽ cho bạn nhiều trải nghiệm hơn, và có thể sẽ thay đổi cuộc đời bạn :))

Trong phần này, tôi sẽ thảo luận về một số thẻ mới đã được đưa vào HTML5.

  • tag <header>
  • tag <navigation>
  • tag <article>
  • tag <footer>

Trong tag article(bài viết) có chứa 3 section(phần) như hình dưới.

Những tag mới trong HTML5

Có thể nói nếu HTML5 là khuôn mặt thì CSS3 chính là son phấn trang điểm cho nó. Nó làm cho khuôn mặt bạn trở lên đẹp hơn. CSS3-như các cơ mặt-giúp định kiểu, chuyển hướng và tạo chức năng cho trang web.

Vùng Header

Vùng header chứa tiêu đề và phụ đề trang. Bạn sử dụng cặp thẻ <header></header> để tạo nội dung cho vung header của trang. Ngoài ra, bạn cũng có thể thêm thông tin về một <section> hay <article>.

Ví dụ 1: ví dụ thẻ <header>

vd1

Vùng Navigation

Vùng Navigation(chuyển hướng) được tạo bằng cặp thẻ <nav></nav>. Thẻ <nav> được sử dụng để chuyển hướng trang web chính. Xem ví dụ dưới đây.

Không bao gồm các liên kết ngoài trong phần nội dung của trang.

Ví dụ 2: Sử dụng thẻ <nav>

vd2

Vùng Article

Đây là vùng quan trọng nhất, nó chứa toàn bộ nội dung của trang. Để tạo vùng này, bạn cần sử dụng cặp <article></article> . Trong vùng này, có chứa 2 vùng section, sử dụng thẻ <section> để tạo ra các vùng này. Bạn có thể thêm các thẻ <header>, <footer>, thẻ <section> cũng có thể chứa các thẻ <article>.

Ví dụ 3: Sử dụng các thẻ trong vùng Article

vd3

Vùng Aside

Bằng cách sử dụng cặp thẻ <aside></aside> bạn có thể tạo ra vùng Aside(nhận xét). Thẻ này được dùng khi bạn muốn bổ sung thêm nội dung  vào bài viết mà không còn chỗ trống. Các vùng nhận xét thường được sử dụng để làm nổi bật một điểm nào đó trong bài viết. Xem ví dụ dưới đây:

Ví dụ 4: Cách sử dụng thẻ <aside>

vd7

Vùng Footer

Vùng này chứa thông tin về trang, thông tin liên hệ hay về tác giả của bài viết. Nó cũng chứa thông tin về bản quyền hay những thông tin pháp lý,..

Ví dụ 5: Footer

vd8

Các thẻ đa phương tiện

Trước đây, các phần tử đa phương tiện như âm thanh và video thường được nhúng vào trang, nhưng bây giờ, bạn có thể dùng các thẻ <audio> hay <video> để thay thế.

Thẻ <audio> để xác định nội dung âm thanh. Nó cũng có nhứng thuộc tính để kiểm soát những gì, khi nào và làm thế nào để phát âm thanh. Các thuộc tính như điều khiển, lặp lại hay tự động phát, ..

Ví dụ 6: Sử dụng thẻ <audio> để thêm âm thanh vào trang web

vd4

Ở ví dụ trên, âm thanh được phát ngay sau khi trình duyệt tải trang, và lặp lại khi hết bài. Đồng thời, cũng có thêm các nút để điều khiển để người dùng có thể tự dừng hay thay đối âm lượng.

Thẻ <video> cho phép bạn phát các đoạn video. Nó có tất cả các thuộc tính của thẻ <audio>, có thêm các thuộc tính như poster(quảng cáo) hay width(chiều rộng) và height(chiều cao) cho video.

Ví dụ 7: Thẻ <video>

Ở ví dụ này, người dùng được xem video với khung hình 1080x720px, có các nút điều khiển như tạm dùng, thay đổi âm lượng và thanh thời gian.

vd5

Ngoài ra, bạn còn có thể sử dụng thẻ <source>, để định nghĩa tài nguyên đa phương tiện cho các thẻ <audio><video>. Thẻ <embed>, định nghĩa nội dung được nhúng vào trang.

Xem ví dụ dưới đây để hiểu rõ hơn thẻ <source>.

Ví dụ 8: Thẻ <source>

vd6

Nếu trình duyệt không hỗ trợ âm thanh định dạng *.wma thì phát âm thanh định dạng *.mp3. Nếu không, sẽ hiển thị thông báo.

Chú ý: Bạn cũng có thể chèn các thẻ đa phương tiện và vùng Header hay Footer

Do giới hạn dung lượng của bài viết nên hôm nay mình chỉ khái quát những thẻ mới, những tiện ích mà HTML5 mang lại. Trong bài viết trên, tôi cũng có nhắc đến CSS3, để hiểu hơn về css3, click vào đây.

Đó là những điểm mới và cơ bản nhất của HTML5, để hiểu rõ hơn về HTML5, bạn nên tìm những tài liệu trên mạng hoặc có thể đăng ký 1 khóa học lập trình web. Kiến thức luôn là vô hạn, vậy chúc bạn thành công với sự lựa chọn của mình.

Thank you for reading!!