{
  "title": "Dự án: Trạm Vũ Trụ Kính Thiên Văn",
  "subtitle": "Luyện tập liên kết trong trang, base href, bảng thông tin vũ trụ và hiệu ứng CSS Links",
  "description": [
    {
      "text": "Chào các nhà du hành vũ trụ nhí! Hôm nay chúng ta sẽ cùng xây dựng trang web ",
      "bold": false
    },
    {
      "text": "Khám Phá Hệ Mặt Trời",
      "bold": true
    },
    {
      "text": ". Các em sẽ thực hành tạo menu điều hướng bằng thẻ nav để nhảy nhanh đến các hành tinh, sử dụng bảng table để so sánh các thông số vũ trụ, thiết lập base URL và trang trí các trạng thái liên kết nổi bật.",
      "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 và thiết lập base đường dẫn",
      "body": "- Trên ổ đĩa Z, tạo thư mục: hocsinh01/{tên của em}/bai11-5.\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 hành tinh.\n- Thiết lập cấu trúc HTML5 chuẩn chỉnh.\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- Trong thẻ <head>, thêm thẻ <base href=\"./assets/\"> để làm đường dẫn gốc cho các ảnh hành tinh."
    },
    {
      "title": "Bước 2: Tạo Menu Điều Hướng (Navigation Bar)",
      "body": "- Sử dụng thẻ <nav class=\"navigation\"> để chứa các liên kết chính.\n- Tạo các liên kết trong trang trỏ đến các phần hành tinh bằng thuộc tính 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: Sao Hỏa (link tới ../index.html#mars), Sao Mộc (link tới ../index.html#jupiter).\n- Tạo một liên kết tuyệt đối dẫn đến trang chủ của NASA, đặt target=\"_blank\" để mở ở tab mới."
    },
    {
      "title": "Bước 3: Thiết lập các phần thông tin hành tinh bằng Bảng",
      "body": "- Tạo các khối div có id tương ứng (id=\"mars\" và id=\"jupiter\").\n- Trong mỗi div, sử dụng thẻ table để chia bố cục:\n  + Cột bên trái (td): Mô tả đặc điểm thú vị của hành tinh bằng các thẻ p, b, i, u và span để tô đậm/nghiêng/nhấn mạnh các thông tin quan trọng.\n  + Cột bên phải (td): Chèn hình ảnh hành tinh bằng thẻ img. Sử dụng inline style=\"width: 180px;\" để cố định kích thước hiển thị của hình ả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 định dạng cho thẻ a:\n  + a:link, a:visited: Thiết lập màu xanh dương đậm #0d47a1 và loại bỏ gạch chân (text-decoration: none).\n  + a:hover: Đổi sang màu đỏ cam của vũ trụ #e64a19, tăng font-size lên 20px và font-weight: bold để tạo hiệu ứng khi di chuột.\n  + a:active: Đổi sang màu vàng khi nhấn giữ chuột.\n- Định dạng thanh .navigation: Đặt width: 100%, background-color: #eceff1, display: flex để căn chỉnh."
    },
    {
      "title": "Bước 5: Sáng tạo và Hoàn thiện",
      "body": "- Thiết lập font-family (ví dụ: 'Segoe UI' hoặc sans-serif) cho toàn bộ body.\n- Sử dụng background-color: #10121a cho body để tạo hiệu ứng không gian tối của vũ trụ, đổi color chữ sang trắng để dễ đọc.\n- Thiết lập border-radius: 50% cho ảnh hành tinh để làm cho chúng hiển thị thành hình tròn hoàn hảo!\n- Yêu cầu Sáng tạo bắt buộc: Hãy bổ sung thêm ít nhất 5 hành tinh khác trong Hệ Mặt Trời (ví dụ: Sao Thủy, Sao Kim, Trái Đất, Sao Thổ, Sao Thiên Vương) để hoàn thiện trạm vũ trụ. Mỗi hành tinh cần có bảng thông tin, ảnh đại diện hình tròn và màu sắc liên kết neon phát sáng đẹp mắt!"
    }
  ],
  "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#mars\">Sao Hỏa</a>\n  <a href=\"/* Link tới id jupiter phải có ../index.html ở trước */\">Sao Mộc</a>\n  <a href=\"https://www.nasa.gov\" target=\"/* Mở tab mới */\">NASA</a>\n</nav>\n\n<!-- Các phần nội dung -->\n<div id=\"mars\">\n  <h2>Khám phá Hành tinh Đỏ (Sao Hỏa)</h2>\n  <table>\n    <tr>\n      <td>\n        <p>Sao Hỏa là hành tinh thứ tư từ Mặt Trời, nổi tiếng với màu đỏ đặc trưng do <span>oxit sắt</span> bao phủ bề mặt.</p>\n      </td>\n      <td>\n        <img src=\"mars.jpg\" style=\"/* Chiều rộng 180px */\">\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 màu nền tối cho vũ trụ */\nbody {\n  /* phông chữ: sans-serif */\n  /* nền: màu 10121a */\n  /* màu chữ: màu trắng (#ffffff) */\n}\n\n/* Định dạng trạng thái liên kết */\na:link, a:visited {\n  /* màu chữ: #0d47a1 */\n  /* bỏ gạch chân */\n}\n\na:hover {\n  /* màu chữ: #e64a19 */\n  /* kích thước chữ: 20px */\n  /* độ đậm chữ: bold */\n}\n\na:active {\n  /* màu chữ: màu vàng (yellow) */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Thuộc tính border-radius: 50% chỉ tạo ra hình tròn hoàn hảo khi hình ảnh ban đầu là hình vuông (chiều rộng bằng chiều cao) đấy các em nhé!"
  }
}