{
  "title": "Dự án: Sách Đỏ Loài Vật Quý Hiếm Việt Nam",
  "subtitle": "Ứng dụng liên kết trong (anchor link), thiết lập base path và tùy biến CSS Link States bảo vệ môi trường",
  "description": [
    {
      "text": "Hỡi các nhà hoạt động môi trường nhí! Ở dự án này, chúng ta sẽ thiết kế một trang tra cứu thông tin về ",
      "bold": false
    },
    {
      "text": "Các Loài Động Vật Đang Bị Đe Dọa Tuyệt Chủng",
      "bold": true
    },
    {
      "text": " tại Việt Nam. Các em sẽ thực hành tạo mục lục liên kết nhanh trong trang bằng thuộc tính id, chia cột hiển thị ảnh động vật bằng table, và thiết lập màu sắc liên kết chuyển biến sinh động theo các trạng thái nhấp chuột khác nhau.",
      "bold": false
    }
  ],
  "knowledge_title": "Kiến thức trọng tâm",
  "knowledge_tags": [
    "HTML mới: nav, a (href, target, id), base",
    "HTML cũ: div, h2, p, img, table, tr, td, th, thead, tbody, b, i, span",
    "CSS mới: a:link, a:visited, a:hover, a:active",
    "CSS cũ: color, background-color, font-family, font-size, font-weight, border-radius, display, padding, text-decoration",
    "Khái niệm: Tra cứu theo ID (Anchor Link) & Đường dẫn cơ sở (Base)"
  ],
  "steps_title": "Các bước thực hiện chi tiết",
  "steps": [
    {
      "title": "Bước 1: Tạo cấu trúc thư mục dự án",
      "body": "- Tạo thư mục hocsinh01/{tên của em}/bai11-7 trên ổ đĩa Z.\n- Trong thư mục này, tạo các file: index.html, style.css.\n- Bắt buộc tạo một thư mục con tên là assets để chứa các hình ảnh tài nguyên các loài thú quý hiếm (Sao La, Voọc Cát Bà, Rùa Hoàn Kiếm).\n- Nối file CSS style.css tương đối đi lên một cấp thư mục: <link rel=\"stylesheet\" href=\"../style.css\"> do base URL sẽ chỉ vào assets.\n- Thêm thẻ <base href=\"./assets/\"> trong head để nạp tài nguyên hình ảnh tự động."
    },
    {
      "title": "Bước 2: Xây dựng Mục Lục Thú Quý Hiếm (nav)",
      "body": "- Thêm thẻ <nav class=\"wildlife-nav\"> ở phần đầu trang body.\n- Thêm các liên kết a dẫn đến các loài thú tương ứng thông qua ID. Chú ý: Vì có thẻ <base href=\"./assets/\">, bạn cần thêm đường dẫn tương đối ../index.html trước ID của liên kết để trình duyệt không tìm kiếm ID trong thư mục assets. Ví dụ: Sao La (link tới ../index.html#saola), Voọc (link tới ../index.html#vooc).\n- Thêm một liên kết tuyệt đối dẫn đến trang chủ sách đỏ IUCN thế giới, sử dụng thuộc tính target=\"_blank\" để mở liên kết ở thẻ tab mới."
    },
    {
      "title": "Bước 3: Thiết kế Bảng Thông Tin Động Vật",
      "body": "- Tạo các phần div đại diện cho mỗi loài động vật có id tương ứng (id=\"saola\", id=\"vooc\").\n- Trong mỗi div, sử dụng table để chia làm 2 cột:\n  + Cột bên trái: Đoạn văn p giới thiệu về môi trường sống, số lượng còn lại, mức độ đe dọa. Dùng b, i, span để làm nổi bật các thông tin quan trọng.\n  + Cột bên phải: Chèn hình ảnh loài vật bằng thẻ img với inline style=\"width: 160px;\" để hiển thị vừa vặn."
    },
    {
      "title": "Bước 4: Định dạng CSS Link States theo Thiên Nhiên",
      "body": "- Trong file style.css (định dạng External), thiết lập định dạng trạng thái liên kết cho thẻ a:\n  + a:link, a:visited: Thiết lập màu xanh lá của rừng sâu #2e7d32 và bỏ gạch chân (text-decoration: none).\n  + a:hover: Chuyển sang màu vàng nắng #f9a825, tăng cỡ chữ lên 19px, in đậm font-weight: bold để tạo hiệu ứng phóng to đầy cuốn hút.\n  + a:active: Chuyển sang màu đỏ cảnh báo nguy hiểm cực độ #d32f2f khi nhấn chuột để báo động mức độ tuyệt chủng."
    },
    {
      "title": "Bước 5: Sáng Tạo và Hoàn Thiện",
      "body": "- Thiết lập font chữ mộc mạc không chân (sans-serif như Arial hoặc Nunito) cho toàn bộ trang web.\n- Sử dụng border-radius: 12px để bo tròn các góc ảnh của thú hoang dã.\n- Yêu cầu Sáng tạo bắt buộc: Lập trình thêm thông tin cho loài thứ 3 là Rùa Hoàn Kiếm (id=\"rua-hoan-kiem\") với đầy đủ bảng thông tin, ảnh minh họa trong thư mục assets, và liên kết wiki tìm hiểu thêm."
    }
  ],
  "code_samples_title": "Gợi ý Code mẫu",
  "code_samples_desc": "Học sinh hãy tự hoàn thiện code dựa trên các gợi ý dưới đây (không copy paste):",
  "code_samples": [
    {
      "title": "HTML (Mục lục điều hướng và bảng loài vật)",
      "type": "html",
      "code": "<!-- Mục lục liên kết -->\n<nav class=\"wildlife-nav\">\n  <a href=\"../index.html#saola\">Loài Sao La</a>\n  <a href=\"../index.html#vooc\">Loài Voọc Cát Bà</a>\n  <a href=\"https://www.iucnredlist.org\" target=\"_blank\">Sách Đỏ Quốc Tế</a>\n</nav>\n\n<!-- Phần thông tin loài Sao La -->\n<div id=\"saola\">\n  <h2>Loài Sao La - Kỳ Lân Châu Á</h2>\n  <table>\n    <tr>\n      <td>\n        <p>Sao La (Pseudoryx nghetinhensis) là loài thú quý hiếm sống ở dãy <b>Trường Sơn</b>. Trạng thái đe dọa: <span>Nguy cấp cực kỳ</span>.</p>\n      </td>\n      <td>\n        <img src=\"saola.jpg\" style=\"width: 160px;\">\n      </td>\n    </tr>\n  </table>\n</div>"
    },
    {
      "title": "CSS (Các trạng thái liên kết bảo vệ thiên nhiên)",
      "type": "css",
      "code": "/* Tông màu thiên nhiên hoang dã */\nbody {\n  background-color: #f1f8e9;\n  font-family: Arial, sans-serif;\n}\n\n/* Thiết lập 4 trạng thái liên kết */\na:link, a:visited {\n  color: #2e7d32;\n  text-decoration: none;\n}\n\na:hover {\n  color: #f9a825;\n  font-size: 19px;\n  font-weight: bold;\n}\n\na:active {\n  color: #d32f2f;\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Sử dụng thuộc tính id kết hợp dấu thăng (#) trong liên kết href giúp bạn nhảy nhanh đến bất kỳ phần nào trên trang mà không cần tải lại, rất hữu ích cho các trang bách khoa dài đấy!"
  }
}
