Những điều thú vị của HTML5 và CSS3 có thể bạn chưa biết?

Trước tiên chúng ta phải hiểu HTML5 và CSS3 là gì? Hãy cùng tuhoc.online đi tìm hiểu bạn nhé!

HTML5 là gì?

HTML5 là một ngôn ngữ lập trình được phát triển trên nền tảng ngôn ngữ HTML và quan trọng nhất của World Wide Web (WWW).

Nó được sử dụng để thiết kế và cấu trúc các website, hỗ trợ cho đa phương tiện tối đa nhưng vẫn giúp cho website thân thiện với mọi người dùng và mọi thiết bị, các chương trình máy tính, trình duyệt web…

Vậy trước tiên bạn phải hiểu được HTML là gì mà nó lại khiến dân IT và lập trình web phát điên vì nó?

HTML (Hypertext Markup Language) là một nền tảng tương tự như Microsoft Word  giúp người dùng thiết kế thành phần trong website, cấu trúc các trang, chuyên mục hoặc các thiết kế các ứng dụng… Vậy, chức năng chủ yểu của nền tảng này chính là tạo bố cục và định dạng website.

Sự khác biệt của HTML VÀ HTML5

• HTML5 hỗ trợ cho nhiều ứng dụng hơn: Một số ứng dụng như SVG, canvas… được HTML5 hỗ trợ, nhưng dùng trong HTML thì phải sử dụng thêm các phương tiện bổ trợ.
• Lưu dữ liệu tạm: HTML5 sử dụng webSQL databases, application cache còn HTML chỉ dùng cache của trình duyệt.
• JavaScript chạy trong web browser: HTML5 hỗ trợ hoàn toàn cho JavaScript chạy trên web browser, còn HTML ở các phiên bản cũ hơn thì không thể thực hiện được.
• SGML: Khác với HTML, HTML5 không dựa trên SGML, nhờ vậy, sản phẩm lập trình có độ tương thích cao hơn.
• Sử dụng MathML và SVG: HTML5 cho phép sử dụng MathML và SVG cho văn bản, nhưng trong HTML thì không được hỗ trợ.
• Các element: HTML5tích hợp các element mới mẻ và quan trọng như summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video… Bên cạnh đó, nó cũng được loại bỏ các elements lỗi thời trong HTML như isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike….

• Các thẻ đã thay đổi trong HTML5

  

  Phiên bản HTML5 đã cập nhật rất nhiều thẻ mới cho việc tạo lập các bài viết và đa phương tiện, điển hình là các thẻ sau:

  • <article>: Định nghĩa một bài viết hoặc bình luận của người dùng, độc lập với content của website.
  • <aside>: Đánh dấu nội dung một trang hiện tại.
  • <header><footer>: Loại bỏ việc định nghĩa id cho tiêu đề và cuối trang.
  • <nav>: Định nghĩa phần menu điều hướng cho website.
  • <section>: Xác định các thành phần khác nhau trong website.
  • <audio>, <video>: Hỗ trợ người dùng xem clip và nghe nhạc trên website mà không cần bên thứ ba.
  • <embed>: Xác định một container các plugin tương tác với ứng dụng bên ngoài.
  • <canvas>: Cho phép bạn đồ họa mà không cần ứng dụng hỗ trợ.
  • Ngoài ra, phiên bản HTML5 đã loại bỏ một số thẻ lỗi thời như: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>

  Lịch sử phát triển của HTML5

  

  • Năm 1989: “World Wide Web” ra đời nhờ phát minh của Tim Berners-Lee.
  • Năm 1990: Internet ra đời.
  • Năm 1991: HTML ra đời, cho đến năm 1998 thì đã được cải tiến từ phiên bản 1 đến phiên bản 4.
  • Năm 2000: Phiên bản XHTML 1.0 ra đời nhờ tổ chức World Wide Web Consortium (W3C).
  • Năm 2004: W3C quyết định đóng cửa các phiên bản của HTML. WHATWG (Web Hypertext Application Technology Working Group) mong muốn phát triển HTML, sáng tạo nên ngôn ngữ lập trình mới có độ tương thích cao với các website đang sử dụng và các phiên bản HTML cũ.
  • Năm 2008: Nhờ sự ủng hộ từ W3C, phiên bản đầu tiên của HTML5được phát hành.

  Lợi ích của HTML5 là gì?

Dưới đây là 3 điểm lợi ích lớn nhất của HTML5:

• Tương thích với các trang web đang tồn tại
• Chuẩn hóa các kỹ thuật không chính thức
• Tăng khả năng phục vụ đa phương tiện

Tương thích với các trang web đang tồn tại

HTML5 không làm các trang web khác trước đây dừng hoạt động. Nó chỉ giúp các website thêm hiệu quả, tăng hiệu năng. Nó không yêu cầu website phải thay đổi ngay lập tức nếu gặp các lỗi chính tả, cú pháp. Các website cũ vẫn hoạt động và tương thích với tiêu chuẩn của HTML5.

Bên cạnh đó, HTML5 hỗ trợ đối với tất cả các phiên bản HTML cũ theo cách thức sau

• Hỗ trợ các lập trình viên tránh những thành phần lỗi thời đã bị loại bỏ. Cho phép kiểm tra các đoạn mã code có thực sự tuân thủ theo tiêu chuẩn HTML5.
• Hỗ trợ các hãng phát triển trình duyệt về khả năng tương thích ngược với các nội dung đã tồn tại trước đây. Như vậy, nội dung viết bởi phiên bản HTML cũ đều sẽ được xây dựng lại từ đầu và hoàn toàn tương thích với các trình duyệt hiện tại.

Ưu điểm của HTML5 là gì

Chúng ta sẽ cùng đến với một số những ưu điểm của HTML5 đối với 2 nhóm đối tượng là lập trình viên và người dùng:

Ưu điểm của HTML5 đối với lập trình viên

• Không cần phải tạo cookies: Trong các phiên bản trước HTML5, nếu lập trình viên muốn lưu bất kỳ thông tin nào, họ phải tạo cookies. Tuy nhiên với phiên bản này, lập trình viên không cần phải tạo cookie.
• Có thể tùy chỉnh Data Attributes: Với ngôn ngữ HTML5, data có thể được tùy chỉnh. Lập trình viên không cần phải tìm hiểu về server hoặc Ajax khi thuê máy chủ cũng có thể lập trình một website có độ tương thích cao.
• Menu Element: Được thêm vào để tăng khả năng tương tác của web.
• Tiện lợi khi thiết kế web mobile: HTML5giúp các lập trình viên dễ dàng thao tác khi xây dựng hay thiết kế các giao diện web mobile.
• Tăng thích tương thích cho ứng dụng web: HTML5 cho phép trình duyệt xử lý như một nền tảng ứng dụng, giúp lập trình viên nâng cao quyền quản trị hiệu năng website.

CSS3 VÀ HTML5 LÀ GÌ MÀ CÓ MỐI LIÊN KẾT VỚI NHAU?

CSS3 là phiên bản thứ 3 và cũng là mới nhất của CSS, CSS3 được bổ sung thêm nhiều tính năng mới tiện lợi hơn CSS cho người dùng. Được thừa hưởng tất cả những gì có trong phiên bản trước và bổ sung các tính năng mới, CSS3 hiện rất được ưa chuộng trong thiết kế website. Các tính năng mới của CSS3 là gì? Cùng tìm hiểu nhé!

Lịch sử phát triển của CSS3

Sự phát triển của CSS

CSS được đề xuất lần đầu tiên vào ngày 10/10/1994 bởi Håkon Wium Lie. Kể từ đó, các phiên bản của CSS dần được hình thành qua nhiều giai đoạn. Tính từ lúc xuất hiện đến nay, CSS đã có nhiều phiên bản khác nhau. Các phiên bản mới sẽ giúp vá các lỗi của phiên bản cũ và mang đến nhiều cải tiến hơn.

Với phiên bản đầu tiên hay còn được gọi là CSS cấp 1 có những đặc điểm cụ thể như: thuộc tính font chữ, màu văn bản, hình nền, các thuộc tính văn bản, căn lề, định vị cho các yếu tố, nhận dạng duy nhất và phân loại chung các nhóm thuộc tính.

Phiên bản CSS cấp 2 được W3C phát triển vào tháng 5 năm 1998. Với những cải tiến từ phiên bản CSS cấp 1 và mang đến những cải tiến mới như định vị tuyệt đối, tương đối và cố định các yếu tố chỉ mục z. Khái niệm về các loại phương tiện, hỗ trợ cho các biểu định kiểu âm thanh và văn bản hai chiều. Xuất hiện các kiểu font chữ mới để định dạng văn bản.

Ngoài ra, sau phiên bản cấp 2 còn có một sự nâng cấp khác là CSS 2.1 được đề xuất vào tháng 4 năm 2011. Nhằm mục đích sửa lỗi và loại bỏ những tính năng kém hoặc không tương thích cho người dùng.

Sự phát triển của CSS3

CSS3 là phiên bản thay thế cho CSS2 với sự thay đổi đáng chú ý là mô-đun. Các mô-đun có khả năng mới hoặc mở rộng các tính năng được xác định trong CSS2. Nhằm duy trì khả năng tương thích ngược.

Đặc biệt, CSS3 mang đến các bộ chọn và thuộc tính mới cho phép linh hoạt hơn với bố cục và trình bày trang. Nhờ đó, người lập trình có thể tạo ra các hiệu ứng hình ảnh mà không cần tạo ra hình ảnh trước đó.

Ưu điểm của CSS3 là gì?

• Tương thích với HTML5

Khi mà HTML5 đang dần thay thế Flash, thì CSS3 chính là sự hỗ trợ cần thiết để có một giao diện website hoàn hảo.

• Các tính năng mới của CSS3 là gì?

  

  Nói đến các tính năng mới trong CSS3 thực sự có rất nhiều. Tuy nhiên, có thể kể đến những tính năng nổi bật như:

  • Bộ chọn
  • CSS3 Pseudo-Classes
  • Màu trong CSS3
  • CSS3 RGBA
  • CSS3 HSL và HSLA
  • CSS3 Opacity
  • Góc làm tròn: Bán kính đường viền
  • Drop Shadows – Hiệu ứng bóng đổ
  • Text Shadow – Bóng văn bản
  • Linear Gradients – Độ dốc tuyến tính
  • Radial Gradients – Độ dốc xuyên tâm
  • Multiple Background Images – Nhiều hình nền

  Dưới đây là thông tin chi tiết về từng loại tính năng.

  Bộ chọn

  CSS cấp 1 cho phép kết hợp các phần tử theo loại, lớp hay ID. Đối với CSS3, bạn hoàn toàn có thể nhắm đến mọi yếu tố trên trang với các bộ chọn.

  Ngoài việc mở rộng dựa trên các bộ chọn thuộc tính đã giới thiệu trong CSS2. CSS3 đã thêm 3 bộ chọn thuộc tính cho phép lựa chọn chuỗi con.

  • [attribute^=value] Chọn tất cả thành phần với thuộc tính có giá trị bắt đầu bằng “value”.
    Ví dụ: p[class^=test]  Chọn tất cả thành phần <p> với thuộc tính class có giá trị bắt đầu là test
  • [attribute$=value]  Chọn tất cả thành phần với thuộc tính có giá trị kết thúc bằng “value”.
    Ví dụ: p[class$=test]  Chọn tất cả thành phần <p> với thuộc tính class có giá trị kết thúc là test
  • [attribute*=value]  Chọn tất cả thành phần với thuộc tính có giá trị đặc biệt bằng “value”.
    Ví dụ: p[class*=test]  Chọn tất cả thành phần <p> với thuộc tính class có giá trị đặc biệt bằng test (tức là lúc này chữ test nằm ở đầu, cuối hay giữa đều được chọn).

  

Qua bài viết trên tuhoc.online chắc hẳn đã giúp bạn hiểu rõ hơn phần nào về HTML5 và CSS3. Qua đó cũng giúp bạn hiểu hơn về sự quan trọng của nó trong quá trình học và làm. Xin cảm ơn các bạn đã theo dõi