OpenAI tarafından tasarlanmış, doğal dili anlamak ve insan benzeri tepkiler oluşturmak için makine öğrenimini kullanan gelişmiş dil modeli ChatGPT ile zaten tanıştınız. Geniş bir bilgi tabanına sahiptir ve sofistike dil "anlayışı" ile bilgi arayan herkes için güçlü bir yardımcı görevi görebilir. Çok çeşitli soruları yanıtlayabilir, tavsiyelerde bulunabilir, çeşitli konularda sohbet edebilir ve çok sayıda alanda kendini kanıtlamıştır.
Ancak ChatGPT web sayfaları oluşturabilir mi? Göreve götürelim ve öğrenelim.
Bunun, en son sürümün yayınlanmasından önce ChatGPT 3.5 kullanılarak yazıldığını unutmayın.
Bazı temel HTML ile başlayalım. Verilen ChatGPT, yetenekli bir kodlayıcı ve programlama asistanı olarak kendini çoktan kanıtladı, bu pek bir test olmamalı.
Başarılı bir şekilde "Hello, World" HTML sayfası oluşturmak için ChatGPT ile kullandığımız komut istemi aşağıdadır:
Basit bir "Merhaba Dünya!" HTML kullanan web sayfası
ChatGPT, şaşırtıcı bir şekilde amaçlanan şeyi yapan aşağıdaki temel HTML'yi oluşturdu.
<!DOCTYPE html>
<html> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> </body>
</html>ChatGPT, bunu “.html” uzantılı bir dosyaya yerleştirmemizi ve tarayıcımızla açmamızı tavsiye ediyor. Görev tamamlandı.
Bir ekran görüntüsü ile uğraşmayacağım; hepiniz daha önce biçimlendirilmemiş HTML çıktısı gördünüz.
ChatGPT'den işlerin daha güzel görünmesini isteyelim.
CSS kullanarak bu sayfanın daha iyi görünmesini sağlayabilir misiniz?
ChatGPT aşağıdakilere tükürür:
Bu örnek, web sayfasının arka plan rengini açık mavi olarak değiştirmek, sayfadaki metni ortalamak, başlığın rengini lacivert olarak değiştirmek ve başlığın yazı tipi boyutunu 4em olarak artırmak için CSS kullanır.
Css ile oynayabilir ve web sayfanıza stil verebilirsiniz.
Ayrıca, css'yi ayrı bir dosyaya koymak ve onu index.html dosyanıza bağlamak da iyi bir uygulamadır.
Hangisi şuna benziyor:
ChatGPT tarafından HTML ve CSS kullanılarak oluşturulmuş basit bir web sayfası
Elbette bir gelişme, ama bu hala çocuk oyuncağı. Ancak devam etmeden önce, ChatGPT'nin tavsiyesini dinleyelim ve HTML ile CSS'mizi ayıralım.
CSS'yi ayrı bir dosyaya koyup onu index.html dosyama nasıl bağlarım?
Ayrı bir CSS dosyası oluşturabilir ve içindeki link öğesini kullanarak HTML dosyanıza bağlayabilirsiniz.
headHTML dosyanızın bölümü. İşte bunu nasıl yapacağınıza dair bir örnek:
- "index.html" dosyanızla aynı dizinde "styles.css" adlı yeni bir dosya oluşturun.
- CSS kodunuzu “styles.css” dosyasına ekleyin.
- “index.html” dosyanızın içine aşağıdaki satırı ekleyin.
headBölüm:
<link rel="stylesheet" type="text/css" href="styles.css">The
relöznitelik, geçerli belge ile bağlantılı belge arasındaki ilişkiyi belirtir;typeniteliği, bağlantılı belgenin türünü belirtir vehrefnitelik, bağlantılı belgenin konumunu belirtir.- Her iki dosyayı da kaydedin ve web tarayıcınızda “index.html” dosyasını açın. “styles.css” dosyasındaki stiller artık web sayfasına uygulanmalıdır.
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" gibi çevrimiçi bağlantılardan da css dosyaları ekleyebilirsiniz.
Ayrıca web sayfanıza da uygulanacaktır ve yerel dizininize eklemenize gerek yoktur.
Aşağıdakileri yapan Craigslist tarzı bir web sayfası oluşturun:
– yeni bir reklam eklememe izin veriyor
– mevcut reklamları silmeme izin veriyor
– mevcut tüm reklamları listelememe izin veriyor
– mevcut bir reklamı düzenlememe izin veriyor
Craigslist tarzı bir web sayfası oluşturmak, web sayfasının dinamik yönlerini işlemek için HTML, CSS, JavaScript ve PHP veya Node.js gibi bir arka uç dilinin bir kombinasyonunu kullanmayı gerektirir. Aşağıda, web sayfasının temel yapısının nasıl görünebileceğine dair bir örnek verilmiştir:
<!DOCTYPE html>
<html> <head> <title>Craigslist-style Webpage</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Craigslist-style Webpage</h1> <form id="add-ad-form"> <label for="title">Title:</label> <input type="text" id="title" name="title"> <br> <label for="description">Description:</label> <textarea id="description" name="description"></textarea> <br> <button type="submit">Add Ad</button> </form> <table id="ads-table"> <thead> <tr> <th>Title</th> <th>Description</th> <th>Actions</th> </tr> </thead> <tbody> <!-- This section will be populated with ads using JavaScript --> </tbody> </table> <script src="script.js"></script> </body>
</html>Ortaya çıkan, arka plan işlevi olmayan ön sayfa çok iyi görünmüyor. Yani soruyorum:
Bir CSS dosyası kullanarak web sitesinin daha profesyonel görünmesini sağlayabilir misiniz? Renk paletinin İtalya'nın ulusal renkleri olmasını istiyorum.
Ve ChatGPT buna mecburdur ("ekle" düğmesi üzerine geldiğinizde bile kırmızıya döner).
ChatGPT tarafından oluşturulan stile sahip basit HTML formu
Peki ya JavaScript? ChatGPT'nin bunu ekleyip ekleyemeyeceğini görelim.
Listeye yeni bir reklam eklemek ve görüntülemek için javascript ekleyebilir misiniz?
// Get references to the form and table
const addAdForm = document.querySelector("#add-ad-form");
const adsTable = document.querySelector("#ads-table tbody"); // Handle the form submit event
addAdForm.addEventListener("submit", function(event) { event.preventDefault(); // Get the values from the form inputs const title = document.querySelector("#title").value; const description = document.querySelector("#description").value; // Create a new table row and add the ad data const newRow = document.createElement("tr"); newRow.innerHTML = ` <td>${title}</td> <td>${description}</td> <td> <button>Edit</button> <button>Delete</button> </td> `; // Add the new row to the table adsTable.appendChild(newRow); // Clear the form inputs addAdForm.reset();
});Ve sonuçlar:
ChatGPT tarafından oluşturulan JavaScript'in kullanıldığı yarı işlevsel HTML formu
Fena değil. Birkaç istemle sıfırdan çirkin HTML'ye, daha güzel HTML'ye ve bunu yapan JavaScript'e geçtik. bir şey.
Yararlı bir şey deneyelim. Aşağıda, bazı özel gereksinimleri olan bir blog için basit (ancak potansiyel olarak yararlı) bir ana sayfa oluşturma istemi verilmiştir.
Bir web sayfası oluşturalım. HTML ve CSS'yi ve bu gereksinimlere uyan bir blog ana sayfası oluşturmak için gereken diğer her şeyi yazmanızı istiyorum:
– sayfa 1024 piksel genişlik kullanacak
– sayfanın en üstünde büyük puntolu başlık olacak
– bunun altında, blogdaki 3 yararlı sayfaya giden bir dizi bağlantı olmalıdır
– bunun altında, endüstri standardı boyutlandırmaya uyan tıklanabilir bir banner reklam olacaktır
– bunun altında en son blogların bir bölümü vardır ve bu bölüm en son 6 girişi 2 sıra 3 döşeme ile döşemeli bir düzende göstermesi gerekir.
– en son blog girişlerinin altında, web sitesi kurucusu hakkındaki bilgileri fotoğraflarıyla birlikte listeleyen bir "hakkında" bölümü bulunmalıdır.
– bunun altında aşağıdakiler de dahil olmak üzere tipik bir altbilgi olmalıdır:
– metni doldurmak için lorem ipsum kullanın
– sayfa çekici olmalı, modern bir tarz kullanmalı
– en son blog kutucuklarında bir CSS vurgulu etkisi olmalıdır
İşte ChatGPT tarafından oluşturulan HTML ve CSS:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Blog</title> <style> body { font-family: Arial, sans-serif; max-width: 1024px; margin: 0 auto; padding: 1rem; } h1 { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; } nav { display: flex; justify-content: center; margin-bottom: 1rem; } nav a { text-decoration: none; color: #333; margin: 0 1rem; } .banner { display: block; width: 728px; height: 90px; background-color: #ccc; margin: 0 auto 1rem; text-align: center; line-height: 90px; } .blogs { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; } .blog { width: 32%; background-color: #f0f0f0; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; cursor: pointer; } .blog:hover { transform: translateY(-10px); } .about { display: flex; margin-bottom: 1rem; } .about img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-right: 1rem; } .about p { flex: 1; } footer { background-color: #333; color: #fff; padding: 1rem; text-align: center; font-size: 0.875rem; } </style>
</head> <body> <h1>My Awesome Blog</h1> <nav> <a href="#">Useful Page 1</a> <a href="#">Useful Page 2</a> <a href="#">Useful Page 3</a> </nav> <a href="#" class="banner">Ad - 728x90</a> <div class="blogs"> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> </div> <div class="about"> <img src="founder.jpg" alt="Founder's Photo"> <div> <h2>About the Founder</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis. Integer sit amet tincidunt turpis, a lacinia ligula.</p> </div> </div> <footer> © 2023 My Awesome Blog. All Rights Reserved. </footer> </body>
</html>Ve işte nihai ürün:
ChatGPT tarafından oluşturulan basit blog ana sayfası
Oldukça iyi görünüyor. Demek istediğim, istemde bazı ek CSS kılavuzlarıyla daha iyi görünebilir, eminim, ama sonuçta bu kötü bir başlangıç değil. Sol üst döşemede görülebilen, döşemeler üzerinde bir vurgulu etkisi bile vardır (üzerine gelindiğinde hafifçe yükselir).
Bir not, "6 sıra 2 döşemeden oluşan döşemeli bir düzende en son 3 girişi" istedim, ancak ChatGPT bu döşemeyi 2'de oluşturdu. sütunlar yerine.
Görünen o ki, bazı basit, anlaşılır yönlendirmelerle, ChatGPT kesinlikle web sayfaları oluşturabilmek için bazı yetenekler gösteriyor. Dinamik bir şey üretmesi istendiğinde nasıl bir performans sergileyeceğini ve insana farklı bileşenleri bir araya getirmesi talimatını nasıl vereceğini merak ediyorum. Bir dahaki sefere bir test.
Matthew Mayo (@mattmayo13) bir Veri Bilimcisi ve çığır açıcı çevrimiçi Veri Bilimi ve Makine Öğrenimi kaynağı olan KDnuggets'ın Genel Yayın Yönetmenidir. İlgi alanları doğal dil işleme, algoritma tasarımı ve optimizasyonu, denetimsiz öğrenme, sinir ağları ve makine öğrenimine yönelik otomatik yaklaşımlardır. Matthew, bilgisayar bilimi alanında yüksek lisans derecesine ve veri madenciliği alanında yüksek lisans diplomasına sahiptir. Editör1'e kdnuggets[dot]com adresinden ulaşılabilir.
- SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
- Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
- Kaynak: https://www.kdnuggets.com/2023/03/chatgpt-webpage-construction.html?utm_source=rss&utm_medium=rss&utm_campaign=using-chatgpt-for-webpage-construction
