Rcom Dăm Yi Studio

🎓 Bài 10 – Tạo Liên Kết trong Trang Web (HTML)

Môn: Tin học 12 | Thời lượng: 90 phút | SGK: Kết nối tri thức với cuộc sống

---

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

• Hiểu khái niệm siêu văn bản và cấu trúc thẻ <a>.
• Phân biệt được đường dẫn tuyệt đối và đường dẫn tương đối.
• Tạo được các loại liên kết trong HTML: tới trang khác, tới vị trí trong cùng trang, tới hình ảnh, email, file tải xuống, số điện thoại.

📖 1. Khởi động

Em hãy nêu sự khác biệt giữa việc đọc trang web và đọc sách, báo giấy. Theo em, điểm khác biệt quan trọng nhất là gì?

💡 Gợi ý: Trên web, ta có thể nhấp chuột vào liên kết để đến nội dung khác – đây chính là đặc trưng của siêu văn bản.

📚 2. Kiến thức mới

2.1. Siêu văn bản là gì?

Siêu văn bản (Hypertext) là văn bản có chứa liên kết tới tài liệu khác. Các liên kết được tạo bằng thẻ <a>.

<a href="https://www.google.com">Truy cập Google</a>

Câu hỏi nhanh: Thẻ nào dùng để tạo liên kết trong HTML?

2.2. Hai loại URL

Loại	Ví dụ	Đặc điểm
Tuyệt đối	https://www.moet.gov.vn	Đầy đủ địa chỉ website, truy cập từ mọi nơi.
Tương đối	html/bai10.html	Dẫn tới tệp trong cùng thư mục website.

2.3. Các loại liên kết

• Liên kết tới trang khác:

  <a href="https://moet.gov.vn">Bộ GD&ĐT</a>

• Liên kết trong cùng trang:

  <a href="#cuoi_trang">Đến cuối trang</a>

  <h3 id="cuoi_trang">Phần cuối trang</h3>

• Liên kết hình ảnh:

  <a href="https://jotun.com">
    <img src="logo.png" width="120">
  </a>

💻 3. Thực hành

Thực hành 1: Tạo liên kết trong cùng trang

<a href="#CLB">Theo dõi hoạt động các CLB thể thao</a>
<h2 id="CLB">Lịch hoạt động CLB thể thao</h2>

Thực hành 2: Tạo liên kết sang trang khác

<a href="thong_tin.html">Trang thông tin CLB</a>

🚀 4. Mở rộng nâng cao

• Liên kết gửi email:

  <a href="mailto:info@rcomstudio.vn">Gửi email</a>

• Liên kết tải tệp:

  <a href="tai_lieu.pdf" download>Tải tài liệu PDF</a>

• Liên kết gọi điện thoại:

  <a href="tel:+84987654321">Gọi cho tôi</a>