Thẻ và thuộc tính href là gì?

là thẻ tạo liên kết (link). Thuộc tính href cho biết liên kết dẫn tới đâu, vd tinbc . Chữ giữa thẻ mở và đóng là phần người dùng bấm vào. Thêm target="_blank" để mở ra tab mới.

Vì sao ảnh của tôi không hiển thị (chỉ thấy icon vỡ)?

Thường do đường dẫn trong thuộc tính src sai: sai tên file, sai thư mục, hoặc file ảnh không nằm cùng chỗ với trang HTML. Kiểm tra tên file chính xác (kể cả đuôi .jpg/.png) và để ảnh cùng thư mục dự án. Luôn thêm thuộc tính alt mô tả ảnh.

Khi nào dùng và khi nào dùng ?

Dùng (unordered list) khi thứ tự không quan trọng — danh sách kỹ năng, sở thích (hiện dấu chấm tròn). Dùng (ordered list) khi thứ tự có ý nghĩa — các bước làm, xếp hạng (hiện số 1, 2, 3). Cả hai đều chứa các mục .

Web cơ bản Bài 4: HTML liên kết, ảnh, danh sách, bảng (30 phút)

Bài 3 bạn đã dựng khung trang cá nhân với tiêu đề và đoạn văn. Giờ ta làm trang phong phú hơn: thêm liên kết tới nơi khác, chèn ảnh đại diện, liệt kê kỹ năng bằng danh sách, và trình bày thông tin bằng bảng. Đây là bốn thẻ HTML bạn sẽ dùng nhiều nhất. Cuối bài, trang cá nhân của bạn đã có đủ nội dung để sang Bài 5 tô màu bằng CSS.

⏱️ Cách học bài này (~30 phút): đọc bốn nhóm thẻ + code mẫu (10’), tự gõ và mở trong trình duyệt (12’), xem lỗi thường gặp (4’), lưu file mang về (4’).

Mục tiêu bài học

Sau bài này bạn sẽ:

Tạo liên kết bằng <a href="...">.
Chèn ảnh bằng <img src="..." alt="...">.
Viết danh sách có thứ tự <ol> và không thứ tự <ul>.
Trình bày bảng bằng <table>, <tr>, <th>, <td>.

1. Liên kết — thẻ `<a>`

Liên kết đưa người xem tới trang khác. Thuộc tính href cho biết đi đâu:

<a href="https://tinbc.com">Xem tinbc</a>
<a href="https://tinbc.com" target="_blank">Mở ở tab mới</a>

Chữ giữa <a> và </a> là phần bấm được. Thêm target="_blank" để mở ra tab mới (hay dùng cho link ra ngoài).

2. Ảnh — thẻ `<img>`

Ảnh dùng thẻ <img> (thẻ đơn, không có thẻ đóng). Hai thuộc tính quan trọng:

<img src="anh-dai-dien.jpg" alt="Ảnh đại diện của Lan" width="200">

src — đường dẫn tới file ảnh. Để ảnh cùng thư mục với trang thì chỉ cần ghi tên file.
alt — mô tả ảnh (hiện khi ảnh lỗi, và cho trình đọc màn hình). Luôn ghi alt.
width — chỉnh bề rộng (px) cho ảnh khỏi quá to.

3. Danh sách — `<ul>`, `<ol>`, `<li>`

Mỗi mục là một <li>. Bọc ngoài bằng <ul> (dấu chấm) hoặc <ol> (đánh số):

<h2>Kỹ năng</h2>
<ul>
  <li>Tiếng Anh giao tiếp</li>
  <li>Tin học văn phòng</li>
</ul>

<h2>Các bước liên hệ</h2>
<ol>
  <li>Gửi email giới thiệu</li>
  <li>Hẹn lịch phỏng vấn</li>
</ol>

Dùng <ul> khi thứ tự không quan trọng, <ol> khi thứ tự có ý nghĩa (các bước, xếp hạng).

4. Bảng — `<table>`

Bảng gồm các hàng <tr>; ô tiêu đề là <th> (in đậm), ô thường là <td>:

<table border="1">
  <tr>
    <th>Năm</th>
    <th>Công việc</th>
  </tr>
  <tr>
    <td>2024</td>
    <td>Nhân viên marketing</td>
  </tr>
</table>

border="1" cho khung viền tạm để dễ nhìn (sau này CSS lo phần trang trí đẹp). Nhớ: mỗi hàng một <tr>, trong hàng là các ô <th>/<td>.

Code mẫu có chú thích: nâng cấp trang cá nhân

Đắp bốn nhóm thẻ trên vào index.html của Bài 3:

<body>
  <h1>Nguyễn Thị Lan</h1>
  <img src="anh-dai-dien.jpg" alt="Ảnh đại diện của Lan" width="200">
  <p>Xin chào, tôi là Lan. Ghé <a href="https://tinbc.com" target="_blank">blog của tôi</a>.</p>

  <h2>Kỹ năng</h2>
  <ul>
    <li>Tiếng Anh giao tiếp</li>
    <li>Tin học văn phòng</li>
  </ul>

  <h2>Kinh nghiệm</h2>
  <table border="1">
    <tr><th>Năm</th><th>Công việc</th></tr>
    <tr><td>2024</td><td>Nhân viên marketing</td></tr>
  </table>
</body>

Cách chạy: lưu lại, mở bằng trình duyệt (hoặc Live Server tự tải lại — tiện ích đã cài ở Bài 2; chưa có thì cứ nhấp đúp mở file). Nếu ảnh chưa có, cứ để tên file — chỗ ảnh sẽ hiện icon vỡ kèm chữ trong alt; thêm một ảnh tên anh-dai-dien.jpg vào thư mục là hiện.

Bài thực hành code (tự gõ)

Bài 1 — Liên kết: thêm một liên kết tới trang Facebook (hoặc trang bất kỳ) của bạn, mở ở tab mới.
✅ Gợi ý: <a href="..." target="_blank">...</a>.

Bài 2 — Danh sách sở thích: thêm mục <h2>Sở thích</h2> và một <ul> liệt kê 3 sở thích.

Bài 3 — Bảng thời khoá biểu: tạo bảng 2 cột (Thứ, Việc) với 3 hàng nội dung.
✅ Gợi ý: 1 hàng <tr> tiêu đề dùng <th>, các hàng sau dùng <td>.

Lỗi thường gặp & cách sửa

Ảnh không hiện (icon vỡ) → sai src: sai tên file, sai đuôi (.jpg/.png), hoặc ảnh không cùng thư mục. Kiểm tra tên chính xác.
Quên alt → ảnh lỗi thì không có chữ thay thế, và kém thân thiện cho người khiếm thị. Luôn thêm alt.
Liên kết không đi đâu → thiếu hoặc sai href, hoặc quên https://. Địa chỉ ngoài phải có https://.
Bảng lệch → thiếu <tr> bọc các ô, hoặc số ô mỗi hàng không đều. Mỗi hàng một <tr>, số <td> bằng số cột.
Đọc thêm nếu muốn chọn ảnh minh hoạ miễn phí: 7 công cụ chỉnh ảnh miễn phí.

💾 Mang về — trang cá nhân đã có nội dung

Đây là index.html sau Bài 4, làm nền để Bài 5 tô màu bằng CSS:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <title>Trang của Lan</title>
  </head>
  <body>
    <h1>Nguyễn Thị Lan</h1>
    <img src="anh-dai-dien.jpg" alt="Ảnh đại diện của Lan" width="200">
    <p>Xin chào, tôi là Lan. Ghé <a href="https://tinbc.com" target="_blank">blog của tôi</a>.</p>
    <h2>Kỹ năng</h2>
    <ul>
      <li>Tiếng Anh giao tiếp</li>
      <li>Tin học văn phòng</li>
    </ul>
    <h2>Kinh nghiệm</h2>
    <table border="1">
      <tr><th>Năm</th><th>Công việc</th></tr>
      <tr><td>2024</td><td>Nhân viên marketing</td></tr>
    </table>
  </body>
</html>

Thuật ngữ chốt

Thẻ / Thuộc tính	Công dụng
`<a href="...">`	Liên kết tới trang khác
`target="_blank"`	Mở liên kết ở tab mới
`<img src alt>`	Chèn ảnh; `alt` mô tả ảnh
`<ul>` / `<ol>` / `<li>`	Danh sách không thứ tự / có thứ tự / mục
`<table> <tr> <th> <td>`	Bảng / hàng / ô tiêu đề / ô thường

Tự kiểm tra

Thuộc tính nào cho biết liên kết dẫn tới đâu? (Đáp án: href)
Thẻ ảnh có thẻ đóng không? (Đáp án: không — <img> là thẻ đơn)
Muốn danh sách đánh số 1, 2, 3 thì dùng thẻ nào? (Đáp án: <ol>)

Ghi nhớ nhanh

Liên kết: <a href="...">chữ bấm</a>, thêm target="_blank" để mở tab mới.
Ảnh: <img src="..." alt="..."> — luôn có alt, để ảnh cùng thư mục.
Danh sách: <ul>/<ol> chứa <li>; bảng: <table> chứa <tr> chứa <th>/<td>.

Bài tập về nhà: hoàn thiện trang cá nhân của bạn với ảnh thật, danh sách kỹ năng và bảng kinh nghiệm. Bài tiếp theo: Bài 5 — CSS: màu sắc, font, box model (sắp đăng) — ta bắt đầu làm trang đẹp.

Bài 4: HTML — liên kết, ảnh, danh sách và bảng

Mục tiêu bài học

1. Liên kết — thẻ `<a>`

2. Ảnh — thẻ `<img>`

3. Danh sách — `<ul>`, `<ol>`, `<li>`

4. Bảng — `<table>`

Code mẫu có chú thích: nâng cấp trang cá nhân

Bài thực hành code (tự gõ)

Lỗi thường gặp & cách sửa

💾 Mang về — trang cá nhân đã có nội dung

Thuật ngữ chốt

Tự kiểm tra

Ghi nhớ nhanh

Câu hỏi thường gặp

Thẻ <a> và thuộc tính href là gì?

Vì sao ảnh của tôi không hiển thị (chỉ thấy icon vỡ)?

Khi nào dùng <ul> và khi nào dùng <ol>?

Bài liên quan

Cách dùng dòng lệnh (terminal) cơ bản cho người mới

API là gì? Giải thích đơn giản cho người mới

SQL cơ bản cho người mới: truy vấn dữ liệu trong 30 phút

Mục tiêu bài học

1. Liên kết — thẻ <a>

2. Ảnh — thẻ <img>

3. Danh sách — <ul>, <ol>, <li>

4. Bảng — <table>

Code mẫu có chú thích: nâng cấp trang cá nhân

Bài thực hành code (tự gõ)

Lỗi thường gặp & cách sửa

💾 Mang về — trang cá nhân đã có nội dung

Thuật ngữ chốt

Tự kiểm tra

Ghi nhớ nhanh

Câu hỏi thường gặp

Thẻ <a> và thuộc tính href là gì?

Vì sao ảnh của tôi không hiển thị (chỉ thấy icon vỡ)?

Khi nào dùng <ul> và khi nào dùng <ol>?

Bài liên quan

Cách dùng dòng lệnh (terminal) cơ bản cho người mới

API là gì? Giải thích đơn giản cho người mới

SQL cơ bản cho người mới: truy vấn dữ liệu trong 30 phút

1. Liên kết — thẻ `<a>`

2. Ảnh — thẻ `<img>`

3. Danh sách — `<ul>`, `<ol>`, `<li>`

4. Bảng — `<table>`