{
  "title": "Dự án: Fanpage Siêu Anh Hùng Son Goku",
  "subtitle": "Luyện tập điều hướng và trang trí liên kết",
  "description": [
    { "text": "Chào mừng các em đến với thế giới của Ngọc Rồng! Trong dự án này, chúng ta sẽ xây dựng một trang web giới thiệu về nhân vật huyền thoại ", "bold": false },
    { "text": "Son Goku", "bold": true },
    { "text": ". Các em sẽ được học cách tạo menu điều hướng thông minh để di chuyển nhanh giữa các phần trong trang web và cách làm cho các đường link trở nên sinh động hơn khi di chuột qua.", "bold": false }
  ],
  "knowledge_title": "Kiến thức trọng tâm",
  "knowledge_tags": [
    "HTML: nav, a (href, target, id)",
    "HTML: table, img, h1, div",
    "CSS: :link, :visited, :hover, :active",
    "CSS: text-decoration, text-align",
    "CSS: color, background-color, font-family",
    "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ới Sublime Text",
      "body": "- Trên ổ đĩa Z, tạo thư mục: hocsinh01/{tên của em}/bai11-1.\n- Trong thư mục này, tạo 2 file: index.html và style.css.\n- Mẹo gõ nhanh:\n  + Trong file index.html, gõ \"<htm\" rồi nhấn Enter/Tab để hiện khung HTML.\n  + Để nối CSS, gõ \"<lin\" rồi nhấn Enter/Tab, tại mục href nhập ./style.css."
    },
    {
      "title": "Bước 2: Tạo thanh menu điều hướng (Navigation)",
      "body": "- Sử dụng thẻ nav bao ngoài và đặt cho nó một class=\"navigation\".\n- Bên trong nav, tạo các thẻ a để liên kết đến các phần: Trang chủ (link tới #home), Son Goku (link tới #about), Nguồn gốc (link tới #creation).\n- Thêm một liên kết dẫn đến trang Wikipedia về Son Goku, sử dụng thuộc tính target=\"_blank\" để mở trong tab mới."
    },
    {
      "title": "Bước 3: Xây dựng nội dung các phần",
      "body": "- Phần mở đầu (id=\"home\"): Chứa một tấm ảnh lớn về Goku (hero image).\n- Phần giới thiệu (id=\"about\"): Sử dụng thẻ table để chia 2 cột. Một cột chứa văn bản giới thiệu bằng thẻ p, cột còn lại chứa ảnh chân dung của Goku.\n- Phần thông tin khác: Tự tạo thêm các thẻ div với id tương ứng để các liên kết ở Bước 2 có thể hoạt động."
    },
    {
      "title": "Bước 4: Định dạng CSS cho Menu và Liên kết",
      "body": "- Định dạng thanh Nav: Sử dụng width (100%), height (ví dụ 50px) và background-color để tạo khối menu.\n- Định dạng Liên kết (Thẻ a):\n  + Sử dụng text-decoration: none để bỏ gạch chân mặc định.\n  + Sử dụng font-family và font-size để chữ trông chuyên nghiệp hơn.\n- Hiệu ứng chuột (Pseudo-classes):\n  + a:link / a:visited: Chọn màu sắc cố định (ví dụ màu cam đỏ #CA3704).\n  + a:hover: Thay đổi màu sắc rực rỡ hơn và tăng nhẹ font-size để tạo hiệu ứng nổi bật khi di chuột.\n  + a:active: Chọn một màu khác khi người dùng nhấn chuột vào."
    },
    {
      "title": "Bước 5: Sáng tạo và Hoàn thiện",
      "body": "- Tìm thêm các tấm ảnh đẹp về các trạng thái Super Saiyan của Goku để chèn vào trang web.\n- Sử dụng border-radius để bo tròn các tấm ảnh chân dung.\n- Tự thiết kế thêm các nút liên kết đến các trang phim hoặc truyện tranh khác mà em yêu thích."
    }
  ],
  "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à nội dung)",
      "type": "html",
      "code": "<!-- Thanh menu điều hướng -->\n<nav class=\"navigation\">\n  <a href=\"#home\">Trang chủ</a>\n  <a href=\"/* Link tới id about */\">Son Goku</a>\n  <a href=\"https://vi.wikipedia.org/wiki/Son_Goku\" target=\"/* Mở tab mới */\">Tham khảo</a>\n</nav>\n\n<!-- Các phần nội dung -->\n<div id=\"home\">\n  <!-- Chèn ảnh hero tại đây -->\n</div>\n\n<div id=\"about\">\n  <h1>Son Goku</h1>\n  <!-- Sử dụng table để chia cột văn bản và ảnh -->\n</div>"
    },
    {
      "title": "CSS (Gợi ý định dạng liên kết)",
      "type": "css",
      "code": ".navigation {\n  /* Đặt chiều ngang 100% và chiều cao 50px */\n  /* Chọn màu nền phù hợp */\n}\n\na {\n  /* Bỏ gạch chân bằng text-decoration */\n  /* Chọn font chữ và cỡ chữ */\n}\n\na:link, a:visited {\n  /* Chọn màu cam đặc trưng của Goku */\n}\n\na:hover {\n  /* Thay đổi màu sắc và tăng font-size khi di chuột */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": " Để ảnh không bị quá to, các em hãy sử dụng thuộc tính style=\"width: 200px;\" trực tiếp trong thẻ img hoặc định dạng trong file CSS nhé!"
  }
}