Cách dùng ChatGPT viết HTML
Bùi Tấn Lực - 105
- 03/10/2026
ChatGPT có thể hỗ trợ viết HTML từ một cấu trúc trang đơn giản đến những giao diện có nhiều thành phần, nhưng chất lượng mã phụ thuộc rất lớn vào cách đặt yêu cầu. Nếu chỉ nhập một câu ngắn như “viết HTML cho website”, kết quả thường quá chung chung, khó kiểm soát bố cục và chưa chắc phù hợp với mục đích sử dụng.
Muốn tận dụng ChatGPT hiệu quả, nên xem công cụ này như một trợ lý lập trình: cung cấp rõ nội dung cần hiển thị, cấu trúc mong muốn, thành phần giao diện, quy tắc HTML và những giới hạn cần tuân thủ. Khi yêu cầu đủ cụ thể, bạn có thể nhận được đoạn mã dễ đọc, dễ chỉnh sửa và sát với nhu cầu hơn.
ChatGPT có thể hỗ trợ viết HTML như thế nào?
HTML là ngôn ngữ dùng để xây dựng cấu trúc nội dung của trang web. ChatGPT có thể hỗ trợ tạo mới, giải thích, sửa lỗi và tổ chức lại phần mã này dựa trên yêu cầu bằng ngôn ngữ tự nhiên.
Chẳng hạn, thay vì tự viết từng thẻ cho một khối giới thiệu sản phẩm, bạn có thể mô tả nội dung muốn có. ChatGPT có thể chuyển mô tả đó thành cấu trúc gồm tiêu đề, đoạn văn, danh sách, liên kết hoặc các thành phần phù hợp.
Ví dụ, yêu cầu:
Tạo một khối HTML giới thiệu dịch vụ thiết kế website gồm:
- Tiêu đề dịch vụ
- Một đoạn mô tả ngắn
- Danh sách 3 lợi ích
- Một liên kết để xem chi tiết
Có thể cho ra cấu trúc HTML tương ứng:
<section>
<h2>Thiết kế website</h2>
<p>Giải pháp website phù hợp với nhu cầu kinh doanh và quản lý nội dung.</p>
<ul>
<li>Giao diện phù hợp với thương hiệu</li>
<li>Tối ưu hiển thị trên nhiều thiết bị</li>
<li>Dễ dàng quản lý nội dung</li>
</ul>
<a href="/thiet-ke-website">Xem chi tiết</a>
</section>
Điểm quan trọng không nằm ở việc ChatGPT có thể sinh ra vài thẻ HTML, mà ở khả năng biến một yêu cầu bằng ngôn ngữ thông thường thành cấu trúc có thể tiếp tục chỉnh sửa.
Cách đặt yêu cầu để ChatGPT viết HTML đúng ý
Một yêu cầu tốt nên cho ChatGPT biết ít nhất bốn yếu tố: mục đích của đoạn mã, cấu trúc cần có, nội dung cần đưa vào và những quy tắc không được vi phạm.
Nêu rõ mục đích của đoạn HTML
Hãy nói đoạn mã được dùng cho phần nào của website. Ví dụ, “tạo HTML cho phần giới thiệu dịch vụ” sẽ hữu ích hơn câu “viết HTML”.
Nếu biết chính xác vị trí sử dụng, hãy nói rõ đó là trang sản phẩm, trang liên hệ, bài viết, trang chủ hay một thành phần nhỏ trong giao diện. Ngữ cảnh này giúp ChatGPT lựa chọn cấu trúc phù hợp hơn.
Mô tả thành phần cần xuất hiện
Thay vì yêu cầu chung chung, hãy liệt kê những thành phần bắt buộc. Ví dụ:
Tạo HTML cho phần giới thiệu một dịch vụ.
Yêu cầu:
- Có tiêu đề chính
- Có đoạn mô tả khoảng 2 câu
- Có danh sách 4 lợi ích
- Có liên kết đăng ký
- Không thêm JavaScript
- Không dùng bảng
Cách mô tả này giúp giới hạn phạm vi của câu trả lời. ChatGPT cũng ít có xu hướng tự bổ sung những thành phần bạn không cần.
Yêu cầu cấu trúc mã ngay từ đầu
Nếu dự án có quy tắc HTML riêng, hãy đưa chúng vào yêu cầu. Chẳng hạn, bạn có thể yêu cầu sử dụng cấu trúc tiêu đề theo thứ tự, không bỏ cấp tiêu đề, dùng danh sách cho nội dung dạng liệt kê và giữ phần liên kết riêng.
Đối với dự án thực tế, việc quy định trước cấu trúc thường quan trọng hơn việc yêu cầu mã thật dài. Một đoạn HTML ngắn nhưng đúng mục đích sẽ dễ bảo trì hơn một đoạn mã được sinh thêm nhiều thành phần không cần thiết.
Quy trình dùng ChatGPT để tạo một đoạn HTML
Thay vì yêu cầu ChatGPT viết toàn bộ website ngay trong một lần, bạn có thể chia công việc thành từng bước. Cách này giúp phát hiện sai lệch sớm và kiểm soát kết quả tốt hơn.
Bước đầu tiên: xác định cấu trúc
Trước tiên, hãy yêu cầu ChatGPT đề xuất cấu trúc cho phần cần xây dựng. Ở giai đoạn này, chưa nhất thiết phải yêu cầu mã hoàn chỉnh.
Ví dụ, với một trang giới thiệu dịch vụ, có thể yêu cầu xác định các phần như tiêu đề, mô tả, lợi ích, quy trình và lời kêu gọi hành động. Sau khi cấu trúc phù hợp, mới chuyển sang bước viết HTML.
Bước tiếp theo: yêu cầu viết mã theo cấu trúc đã duyệt
Khi bố cục đã rõ, hãy yêu cầu ChatGPT chuyển từng phần thành HTML. Điều này giúp bạn dễ kiểm tra hơn so với việc nhận một đoạn mã rất lớn ngay từ đầu.
Bạn cũng có thể quy định rằng ChatGPT chỉ trả về mã cần thiết, không giải thích dài dòng. Với những công việc cần sao chép trực tiếp vào dự án, yêu cầu này giúp giảm thời gian xử lý phần nội dung không liên quan.
Cuối cùng: yêu cầu kiểm tra và sửa mã
Sau khi có HTML, hãy gửi lại đoạn mã cho ChatGPT và yêu cầu kiểm tra. Có thể yêu cầu rà soát thẻ chưa đóng, cấu trúc tiêu đề, thuộc tính liên kết, phần tử bị lồng sai hoặc những đoạn mã không đúng yêu cầu ban đầu.
Ví dụ:
Kiểm tra đoạn HTML sau:
- Tìm thẻ mở hoặc đóng không khớp
- Kiểm tra cấu trúc tiêu đề
- Kiểm tra các liên kết
- Không tự thay đổi nội dung
- Chỉ sửa những lỗi thực sự cần thiết
[Đặt đoạn HTML cần kiểm tra ở đây]
Cách làm này biến ChatGPT từ công cụ tạo mã thành một bước kiểm tra bổ sung trong quá trình phát triển website.
Viết HTML từ mô tả bằng ngôn ngữ tự nhiên
Một ưu điểm đáng chú ý của ChatGPT là bạn không nhất thiết phải biết chính xác cú pháp HTML trước khi bắt đầu. Bạn có thể mô tả giao diện bằng cách diễn đạt thông thường, sau đó yêu cầu chuyển thành mã.
Ví dụ:
Tạo một phần HTML cho trang dịch vụ.
Phần này có tiêu đề “Thiết kế website”, bên dưới là đoạn mô tả.
Tiếp theo hiển thị 3 lợi ích dưới dạng danh sách.
Cuối cùng có một liên kết đến trang liên hệ.
Chỉ sử dụng HTML, không thêm CSS hoặc JavaScript.
ChatGPT sẽ dựa vào mô tả để xây dựng cấu trúc. Tuy nhiên, bạn vẫn nên kiểm tra kết quả trước khi đưa vào website, đặc biệt khi đoạn mã có nhiều thành phần hoặc liên quan đến cấu trúc hiện có.
Hướng dẫn ChatGPT viết HTML theo một mẫu có sẵn
Trong dự án thực tế, bạn thường không bắt đầu từ trang trắng. Website có thể đã có một cấu trúc HTML riêng và yêu cầu các phần mới phải tuân theo mẫu đó.
Trong trường hợp này, hãy cung cấp đoạn mã mẫu và nói rõ phần nào cần giữ nguyên, phần nào được phép thay đổi.
Ví dụ:
Dựa trên cấu trúc HTML mẫu bên dưới, hãy tạo thêm một khối dịch vụ mới.
Yêu cầu:
- Giữ nguyên cách đặt class
- Giữ nguyên cấu trúc thẻ
- Chỉ thay đổi tiêu đề, mô tả và nội dung
- Không thêm thẻ mới
- Không thay đổi liên kết hiện có
[Đặt HTML mẫu ở đây]
Cách yêu cầu này đặc biệt hữu ích khi bạn đang bổ sung nhiều nội dung có cùng một giao diện. ChatGPT có thể dựa vào mẫu được cung cấp thay vì tự xây dựng một cấu trúc hoàn toàn khác.
Cách yêu cầu ChatGPT tạo HTML dễ chỉnh sửa
Mã HTML được sinh tự động có thể chạy được nhưng chưa chắc dễ bảo trì. Nếu đoạn mã sẽ tiếp tục được sử dụng lâu dài, hãy nói rõ rằng bạn muốn cấu trúc đơn giản, nhất quán và hạn chế phần tử không cần thiết.
Có thể yêu cầu ChatGPT:
- Giữ cấu trúc HTML rõ ràng.
- Không tạo các phần tử không phục vụ nội dung.
- Dùng tên class nhất quán nếu dự án đã có quy ước.
- Không lặp lại cùng một đoạn mã khi có thể tái sử dụng cấu trúc.
- Giữ nội dung và cấu trúc tách biệt, dễ thay đổi.
Ví dụ, nếu website đã sử dụng một mẫu thẻ sản phẩm, bạn có thể yêu cầu ChatGPT tạo thêm các sản phẩm mới dựa trên chính mẫu đó thay vì tạo một cấu trúc khác cho từng sản phẩm.
Điều này giúp mã nguồn đồng nhất hơn và giảm công sức chỉnh sửa về sau.
Cách dùng ChatGPT sửa lỗi HTML
Không chỉ tạo mã mới, ChatGPT còn có thể hỗ trợ tìm và sửa những lỗi trong HTML đang có. Tuy nhiên, để việc sửa lỗi không làm thay đổi ngoài ý muốn, nên yêu cầu công cụ tập trung vào đúng vấn đề cần kiểm tra.
Thay vì chỉ gửi mã và hỏi “HTML này sai ở đâu?”, bạn nên mô tả hiện tượng đang gặp phải. Chẳng hạn, trình duyệt hiển thị sai một khu vực, nội dung bị lồng không đúng hoặc một liên kết không hoạt động như dự kiến.
Một yêu cầu cụ thể có thể viết như sau:
Kiểm tra đoạn HTML dưới đây.
Hãy:
- Xác định lỗi cú pháp nếu có
- Chỉ ra vị trí gây lỗi
- Giải thích ngắn gọn nguyên nhân
- Đưa ra phiên bản đã sửa
- Không thay đổi nội dung văn bản và cấu trúc không liên quan
[Đặt HTML cần kiểm tra ở đây]
Cách yêu cầu này giúp phân biệt giữa việc tìm lỗi và việc viết lại toàn bộ mã. Đây là điểm quan trọng vì một đoạn HTML đang hoạt động có thể bị thay đổi nhiều hơn mức cần thiết nếu yêu cầu sửa lỗi quá chung.
Kiểm tra thẻ mở và thẻ đóng
Một lỗi phổ biến trong HTML là mở một phần tử nhưng quên đóng hoặc đóng không đúng vị trí. Khi đoạn mã dài, việc tự dò bằng mắt có thể mất thời gian.
Bạn có thể yêu cầu ChatGPT rà soát riêng các cặp thẻ. Ví dụ:
Hãy kiểm tra HTML sau và tìm:
- Thẻ mở không có thẻ đóng tương ứng
- Thẻ đóng xuất hiện sai vị trí
- Các phần tử bị lồng không hợp lý
Không sửa nội dung văn bản.
[Đặt HTML cần kiểm tra ở đây]
Sau khi nhận kết quả, bạn vẫn nên kiểm tra lại mã đã sửa trong môi trường phát triển của website. ChatGPT là công cụ hỗ trợ phân tích, không thay thế hoàn toàn quá trình kiểm thử thực tế.
Kiểm tra cấu trúc nội dung
HTML không chỉ liên quan đến việc thẻ có đóng đúng hay không. Cách tổ chức nội dung cũng ảnh hưởng đến khả năng đọc mã, khả năng bảo trì và cách công cụ tìm kiếm hiểu trang.
Ví dụ, nếu một nội dung có nhiều mục liên tiếp, cấu trúc danh sách thường phù hợp hơn việc dùng nhiều đoạn văn riêng biệt. Nếu một khu vực có tiêu đề và nội dung bên dưới, cấp tiêu đề cũng cần được tổ chức nhất quán.
Bạn có thể yêu cầu ChatGPT kiểm tra riêng cấu trúc thay vì để công cụ tự ý viết lại toàn bộ trang.
Cách dùng ChatGPT viết HTML từ nội dung có sẵn
Nếu đã có nội dung văn bản, bạn có thể đưa nội dung đó cho ChatGPT và yêu cầu chuyển thành HTML. Cách này hữu ích khi cần đưa bài viết, thông tin sản phẩm hoặc nội dung giới thiệu vào một hệ thống có cấu trúc HTML cụ thể.
Ví dụ:
Chuyển nội dung dưới đây thành HTML.
Yêu cầu:
- Tiêu đề chính dùng h2
- Các mục con dùng h3
- Đoạn văn dùng p
- Nội dung liệt kê dùng ul và li
- Không thêm CSS
- Không thay đổi câu chữ
[Nội dung cần chuyển đổi]
Nếu nội dung có nhiều cấp thông tin, hãy nói rõ quan hệ giữa các phần. ChatGPT sẽ có cơ sở tốt hơn để xác định đâu là tiêu đề, đâu là đoạn nội dung và đâu là danh sách.
Giữ nguyên nội dung khi chuyển sang HTML
Đây là yêu cầu nên đặt rõ nếu bạn đang chuyển một bài viết đã hoàn thiện sang mã HTML. Nếu không giới hạn, ChatGPT có thể đồng thời chỉnh sửa câu chữ, rút gọn hoặc diễn đạt lại nội dung.
Chẳng hạn, câu “Chỉ chuyển đổi định dạng, không biên tập nội dung” sẽ giúp giới hạn nhiệm vụ. Nếu muốn chỉnh sửa nội dung, hãy tách thành một yêu cầu khác để dễ kiểm soát kết quả.
Cách dùng ChatGPT tạo bảng HTML
Khi cần trình bày dữ liệu dạng hàng và cột, bạn có thể yêu cầu ChatGPT tạo bảng HTML dựa trên dữ liệu thô. Điều quan trọng là phải nói rõ tên cột, số dòng và ý nghĩa của từng trường.
Ví dụ:
Tạo bảng HTML từ dữ liệu sau:
Tên sản phẩm | Giá | Trạng thái
Sản phẩm A | 500000 | Còn hàng
Sản phẩm B | 750000 | Hết hàng
Sản phẩm C | 900000 | Còn hàng
Yêu cầu:
- Dòng đầu dùng th
- Dữ liệu dùng td
- Không thêm CSS
- Không thêm nội dung ngoài dữ liệu đã cung cấp
Với những bảng phức tạp, bạn nên kiểm tra lại số lượng cột ở từng dòng. Chỉ cần một dòng có số ô khác với phần tiêu đề là cấu trúc bảng có thể trở nên khó kiểm soát.
Cách dùng ChatGPT tạo liên kết trong HTML
ChatGPT cũng có thể tạo hoặc chỉnh sửa các liên kết HTML dựa trên URL và nội dung bạn cung cấp. Khi làm việc với liên kết, nên nói rõ cả địa chỉ đích lẫn phần văn bản hiển thị.
Ví dụ:
Tạo một liên kết HTML:
- Văn bản hiển thị: Thiết kế website
- URL: /thiet-ke-website
- Không thêm thuộc tính khác
Khi xử lý nhiều liên kết cùng lúc, nên đưa dữ liệu theo danh sách rõ ràng. Điều này giảm khả năng ChatGPT ghép nhầm văn bản với URL.
Nếu liên kết trỏ đến trang bên ngoài, hãy kiểm tra lại URL sau khi mã được tạo. Một lỗi nhỏ trong địa chỉ cũng có thể khiến liên kết dẫn tới trang không tồn tại.
Cách yêu cầu ChatGPT viết HTML theo chuẩn của website
Mỗi website có thể có quy ước riêng về class, cấu trúc nội dung, cách đặt liên kết hoặc cách tổ chức các thành phần. Vì vậy, câu lệnh hiệu quả nhất không nhất thiết là câu lệnh dài nhất mà là câu lệnh chứa đúng những ràng buộc mà dự án đang sử dụng.
Bạn có thể cung cấp một đoạn HTML đang hoạt động làm mẫu và yêu cầu ChatGPT xem đó là quy chuẩn cho phần mới.
Đây là cấu trúc HTML hiện tại của website.
Hãy dựa trên cấu trúc này để tạo phần nội dung mới:
- Giữ nguyên quy tắc đặt class
- Giữ cách tổ chức thẻ giống mẫu
- Không thay đổi cấu trúc chung
- Không thêm thư viện bên ngoài
- Chỉ tạo phần HTML được yêu cầu
[Đặt mã mẫu ở đây]
Đây là cách đặc biệt hữu ích khi nhiều người cùng làm một website. Thay vì để mỗi lần tạo mã theo một cách khác nhau, bạn có thể dùng cấu trúc hiện có làm chuẩn tham chiếu.
Những điều cần kiểm tra sau khi ChatGPT tạo HTML
Dù đoạn mã được tạo nhanh, không nên đưa trực tiếp vào website mà bỏ qua bước kiểm tra. Một câu trả lời nhìn hợp lý vẫn có thể chứa sai sót nhỏ hoặc không phù hợp với cấu trúc hiện tại.
- Kiểm tra các thẻ mở và đóng.
- Kiểm tra thứ tự và cấp độ tiêu đề.
- Kiểm tra nội dung có bị thay đổi ngoài yêu cầu hay không.
- Kiểm tra URL trong các liên kết.
- Kiểm tra bảng có cùng số cột giữa các dòng hay không.
- Kiểm tra mã có phù hợp với cấu trúc HTML hiện tại của website hay không.
- Thử hiển thị trên trình duyệt để phát hiện lỗi thực tế.
Nếu đoạn HTML là một phần của website đang vận hành, nên kiểm tra trong môi trường thử nghiệm trước khi đưa lên trang thật. Điều này giúp tránh trường hợp một thay đổi nhỏ ảnh hưởng đến những thành phần khác.
Cách dùng ChatGPT hiệu quả khi viết HTML
Hiệu quả của ChatGPT khi hỗ trợ HTML phụ thuộc nhiều vào cách bạn giao việc. Hãy bắt đầu bằng mục tiêu cụ thể, cung cấp dữ liệu cần thiết, đưa ra những giới hạn quan trọng và yêu cầu kết quả theo đúng định dạng bạn cần.
Với đoạn mã nhỏ, một yêu cầu ngắn có thể đã đủ. Với một trang lớn, nên chia thành các phần như cấu trúc, nội dung, mã HTML, kiểm tra và chỉnh sửa. Cách làm từng bước giúp bạn kiểm soát thay đổi tốt hơn và dễ xác định nguyên nhân nếu kết quả chưa đúng.
Quan trọng nhất, đừng xem đoạn mã do ChatGPT tạo ra là kết quả cuối cùng mặc định. Hãy xem đó là mã nguồn được tạo dựa trên yêu cầu của bạn, sau đó kiểm tra, thử nghiệm và điều chỉnh để phù hợp với website thực tế.
Những lỗi thường gặp khi nhờ ChatGPT viết HTML
ChatGPT có thể tạo HTML khá nhanh, nhưng không phải yêu cầu nào cũng cho ra mã phù hợp ngay từ lần đầu. Phần lớn vấn đề xuất hiện khi yêu cầu thiếu ngữ cảnh, có quá nhiều mục tiêu cùng lúc hoặc không nói rõ những thành phần cần giữ nguyên.
Yêu cầu quá chung chung
Một câu như “tạo giao diện HTML đẹp” chưa cho ChatGPT đủ thông tin để xác định giao diện cần phục vụ mục đích gì, có những thành phần nào và được sử dụng trong môi trường nào.
Thay vào đó, hãy mô tả cụ thể nội dung và phạm vi công việc. Ví dụ, nếu chỉ cần một phần giới thiệu sản phẩm, hãy nói rõ số lượng thông tin, cách trình bày và những công nghệ được phép sử dụng.
Không cung cấp mã hiện có
Nếu đang chỉnh sửa một website có sẵn nhưng chỉ mô tả bằng lời, ChatGPT có thể tạo ra cấu trúc khác với hệ thống hiện tại. Điều này đặc biệt dễ xảy ra khi website đã sử dụng các class, quy ước đặt tên hoặc cấu trúc lồng thẻ riêng.
Nếu có mã hiện tại, hãy cung cấp phần liên quan và yêu cầu ChatGPT làm việc dựa trên chính cấu trúc đó. Không nhất thiết phải gửi toàn bộ website nếu lỗi chỉ nằm trong một khu vực.
Yêu cầu quá nhiều việc trong một lần
Ví dụ, một yêu cầu đồng thời muốn ChatGPT thiết kế bố cục, viết HTML, viết CSS, thêm JavaScript, tối ưu nội dung và sửa lỗi có thể khiến việc kiểm soát kết quả trở nên khó khăn.
Với dự án lớn, nên tách thành từng nhiệm vụ. Trước tiên xác định cấu trúc, sau đó tạo HTML, tiếp tục xử lý CSS hoặc JavaScript nếu cần và cuối cùng kiểm tra toàn bộ.
Cách yêu cầu ChatGPT giải thích một đoạn HTML
Khi gặp một đoạn mã chưa hiểu, bạn không cần tự phân tích từng thẻ. Hãy đưa đoạn HTML cho ChatGPT và yêu cầu giải thích theo từng phần.
Ví dụ:
Giải thích đoạn HTML sau theo cách dễ hiểu.
Hãy cho biết:
- Mỗi phần dùng để làm gì
- Các thẻ được lồng với nhau như thế nào
- Liên kết hoạt động ra sao
- Phần nào có thể thay đổi mà không ảnh hưởng cấu trúc
[Đặt HTML cần giải thích ở đây]
Cách hỏi này phù hợp với người mới học HTML vì thay vì chỉ nhận định nghĩa của từng thẻ, bạn có thể hiểu vai trò của chúng trong một cấu trúc hoàn chỉnh.
Nếu một đoạn mã dài, có thể yêu cầu ChatGPT giải thích từng khu vực riêng. Ví dụ, trước tiên phân tích phần tiêu đề, sau đó đến danh sách, bảng hoặc khu vực liên kết. Việc chia nhỏ giúp việc học dễ theo dõi hơn.
Cách dùng ChatGPT học HTML thông qua thực hành
ChatGPT có thể được sử dụng như một công cụ luyện tập thay vì chỉ dùng để lấy mã có sẵn. Một cách hiệu quả là tự viết đoạn HTML trước, sau đó nhờ ChatGPT kiểm tra và giải thích.
Ví dụ, bạn có thể tự tạo một danh sách sản phẩm rồi yêu cầu:
Đây là đoạn HTML tôi tự viết.
Hãy kiểm tra:
- Cấu trúc có hợp lý không
- Có lỗi cú pháp nào không
- Có phần nào có thể viết rõ ràng hơn không
Không viết lại toàn bộ mã ngay. Hãy chỉ ra lỗi trước.
[Đặt HTML ở đây]
Cách học này giúp bạn hiểu nguyên nhân thay vì chỉ sao chép kết quả. Sau khi xác định được lỗi, bạn có thể yêu cầu ChatGPT đưa ra phiên bản đã sửa và giải thích điểm khác biệt.
Tạo bài tập HTML theo trình độ
Bạn cũng có thể yêu cầu ChatGPT tạo bài tập phù hợp với kiến thức hiện tại. Chẳng hạn, người mới học có thể bắt đầu bằng tiêu đề, đoạn văn, danh sách và liên kết. Khi đã quen, có thể chuyển sang bảng và cấu trúc trang nhiều cấp.
Một yêu cầu có thể là:
Tạo cho tôi một bài tập HTML dành cho người mới học.
Yêu cầu:
- Chỉ sử dụng những kiến thức HTML cơ bản
- Không đưa đáp án ngay
- Mô tả rõ yêu cầu cần hoàn thành
- Sau đó đưa ra đáp án ở một phần riêng để tôi tự kiểm tra
Điểm hữu ích của phương pháp này là nội dung luyện tập có thể thay đổi liên tục. Bạn có thể yêu cầu ChatGPT tăng độ khó sau mỗi bài hoặc tập trung vào một nhóm thẻ cụ thể.
Cách dùng ChatGPT chuyển cấu trúc HTML sang nội dung khác
Khi đã có một mẫu HTML hoàn chỉnh, bạn có thể sử dụng nó làm khuôn để tạo những nội dung tương tự. Đây là trường hợp phổ biến khi website có nhiều sản phẩm, dịch vụ hoặc bài viết cùng một bố cục.
Hãy chỉ rõ phần nào là cố định và phần nào cần thay đổi. Ví dụ:
Dựa trên HTML mẫu này, tạo thêm 5 mục mới.
Giữ nguyên:
- Cấu trúc thẻ
- Tên class
- Cách đặt liên kết
Thay đổi:
- Tiêu đề
- Mô tả
- URL
- Nội dung danh sách
Không thêm thành phần mới.
[HTML mẫu]
Cách này giúp các phần mới giữ được tính nhất quán. Nếu cần tạo số lượng lớn nội dung, bạn cũng nên cung cấp dữ liệu đầu vào theo một định dạng rõ ràng để hạn chế việc ChatGPT ghép nhầm thông tin.
Cách yêu cầu ChatGPT viết HTML tối giản
Không phải lúc nào HTML dài cũng tốt. Nếu mục tiêu là tạo cấu trúc nội dung, hãy yêu cầu ChatGPT chỉ sử dụng những thẻ cần thiết và không thêm thành phần phục vụ trang trí.
Ví dụ:
Viết HTML tối giản cho nội dung sau.
Yêu cầu:
- Chỉ sử dụng các thẻ cần thiết
- Không thêm class nếu không có yêu cầu
- Không thêm CSS
- Không thêm JavaScript
- Không thêm nội dung mới
- Giữ nguyên câu chữ được cung cấp
[Nội dung]
Cách này đặc biệt phù hợp khi bạn muốn đưa nội dung vào một hệ thống đã có CSS riêng. HTML càng ít thành phần dư thừa thì việc kiểm soát cấu trúc càng đơn giản.
Cách kết hợp ChatGPT với quá trình phát triển website
ChatGPT phát huy hiệu quả hơn khi được đặt vào một quy trình rõ ràng thay vì được giao toàn bộ công việc mà không có kiểm soát. Một quy trình thực tế có thể bắt đầu từ yêu cầu, chuyển sang cấu trúc, viết mã, kiểm tra và thử nghiệm.
- Xác định chính xác phần giao diện cần xây dựng.
- Cung cấp nội dung và các quy tắc HTML cần tuân thủ.
- Yêu cầu ChatGPT tạo cấu trúc phù hợp.
- Kiểm tra mã và yêu cầu sửa những lỗi cụ thể.
- Đưa mã vào môi trường thử nghiệm.
- Kiểm tra cách hiển thị và tiếp tục điều chỉnh nếu cần.
Với những website đang hoạt động, nên giữ lại phiên bản mã trước khi thay đổi. Nếu kết quả mới gây ra vấn đề, bạn có thể nhanh chóng quay lại phiên bản trước và xác định phần thay đổi gây ảnh hưởng.
Một mẫu yêu cầu hoàn chỉnh để viết HTML bằng ChatGPT
Nếu thường xuyên sử dụng ChatGPT để viết HTML, bạn có thể xây dựng một mẫu yêu cầu riêng rồi thay đổi phần nội dung cho từng dự án. Một mẫu càng rõ ràng thì kết quả giữa các lần làm việc càng dễ kiểm soát.
Tạo HTML cho phần [tên thành phần].
Mục đích:
[Mô tả mục đích sử dụng]
Nội dung cần có:
- [Nội dung 1]
- [Nội dung 2]
- [Nội dung 3]
Yêu cầu cấu trúc:
- [Quy tắc HTML]
- [Cấu trúc tiêu đề]
- [Quy tắc liên kết]
- [Quy tắc danh sách hoặc bảng nếu có]
Giới hạn:
- Không thêm CSS
- Không thêm JavaScript
- Không tự thêm nội dung
- Không thay đổi nội dung được cung cấp
Đầu ra:
- Chỉ trả về mã HTML
- Kiểm tra các thẻ mở và đóng trước khi trả lời
Bạn có thể lưu mẫu này và sử dụng lại cho nhiều nhiệm vụ. Khi dự án có quy chuẩn riêng, chỉ cần bổ sung những quy tắc tương ứng vào phần giới hạn hoặc cấu trúc.
ChatGPT viết HTML tốt nhất khi nào?
ChatGPT phù hợp với nhiều công việc liên quan đến HTML như tạo cấu trúc từ mô tả, chuyển nội dung thành mã, tạo các thành phần lặp lại, giải thích mã và hỗ trợ tìm lỗi. Tuy nhiên, kết quả vẫn phụ thuộc vào thông tin được cung cấp và cách kiểm tra sau khi tạo.
Đối với một đoạn HTML đơn giản, bạn có thể nhận được kết quả gần như ngay lập tức. Với một website lớn, nên chia nhỏ nhiệm vụ và cung cấp cấu trúc hiện tại để ChatGPT hiểu chính xác bối cảnh.
Cách sử dụng hiệu quả không phải là yêu cầu ChatGPT làm càng nhiều càng tốt, mà là giao từng nhiệm vụ đủ rõ để có thể kiểm tra kết quả. Khi kết hợp mô tả cụ thể, mã mẫu, các giới hạn và bước kiểm thử, ChatGPT có thể trở thành công cụ hỗ trợ đáng kể trong quá trình xây dựng và chỉnh sửa HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
