Tổng quan về HTML
HTML (viết tắt của HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để xây dựng bộ khung và cấu trúc nội dung cho các trang web. Khi chúng ta truy cập một trang web, trình duyệt sẽ đóng vai trò thông dịch các thẻ HTML để hiển thị giao diện hình ảnh và văn bản mà người dùng có thể tương tác.
Cú pháp cơ bản trong HTML
Để trình duyệt hiểu chính xác phiên bản HTML mà trang web đang sử dụng, chúng ta cần có dòng khai báo loại tài liệu (DOCTYPE). Hiện nay, chuẩn HTML5 là phổ biến nhất với cách khai báo cực kỳ đơn giản:
<!DOCTYPE html>Thành phần Head (<head>)
Khu vực này chứa các thông tin bổ trợ (metadata) cho trang web, không hiển thị trực tiếp trên giao diện nhưng rất quan trọng cho trình duyệt và các bộ máy tìm kiếm (SEO). Các thẻ phổ biến bao gồm:
<title>: Định nghĩa tiêu đề hiển thị trên tab trình duyệt.<meta>: Cung cấp thông tin về bộ mã ký tự (thường là UTF-8), mô tả trang web hoặc từ khóa.<link>: Kết nối với các tệp CSS hoặc biểu tượng (favicon).
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang Web Của Tôi</title>
</head>
<body style="background-color: #f4f4f4;">
<!--
Phân loại thẻ HTML:
1. Thẻ đôi: Gồm thẻ mở và thẻ đóng, bọc lấy nội dung.
2. Thẻ đơn: Tự đóng, thực hiện các chức năng cụ thể như ngắt dòng hoặc chèn ảnh.
Thuộc tính:
Giúp thay đổi hành vi hoặc định dạng của thẻ. Luôn nằm trong thẻ mở.
-->
<h1>Xin chào!</h1>
<p>Đây là <b>đoạn văn</b> đầu tiên của tôi.<br/>
Dòng này đã được <i>xuống hàng</i>.</p>
<font color="blue" size="5">Văn bản có màu</font>
</body>
</html>Các thẻ HTML thông dụng
Trong quá trình phát triển web, có một số thẻ cốt lõi thường xuyên được sử dụng để trình bày nội dung:
- Tiêu đề: Sử dụng từ
<h1>đến<h6>để phân cấp mức độ quan trọng. - Đoạn văn: Thẻ
<p>dùng để chứa các khối văn bản. - Danh sách:
<ul>kết hợp với<li>cho danh sách không thứ tự (dấu chấm đầu dòng).<ol>kết hợp với<li>cho danh sách có thứ tự (đánh số/chữ).
- Liên kết và Hình ảnh: Thẻ
<a>để điều hướng trang và thẻ<img/>để hiển thị hình ảnh.
<section>
<h2>Chủ đề học tập</h2>
<p>Lập trình web bắt đầu với việc học HTML, sau đó là CSS và JavaScript.</p>
<h3>Danh sách kỹ năng cần có:</h3>
<ul>
<li>Tư duy logic</li>
<li>Kỹ năng giải quyết vấn đề</li>
</ul>
<h3>Lộ trình thực hiện:</h3>
<ol type="1">
<li>Học thẻ HTML cơ bản</li>
<li>Thiết kế giao diện với CSS</li>
</ol>
<!-- Thẻ liên kết -->
<p>Truy cập <a href="https://example.com" target="_blank">vào đây</a> để xem tài liệu.</p>
<!-- Thẻ hình ảnh -->
<img src="images/banner.jpg" width="200" height="100" alt="Ảnh minh họa" />
<!-- Ký tự đặc biệt -->
<p>Dùng &lt; để hiển thị dấu nhỏ hơn (<). Bản quyền &copy; 2023.</p>
</section>Sử dụng bảng (Table)
Bảng được dùng để hiển thị dữ liệu có cấu trúc theo hàng và cột.
<table>: Thẻ bao quanh toàn bộ bảng.<tr>: Định nghĩa một hàng trong bảng.<th>: Ô tiêu đề (thường in đậm và căn giữa).<td>: Ô chứa dữ liệu thông thường.
<table border="1" width="500" cellspacing="0" cellpadding="8">
<tr style="background-color: #ddd;">
<th>Mã số</th>
<th>Tên sản phẩm</th>
<th>Trạng thái</th>
</tr>
<tr>
<td>SP01</td>
<td>Điện thoại thông minh</td>
<td align="center">Còn hàng</td>
</tr>
<tr>
<td>SP02</td>
<td colspan="2" align="center">Đang cập nhật dữ liệu</td>
</tr>
</table>Biểu mẫu (Form)
Biểu mẫu là thành phần tương tác quan trọng, cho phép người dùng nhập thông tin và gửi dữ liệu về máy chủ.
<form>: Xác định vùng chứa các thành phần nhập liệu.<input>: Thẻ đa năng với nhiều kiểu nhưtext,password,radio,checkbox.<select>: Tạo menu thả xuống.<textarea>: Vùng nhập văn bản nhiều dòng.
<form action="/submit-handler" method="GET">
<div>
Tài khoản: <input type="text" name="user" placeholder="Nhập tên đăng nhập" required />
</div>
<br/>
<div>
Giới tính:
<input type="radio" name="gender" value="m" checked /> Nam
<input type="radio" name="gender" value="f" /> Nữ
</div>
<br/>
<div>
Sở thích:
<input type="checkbox" name="hobby" value="code" /> Lập trình
<input type="checkbox" name="hobby" value="music" /> Âm nhạc
</div>
<br/>
<div>
Khu vực:
<select name="region">
<option value="north">Miền Bắc</option>
<option value="central">Miền Trung</option>
<option value="south">Miền Nam</option>
</select>
</div>
<br/>
<div>
Tin nhắn: <br/>
<textarea name="msg" rows="4" cols="30"></textarea>
</div>
<br/>
<input type="submit" value="Gửi đi" />
<input type="reset" value="Xóa form" />
</form>