HTML - Các Thẻ Cơ Bản: Hướng Dẫn Dành Cho Người Mới Bắt Đầu

Xin chào các bạnfuture web developers! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình thú vị vào thế giới của HTML. Như một người đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể告诉 bạn rằng HTML giống như xương sống của một trang web - nó cung cấp cấu trúc cho mọi thứ khác được xây dựng lên. Vậy, hãy cùng nhau lặn vào và khám phá các thẻ cơ bản sẽ hình thành nền tảng kỹ năng phát triển web của bạn!

HTML - Basic Tags

HTML Là Gì?

HTML viết tắt của HyperText Markup Language. Đây là ngôn ngữ chuẩn được sử dụng để tạo các trang web. Hãy tưởng tượng nó như bản vẽ cho một ngôi nhà - nó hướng dẫn trình duyệt cách cấu trúc và hiển thị nội dung trên trang web.

Cấu Trúc Của Một Tài Liệu HTML

Trước khi chúng ta nhảy vào các thẻ cụ thể, hãy nhìn vào cấu trúc cơ bản của một tài liệu HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Web Đầu Tiên Của Tôi</title>
</head>
<body>
<!-- Nội dung của bạn ở đây -->
</body>
</html>

Hãy phân tích này:

<!DOCTYPE html>宣布这是一个HTML5文档。
<html> là phần tử gốc của trang HTML.
<head> chứa thông tin meta về tài liệu.
<body> xác định phần thân của tài liệu, chứa tất cả các nội dung可见.

Các Ví Dụ Về Thẻ Cơ Bản HTML

Bây giờ, hãy khám phá một số thẻ HTML phổ biến nhất mà bạn sẽ sử dụng. Tôi sẽ cung cấp các ví dụ và giải thích cho từng thẻ.

1. Đầu Đề

HTML cung cấp sáu cấp độ tiêu đề, từ <h1> (quan trọng nhất) đến <h6> (ít quan trọng nhất).

<h1>Đây là một Đầu Đề Chính</h1>
<h2>Đây là một Đầu Đề Phụ</h2>
<h3>Đây là một Đầu Đề Ba</h3>

Những thẻ này không chỉ làm lớn văn bản mà còn giúp các công cụ tìm kiếm hiểu cấu trúc nội dung của bạn. Hãy nghĩ về chúng như tiêu đề của các chương trong một cuốn sách!

2. Đoạn Văn

Thẻ <p> được sử dụng để xác định các đoạn văn.

<p>Đây là một đoạn văn. Nó có thể chứa nhiều câu và thậm chí跨越 nhiều dòng trong mã HTML của bạn, nhưng nó sẽ được hiển thị như một khối văn bản duy nhất trong trình duyệt.</p>

Mẹo chuyên nghiệp: Luôn sử dụng thẻ <p> cho các đoạn văn, không chỉ để cách ly. Nó giúp khả năng tiếp cận và SEO!

3. Liên Kết

Liên kết được tạo ra bằng cách sử dụng thẻ <a> (neo).

<a href="https://www.example.com">Nhấp vào đây để truy cập Example.com</a>

Thuộc tính href xác định URL của trang mà liên kết sẽ dẫn đến. Nhớ rằng, các liên kết giống như cửa trong trang web của bạn - chúng cho phép người dùng điều hướng từ một trang đến trang khác!

4. Ảnh

Ảnh được chèn bằng thẻ <img>.

<img src="cat.jpg" alt="Một chú mèo dễ thương ngồi trên cửa sổ">

Thuộc tính src xác định đường dẫn đến tệp ảnh, trong khi alt cung cấp văn bản thay thế cho máy quét màn hình hoặc nếu ảnh không tải được. Luôn bao gồm văn bản alt mô tả - nó giống như cho ảnh của bạn một giọng nói!

5. Danh Sách

HTML hỗ trợ cả danh sách có thứ tự (số) và danh sách không có thứ tự (dấu phẩy).

Danh sách không có thứ tự:

<ul>
<li>Táo</li>
<li>Chuối</li>
<li>Cherry</li>
</ul>

Danh sách có thứ tự:

<ol>
<li>Thức dậy</li>
<li>Chải răng</li>
<li>Ăn sáng</li>
</ol>

Danh sách rất tốt cho việc tổ chức thông tin. Tôi thích nghĩ về chúng như các điểm liệt kê trong một bài thuyết trình!

6. Nhấn Mạnh và Quan Trọng

Sử dụng <em> để nhấn mạnh (thường được hiển thị in nghiêng) và <strong> cho quan trọng (thường được hiển thị in đậm).

<p>Tôi <em>thật sự</em> thích dạy HTML. Nó là <strong>quyết định</strong> cho phát triển web!</p>

Những thẻ này thêm ý nghĩa vào văn bản của bạn, không chỉ phong cách. Nó giống như thêm âm điệu và nhấn mạnh vào giọng nói của bạn khi nói!

7. Ngắt Dòng và Đường Ngang

Đôi khi bạn cần thêm một ngắt dòng mà không bắt đầu một đoạn văn mới. Đó là lúc <br> được sử dụng:

<p>Hoa hồng đỏ,<br>Hoa tím xanh,<br>HTML là tuyệt vời,<br>And bạn cũng vậy!</p>

Để thêm một đường ngang, sử dụng thẻ <hr>:

<p>Đây là kết thúc của một phần.</p>
<hr>
<p>Đây là bắt đầu của một phần khác.</p>

Hãy nghĩ về <br> như một软回车 trên bàn phím của bạn, và <hr> như vẽ một đường trên giấy để phân cách các phần.

Bảng Tóm Tắt Phương Pháp HTML

Dưới đây là bảng tóm tắt các thẻ HTML cơ bản mà chúng ta đã xem xét:

Thẻ	Mô Tả	Ví Dụ
`<h1>` đến `<h6>`	Đầu Đề	`<h1>Đầu Đề Chính</h1>`
`<p>`	Đoạn Văn	`<p>Đoạn văn này.</p>`
`<a>`	Liên Kết	`<a href="https://example.com">Liên Kết</a>`
`<img>`	Ảnh	`<img src="image.jpg" alt="Mô tả">`
`<ul>`	Danh Sách Không Có Thứ Tự	`<ul><li>Mục</li></ul>`
`<ol>`	Danh Sách Có Thứ Tự	`<ol><li>Đầu tiên</li></ol>`
`<em>`	Nhấn Mạnh	`<em>Văn bản nhấn mạnh</em>`
`<strong>`	Quan Trọng	`<strong>Văn bản quan trọng</strong>`
`<br>`	Ngắt Dòng	`Dòng 1<br>Dòng 2`
`<hr>`	Đường Ngang	`<hr>`

Nhớ rằng, HTML là tất cả về cấu trúc và ý nghĩa. Khi bạn thực hành, bạn sẽ bắt đầu thấy cách các khối cơ bản này kết hợp lại với nhau để tạo thành các trang web hoàn chỉnh. Nó giống như học bảng chữ cái trước khi viết câu chuyện đầu tiên của bạn - một khi bạn thành thạo các cơ bản, một thế giới phát triển web sẽ mở ra cho bạn!

Tôi hy vọng hướng dẫn này đã giúp bạn bắt đầu hành trình HTML. Hãy tiếp tục thực hành, 保持好奇心, và đừng sợ thử nghiệm. Trước khi bạn nhận ra, bạn sẽ tạo ra các trang web tuyệt vời mà bạn có thể tự hào chia sẻ với thế giới. Chúc bạn may mắn trong việc lập trình!

Credits: Image by storyset

Hướng Dẫn Trước:

HTML - Trình chỉnh sửa

Hướng Dẫn Tiếp Theo:

HTML - Element