Cách dùng AI viết trang web đơn giản bằng HTML, CSS

Bạn không cần biết lập trình vẫn có thể làm một trang web giới thiệu đơn giản nhờ AI. Chỉ cần mô tả rõ trang cần có gì, nhờ AI viết mã HTML và CSS, lưu thành một file rồi mở bằng trình duyệt là xem được ngay trên máy của mình.

Bài này hướng dẫn từng bước cụ thể trên Windows 11: cách viết yêu cầu cho AI, lưu file, mở xem, nhờ AI chỉnh sửa và những điều cần kiểm tra trước khi đưa trang lên mạng. AI có thể viết mã sai hoặc thiếu, nên bạn cần đọc lại và thử từng phần.

HTML và CSS là gì

• HTML là phần khung và nội dung của trang: tiêu đề, đoạn văn, hình, nút, liên kết.
• CSS là phần trang trí: màu sắc, phông chữ, khoảng cách, bố cục.

Một trang web đơn giản chỉ cần một file index.html chứa cả hai. Khi trang cần chức năng phức tạp như đăng nhập, thanh toán hay lưu dữ liệu, bạn cần thêm phần máy chủ, và đó là lúc nên nhờ người có chuyên môn, xem thiết kế website.

Bước 1: Chuẩn bị nội dung trước

AI viết tốt hơn khi bạn đưa đủ thông tin. Hãy chuẩn bị:

1. Mục đích trang: giới thiệu cửa hàng, quán cà phê, hồ sơ cá nhân, sự kiện...
2. Các phần cần có: tiêu đề, giới thiệu, danh sách dịch vụ, bảng giá (chỉ khi bạn đã chốt), liên hệ.
3. Nội dung chữ thật: tên, địa chỉ, số điện thoại. Đừng để AI bịa thông tin liên hệ.
4. Phong cách: màu chủ đạo, tối giản hay nhiều màu, hiện đại hay cổ điển.
5. Thiết bị: cần xem tốt trên điện thoại (responsive).

Bước 2: Viết yêu cầu cho AI

Hãy mô tả đầy đủ trong một lần, ví dụ:

Hãy viết giúp tôi một trang web giới thiệu một tiệm cà phê nhỏ, gồm một file index.html duy nhất, CSS viết ngay trong file.
Yêu cầu: tiếng Việt, hiển thị tốt trên điện thoại, tông màu nâu kem, có 4 phần: giới thiệu, thực đơn (tên món, mô tả ngắn), giờ mở cửa, liên hệ.
Chỉ dùng HTML và CSS, không dùng thư viện bên ngoài. Giải thích ngắn gọn từng phần để tôi dễ chỉnh sửa.

Càng cụ thể, kết quả càng gần ý bạn. Xem thêm cách viết câu lệnh (prompt) để AI trả lời đúng ý.

Bước 3: Lưu mã thành file index.html

1. Sao chép toàn bộ đoạn mã AI đưa ra (từ dòng đầu đến cuối, không kèm phần giải thích).
2. Mở Notepad (Sổ tay) từ menu Start.
3. Dán mã vào.
4. Chọn File (Tệp) > Save as (Lưu thành).
5. Ở ô Save as type (Lưu dưới dạng), chọn All files (Tất cả các tệp).
6. Đặt tên file là index.html.
7. Ở ô Encoding (Mã hóa), chọn UTF-8 để tiếng Việt hiển thị đúng dấu.
8. Chọn thư mục, ví dụ một thư mục mới tên trangweb trên Desktop, rồi bấm Save.

Bước 4: Mở trang bằng trình duyệt

1. Mở thư mục chứa file.
2. Nhấp đúp vào index.html, trang sẽ mở trong trình duyệt mặc định.
3. Thu nhỏ cửa sổ hoặc nhấn F12 rồi bật chế độ xem trên điện thoại để kiểm tra giao diện nhỏ.
4. Kiểm tra chữ tiếng Việt có hiển thị đúng dấu không. Nếu lỗi dấu, quay lại Notepad và lưu lại với Encoding UTF-8.

Bước 5: Nhờ AI chỉnh sửa từng chút

Đừng yêu cầu thay đổi quá nhiều thứ một lúc. Hãy chỉnh từng bước:

• "Đổi màu nền sang kem nhạt hơn và chữ đậm hơn."
• "Thêm phần phản hồi của khách hàng với 3 ô nội dung giả để tôi tự thay bằng nội dung thật."
• "Làm nút liên hệ nổi bật hơn và giữ nguyên các phần còn lại."

Mỗi lần AI trả mã mới, bạn thay nội dung file, lưu lại rồi nhấn F5 (tải lại) trong trình duyệt để xem. Nếu AI làm hỏng phần đã ổn, hãy giữ bản sao lưu file trước khi sửa.

Bạn có thể nhờ AI giải thích mã để học dần, xem cách dùng AI hỗ trợ học lập trình cho người mới.

Kiểm tra trước khi đưa lên mạng

AI có thể sai hoặc để sót, vì vậy hãy tự kiểm tra:

• Đọc lại toàn bộ chữ: tên, địa chỉ, số điện thoại, giờ mở cửa có đúng không.
• Kiểm tra mọi liên kết và nút bấm hoạt động.
• Không đưa thông tin nhạy cảm như mật khẩu, khóa bí mật vào mã hay vào cuộc trò chuyện với AI.
• Hình ảnh và nội dung bạn dùng phải có quyền sử dụng.
• Nếu trang có biểu mẫu thu thập thông tin khách, cần máy chủ xử lý và bảo mật đúng cách. Đừng tự làm nếu không có kinh nghiệm.

Khi muốn trang xuất hiện trên Internet với tên miền riêng, cần dịch vụ lưu trữ và cấu hình tên miền. Với doanh nghiệp, việc này nên giao cho đơn vị có kinh nghiệm để đảm bảo an toàn và tốc độ.

Khi nào nên nhờ người làm chuyên nghiệp

• Cần bán hàng, thanh toán, đăng nhập, quản lý đơn.
• Cần chuẩn SEO, tốc độ, bảo mật cho website doanh nghiệp.
• Cần tích hợp với phần mềm bán hàng hoặc hệ thống sẵn có.
• Muốn có giao diện nhất quán thương hiệu và hỗ trợ lâu dài.

Xem thêm cách dùng AI hỗ trợ viết bài cho website mà vẫn giữ giọng văn riêng.

Cần hỗ trợ thêm?

Nếu bạn muốn một website đầy đủ chức năng thay vì trang tĩnh tự làm, hãy tham khảo dịch vụ thiết kế website hoặc phần mềm theo yêu cầu của cửa hàng. Cần tư vấn thêm thì gọi hotline 0943.847.333.