tinbc tinbc
Bài 4 · Web cơ bản: HTML, CSS, JavaScript

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

Phù Thủy Phím5 phút đọc
Lập trình
Bài 4: HTML — liên kết, ảnh, danh sách và bảng

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

  1. Thuộc tính nào cho biết liên kết dẫn tới đâu? (Đáp án: href)
  2. Thẻ ảnh có thẻ đóng không? (Đáp án: không — <img> là thẻ đơn)
  3. 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.

Chia sẻ:
0.0 ★ 0 lượt đánh giá
#web #html #người mới #liên kết ảnh bảng

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

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

<a> 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 <a href=“https://tinbc.com”>tinbc</a>. 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 <ul> và khi nào dùng <ol>?

Dùng <ul> (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 <ol> (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 <li>.

Phù Thủy Phím

Phù Thủy Phím

Phù thủy bàn phím, mê tự động hoá và 'lười thông minh'. Gom phần mềm, code và AI thành mấy phép nhỏ giúp bạn xong việc trước giờ nghỉ trưa.

Bài liên quan

Bài 5: Vòng lặp for và while trong Python
Lập trình

Bài 5: Vòng lặp for và while trong Python

Bài 5 series Python cho người mới (bài học 30 phút): lặp công việc với for và while, dùng range() và break/continue, qua một chương trình tính tổng và trung bình điểm tự viết — kèm bài tập và code mang về.

1 lượt xem
Bài 4: Điều kiện if/else trong Python
Lập trình

Bài 4: Điều kiện if/else trong Python

Bài 4 series Python cho người mới (bài học 30 phút): dạy chương trình ra quyết định với if/elif/else và toán tử so sánh, qua một chương trình xếp loại điểm tự viết — kèm bài tập, lỗi thường gặp và code mang về.