{
  "title": "Dự án: Thế Giới Khủng Long Kỳ Thú",
  "subtitle": "Sử dụng thẻ nav, table chia cột, base URL và định dạng các trạng thái CSS Links",
  "description": [
    {
      "text": "Chào mừng các em đến với chuyến hành trình ngược thời gian! Trong dự án này, chúng ta sẽ xây dựng trang web ",
      "bold": false
    },
    {
      "text": "Thế Giới Khủng Long",
      "bold": true
    },
    {
      "text": ". Các em sẽ được học cách tạo menu điều hướng để tìm hiểu nhanh các loài khủng long, sử dụng bảng table để chia cột hình ảnh và thông tin, cùng việc làm nổi bật các liên kết khi di chuột qua.",
      "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, p, span, img, table, tr, td, th, thead, tbody, b, i, u",
    "CSS mới: :link, :visited, :hover, :active",
    "CSS cũ: color, background-color, font-family, font-size, font-weight, border, border-collapse, border-radius, display, text-align, text-decoration, width, height",
    "Khái niệm: Đường dẫn Tuyệt đối & Tương đối"
  ],
  "steps_title": "Các bước thực hiện chi tiết",
  "steps": [
    {
      "title": "Bước 1: Khởi tạo dự án và thiết lập base",
      "body": "- Trên ổ đĩa Z, tạo thư mục: hocsinh01/{tên của em}/bai11-4.\n- Trong thư mục này, tạo 2 file: index.html, style.css, và tạo một thư mục con tên là assets để chứa các hình ảnh khủng long.\n- Thiết lập cấu trúc HTML5 chuẩn chỉnh với các thẻ html, head, body, title, meta.\n- Nối file CSS style.css bằng thẻ link. Chú ý: Vì có thẻ <base> trỏ vào assets, file style.css ở ngoài thư mục gốc phải được nối bằng đường dẫn tương đối đi lên một cấp thư mục: <link rel=\"stylesheet\" href=\"../style.css\">\n- Khai báo thẻ <base href=\"./assets/\"> trong thẻ <head> để thiết lập đường dẫn cơ sở cho các ảnh khủng long."
    },
    {
      "title": "Bước 2: Tạo Menu Điều Hướng (Navigation)",
      "body": "- Tạo thanh điều hướng bằng thẻ <nav class=\"navigation\">.\n- Thêm 2 liên kết tương đối trỏ đến các phần trong trang bằng ID. Chú ý: Vì có thẻ <base href=\"./assets/\"> trỏ vào assets, nếu chỉ dùng href=\"#id\" trình duyệt sẽ tìm trong thư mục assets và bị lỗi. Bắt buộc phải thêm ../index.html ở trước ID của các liên kết: Khủng long bạo chúa (link tới ../index.html#t-rex), Khủng long cổ dài (link tới ../index.html#brachio).\n- Thêm 1 liên kết tuyệt đối dẫn đến trang Wikipedia tiếng Việt về Khủng long, đặt thuộc tính target=\"_blank\" để mở ở tab mới."
    },
    {
      "title": "Bước 3: Xây dựng các phần nội dung chia cột bằng Bảng (Table Layout)",
      "body": "- Tạo các khối div tương ứng với các phần ID (id=\"t-rex\" và id=\"brachio\").\n- Với mỗi phần, tạo một tiêu đề h2 và một bảng table để chia cột:\n  + Cột bên trái (td): Đoạn văn p giới thiệu đặc điểm của loài khủng long đó. Sử dụng b, i, u và span để nhấn mạnh từ khóa.\n  + Cột bên phải (td): Chèn ảnh của loài khủng long đó bằng thẻ img. Sử dụng inline style=\"width: 200px;\" để cố định kích thước ảnh."
    },
    {
      "title": "Bước 4: Định dạng CSS cho Menu và các Trạng thái liên kết",
      "body": "- Trong file style.css (định dạng External), thiết lập các thuộc tính cho thẻ a:\n  + a:link, a:visited: Thiết lập màu xanh lá đậm #2e7d32 và loại bỏ gạch chân (text-decoration: none).\n  + a:hover: Đổi sang màu vàng cam #f57c00, tăng font-size lên 20px và font-weight: bold để tạo hiệu ứng sinh động khi di chuột.\n  + a:active: Đổi sang màu đỏ khi nhấn giữ chuột.\n- Định dạng thanh .navigation: Đặt width: 100%, background-color: #f1f8e9, display: flex để sắp xếp các menu."
    },
    {
      "title": "Bước 5: Sáng tạo và Hoàn thiện",
      "body": "- Thiết lập font-family (ví dụ: 'Roboto' hoặc sans-serif) cho toàn trang web.\n- Thiết lập border-collapse: collapse và border: 1px solid #c8e6c9 cho table để bảng trông gọn gàng.\n- Sử dụng border-radius: 15px cho các ảnh img để bo tròn góc ảnh khủng long nhìn thân thiện hơn.\n- Yêu cầu Sáng tạo bắt buộc: Hãy bổ sung thêm ít nhất 5 loài khủng long khác vào trang web (ví dụ: Triceratops, Velociraptor, Stegosaurus, Spinosaurus, Pterodactyl). Mỗi loài khủng long mới cần được chia bố cục bằng bảng, hiển thị hình ảnh, tên gọi và phần giới thiệu đặc trưng. Hãy tự phối màu liên kết độc đáo và sinh động hơn cho từng loài!"
    }
  ],
  "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 (Gợi ý menu và bảng chia cột)",
      "type": "html",
      "code": "<!-- Thanh menu điều hướng -->\n<nav class=\"navigation\">\n  <a href=\"../index.html#t-rex\">Khủng long bạo chúa</a>\n  <a href=\"/* Link tới id brachio phải có ../index.html ở trước */\">Khủng long cổ dài</a>\n  <a href=\"https://vi.wikipedia.org/wiki/Kh%E1%BB%A7ng_long\" target=\"/* Mở tab mới */\">Wikipedia</a>\n</nav>\n\n<!-- Các phần nội dung -->\n<div id=\"t-rex\">\n  <h2>Khủng long Bạo chúa (T-Rex)</h2>\n  <table>\n    <tr>\n      <td>\n        <p>T-Rex là một trong những loài <b>khủng long ăn thịt</b> lớn nhất thế giới, nổi tiếng với <span>bộ hàm cực khỏe</span>.</p>\n      </td>\n      <td>\n        <img src=\"trex.jpg\" style=\"/* Chiều rộng 200px */\">\n      </td>\n    </tr>\n  </table>\n</div>"
    },
    {
      "title": "CSS (Gợi ý định dạng liên kết)",
      "type": "css",
      "code": "/* Thiết lập font chữ cho toàn trang */\nbody {\n  /* phông chữ: sans-serif */\n  /* nền: màu fafdfb */\n}\n\n/* Định dạng trạng thái liên kết */\na:link, a:visited {\n  /* màu chữ: #2e7d32 */\n  /* bỏ gạch chân */\n}\n\na:hover {\n  /* màu chữ: #f57c00 */\n  /* kích thước chữ: 20px */\n  /* độ đậm chữ: bold */\n}\n\na:active {\n  /* màu chữ: màu đỏ (red) */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Đặt tên ID cho các phần nội dung thật chính xác và trùng khớp với phần href của thẻ a (có thêm dấu # ở trước) để chức năng tự động cuộn trang hoạt động chính xác nhé!"
  }
}