Web Cơ Bản

Các thẻ thường được sử dụng nhất trong HTML

- Trong bài hướng dẫn này, các bạn sẽ được tìm hiểu sơ qua về các thẻ cơ bản trong HTML

(hay nói cách khác là những thẻ mà chúng ta phải thường hay sử dụng nhất)

- Dưới đây là bảng mô tả sơ qua về các thẻ sẽ được nói đến trong bài hướng dẫn này:

Thẻ Chức năng
<html> Dùng để làm thùng chứa cho tất cả các thẻ trong trang web
<head> Dùng để chứa "các thẻ cung cấp thông tin cho trang web"
<body> Dùng để chứa "các thẻ nội dung mà bạn muốn hiển thị lên màn hình"
<title> Dùng để xác định "tiêu đề của trang web"
<p> Dùng để xác định một "đoạn văn bản"
<h1> - <h6> Dùng để xác định các "câu tiêu đề"
<br> Dùng để chèn một "dấu ngắt xuống dòng"
<hr> Dùng để chèn một "đường kẻ phân cách nằm ngang"

1) Thẻ <html>

- Thẻ <html> dùng để cho trình duyệt biết "tập tin mà trình duyệt đang đọc là một tập tin HTML"

- Thẻ <html> là thẻ gốc trong tập tin, nó dùng để chứa tất cả các thẻ khác (ngoại trừ <!DOCTYPE>)

- Ví dụ:

<!DOCTYPE html>
<html>
    các thẻ khác được đặt bên trong này
</html>

2) Thẻ <head>

- Thẻ <head> dùng để chứa "các thẻ cung cấp thông tin cho trang web".

- Thẻ <head> thường là phần tử con đầu tiên của <html>

- Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        các thẻ cung cấp thông tin cho trang web được đặt bên trong này
    </head>
</html>

3) Thẻ <body>

- Thẻ <body> dùng để chứa "các thẻ nội dung mà bạn muốn hiển thị lên màn hình".

- Thẻ <body> thường là phần tử con thứ hai của <html>

- Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        các thẻ cung cấp thông tin cho trang web được đặt bên trong này
    </head>
    <body>
        các thẻ nội dung mà bạn muốn hiển thị lên màn hình được đặt bên trong này
    </body>
</html>

4) Thẻ <title>

- Thẻ <title> dùng để xác định "tiêu đề của trang web".

- Thẻ <title> thường được đặt bên trong phần tử <head>

- Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>LẬP TRÌNH WEB</title>
    </head>
</html>
Xem ví dụ

5) Thẻ <p>

- Thẻ <p> dùng để xác định một "đoạn văn bản".

(một phần tử <p> sẽ tương ứng với một đoạn văn bản)

- Ví dụ: trong đoạn mã bên dưới, chúng ta có ba đoạn văn bản.

<!DOCTYPE html>
<html>
    <head>
        <title>LẬP TRÌNH WEB</title>
    </head>
    <body>
        <p>- Tài liệu học HTML</p>
        <p>- Tài liệu học CSS</p>
        <p>- Tài liệu học JavaScript</p>
    </body>
</html>
Xem ví dụ

6) Thẻ <h1> - <h6>

- Các thẻ <h1>, <h2>, <h3>, <h4>, <h5>, <h6> còn được gọi là các "thẻ tiêu đề" vì chúng thường được dùng để xác định các câu tiêu đề trong bài viết.

- Văn bản bên trong các phần tử <h1> - <h6> được định dạng mặc định là chữ to và in đậm.

- Lưu ý: Kích cỡ chữ sẽ giảm dần từ <h1> xuống <h6>

- Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>LẬP TRÌNH WEB</title>
    </head>
    <body>
        <h1>- Tài liệu học HTML</h1>
        <h2>- Tài liệu học CSS</h2>
        <h3>- Tài liệu học JavaScript</h3>
        <h4>- Tài liệu học jQuery</h4>
        <h5>- Tài liệu học MySQL</h5>
        <h6>- Tài liệu học PHP</h6>
    </body>
</html>
Xem ví dụ

7) Thẻ <br>

- Trong HTML, chúng ta không thể sử dụng phím Enter để chèn một dấu ngắt xuống dòng.

- Nếu muốn chèn một "dấu ngắt xuống dòng" thì ta phải sử dụng thẻ <br>.

(một thẻ <br> sẽ tương ứng với một dấu ngắt xuống dòng)

- Lưu ý: Phần tử <br> không có thẻ đóng.

- Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>LẬP TRÌNH WEB</title>
    </head>
    <body>
        <p>Tài liệu<br>học<br><br><br>Lập Trình Web</p>
        <br><br><br><br><br><br><br>
        <h1>Tài liệu học HTML</h1>
    </body>
</html>
Xem ví dụ

8) Thẻ <hr>

- Thẻ <hr> dùng để tạo một "đường kẻ phân cách nằm ngang".

(một thẻ <hr> sẽ tương ứng với một đường kẻ phân cách nằm ngang)

- Lưu ý: Phần tử <hr> không có thẻ đóng.

- Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>LẬP TRÌNH WEB</title>
    </head>
    <body>
        <p>- Tài liệu học HTML</p>
        <hr>
        <p>- Tài liệu học CSS</p>
        <hr>
        <p>- Tài liệu học JavaScript</p>
        <p>- Tài liệu học jQuery</p>
        <hr>
        <p>- Tài liệu học MySQL</p>
        <p>- Tài liệu học PHP</p>
    </body>
</html>
Xem ví dụ