{
  "title": "Dự án: Học Viện Pháp Thuật Hogwarts",
  "subtitle": "Kết hợp menu điều hướng, bảng so sánh các nhà phép thuật và định dạng CSS Links nâng cao",
  "description": [
    {
      "text": "Chào các phù thủy tập sự! Trong dự án cuối cùng của bài học này, chúng ta sẽ thiết kế trang giới thiệu ",
      "bold": false
    },
    {
      "text": "Bốn Nhà Phép Thuật Hogwarts",
      "bold": true
    },
    {
      "text": ". Các em sẽ thực hành tạo menu điều hướng để tìm hiểu nhanh từng nhà phép thuật, sử dụng bảng table chia cột hình ảnh và thông tin của các nhà, thiết lập base URL và tùy biến màu sắc liên kết theo từng trạng thái tương tác.",
      "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 phép thuật",
      "body": "- Trên ổ đĩa Z, tạo thư mục: hocsinh01/{tên của em}/bai11-6.\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 huy hiệu các nhà.\n- Khai báo cấu trúc HTML5 chuẩn chỉnh gồm các phần html, head, body, title.\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 head để làm đường dẫn cơ sở cho hình ảnh huy hiệu các nhà."
    },
    {
      "title": "Bước 2: Thiết kế Thanh Điều Hướng Pháp Thuật",
      "body": "- Tạo thanh điều hướng bằng thẻ <nav class=\"navigation\">.\n- Thêm các thẻ a liên kết trong trang dẫn đến phần giới thiệu các nhà bằng id tương ứng. 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: Gryffindor (link tới ../index.html#gryffindor), Slytherin (link tới ../index.html#slytherin).\n- Thêm liên kết tuyệt đối đến trang Wizarding World chính thức, sử dụng thuộc tính target=\"_blank\" để mở ở tab mới."
    },
    {
      "title": "Bước 3: Bố cục chia cột thông tin các Nhà bằng Bảng",
      "body": "- Tạo các khối div có id tương ứng (id=\"gryffindor\" và id=\"slytherin\").\n- Trong mỗi div, sử dụng table để chia làm 2 cột:\n  + Cột bên trái (td): Đoạn văn p mô tả về phẩm chất nổi bật, màu sắc đại diện của nhà đó, sử dụng b, i, u và span để nhấn mạnh.\n  + Cột bên phải (td): Chèn hình ảnh huy hiệu của nhà bằng thẻ img với inline style=\"width: 150px;\" để cố định kích thước."
    },
    {
      "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), định dạng cho thẻ a:\n  + a:link, a:visited: Thiết lập màu đỏ sẫm Gryffindor #800000 và bỏ gạch chân (text-decoration: none).\n  + a:hover: Đổi sang màu vàng hoàng kim #ffd700, tăng font-size lên 20px và làm đậm font-weight: bold để tạo hiệu ứng nổi bật khi di chuột.\n  + a:active: Đổi sang màu xanh lục Slytherin #006400 khi nhấn giữ chuột.\n- Định dạng thanh .navigation: Đặt width: 100%, background-color: #1a1a1a, display: flex để định vị và căn chỉnh menu."
    },
    {
      "title": "Bước 5: Sáng tạo và Hoàn thiện",
      "body": "- Thiết lập font-family (ví dụ: 'Georgia' hoặc serif) để trang web mang phong cách cổ kính, kỳ bí của thế giới phép thuật.\n- Thiết lập border-collapse: collapse và border cho table để các ô liên kết gọn gàng.\n- Sử dụng border-radius: 10px cho các hình ảnh huy hiệu để bo nhẹ các góc ảnh.\n- Yêu cầu Sáng tạo bắt buộc: Hãy thiết kế bổ sung đầy đủ 2 nhà phép thuật còn lại của học viện Hogwarts là Ravenclaw (tông màu xanh dương và đồng) và Hufflepuff (tông màu vàng và đen). Mỗi nhà mới phải có bảng giới thiệu đầy đủ phẩm chất, huy hiệu và liên kết liên quan!"
    }
  ],
  "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#gryffindor\">Nhà Gryffindor</a>\n  <a href=\"/* Link tới id slytherin phải có ../index.html ở trước */\">Nhà Slytherin</a>\n  <a href=\"https://www.wizardingworld.com\" target=\"/* Mở tab mới */\">Wizarding World</a>\n</nav>\n\n<!-- Các phần nội dung -->\n<div id=\"gryffindor\">\n  <h2>Nhà Gryffindor - Dũng cảm và Hào hiệp</h2>\n  <table>\n    <tr>\n      <td>\n        <p>Nhà Gryffindor tôn vinh lòng <b>dũng cảm, tinh thần hiệp sĩ</b>. Màu đại diện là <span>đỏ sẫm và vàng cát</span>.</p>\n      </td>\n      <td>\n        <img src=\"gryffindor.jpg\" style=\"/* Chiều rộng 150px */\">\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ữ mang phong cách cổ điển */\nbody {\n  /* phông chữ: Georgia, serif */\n  /* nền: màu fcfbf7 */\n}\n\n/* Định dạng trạng thái liên kết */\na:link, a:visited {\n  /* màu chữ: #800000 */\n  /* bỏ gạch chân */\n}\n\na:hover {\n  /* màu chữ: #ffd700 */\n  /* kích thước chữ: 20px */\n  /* độ đậm chữ: bold */\n}\n\na:active {\n  /* màu chữ: #006400 */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Font chữ thuộc nhóm 'serif' (như Georgia, Times New Roman) có các nét gạch ở chân và đầu chữ, rất phù hợp cho các trang web mang phong cách cổ điển, phép thuật hoặc lịch sử đấy!"
  }
}