Phần 2: Thế nào là HTML, CSS?

Để tạo một website, HTML giống như con người, bao gồm phần xương, thì CSS là màu da màu tóc, còn JS thì chính là hành động. Sau đây, chúng ta sẽ tìm hiểu định nghĩa thế nào là HTML, thế nào là CSS.

1. HTML là gì?

Theo wikipedia, HTML (viết tắt của từ HyperText Markup Language, hay còn gọi là “Ngôn ngữ đánh dấu siêu văn bản”), là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Nó có thể được trợ giúp bởi các công nghệ như CSS và các “ngôn ngữ kịch bản giống” như JavaScript. Và điều cuối cùng, HTML không phải là ngôn ngữ lập trình.

Tóm tắt lại, chúng ta có thể hiểu tổng quát như sau:

• • HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản.
  • HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo các trang Web.
  • HTML mô tả cấu trúc của một trang Web.
  • HTML bao gồm một loạt các phần tử.
  • Các phần tử HTML cho trình duyệt biết cách hiển thị nội dung.
  • Các phần tử HTML gắn nhãn cho các phần nội dung như “đây là tiêu đề”, “đây là một đoạn văn”, “đây là một liên kết”, v.v.

Một phần tử HTML được xác định bởi thẻ bắt đầu, một số nội dung và thẻ kết thúc:

< tagname > Nội dung ở đây… < / tagname >

Ví dụ:

<title>Tiêu đề trang</title>
<h1>Đây là thẻ H1</h1>
<p>Đây là một đoạn văn</p>

Một số phần tử HTML không có nội dung (như phần tử <br>). Những phần tử này được gọi là phần tử rỗng. Các phần tử rỗng không có thẻ kết thúc!

1.1. Cấu trúc của HTML

Cấu trúc của 1 file HTML được cấu tạo gồm các phần tử như sau:

Nội dung bên trong phần <body> sẽ được hiển thị trên trình duyệt. Nội dung bên trong phần tử <title> sẽ được hiển thị trên thanh tiêu đề của trình duyệt hoặc trong tab của trang.

VD về cấu trúc như sau

<!DOCTYPE html>
<html>
  <head>
    <title>Tiêu đề trang</title>
  </head>
  <body>
    <h1>Đây là thẻ H1</h1>
    <p>Đây là một đoạn văn</p>
  </body>
</html>

Giải thích:

• • <!DOCTYPE html> Tuyên bố xác định rằng tài liệu này là tài liệu HTML5
  • <html> là phần tử gốc của trang HTML
  • <head> chứa thông tin meta về trang HTML
  • <title> chỉ định tiêu đề cho trang HTML (được hiển thị trên thanh tiêu đề của trình duyệt hoặc trong tab của trang)
  • <body> xác định nội dung của tài liệu và là nơi chứa tất cả nội dung hiển thị, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách, v.v.
  • <h1> xác định một tiêu đề lớn
  • <p> xác định một đoạn văn.

File HTML được lưu dưới dạng ten-file.html

1.2. Các tag thông dụng nhất của HTML

Tag được sử dụng chủ yếu là block-level tags và inline tags.

• • Block-level tags: Đây là loại tag cấp cao, sẽ chiếm toàn bộ không gian của trang web và luôn bắt đầu dòng mới của trang. 3 block-level tags mà tất cả các trang HTML đầu cần có đó là: <html></html>, <head></head> và <body></body>.
  • Inline tags: Thường được dùng để định dạng, tạo bố cục cho nội dung bên trong của block-level tags. VD các thẻ tag như <a>, <meta>, <strong>,.......

2. CSS là gì?

CSS (viết tắt của Cascading Style Sheets) hay còn gọi là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu HTML. 

3. Editor

Một editor đơn giản để giúp bạn học HTML và CSS là notepad++