Bài 13: Tạo website nhiều trang — Phần 1: Trang chủ, giới thiệu, sản phẩm
Giai đoạn 3: BIẾT LÀM 🔨 Thời lượng: 45-90 phút (đọc + thực hành + bài tập) Công cụ: Google AI Studio — aistudio.google.com
🎯 Mục Tiêu Bài Học
- Sau bài này, bạn sẽ tạo được website có nhiều trang (multi-page) với menu chuyển trang
- Sau bài này, bạn sẽ hiểu cách “routing” (chuyển trang) hoạt động — giống như mở cửa từ phòng này sang phòng khác
- Sau bài này, bạn sẽ có 3 trang đầu tiên: Trang chủ, Giới thiệu, Sản phẩm/Dịch vụ
💡 Ví Dụ Thực Tế
Anh Trung mở công ty tổ chức sự kiện. Anh cần website “đàng hoàng” có nhiều trang: Trang chủ (ấn tượng đầu tiên), Giới thiệu (về công ty, đội ngũ), Dịch vụ (các gói tổ chức sự kiện), Portfolio (ảnh sự kiện đã tổ chức), và Liên hệ. Trước đây phải thuê dev 20-30 triệu. Giờ anh tạo trên AI Studio: gõ prompt yêu cầu website nhiều trang → AI tạo tất cả trang + menu chuyển trang + thiết kế nhất quán. Giống như xây nhà nhiều phòng — AI xây hết, bạn chỉ cần nói “phòng khách màu gì, phòng ngủ kiểu gì.”
📚 Kiến Thức Cần Biết
Website nhiều trang khác với landing page ở chỗ: landing page chỉ có 1 trang dài (kéo xuống), còn website nhiều trang có nhiều “phòng” (trang) mà bạn chuyển qua lại bằng menu. Giống như cửa hàng có 1 phòng trưng bày (landing page) so với tòa nhà văn phòng có nhiều tầng (website nhiều trang).
Routing (chuyển trang) là cơ chế khi bạn click “Giới thiệu” trên menu thì trang Giới thiệu hiện ra, click “Sản phẩm” thì trang Sản phẩm hiện ra. Giống như thang máy — bấm tầng nào thì đến tầng đó.
Navigation/Menu (thanh điều hướng) là thanh ngang hoặc dọc hiển thị các trang — thường nằm trên cùng hoặc bên trái website. Đây là “bản đồ” giúp người xem biết website có gì và đi đâu.
Khi tạo website nhiều trang trong AI Studio, bạn nên yêu cầu luôn trong prompt đầu tiên rằng đây là multi-page app có navigation. AI sẽ tự tạo cấu trúc routing.
🧪 Thực Hành Từng Bước
- Mở Google AI Studio
- Gõ prompt tạo website nhiều trang (thay thông tin bạn):
Tạo website nhiều trang cho doanh nghiệp bằng tiếng Việt:
THÔNG TIN:
- Tên doanh nghiệp: [TÊN]
- Ngành: [NGÀNH]
- Slogan: [SLOGAN]
CẤU TRÚC WEBSITE:
Website có 4 trang, chuyển trang qua navigation menu:
1. Trang chủ (Home)
2. Giới thiệu (About)
3. Sản phẩm/Dịch vụ (Products/Services)
4. Liên hệ (Contact) — sẽ tạo ở bài sau
TRANG CHỦ:
- Hero banner toàn màn hình: ảnh nền đẹp + tiêu đề + slogan + nút CTA
- Phần "Dịch vụ nổi bật": 3-4 card tóm tắt dịch vụ chính
- Phần "Tại sao chọn chúng tôi": 4 lý do với icon
- Phần "Đánh giá khách hàng": 3 review
- Phần "Con số ấn tượng": ví dụ "500+ khách hàng, 10 năm kinh nghiệm..."
- Nút CTA cuối trang
TRANG GIỚI THIỆU:
- Banner nhỏ với tiêu đề "Về chúng tôi"
- Câu chuyện thương hiệu: 2-3 đoạn văn
- Sứ mệnh + Tầm nhìn + Giá trị cốt lõi (3 box)
- Đội ngũ: 4 thành viên, mỗi người có ảnh tròn + tên + chức vụ
[NHẬP TÊN + CHỨC VỤ HOẶC ĐỂ AI TỰ TẠO]
TRANG SẢN PHẨM/DỊCH VỤ:
- Banner nhỏ với tiêu đề
- Hiển thị [SỐ] sản phẩm/dịch vụ dạng grid (lưới)
- Mỗi sản phẩm: ảnh, tên, mô tả ngắn, giá, nút "Chi tiết" hoặc "Liên hệ"
[LIỆT KÊ CÁC SẢN PHẨM/DỊCH VỤ]
MENU NAVIGATION:
- Dính trên cùng (sticky header) khi cuộn trang
- Logo bên trái, các mục menu bên phải
- Trên mobile: menu hamburger (3 gạch ngang, bấm mở ra)
- Trang đang xem được highlight trên menu
THIẾT KẾ CHUNG:
- Màu chủ đạo: [MÀU]
- Phong cách: [MÔ TẢ - VD: hiện đại, chuyên nghiệp]
- Footer giống nhau trên tất cả trang: tên, địa chỉ, SĐT, link MXH, bản quyền
- Responsive- nhấn Run (nút tam giác) — prompt này sẽ mất lâu hơn bình thường (60-120 giây) vì tạo nhiều trang
- Khi khung kết quả chat hiện ra, thử click các mục trên menu: Home, Giới thiệu, Sản phẩm — xem chuyển trang có mượt không
- Nếu có trang nào chưa đủ nội dung, chỉnh riêng từng trang:
Trên trang Giới thiệu, phần Câu chuyện thương hiệu hiện quá ngắn. Hãy viết thêm nội dung phong phú hơn: [MÔ TẢ THÊM VỀ DOANH NGHIỆP]. Giọng văn chuyên nghiệp nhưng gần gũi.- Kiểm tra menu: click qua lại giữa các trang, đảm bảo trang đang xem được highlight trên menu
- Kiểm tra trên mobile: thu nhỏ cửa sổ trình duyệt, xem menu hamburger có hoạt động không
✅ Kết Quả Đầu Ra
Bạn sẽ có website 3 trang (Trang chủ, Giới thiệu, Sản phẩm/Dịch vụ) với menu chuyển trang hoạt động mượt, thiết kế nhất quán.
💡 Mẹo & Lưu Ý
- Khi tạo website nhiều trang, nên yêu cầu AI giữ thiết kế nhất quán (consistent) giữa các trang — cùng font, cùng tông màu, cùng kiểu header/footer
- Nếu AI chỉ tạo 1-2 trang thay vì 3, gõ: “Website hiện chỉ có trang chủ. Hãy thêm đầy đủ trang Giới thiệu và Sản phẩm/Dịch vụ như yêu cầu ban đầu.”
- ⚠️ Lỗi thường gặp: Menu chuyển trang không hoạt động (click mà không chuyển). Gõ: “Menu navigation không chuyển trang khi click. Hãy kiểm tra routing và đảm bảo tất cả link trong menu hoạt động đúng.”
📝 Bài Tập Về Nhà
Hoàn thành 3 trang website với nội dung thật của doanh nghiệp bạn. Kiểm tra chuyển trang hoạt động trơn tru. Chuẩn bị nội dung cho trang Liên hệ: địa chỉ, SĐT, email, giờ làm việc, link Google Maps (nếu có).
🏆 Achievement Bài 13
- [ ] Hoàn thành đọc phần kiến thức
- [ ] Làm xong các bước thực hành
- [ ] Nộp bài tập về nhà
- [ ] Ghi chú những điều học được
Bài tiếp theo: Website nhiều trang — Phần 2 🚀