Xưởng mở rộng: tạo trang giới thiệu cơ bản bằng AI
Xưởng mở rộng: tạo trang giới thiệu cơ bản bằng AI
Thiết kế một trang phục vụ một mục tiêu; dùng AI hỗ trợ viết nội dung và mã HTML/CSS rồi kiểm trên trình duyệt. Đây là bài tự học ngoài tám giờ, chưa xuất bản trang thật hoặc thu dữ liệu thật.
Thời lượng: 45 phút · Xưởng tự học ngoài 8 giờ trực tiếp
Mục tiêu
- Lập bản yêu cầu trang giới thiệu có mục tiêu cụ thể và cấu trúc nội dung theo người đọc.
- Tạo trang mẫu có HTML ngữ nghĩa, H1, lời kêu gọi hành động rõ và bố cục tự điều chỉnh bố cục theo kích thước màn hình.
- Kiểm quyền ảnh, độ đọc, đường dẫn, mô tả thay thế cho ảnh văn bản và khả năng dùng bằng bàn phím.
- Phân biệt bản xem trước với trang đã xuất bản và biểu mẫu thật sự gửi được dữ liệu.
Chuẩn bị
Mở thư mục bài thực hành An Phúc, tạo bản sao riêng để sửa; giữ nguyên tệp đầu vào. Dùng một công cụ AI được đơn vị cho phép và một thư mục đầu ra có tên phiên bản. Dùng 06_ban-yeu-cau-noi-dung.docx và mẫu trang giới thiệu có mục tiêu cụ thể trong bộ thực hành. Chuẩn bị trình duyệt và trình sửa văn bản/HTML hoặc trình dựng trang được đơn vị cho phép.
Một mục tiêu rõ giúp trang bớt rối
Trang đích cần giúp người đọc hoàn thành một nhiệm vụ cụ thể: hiểu chương trình, xem tài liệu hoặc biết cách liên hệ. Chọn một lời kêu gọi hành động chính và cấu trúc đi theo câu hỏi của người đọc. Có thể dùng phần giới thiệu nổi bật ở đầu trang, vấn đề, cách giải quyết, bằng chứng được phép, Câu hỏi thường gặp và lời kêu gọi hành động; không bắt buộc mọi trang đều có đủ các khối.
Nội dung thuyết phục cần đúng. Không thêm logo đối tác, lượng học viên, chứng nhận hoặc lời chứng thực của khách hàng nếu không có nguồn và quyền dùng. Trang mẫu trong bộ thực hành dùng nội dung minh họa; khi dùng thật cần người phụ trách duyệt toàn bộ thông tin và quyền hình ảnh.
AI tạo mã cần được kiểm như mã
Một tệp HTML có thể mở được nhưng đường dẫn, bố cục hoặc biểu mẫu vẫn không hoạt động. Yêu cầu mã đơn giản, không tự kết nối ra ngoài khi không cần, không chèn khóa bảo mật và không lưu dữ liệu người dùng. Đọc cấu trúc rồi tự kiểm hành vi trước khi xuất bản.
Công cụ dựng trang hoặc chức năng tạo trang bằng AI có thể cần gói trả phí, dịch vụ lưu trữ hoặc tên miền riêng. Bài này không cần mua các dịch vụ đó: một tệp HTML mở không cần mạng vẫn thể hiện được cấu trúc, nội dung và cách bố cục thay đổi trên màn hình nhỏ. Bản xem trước không chứng minh trang đã được công khai hoặc biểu mẫu đã gửi thành công.
Kiểm tra chất lượng nội dung và khả năng sử dụng
Kiểm một H1 có ý nghĩa, title/mô tả phù hợp mục tiêu, đường dẫn nội bộ, ảnh đúng tỉ lệ và chữ dễ đọc. Dùng bàn phím để thử phím Tab, vị trí đang được chọn và nút; người không dùng chuột vẫn cần biết họ đang ở đâu. Không dùng màu làm dấu hiệu duy nhất cho trạng thái.
Nếu sau này thu địa chỉ thư điện tử hoặc nhận đăng ký, cần nêu mục đích rõ ràng, thông báo về dữ liệu, quyền truy cập, nơi lưu, cách ngăn nội dung rác và người chịu trách nhiệm. Một biểu mẫu đẹp không có nghĩa các yêu cầu đó đã được công cụ AI giải quyết.
Bài thực hành
An Phúc là doanh nghiệp giả định phân phối văn phòng phẩm và dịch vụ in ấn cho doanh nghiệp. Người học hỗ trợ nhóm vận hành đọc dữ liệu tháng 09/2026 và chuẩn bị đề xuất chương trình thử nghiệm cải thiện quy trình tháng 11/2026. Mọi tên người, đơn hàng, trao đổi và số liệu trong bộ thực hành là dữ liệu mô phỏng.
- Tạo dàn ý và nội dung một trang.
- Chỉnh mẫuHTML/CSS hoặc công cụ dựng trang để có một lời kêu gọi hành động.
- Kiểm ít nhất hai kích thước màn hình và bàn phím.
Sản phẩm cần bàn giao
Một trang giới thiệu có mục tiêu cụ thể mẫu mở được không cần mạng hoặc bản xem trước, có danh sách kiểm tra máy tính, điện thoại và bàn phím và kế hoạch xuất bản có phê duyệt.
Tự kiểm tra
- Một mục tiêu/lời kêu gọi hành động chính rõ.
- Không có thành tích/khách hàng giả.
- Không chèn khóa bảo mật, mã theo dõi hoặc yêu cầu kết nối mạng không cần thiết.
- Ảnh có quyền và mô tả thay thế cho ảnh phù hợp.
- Không tràn ngang ở màn hình nhỏ.
- Gắn nhãn rõ đây là bản xem trước và biểu mẫu mô phỏng.