Giới thiệu về HTML

Trang chủ | Bài trước: Học HTML và CSS | Bài sau: Cấu trúc danh sách, bảng và đa phương tiện

1. Giới thiệu HTML

HTML (hypertext markup language): Ngôn ngữ đánh dấu siêu văn bản, là ngôn ngữ cơ bản để xây dựng các trang web.
HTML cho phép bạn tạo ra các cấu trúc văn bản, hình ảnh và liên kết, giúp nội dung hiển thị trực quan trên trình duyệt.

2. Cấu trúc trang HTML

Một tệp HTML cơ bản bao gồm các thành phần sau:

<!DOCTYPE html>: Khai báo kiểu tài liệu HTML5.
<html>: Thẻ gốc chứa toàn bộ nội dung trang.
<head>: Chứa thông tin về trang web (meta, tiêu đề).
<body>: Phần thân chứa nội dung hiển thị.

Mã nguồn

<!DOCTYPE html>
<html>
    <head>
        <title>Trang HTML Cơ Bản</title>
    </head>
    <body>
        <h1>Chào Mừng</h1>
        <p>Đây là trang HTML đơn giản.</p>
    </body>
</html>

Kết quả hiển thị

Chào Mừng

Đây là trang HTML đơn giản.

3. Một số thành phần cơ bản

<h1>...<h6>: Các thẻ tiêu đề từ cấp 1 đến cấp 6.
<p>: Thẻ đoạn văn bản.
<a>: Thẻ liên kết.
<img>: Thẻ hình ảnh.
<div>: Thẻ khối để bố trí nội dung.
<span>: Thẻ nội dung dùng để nhấn mạnh văn bản hoặc thêm kiểu.
<br>: Thẻ xuống dòng.
<hr>: Thẻ hiển thị một đường kẻ ngang.

Mã nguồn HTML

<div style="background-color:#f9f9f9; padding:10px;">
    <h1>Tiêu Đề 1</h1>
    <hr>
    <h2>Tiêu Đề 2</h2>
    <h3>Tiêu Đề 3</h3>
    <p>Đây là một đoạn văn bản.</p>
    <a href="https://nhpoj.net">
        Nhấn vào đây để truy cập https://nhpoj.net
    </a>
    <br><br>
    <img src="https://nhpoj.net/static/img/logo.png">
    <p>
        Thẻ span hiển thị <span style="color: red">cụm từ màu đỏ</span>
    </p>
</div>

Kết quả hiển thị

Tiêu Đề 1

Tiêu Đề 2

Tiêu Đề 3

Đây là một đoạn văn bản.

Nhấn vào đây để truy cập https://nhpoj.net

Thẻ span hiển thị cụm từ màu đỏ

4. Thẻ và phần tử trong HTML

Trong HTML, thẻ là các từ khóa được đặt trong dấu ngoặc nhọn, như <p>. Phần tử bao gồm cả thẻ mở, nội dung bên trong, và thẻ đóng. Ví dụ:

<p>Đây là một phần tử HTML.</p>

Phân biệt thẻ đơn và thẻ đôi

Thẻ đơn: Là thẻ không cần thẻ đóng. Ví dụ:

<br> 
<hr> 
<img src="https://nhpoj.net/static/img/logo.png" alt="Logo">

Thẻ đôi: Gồm thẻ mở và thẻ đóng, bao quanh nội dung bên trong. Ví dụ:

<a href="https://nhpoj.net">Nhấn vào đây</a>

Các phần tử lồng nhau

Phần tử HTML có thể lồng nhau để tạo ra các cấu trúc phức tạp. Ví dụ:

<div>
    <p>Đoạn văn nằm trong một div.</p>
</div>

Cú pháp viết thẻ HTML

Các thẻ HTML được viết theo cú pháp sau:

<tên-thẻ thuộc-tính="giá trị">Nội dung</tên-thẻ>

Ví dụ:

<a href="https://nhpoj.net" target="_blank">Nhấn vào đây</a>

5. Cấu trúc cây HTML

Mã nguồn HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Ví dụ HTML</title>
    </head>
    <body>
        <div>
            <h1>Tiêu đề chính</h1>
            <p>Đây là một đoạn văn, trong đó có 
                <span style="color: red;">cụm từ màu đỏ</span>.
            </p>
        </div>
    </body>
</html>

Kết quả hiển thị

Tiêu đề chính

Đây là một đoạn văn, trong đó có cụm từ màu đỏ.

Cấu trúc cây HTML

html
- head
  - title: Ví dụ HTML
- body
  - div
    - h1: Tiêu đề chính
    - p
      - Nội dung: Đây là một đoạn văn, trong đó có
      - span: cụm từ màu đỏ

6. Thuộc tính trong HTML

Thuộc tính trong HTML được viết theo cú pháp:

<tên thẻ thuộc tính="giá trị thuộc tính">

Ví dụ:

<a href="https://nhpoj.net">Nhấn vào đây</a>

7. Giới thiệu về thuộc tính style

Thuộc tính style dùng để thêm các định dạng CSS trực tiếp vào thẻ HTML.
Các kiểu thường dùng bao gồm:

color: Định dạng màu sắc của văn bản.
text-align: Căn lề văn bản (trái, phải, giữa).
background-color: Định dạng màu nền.
font-size: Định dạng kích thước chữ.
margin, padding: Khoảng cách bên ngoài và bên trong của phần tử.

Mã nguồn

<p style="color: blue; text-align: center;">
    Văn bản màu xanh, căn giữa.
</p>

<div style="background-color: lightgray; padding: 10px;">
    Đây là một div có nền xám và khoảng đệm.
</div>

<p style="font-size: 20px; margin: 20px;">
    Văn bản kích thước lớn, cách lề 20px.
</p>

Kết quả hiển thị

Văn bản màu xanh, căn giữa.

Đây là một div có nền xám và khoảng đệm.

Văn bản kích thước lớn, cách lề 20px.