HTML CSS là gì? Tại sao trong lập trình ứng dụng phải sử dụng HTML và CSS?

1. Tổng quan về HTML và CSS

1.1. HTML là gì?

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được dùng để phân bố cục các trang web. HTML không được coi là một loại ngôn ngữ lập trình bởi vì nó không tạo được các chức năng động mà thường được sử dụng chung với các ngôn ngữ như: CSS, JavaScript.. để tăng sự sống động cho trang web.

1.2. CSS là gì?

CSS (Cascading Style Sheets) được sử dụng để cách điệu các phần tử được viết bằng ngôn ngữ đánh dấu như HTML. CSS đảm nhiệm vai trò bổ trợ định dạng các phần tử trên Website để chúng trở nên sống động hơn. Khi sử dụng CSS, chúng ta có thể kiểm soát màu văn bản, kiểu chữ và phông chữ, khoảng cách văn bản, kích thước và bố cục của trang, hình nền hoặc màu sắc trang

CSS mang đến khả năng kiểm soát và trình bày tài liệu HTML một cách hoàn hảo. Phần lớn CSS được các lập trình viên sử dụng để kết hợp với các ngôn ngữ đánh dấu (Markup) như là HTML hoặc XHTML.

2. Cấu trúc cơ bản về HTML

HTML được sử dụng phổ biến với các chức năng sau:

Web development - Phát triển Website: Các lập trình viên sử dụng mã HTML để thiết kế cách trình duyệt hiển thị các thành phần trang web chẳng hạn như văn bản, siêu liên kết và tệp phương tiện
Internet navigation - Điều hướng người dùng: Người dùng có thể dễ dàng điều hướng và chèn liên kết giữa các trang và trang web liên quan vì HTML được sử dụng nhiều để nhúng siêu liên kết hyperlinks
Web documentation - Phân bố tài liệu: HTML giúp tổ chức và định dạng tài liệu tương tự như Microsoft Word

2.1. Cách hoạt động của HTML

Tài liệu HTML là các tệp kết thúc bằng phần mở rộng .html hoặc .htm. Một website thông thường có thể chứa nhiều trang HTML khác nhau. Ví dụ: Trang chủ, trang giới thiệu và trang liên hệ đều có các tệp HTML riêng biệt.

Trong các trang HTML đều có các thẻ và thuộc tính riêng. Các phần tử HTML là các khối xây dựng của một trang web.

2.2 Cấu tạo của một phần tử “element” trong HTML

Trong HTML một phần tử được cấu tạo bởi 3 phần chính đó là:

Thẻ mở (Opening tag): được sử dụng để cho biết nơi một phần tử bắt đầu có hiệu lực. Thẻ được bọc bằng dấu “<>”. Ví dụ: sử dụng thẻ bắt đầu <p> để tạo một đoạn văn.
Nội dung (Content): là đầu ra mà người dùng sẽ nhìn thấy.
Thẻ đóng (Closing tag): giống như thẻ mở, nhưng có dấu gạch chéo lên trước tên thành phần. Ví dụ: </p> để kết thúc một đoạn văn.

Sự kết hợp của ba phần này sẽ tạo ra một phần tử HTML:

Một phần quan trọng khác của phần tử HTML là thuộc tính gồm hai phần content (nội dung) và attribute (giá trị thuộc tính). Content xác định thông tin bổ sung mà người dùng muốn, trong khi attribute cung cấp thêm thông số kỹ thuật.

Ví dụ: Một thẻ <p> được thêm thuộc tính “attribute” kiểu “style” màu chữ “color:red” và phông chữ “font-family:Roboto” sau đó thẻ <p> sẽ trông như thế này:

Một thuộc tính khác của HTML là class. Thuộc tính class sẽ khai báo thêm thẻ style có thể hoạt động trên các phần tử khác nhau có cùng giá trị class.

Ví dụ: Chúng ta sẽ sử dụng cùng một kiểu style cho thẻ tiêu đề <h1> và thẻ đoạn văn <p>. Style này bao gồm màu nền (background color), màu văn bản (text color), đường viền (border), lề (margin) và phần đệm (padding) để áp dụng các kiểu trên vào thẻ tiêu đề <h1> và thẻ đoạn văn <p> chúng ta cần khai báo thuộc tính class bên trong thuộc tính class ta thêm important class="important". Chúng ta sẽ được đoạn mã html như phía bên dưới:

<html>

<head>

<style>

.important {

background-color: red;

color: yellow;

border: 1px solid white;

margin: 3px;

padding: 3px;

}

</style>

</head>

<body>

<h1 class="important">Đây là tiêu đề</h1>

<p class="important">Đây là đoạn văn.</p>

</body>

</html>

Hầu hết các phần tử trong HTML đều có opening tag và closing tag nhưng có trường hợp không cần closing tag. Các tag này không sử dụng closing tag vì chúng không có nội dung:

Ví dụ: “<img src="/" alt="Image">”

Thẻ img tag này có hai thuộc tính – thuộc tính src dùng để khai báo đường dẫn hình ảnh và thuộc tính alt dùng để khai báo văn bản mô tả hình ảnh. Tuy nhiên image tag này không có nội dung cũng như thẻ kết thúc closing tag.

Cuối cùng, phần quan trọng trong việc viết tài liệu HTML là khai báo loại tài liệu HTML (HTML doctype). Khai báo HTML doctype là cung cấp phiên bản HTML cho trình duyệt web để nhận dạng loại tài liệu và phiên bản của loại tài liệu. Khai báo kiểu tài liệu HTML doctype như sau:

2.3. Các thẻ HTML và phần tử HTML được sử dụng nhiều nhất trong HTML

Hai thành phần chính trong thẻ HTML là thành phần cấp khối (block-level elements) và thành phần nội tuyến (inline elements).

2.3.1 Thành phần cấp khối (Block-Level Elements)

Block-Level Elements sẽ chiếm toàn bộ chiều ngang của trang và bắt đầu bằng một dòng mới trong tài liệu. Ví dụ: Thẻ tiêu đề "Heading - <h> bao gồm h1,h2,h3 ...vv" sẽ nằm ở một dòng riêng biệt với thẻ đoạn văn "Paragraph - <p>".

Để hình thành một trang web chuẩn, HTML sử dụng 3 thẻ sau:

Thẻ <html> là thành phần gốc xác định toàn bộ tài liệu HTML
Thẻ <head> chứa thông tin bao gồm meta tags, title và charset của trang
Thẻ <body> bao gồm tất cả nội dung xuất hiện trên trang.

Các block-level tags phổ biến khác bao gồm:

Heading tags: có phạm vi từ <h1> đến <h6>, trong đó tiêu đề h1 có kích thước lớn nhất và nhỏ dần đến thẻ h6.
Paragraph tags: tất cả đều được bao bọc bằng cách sử dụng thẻ <p>.
List tags: chứa các biến thể khác nhau. Thẻ <ol> sử dụng với danh sách liệt kê có thứ tự và sử dụng thẻ <ul> với danh sách liệt kê không có thứ tự. Tiếp đó, đính kèm các mục danh sách riêng lẻ bằng thẻ <li>.

2.3.2 Phần tử nội tuyến (Inline Elements)

Inline element điều chỉnh hình dạng của nội dung bên trong của block-level elements, ví dụ như thêm các đường liên kết và các từ ngữ mang ý nghĩa quan trọng cần được nhấn mạnh.

Ví dụ: Thẻ tô đậm (<strong> tag) sẽ hiển thị nội dung ở dạng tô đậm, trong khi thẻ in nghiêng (<em> tag) giúp nội dung hiển thị ở dạng in nghiêng. Hyperlink là các phần tử nội tuyến inline element sử dụng thẻ liên kết <a> tag và thuộc tính href của thẻ liên kết <a> tag giúp điều hướng đích đến của liên kết:

3. Cấu trúc cơ bản về CSS

CSS là nền tảng giúp chúng ta có thể tùy chỉnh màu, phông chữ, khoảng cách giữa các nội dung, kích thước và bố cục của website, hình nền hoặc màu sắc của trang web bằng CSS.

Hãy cùng tìm hiểu xem CSS có những ưu điểm gì mà nhiều người sử dụng đến vậy.

3.1. Ưu điểm khi áp dụng CSS vào xây dựng website

Sự khác biệt giữa một trang web triển khai CSS và một trang không triển khai CSS là rất lớn. Các trang web không sử dụng CSS thường rất đơn điệu. Khi giao diện của các trang web chỉ có HTML thì tỷ lệ người dùng thoát trang sẽ rất cao.

Khi áp dụng CSS vào website CSS sẽ tương tác với các phần từ HTML để cải thiện giao diện trong các Website. Ví dụ như một đoạn văn "<p> tag" trong HTML có thể trông như thế này, và nếu muốn làm cho đoạn nội dung này có màu hồng và đậm sử dụng mã CSS trông như thế này:

Trong trường hợp này, đoạn văn “p” (paragraph) được gọi là bộ chọn selector. Trong CSS, selector được viết ở bên trái dấu ngoặc nhọn đầu tiên. Thông tin giữa dấu ngoặc nhọn được khai báo và chứa các thuộc tính và giá trị được áp dụng cho bộ chọn selector.

Thuộc tính là những thứ như kích thước phông chữ, màu sắc, lề, trong khi giá trị là cấu hình cho các thuộc tính đó và có thể thay đổi các thuộc tính này bằng cách áp dụng cho bộ chọn. Ví dụ: Vị trí nền (background-position), kiểu đường viền (border-style), màu đường viền (border-color), độ rộng đường viền (border-width) và căn chỉnh văn bản (text-align) và các giá trị tương ứng lần lượt là top, red, dotted, thick và left.

3.2. Cách thêm CSS vào HTML

Chúng ta sẽ có 3 cách để thêm CSS vào HTML:

Cách 1: Sử dụng cặp thẻ <style> để thêm trực tiếp mã CSS vào tài liệu HTML và cách này gọi là Inline CSS.
Cách 2: Chúng ta vẫn tiếp tục sử dụng cặp thẻ <style>để khai báo CSS nhưng thay vì thêm trực tiếp vào tài liệu HTML chúng ta sẽ di chuyển cặp thẻ <style> vào bên trong thẻ <head> của HTML và tạo ra vùng khai báo mã CSS cách này gọi là Internal CSS
Cách 3: Chúng ta sẽ lưu mã CSS ra ngoài một tập tin có đuôi là “.css” để có thể sử dụng được tệp “.css” này chúng ta cần khai báo tệp “.css” này vào bên trong tài liệu HTML bằng cách sử dụng thẻ <link> và khai báo bên trong thẻ <head> của tài liệu HTML cách này gọi là External CSS.

4. Lời Kết

CSS chịu trách nhiệm về các kiểu dáng như nền, màu sắc, bố cục, khoảng cách và hình động. HTML sử dụng để thêm các thành phần văn bản và tạo cấu trúc nội dung nhưng việc lập ra một trang web chuyên nghiệp và đáp ứng đầy đủ tính năng là chưa đủ. Vì vậy, HTML cần sự trợ giúp của CSS để tạo ra các nội dung và cấu trúc trang web đầy đủ là đẹp mắt hơn.

Hy vọng bạn đã hiểu rõ hơn về vai trò của CSS và html. Nếu vẫn còn nhiều câu hỏi, cũng như thắc mắc thì hãy tham khảo ngay khóa học lập trình web của ICANTECH bạn nhé!

Nguồn ảnh: ICANTECH.