Trang web mã ChatGPT-4
Sử dụng ChatGPT-4 để tạo trang web
Sử dụng ChatGPT-4 để tạo trang web cũng giống như có một nhà phát triển web ở bên cạnh để giúp đỡ bạn.
ChatGPT có thể giúp bạn bắt đầu!
Viết ra ý tưởng của bạn
Trước khi sử dụng Generative AI để trợ giúp, bạn phải tìm hiểu xem bạn muốn trang web chứa những gì.
Một số bước cần xem xét:
- Trang web nói về cái gì?
- Bạn có muốn hình ảnh?
- Bạn có cần thông tin liên lạc?
Bạn cung cấp càng nhiều chi tiết thì ChatGPT càng hoạt động tốt hơn.
Tạo mã trang web
Trong ví dụ của chúng tôi, chúng tôi sẽ yêu cầu ChatGPT tạo một trang web đơn giản:
Ví dụ
Với lời nhắc sau:
Create a simple webpage with my cupcake business name, "Magically Delicious", a short description, a few images, and my contact details (Genevieve Lavorre, Email: [email protected] )
Phản hồi từ ChatGPT-4 có thể là:
Hãy kiểm tra mã: (Chúng tôi đã tạo 3 hình ảnh bằng Midjourney)
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Magically Delicious Cupcakes</title>
<style>
body {
background-color: #f8f1f1;
font-family: Arial, sans-serif;
}
h1, h2 {
color: #ff85a2;
}
.container {
width: 80%;
margin: auto;
}
.images {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.images img {
width: 30%;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Magically Delicious Cupcakes!</h1>
<p>We provide a variety of gourmet cupcakes with magical flavors that take you to a world of deliciousness. We believe in quality, taste, and a sprinkle of magic in every cupcake!</p>
<h2>Our Delicious Creations</h2>
<div class="images">
<img src="img_cupcake1.png" alt="Cupcake 1">
<img src="img_cupcake2.png" alt="Cupcake 2">
<img src="img_cupcake3.png" alt="Cupcake 3">
</div>
<h2>Contact Us</h2>
<p>For orders and inquiries:</p>
<p>Name: Genevieve Lavorre</p>
<p>Email: <a href="mailto: [email protected] "> [email protected] </a></p>
</div>
</body>
</html>
Hãy tự mình thử »Trông khá tốt!
Xem lại mã và lặp lại
Xem qua phản hồi từ ChatGPT, đây là điểm khởi đầu tốt.
Hãy nhờ thêm một chút trợ giúp:
Ví dụ
Với lời nhắc sau:
Make the page look better
Phản hồi từ ChatGPT-4 có thể là:
Hãy kiểm tra mã:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Magically Delicious Cupcakes</title>
<style>
body {
background-color: #ffe0e9;
font-family: 'Arial', sans-serif;
color: #4d194d;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 90%;
margin: auto;
max-width: 1200px;
}
h1, h2 {
color: #ff85a2;
text-align: center;
}
h1 {
margin-top: 20px;
font-size: 2.5em;
}
h2 {
font-size: 2em;
margin-top: 40px;
}
p {
font-size: 1.2em;
line-height: 1.6;
text-align: justify;
}
.images {
display: flex;
justify-content: space-between;
margin-top: 20px;
flex-wrap: wrap;
}
.images img {
width: 30%;
border-radius: 10px;
margin: 1%;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}
.contact {
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
}
a {
color: #4d194d;
text-decoration: none;
}
a:hover {
color: #ff85a2;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Magically Delicious Cupcakes!</h1>
<p>We provide a variety of gourmet cupcakes with magical flavors that take you to a world of deliciousness. We believe in quality, taste, and a sprinkle of magic in every cupcake!</p>
<h2>Our Delicious Creations</h2>
<div class="images">
<img src="img_cupcake1.png" alt="Cupcake 1">
<img src="img_cupcake2.png" alt="Cupcake 2">
<img src="img_cupcake3.png" alt="Cupcake 3">
</div>
<div class="contact">
<h2>Contact Us</h2>
<p>For orders and inquiries:</p>
<p>Name: Genevieve Lavorre</p>
<p>Email: <a href="mailto: [email protected] "> [email protected] </a></p>
</div>
</div>
</body>
</html>
Hãy tự mình thử »Đó là một trang rất đơn giản nhưng việc bắt đầu nhanh chóng như thế này có thể tiết kiệm rất nhiều thời gian.