Yeni başlayan biri için yapay zeka ile kod yazma, küçük bir sayfanın nasıl kurulduğunu sorup tek değişikliğin sonucunu görmekle başlayabilir. Bir okuma listesi seçin: başlığı ve iki kitap adı olan, bilgisayarınızda açılan bir HTML dosyası. Önce kodu okuyun, ardından yalnızca başlığın rengini değiştirin. Her adımda sayfayı tarayıcıda kontrol edin.

Bu alıştırmada HTML sayfanın içeriğini, CSS görünümünü belirler. JavaScript, üyelik veya internete veri gönderen bir özellik gerekmiyor. Amacınız sonunda hangi satırın neyi değiştirdiğini kendi cümlenizle anlatabilmek. Yapay zekânın verdiği açıklamayı da doğrulayacağınız bir yanıt olarak ele alın.

İlk isteği küçük tutun

"Bana bir uygulama yap" isteği, ilk deneme için fazla açık uçlu. Okuma listesinde ne görmek istediğinizi tarif edin. Kaç kitap olacağı kadar, dosyayı nasıl açacağınız da isteğin parçası olsun:

Kod yazmayı yeni öğreniyorum. Bilgisayarımda tarayıcıyla açacağım tek bir HTML dosyasında "Okuyacaklarım" başlığı ve iki kitap adı göstermek istiyorum. Yalnızca HTML ve aynı dosyanın içinde CSS kullan. JavaScript, dış bağlantı ve kurulum gerektiren araç ekleme. Önce dosyanın bölümlerini açıkla; ardından kısa bir örnek ver.

Yanıt uzun bir kurulum listesiyle başlıyorsa isteği tekrar daraltın. İlk sayfa için paket indirmeye geçmeyin. Nasıl soru kuracağınızda zorlanırsanız prompt nedir rehberindeki bağlam ve çıktı örneklerine bakabilirsiniz. Buradaki bağlamınız, kodu ilk kez okuyacak olmanız.

Kodun parçalarını okuyun

Örnekte başlığın nerede başladığını ve kitap adlarının hangi etiketlerin arasında durduğunu bulun. Şu küçük dosya üzerinden çalışabilirsiniz:

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Okuma listem</title>
  <style>
    h1 { color: darkred; }
  </style>
</head>
<body>
  <h1>Okuyacaklarım</h1>
  <ul>
    <li>Kürk Mantolu Madonna</li>
    <li>Saatleri Ayarlama Enstitüsü</li>
  </ul>
</body>
</html>

h1 sayfanın ana başlığıdır; ul listeyi, li her liste maddesini belirtir. style içindeki kural başlığın rengini belirler. Anlamadığınız bölüm için "Bu satırı çıkarırsam sayfada ne değişir?" diye sorun. Açılış ve kapanış etiketlerini eşleştirin; örneğin <li> ile </li> bir kitap adını çevreler.

Yanıtta geçen teknik terimleri MDN'nin HTML başlangıç rehberiyle karşılaştırın. Bir terimi anlamadan ilerlediğinizi fark ederseniz bütün dosyayı yeniden yazdırmak yerine o bölüme dönün. Böylece açıklamadaki yanlış bir bilgiyi de daha kolay ayırt edebilirsiniz.

Dosyayı kaydedip tarayıcıda açın

Bilgisayarınızda boş bir klasör oluşturun. Düz metin düzenleyicisine kodu yapıştırın; sohbet yanıtından kopyalıyorsanız baştaki ve sondaki üçlü ters tırnakları almayın. Dosyayı UTF-8 kodlamasıyla okuma-listem.html adıyla kaydedin. Bir kelime işlemci belgesi olarak kaydetmeyin.

Dosya adının sonunda gerçekten .html bulunduğunu kontrol edin. okuma-listem.html.txt farklı bir addır; işletim sisteminiz uzantıları gizliyorsa dosya özelliklerinden tam adı inceleyin. Ardından dosyaya sağ tıklayıp "Birlikte aç" üzerinden tarayıcınızı seçin. Bu dosyayı açmak için bir siteye yüklemeniz gerekmez.

Başlık ve iki kitap adı görünmeli. Harfler bozuksa UTF-8 kaydetme seçeneğini ve charset satırını kontrol edin. Ekranda doğrudan kod görüyorsanız önce dosya uzantısına bakın. İlk görünümü doğrulamadan tasarımı büyütmeyin; bu aşamadaki sorunu çözmek daha kolaydır.

Yalnızca bir şeyi değiştirin

Çalışan dosyanın kopyasını saklayın. Sonra asistana "Başlığın rengini koyu maviyi ifade eden navy yapacağım. Yalnızca değiştirmem gereken satırı göster ve nedenini açıkla" yazın. Yanıttaki satırı mevcut dosyayla karşılaştırın. Bu örnekte darkred yerine navy yazmanız yeterli.

Dosyayı kaydedin ve tarayıcıdaki sayfayı yenileyin. Başlık koyu maviye dönmeli; kitap adları aynı kalmalı. Aynı anda yazı boyutunu ve liste düzenini değiştirirseniz beklenmeyen görünümün nedenini bulmanız zorlaşır.

Ardından bir kitap adını kendiniz değiştirip aynı kontrolü yapın. Bu kez hangi etiketin içindeki metni değiştireceğinizi açıklamaya bakmadan bulun. Sayfayı açabilmek ile kodu anlamak arasındaki farkı böyle fark edersiniz.

Sorunu gördüğünüz haliyle anlatın

"Çalışmadı" yerine ne yaptığınızı ve ne gördüğünüzü yazın: "darkred yerine navy yazdım, kaydettim ve sayfayı yeniledim. Başlık hâlâ kırmızı. Tarayıcıda açtığım dosya okuma-listem.html." İlgili satırı da ekleyin. Ekranda bir hata mesajı varsa metnini aynen aktarın; mesaj yoksa varmış gibi yorumlamayın.

Asistanın önerisini uygulamadan önce hangi satıra dokunacağını sorun. Örneğin başka dosyayı düzenleyip eski dosyaya bakıyor olabilirsiniz. Yeni kod eklemeden bu basit ihtimali kontrol edin. Her düzeltmeden sonra aynı dosyayı açıp sonucu yeniden görün.

Yapay Zeka, Türkçe sorularınıza yanıt verir ve yanıtların altında kaynakları gösterir. Anlamadığınız bir kod teriminin açıklamasını isteyebilir, ardından gösterilen teknik kaynağı açıp kontrol edebilirsiniz. Dosyayı kaydetme ve tarayıcıda deneme adımlarını siz yaparsınız. Başlığın rengini kendi başınıza değiştirip neden değiştiğini açıklayabildiğinizde, sıradaki denemeniz listeye üçüncü bir kitap eklemek olsun.