HTML - Tham chiếu các thẻ

Xin chào các nhà phát triển web tương lai! Tôi rất vui mừng được hướng dẫn các bạn trên hành trình đầy thú vị qua thế giới của các thẻ HTML. Như một người đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉 bạn rằng việc hiểu các thẻ HTML giống như học bảng chữ cái của phát triển web. Vậy, chúng ta cùng bắt đầu nào!

HTML - Tags Reference

Thẻ HTML là gì?

Thẻ HTML là những khối xây dựng của các trang web. Chúng giống như mã bí mật mà các trình duyệt web sử dụng để hiển thị nội dung. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà - các thẻ HTML là những viên gạch, cửa sổ và cửa mà tạo nên cấu trúc cho trang web của bạn.

Ví dụ, hãy xem một thẻ HTML đơn giản:

<p>This is a paragraph.</p>

Ở đây, <p> là thẻ mở và </p> là thẻ đóng. Mọi thứ ở giữa sẽ được hiển thị như một đoạn văn bản trên trang web của bạn.

Tại sao chúng lại quan trọng?

Thẻ HTML quan trọng vì chúng mang lại ý nghĩa và cấu trúc cho nội dung của bạn. Nếu không có chúng, trang web của bạn sẽ chỉ là một đống văn bản hỗn độn! Chúng giúp các trình duyệt hiểu mỗi phần nội dung nên là gì, cho dù đó là tiêu đề, đoạn văn, hình ảnh hay liên kết.

Danh sách các thẻ HTML với ví dụ

Hãy cùng khám phá một số thẻ HTML phổ biến nhất. Tôi sẽ cung cấp ví dụ và giải thích cho từng thể loại.

Thẻ HTML Cơ bản

Đây là nền tảng của bất kỳ tài liệu HTML nào.

Thẻ	Mô tả	Ví dụ
`<!DOCTYPE>`	Định nghĩa loại tài liệu	`<!DOCTYPE html>`
`<html>`	Element gốc của trang HTML	`<html>...</html>`
`<head>`	Chứa thông tin meta về tài liệu	`<head>...</head>`
`<title>`	Định nghĩa tiêu đề cho tài liệu	`<title>My First Web Page</title>`
`<body>`	Định nghĩa nội dung của tài liệu	`<body>...</body>`

Dưới đây là cấu trúc HTML cơ bản:

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is where all my content goes.</p>
</body>
</html>

Cấu trúc này giống như khung xương của trang web của bạn. Mọi thứ khác mà chúng ta sẽ học sẽ nằm trong khung công tác này.

Thẻ HTML Định dạng

Những thẻ này giúp bạn định dạng văn bản trên trang web của mình.

Thẻ	Mô tả	Ví dụ
`<h1>` đến `<h6>`	Tiêu đề	`<h1>Main Heading</h1>`
`<p>`	Đoạn văn	`<p>This is a paragraph.</p>`
`<br>`	Ngắt dòng	`Line 1<br>Line 2`
`<strong>`	Văn bản đậm	`<strong>Important!</strong>`
`<em>`	Văn bản nhấn mạnh	`<em>Italicized</em>`

Hãy xem chúng trong hành động:

<h1>Welcome to My Cookbook</h1>
<h2>Recipe: Chocolate Chip Cookies</h2>
<p>These cookies are <strong>delicious</strong> and <em>easy to make</em>!</p>
<p>Ingredients:<br>
Flour<br>
Sugar<br>
Chocolate chips</p>

Ví dụ này cho thấy cách bạn có thể sử dụng các thẻ định dạng để cấu trúc một trang công thức.

Thẻ HTML Forms và Input

Forms cho phép người dùng nhập liệu có thể gửi đến máy chủ để xử lý.

Thẻ	Mô tả	Ví dụ
`<form>`	Định nghĩa form HTML	`<form>...</form>`
`<input>`	Điều khiển nhập liệu	`<input type="text" name="username">`
`<textarea>`	Điều khiển nhập liệu nhiều dòng	`<textarea>Enter text here...</textarea>`
`<button>`	Nút có thể nhấn	`<button type="submit">Send</button>`

Dưới đây là ví dụ về form đơn giản:

<form action="/submit-recipe" method="post">
<label for="recipe-name">Recipe Name:</label>
<input type="text" id="recipe-name" name="recipe-name"><br><br>

<label for="ingredients">Ingredients:</label>
<textarea id="ingredients" name="ingredients"></textarea><br><br>

<button type="submit">Submit Recipe</button>
</form>

Form này cho phép người dùng gửi tên công thức và nguyên liệu. Thuộc tính action chỉ định nơi dữ liệu form nên được gửi, và thuộc tính method định nghĩa cách nó nên được gửi.

Thẻ HTML Hình ảnh

Hình ảnh làm cho trang web của bạn trở nên trực quan và thông tin hơn.

Thẻ	Mô tả	Ví dụ
`<img>`	Chèn hình ảnh	`<img src="cookie.jpg" alt="Chocolate chip cookie">`

Hãy thêm một hình ảnh vào trang công thức của chúng ta:

<h2>Chocolate Chip Cookies</h2>
<img src="cookie.jpg" alt="A delicious chocolate chip cookie" width="300" height="200">
<p>Doesn't this look delicious?</p>

Thuộc tính src chỉ định tệp hình ảnh, trong khi alt cung cấp văn bản thay thế cho người đọc màn hình hoặc nếu hình ảnh không tải được.

Thẻ HTML Audio và Video

Những thẻ này cho phép bạn chèn nội dung đa phương tiện vào trang web của bạn.

Thẻ	Mô tả	Ví dụ
`<audio>`	Chèn nội dung âm thanh	`<audio src="recipe.mp3" controls></audio>`
`<video>`	Chèn nội dung video	`<video src="baking.mp4" controls></video>`

Dưới đây là cách bạn có thể thêm một video hướng dẫn nướng vào trang công thức của bạn:

<h3>Watch the Baking Process</h3>
<video src="cookie-baking.mp4" controls width="400" height="300">
Your browser does not support the video tag.
</video>

Thuộc tính controls thêm các điều khiển phát, dừng và âm lượng vào player video.

Thẻ HTML Liên kết

Liên kết là những sợi线索 mà kết nối web lại với nhau, cho phép người dùng điều hướng giữa các trang.

Thẻ	Mô tả	Ví dụ
`<a>`	Định nghĩa siêu liên kết	`<a href="https://www.example.com">Visit Example.com</a>`

Hãy thêm một số liên kết vào trang công thức của chúng ta:

<p>Check out our <a href="recipes.html">other recipes</a> or <a href="https://www.cookingchannel.com" target="_blank">visit Cooking Channel</a> for more inspiration.</p>

Thuộc tính href chỉ định URL của trang mà liên kết sẽ dẫn đến. Thuộc tính target="_blank" mở liên kết trong một tab mới.

Thẻ HTML Danh sách

Danh sách giúp tổ chức thông tin một cách rõ ràng, dễ đọc.

Thẻ	Mô tả	Ví dụ
`<ul>`	Danh sách không thứ tự	`<ul>...</ul>`
`<ol>`	Danh sách có thứ tự	`<ol>...</ol>`
`<li>`	Đối tượng danh sách	`<li>Item</li>`

Hãy sử dụng danh sách cho các nguyên liệu và bước công thức:

<h3>Ingredients:</h3>
<ul>
<li>2 cups all-purpose flour</li>
<li>1 cup chocolate chips</li>
<li>1/2 cup sugar</li>
</ul>

<h3>Steps:</h3>
<ol>
<li>Mix dry ingredients</li>
<li>Add wet ingredients</li>
<li>Fold in chocolate chips</li>
<li>Bake at 350°F for 10-12 minutes</li>
</ol>

Ví dụ này cho thấy cách tạo danh sách không thứ tự (dấu chấm) và danh sách có thứ tự (số).

Thẻ HTML Bảng

Bảng là rất tốt để hiển thị dữ liệu theo hàng và cột.

Thẻ	Mô tả	Ví dụ
`<table>`	Định nghĩa bảng	`<table>...</table>`
`<tr>`	Hàng bảng	`<tr>...</tr>`
`<th>`	Đầu bảng	`<th>Header</th>`
`<td>`	Dữ liệu bảng/cell	`<td>Data</td>`

Hãy tạo một bảng thông tin dinh dưỡng cho bánh quy của chúng ta:

<h3>Nutritional Information (per cookie)</h3>
<table border="1">
<tr>
<th>Nutrient</th>
<th>Amount</th>
</tr>
<tr>
<td>Calories</td>
<td>150</td>
</tr>
<tr>
<td>Fat</td>
<td>7g</td>
</tr>
<tr>
<td>Carbohydrates</td>
<td>20g</td>
</tr>
</table>

Điều này tạo ra một bảng đơn giản với các tiêu đề và ô dữ liệu. Thuộc tính border thêm các đường viền可见 vào bảng.

Thẻ HTML Styles và Semantics

Những thẻ này giúp cải thiện cấu trúc và ngoại hình của trang web của bạn.

Thẻ	Mô tả	Ví dụ
`<div>`	Định nghĩa một section trong tài liệu	`<div>...</div>`
`<span>`	Hộp inline cho văn bản	`<span style="color:red;">Red text</span>`
`<header>`	Định nghĩa tiêu đề cho tài liệu hoặc section	`<header>...</header>`
`<footer>`	Định nghĩa footer cho tài liệu hoặc section	`<footer>...</footer>`

Hãy sử dụng một số thẻ này để cải thiện cấu trúc trang công thức của chúng ta:

<header>
<h1>My Cookbook</h1>
<nav>
<a href="index.html">Home</a> |
<a href="recipes.html">Recipes</a> |
<a href="about.html">About</a>
</nav>
</header>

<main>
<article>
<h2>Chocolate Chip Cookies</h2>
<!-- Nội dung công thức ở đây -->
</article>
</main>

<footer>
<p>&copy; 2023 My Cookbook. All rights reserved.</p>
</footer>

Những thẻ ngữ nghĩa này mang lại nhiều ý nghĩa hơn cho cấu trúc trang của bạn, điều này có lợi cho cả trình duyệt và các công cụ tìm kiếm.

Thẻ HTML Meta

Meta tags cung cấp metadata về tài liệu HTML. Chúng nằm trong phần <head>.

Thẻ	Mô tả	Ví dụ
`<meta>`	Định nghĩa metadata về tài liệu HTML	`<meta charset="UTF-8">`

Dưới đây là cách bạn có thể sử dụng meta tags:

<head>
<meta charset="UTF-8">
<meta name="description" content="Delicious chocolate chip cookie recipe">
<meta name="keywords" content="cookies, baking, dessert">
<meta name="author" content="Jane Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chocolate Chip Cookie Recipe</title>
</head>

Những meta tag này cung cấp thông tin về mã hóa ký tự, mô tả trang, từ khóa, tác giả và cài đặt viewport cho thiết kế响应式.

Thẻ HTML Programming

Những thẻ này được sử dụng để chèn hoặc tham chiếu nội dung hoặc script bên ngoài.

Thẻ	Mô tả	Ví dụ
`<script>`	Định nghĩa script client-side	`<script src="script.js"></script>`
`<noscript>`	Định nghĩa nội dung thay thế cho người dùng đã tắt script	`<noscript>Your browser does not support JavaScript!</noscript>`

Dưới đây là cách bạn có thể sử dụng những thẻ này:

<head>
<script src="recipe-calculator.js"></script>
</head>
<body>
<!-- Nội dung khác -->
<noscript>
<p>Please enable JavaScript to use the ingredient calculator.</p>
</noscript>
</body>

The <script> thẻ liên kết đến một tệp JavaScript bên ngoài, trong khi <noscript> thẻ cung cấp thông báo cho người dùng đã tắt JavaScript.

Và thế là xong! Chúng ta đã bao quát một phạm vi rộng các thẻ HTML, từ cơ bản đến nâng cao. Nhớ rằng, cách tốt nhất để học là làm, vì vậy hãy thử tạo các trang web của riêng bạn sử dụng các thẻ này. Thử nghiệm, phạm lỗi và học từ những sai lầm của bạn. Đó là cách mà tất cả các nhà phát triển web vĩ đại bắt đầu!

Chúc các bạn may mắn và mong rằng các trang web của bạn luôn hiển thị đẹp mắt!

Credits: Image by storyset

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

HTML - Bảng-cheat

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

HTML - Tham chiếu thuộc tính