Bài 14: Tạo website nhiều trang — Phần 2: Trang liên hệ, chuyển trang, hoàn thiện
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ẽ thêm được trang Liên hệ với form liên hệ và bản đồ
- Sau bài này, bạn sẽ biết cách hoàn thiện website: kiểm tra tất cả trang, đảm bảo nhất quán, thêm các chi tiết cuối cùng
- Sau bài này, bạn sẽ có website 4 trang hoàn chỉnh — sản phẩm lớn nhất trong khóa học
💡 Ví Dụ Thực Tế
Chị Vy kinh doanh tiệm bánh. Website 3 trang đã xong đẹp, giờ chị cần thêm trang Liên hệ để khách biết địa chỉ tiệm, giờ mở cửa, và có thể gửi tin nhắn hỏi đặt bánh. Chị yêu cầu AI tạo trang Liên hệ có: form gửi tin nhắn, bản đồ Google Maps chỉ đúng địa chỉ tiệm, thông tin giờ mở cửa, và các icon link đến Facebook/Instagram/Zalo. Sau khi thêm xong, chị duyệt lại toàn bộ 4 trang từ đầu đến cuối, chỉnh vài chi tiết nhỏ, và hài lòng.
📚 Kiến Thức Cần Biết
Trang Liên hệ (Contact page) là một trong những trang quan trọng nhất — đây là nơi khách hàng ra quyết định liên hệ bạn. Trang Liên hệ tốt cần có: thông tin liên hệ rõ ràng (SĐT, email, địa chỉ), form gửi tin nhắn, bản đồ (nếu có cửa hàng vật lý), giờ làm việc, và link mạng xã hội.
Bản đồ Google Maps có thể nhúng vào website — giống như dán tấm bản đồ nhỏ lên trang web. AI Studio có thể tạo phần nhúng bản đồ cho bạn, nhưng cần API key (chìa khóa kết nối) của Google Maps. Nếu không muốn phức tạp, bạn có thể yêu cầu AI nhúng Google Maps dạng iframe — cách đơn giản hơn, không cần API key.
Hoàn thiện website (finalization) là bước cuối — giống như soát lỗi chính tả trước khi gửi email quan trọng. Bạn duyệt lại tất cả trang, kiểm tra: nội dung đúng chưa? Link hoạt động chưa? Giao diện nhất quán chưa? Xem trên mobile đẹp chưa?
🧪 Thực Hành Từng Bước
- Mở lại project website từ Bài 13
- Thêm trang Liên hệ:
Thêm trang Liên hệ (Contact) vào website với nội dung:
THÔNG TIN LIÊN HỆ:
- Địa chỉ: [ĐỊA CHỈ]
- Số điện thoại: [SĐT]
- Email: [EMAIL]
- Giờ làm việc: [GIỜ]
FORM LIÊN HỆ:
- Họ tên
- Email
- Số điện thoại
- Chủ đề (dropdown: Hỏi về sản phẩm / Hỏi về giá / Góp ý / Khác)
- Nội dung tin nhắn (textarea lớn)
- Nút "Gửi tin nhắn"
BẢN ĐỒ:
- Nhúng Google Maps iframe hiển thị vị trí: [ĐỊA CHỈ]
(Dùng Google Maps embed link, không cần API key)
BỐ CỤC:
- Bên trái: thông tin liên hệ + bản đồ
- Bên phải: form liên hệ
- Bên dưới: icon link mạng xã hội (Facebook, Instagram, Zalo)
Giữ thiết kế nhất quán với các trang khác trong website.- Nhấn Send, chờ kết quả
- Kiểm tra: click “Liên hệ” trên menu — trang mới hiện ra đúng không?
- Thử điền form liên hệ và bấm gửi — xem thông báo có hiện không?
- Bây giờ, hoàn thiện toàn bộ website. Gõ:
Hãy kiểm tra và hoàn thiện toàn bộ website:
1. Đảm bảo tất cả 4 trang (Trang chủ, Giới thiệu, Sản phẩm/Dịch vụ, Liên hệ) đều có trong menu
2. Footer giống hệt nhau trên tất cả 4 trang
3. Font chữ và tông màu nhất quán trên tất cả trang
4. Tất cả nút CTA trên mọi trang có phong cách giống nhau
5. Logo trên menu link về trang chủ khi click
6. Thêm hiệu ứng cuộn mượt mà trên tất cả trang
7. Thêm nút "Lên đầu trang" (back to top) khi cuộn xuống nhiều- Nhấn Send, kiểm tra kết quả
- Duyệt lại toàn bộ website: click qua từng trang, đọc nội dung, kiểm tra link, kiểm tra trên mobile (thu nhỏ cửa sổ)
- Nếu phát hiện lỗi nhỏ, dùng khung chat (ghi chú yêu cầu chỉnh sửa bằng prompt) hoặc chat để sửa
✅ Kết Quả Đầu Ra
Bạn sẽ có website 4 trang hoàn chỉnh: Trang chủ, Giới thiệu, Sản phẩm/Dịch vụ, Liên hệ — với menu chuyển trang, footer nhất quán, thiết kế chuyên nghiệp. Đây là sản phẩm lớn nhất và quan trọng nhất trong khóa học!
💡 Mẹo & Lưu Ý
- Nếu Google Maps iframe không hiển thị, bạn có thể dùng cách thủ công: vào Google Maps, tìm địa chỉ, bấm “Share” → “Embed a map” → copy code iframe. Rồi gõ cho AI: “Thay phần bản đồ bằng iframe sau: [DÁN CODE IFRAME]”
- Lưu lại project này cẩn thận — bạn sẽ dùng nó để kiểm thử (Giai đoạn 4) và deploy (Giai đoạn 5)
- ⚠️ Lỗi thường gặp: Khi website có nhiều trang, đôi khi 1 trang bị “mất” sau khi chỉnh sửa trang khác. Nếu vậy, gõ: “Trang [tên trang] đã biến mất sau lần chỉnh sửa gần nhất. Hãy khôi phục trang này với nội dung trước đó.”
📝 Bài Tập Về Nhà
Hoàn thành website 4 trang với nội dung thật của doanh nghiệp. Tạo checklist và tự kiểm tra: (1) Menu hoạt động tốt? (2) Tất cả nội dung bằng tiếng Việt và chính xác? (3) Xem trên mobile đẹp? (4) Footer nhất quán? (5) Tất cả nút CTA hoạt động? Nhờ 1 người chưa xem website review và cho điểm từ 1-10 về ấn tượng tổng thể.
GIAI ĐOẠN 4: “BIẾT KIỂM”
🏆 Achievement Bài 14
- [ ] 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: Cách nhờ AI sửa lỗi 🚀