Đối với lập trình viên front-end thì các thuật ngữ như HTML, CSS chắc hẳn đã quá đỗi quen thuộc. Nhưng hôm nay Webico sẽ đi phân tích các vấn đề sâu hơn về HTML và CSS như ưu nhược điểm và cơ chế hoạt động của nó để chúng ta cùng nhau nắm bắt được.
Khái niệm HTML, CSS
HTML (viết tắt của Hypertext Markup Language) hay ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ đánh dấu tiêu chuẩn cho các tài liệu được thiết kế để hiển thị trong trình duyệt web. Nó có thể được hỗ trợ bởi các công nghệ như Cascading Style Sheets (CSS) và các ngôn ngữ script như JavaScript.
CSS (viết tắt của Cascading Style Sheets) là ngôn ngữ định kiểu được sử dụng để mô tả cách trình bày một tài liệu được viết bằng ngôn ngữ đánh dấu như HTML. CSS là một công nghệ nền tảng của World Wide Web, cùng với HTML và JavaScript.
HTML hoạt động như thế nào?
Trình duyệt web nhận tài liệu HTML từ máy chủ hoặc từ bộ nhớ máy tính và hiển thị tài liệu đó lên các trang web. HTML mô tả cấu trúc của một trang web bao gồm cả các thành phần nội dung của tài liệu đó.
Các phần tử HTML là các khối để xây dựng nên 1 trang HTML. Với cấu trúc HTML, hình ảnh và các đối tượng như biểu mẫu tương tác có thể được nhúng vào để hiển thị lên trang web. Với HTML chúng ta có thể tạo ra tiêu đề, đoạn văn, danh sách, liên kết, trích dẫn và các thành phần khác. Các phần tử HTML được mô tả bằng các thẻ, được viết trong dấu ngoặc nhọn. Các thẻ như <img /> và <input /> hiển thị nội dung trực tiếp vào trang. Các thẻ khác như <p>, <div> có thể chứa các các thẻ con bên trong. Các trình duyệt không hiển thị ra các thẻ HTML mà diễn giải chúng thành các nội dung dễ đọc tới người dùng.
Cấu trúc của 1 tài liệu HTML bao gồm các thành phần bắt buộc sau:
| <!DOCTYPE html> | dòng này xác định đây là 1 tài liệu HTML |
| <head>…</head> | cặp thẻ này có thể chứa các nội dung bên lề của 1 tài liệu HTML. Những thẻ viết tại đây sẽ không trực tiếp hiển thị lên trình duyệt web, bạn có thể quy định tiêu đề của trang, icon của trang, các tập tin CSS và JavaScript được nhúng vào,… tại đây. |
| <body>…</body> | Tất cả các thẻ viết trong cặp thẻ này sẽ hiển thị nội dung trực tiếp lên trang web, tại đây bạn có thể thiết kế văn bản, hình ảnh, biểu mẫu, nội dung đa phương tiện,… theo ý muốn. |
HTML có thể nhúng các đoạn mã JavaScript, giúp người dùng có thể tương tác với các nội dung trên trang web. Sự kết hợp với CSS sẽ thay đổi giao diện và bố cục của nội dung trên trang web.
HTML được đóng góp phát triển bởi nhiều công ty, tổ chức công nghệ lớn như Google, Microsoft, Apple, Mozilla, chính vì thế nó liên tục được cải tiến theo thời gian, đòi hỏi lập trình viên phải luôn cập nhật các công nghệ mới về HTML.
Ưu – nhược điểm HTML
Ưu điểm của HTML là vô cùng dễ học, các thẻ được quy định với cấu trúc đơn giản, tên thẻ và tên các thuộc tính của thẻ rất gần gũi với ngôn ngữ đời thường. Ngày nay, HTML phiên bản 5 hỗ trợ rất nhiều các nội dung không chỉ là văn bản, hình ảnh, biểu mẫu mà còn các nội dung đa phương tiện như video, âm thanh; các đối tượng đồ họa 2D, 3D cùng với khả năng tương tác cho ra những nội dung vô cùng sinh động trên trang web.
Khó có thể đưa ra nhược điểm của HTML vì ngôn ngữ này liên tục được cải tiến để giúp lập trình viên tạo ra những trang web đẹp và đa dạng hơn.
CSS hoạt động như thế nào?
CSS được thiết kế để cho phép tách biệt phần trình bày và nội dung, bao gồm bố cục, màu sắc và phông chữ. Sự tách biệt này có thể cải thiện khả năng truy cập nội dung, cho phép nhiều trang web có thể dùng chung định dạng bằng cách nhúng các tệp .css cũng như giảm sự phức tạp và trùng lặp trong cấu trúc nội dung.
Việc tách biệt định dạng và nội dung cũng giúp một trang web có thể hiện thị khác nhau khi trên màn hình hay khi in ấn. CSS cũng có các quy tắc để định dạng nội dung khác nhau trên các thiết bị di động.
Một số tính năng mà CSS có thể làm được giúp trang web trở nên sinh động hơn đó là: quy định bố cục cho trang web; quy định về font chữ, cỡ chữ, kiểu định dạng, màu sắc,… cho văn bản; quy định về cách hiển thị hình ảnh, áp dụng các hiệu ứng cho hình ảnh; quy định đường viền, bo góc, màu nền, cách thức hiển thị, xuất hiện và cả các hiệu ứng chuyển động cho tất cả các đối tượng trên trang web.
Bạn có thể viết CSS như một thuộc tính ngay trong thẻ HTML; có thể viết trong cặp thẻ <style></style> và đặt ở phần <head> của một tài liệu HTML hoặc có thể tạo ra các tệp với đuôi .css và nhúng nó vào bất kì trang web nào bạn muốn để sử dụng chung.
Ưu – nhược điểm CSS
Ưu điểm của CSS là có tính kế thừa, bạn có thể dùng chung các kiểu định dạng cho nhiều đối tượng trên trang web thông qua tên thẻ hoặc thuộc tính class. CSS có khả năng lựa chọn đối tượng linh hoạt cũng như hỗ trợ rất nhiều kiểu định dạng khác nhau cho các nội dung HTML. CSS cũng đang không ngừng được phát triển và cải tiến để giúp lập trình viên có thể quy định, tùy biến giao diện của trang web ngày một chi tiết và phong phú hơn. CSS cũng rất dễ học với việc các thuộc tính được đặt tên rất gần với ngôn ngữ đời thường.
Nhược điểm của CSS là tính kế thừa chưa được cao. Hiện nay việc sử dụng biến đã được hỗ trợ trong CSS nhưng chưa phổ biến. Để khắc phục nhược điểm này, ta có thể dùng các ngôn ngữ tiền xử lí CSS như LESS, SASS hay SCSS để tiết kiệm thời gian viết CSS cũng như có tính tái sử dụng cao.
HTML và CSS liên quan tới nhau như thế nào?
Có thể nói HTML và CSS luôn song hành với nhau, phát triển cùng nhau và không thể tách rời. Nếu bạn đang nghiên cứu về lập trình web, bạn sẽ phải cả 2 ngôn ngữ này chứ không thể chỉ học 1 trong 2. CSS luôn đi kèm để bổ trợ cho HTML, nếu trang web của bạn chỉ có HTML mà không có CSS, trông nó sẽ khá thô và xấu. Hiện nay có lẽ mọi trang web trên thế giới đều chứa CSS như một thành phần thiết yếu.
Hiện nay, các bộ dựng trang trong các trình duyệt web có thể hỗ trợ các tiêu chuẩn HTML, CSS không giống nhau (thường là các chuẩn mới chưa được sử dụng rộng rãi) nên đôi khi ta có thể thấy trang web có thể hiển thị khác nhau trên các trình duyệt khác nhau, hoặc một số trang web chỉ hỗ trợ trình duyệt này mà không hỗ trợ trình duyệt khác. Nếu bạn là lập trình viên web cũng nên lưu ý điều này, hãy lựa chọn các chuẩn HTML, CSS được hỗ trợ rộng rãi để có trải nghiệm đồng nhất trên tất cả các trình duyệt.
Trên đây là những chia sẻ của cloudlanes về HTML, CSS căn bản. Hi vọng sẽ giải đáp được những thắc mắc của các bạn về vấn đề này.
