{
  "title": "Dự án: Cẩm Nang Du Lịch Khám Phá Thế Giới",
  "subtitle": "Cấu trúc bảng chia cột, menu điều hướng và thiết lập liên kết",
  "description": [
    {
      "text": "Chào mừng các em đến với dự án thứ hai! Lần này, chúng ta sẽ tạo một trang web ",
      "bold": false
    },
    {
      "text": "Cẩm Nang Du Lịch",
      "bold": true
    },
    {
      "text": ". Các em sẽ được thực hành tạo menu điều hướng thông minh bằng thẻ nav, chia bố cục cột chuyên nghiệp bằng thẻ table, thiết lập các liên kết tuyệt đối/tương đối và định dạng các trạng thái CSS Links.",
      "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-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à liên kết trang",
      "body": "- Trên ổ đĩa Z, tạo thư mục: hocsinh01/{tên của em}/bai11-2.\n- Trong thư mục này, tạo 2 file: index.html và style.css.\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- Kết nối file CSS bên ngoài bằng thẻ link.\n- Trong thẻ <head>, thêm thẻ <base href=\"...\"> để đặt đường dẫn cơ sở cho hình ảnh địa danh."
    },
    {
      "title": "Bước 2: Tạo Menu Điều Hướng (Navigation)",
      "body": "- Sử dụng thẻ <nav class=\"navigation\"> để định nghĩa khu vực menu điều hướng chính.\n- Đặt các thẻ a bên trong để liên kết đến các phần nội dung trên trang bằng thuộc tính id (ví dụ: Trang chủ link tới #home, Điểm đến link tới #about).\n- Thêm một liên kết tuyệt đối dẫn đến trang Wikipedia của địa danh đó, sử dụng thuộc tính target=\"_blank\" để mở ở tab mới."
    },
    {
      "title": "Bước 3: Bố cục chia cột bằng Bảng (Table Layout)",
      "body": "- Sử dụng các thẻ div với id tương ứng (id=\"home\" và id=\"about\") để nhóm và phân tách các phần nội dung.\n- Trong phần giới thiệu địa điểm (id=\"about\"), tạo một tiêu đề lớn bằng thẻ h1 hoặc h2.\n- Sử dụng thẻ table để chia bố cục nội dung chi tiết thành 2 cột:\n  + Cột bên trái (td) chứa đoạn văn giới thiệu bằng thẻ p. Sử dụng thẻ b, i, u để định dạng chữ đậm/nghiêng/gạch chân và thẻ span để highlight từ khóa quan trọng.\n  + Cột bên phải (td) chứa hình ảnh địa danh bằng thẻ img.\n- Sử dụng thuộc tính định dạng Inline Style trực tiếp trên thẻ img: style=\"width: 200px;\" để thiết lập chiều rộng ả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 cam đỏ đặc trưng #CA3704 và loại bỏ gạch chân mặc định (text-decoration: none).\n  + a:hover: Thay đổi màu chữ sang màu xanh #1B4F8B, tăng kích thước chữ lên 21px (font-size: 21px) và làm đậm chữ (font-weight: bold) để tạo hiệu ứng nổi bật khi di chuột.\n  + a:active: Thiết lập màu chữ đen khi người dùng nhấn giữ chuột.\n- Sử dụng CSS để thiết kế thanh menu (.navigation): Đặt width: 100%, height, background-color, display: flex để căn chỉnh các liên kết."
    },
    {
      "title": "Bước 5: Sáng tạo và Hoàn thiện",
      "body": "- Thiết lập phông chữ cho trang web bằng font-family (ví dụ: 'Nunito Sans' hoặc sans-serif).\n- Định dạng đường viền bảng bằng các thuộc tính border và border-collapse: collapse trong CSS.\n- Căn chỉnh căn lề văn bản bằng thuộc tính text-align.\nBo tròn các góc của ảnh bằng border-radius để giao diện trông hiện đại hơn."
    }
  ],
  "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=\"#home\">Trang chủ</a>\n  <a href=\"/* Link tới id about */\">Điểm đến</a>\n  <a href=\"https://vi.wikipedia.org/wiki/Paris\" target=\"/* Mở tab mới */\">Wikipedia</a>\n</nav>\n\n<!-- Bố cục phân đoạn bằng div -->\n<div id=\"home\">\n  <img src=\"travel_banner.jpg\" style=\"/* Chiều rộng 100% */\">\n</div>\n\n<div id=\"about\">\n  <h2>Khám Phá Thủ Đô Paris</h2>\n  <!-- Bảng chia 2 cột -->\n  <table>\n    <tr>\n      <td>\n        <p>Paris là thủ đô hoa lệ của <b>nước Pháp</b>, nổi tiếng với <span>Tháp Eiffel</span>.</p>\n      </td>\n      <td>\n        <img src=\"paris.jpg\" style=\"/* Định dạng inline: 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ữ và màu nền toàn trang */\nbody {\n  font-family: sans-serif;\n  background-color: #f7f9fc;\n}\n\n/* Định dạng các trạng thái liên kết */\na:link, a:visited {\n  color: #CA3704;\n  text-decoration: none;\n}\n\na:hover {\n  color: #1B4F8B;\n  font-size: 21px;\n  font-weight: bold;\n}\n\na:active {\n  color: black;\n}\n\n/* Định dạng bảng */\ntable {\n  border-collapse: collapse;\n}\ntd {\n  border: 1px solid #ddd;\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Để trang web hiển thị nhất quán, hãy thiết lập thuộc tính base ở thẻ head giúp các đường dẫn tương đối hình ảnh luôn tự động kết nối chính xác tới thư mục chứa ảnh trực tuyến!"
  }
}