ForumHayali.Com - ChatGPT ile HTML ve CSS Kodları Nasıl Yazılır? Örneklerle Anlatım

CHATGPT İLE HTML VE CSS KODLARI
Kod yazmayı öğrenin, web tasarımları oluşturun ve hazır örnekleri deneyin.

Web sitesi hazırlarken HTML ve CSS kodlarını kullanmak için profesyonel bir yazılımcı olmak şart değildir. ChatGPT'den yardım alarak sayfa iskeletleri oluşturabilir, renkleri ve yazı tiplerini düzenleyebilir, butonlar tasarlayabilir ve mobil uyumlu arayüzler hazırlayabilirsiniz.

Ancak iyi sonuç almak için ne istediğinizi açıkça anlatmanız gerekir. Bu rehberde ChatGPT'ye doğru komut vermeyi, temel HTML ve CSS kodlarını oluşturmayı ve örnekleri güvenli biçimde test etmeyi öğreneceksiniz.

1. HTML VE CSS NEDİR?
HTML: Web sayfasının başlık, paragraf, bağlantı, görsel ve form gibi içerik yapısını oluşturur.
CSS: Bu içeriklerin renklerini, boyutlarını, aralıklarını, hizalamasını ve farklı ekranlardaki görünümünü düzenler.

ChatGPT, tarif ettiğiniz ihtiyaca göre HTML ve CSS kodları üretebilir, mevcut kodları açıklayabilir ve hata ayıklamanıza yardımcı olabilir. Ancak üretilen kodları test etmek gerekir.

2. CHATGPT'YE NASIL KOMUT VERİLİR?
Örneğin yalnızca “bir web sitesi tasarla” demek yerine şu bilgileri verin:
• Nasıl bir bölüm istediğiniz
• Arka plan ve yazı renkleri
• Masaüstü ve mobil görünüm beklentisi
• Kodun hangi platformda kullanılacağı
• Var olan tasarımın korunması gereken bölümleri

Hazır komut:

Kod:

HTML ve CSS konusunda yardımcı ol. [İSTEDİĞİM BÖLÜM] için temiz, mobil uyumlu bir tasarım hazırla. HTML ve CSS kodlarını ayrı ayrı ver. Kodun nereye ekleneceğini, nasıl test edileceğini ve mevcut tasarımı etkilememesi için nelere dikkat edilmesi gerektiğini açıkla.

3. ÖRNEK HTML KODU NASIL YAZILIR?
Aşağıdaki örnek basit bir başlık ve açıklama alanı oluşturur:

Kod:

<section class="fh-bilgi-karti">

  <h2>Yapay Zekâ Rehberi</h2>

  <p>ChatGPT ile yeni şeyler öğrenin ve projeler geliştirin.</p>

  <a href="https://www.forumhayali.com/">ForumHayali'yi ziyaret et</a>

</section>

Bu kodda section içerik alanını, h2 başlığı, p açıklama metnini ve a bağlantıyı oluşturur. Bağlantı adresini kendi sayfanıza göre değiştirebilirsiniz.

4. CSS İLE TASARIM NASIL YAPILIR?
HTML bölümüne görünüm kazandırmak için aşağıdaki CSS kullanılabilir:

Kod:

.fh-bilgi-karti {

  max-width: 600px;

  margin: 20px auto;

  padding: 24px;

  background: #f3f6fb;

  border: 1px solid #d5deeb;

  border-radius: 12px;

  font-family: Arial, sans-serif;

}



.fh-bilgi-karti h2 {

  margin-top: 0;

  color: #174a82;

  font-size: 24px;

}



.fh-bilgi-karti p {

  color: #333333;

  line-height: 1.6;

}



.fh-bilgi-karti a {

  display: inline-block;

  padding: 10px 16px;

  background: #174a82;

  color: #ffffff;

  text-decoration: none;

  border-radius: 6px;

}



.fh-bilgi-karti a:hover {

  background: #0d3159;

}



@media (max-width: 600px) {

  .fh-bilgi-karti {

    margin: 12px;

    padding: 16px;

  }



  .fh-bilgi-karti h2 {

    font-size: 21px;

  }

}

Bu CSS, kartın genişliğini sınırlar, arka plan ve kenarlık görünümünü düzenler, bağlantıyı buton benzeri gösterir ve dar ekranlarda boşlukları azaltır. Benzersiz fh-bilgi-karti sınıfı kullanılması, başka alanların tasarımının etkilenme riskini azaltır.

5. CHATGPT İLE MOBİL UYUMLU TASARIM NASIL HAZIRLANIR?

Kod:

Mevcut HTML ve CSS kodumu incele. Tasarımı mobil ekranlara uyumlu hâle getir. Yatay taşma, küçük yazılar, dar butonlar ve bozuk hizalamaları kontrol et. Mevcut masaüstü görünümünü mümkün olduğunca koru. Değişen kodu eksiksiz ver ve hangi bölüme ekleneceğini belirt.

Mobil uyumluluk için yalnızca media query eklemek yeterli olmayabilir. Görsel boyutları, içerik genişliği, taşan öğeler ve dokunmatik alanlar da kontrol edilmelidir.

6. WORDPRESS VE VBULLETIN'DE KOD KULLANIMI
WordPress'te kodun ekleneceği yer, kullanılan tema ve düzenleyiciye göre değişebilir. vBulletin'de ise sürüm, şablon yapısı ve izin verilen BBCode türleri önemlidir. Bir platform için hazırlanan kod diğerinde doğrudan çalışmayabilir.

ChatGPT'den kod isterken şu komutu kullanabilirsiniz:

Kod:

Platformum: [WORDPRESS / VBULLETIN]

Sürüm: [SÜRÜM]

Değiştirmek istediğim alan: [ALAN]

Mevcut kod: [KOD]



Mevcut tasarımı bozmadan en küçük gerekli değişikliği öner. Kodun nereye ekleneceğini, varsa çakışma risklerini ve geri alma yöntemini açıkla. Bilgi eksikse önce sor.

7. CHATGPT İLE KOD HATALARI NASIL DÜZELTİLİR?
Bir kod çalışmadığında yalnızca “olmuyor” yazmak yerine hata mesajını, kullandığınız platformu ve beklenen sonucu paylaşın. Böylece sorunun kaynağını belirlemek kolaylaşır.

Hazır hata giderme komutu:

Kod:

Aşağıdaki HTML ve CSS kodu beklediğim gibi çalışmıyor.

Beklenen sonuç: [SONUÇ]

Gerçekte olan: [SORUN]

Platform ve sürüm: [PLATFORM]

Kod: [KOD]



Olası nedeni açıkla. Önce en küçük düzeltmeyi öner, ardından düzeltilmiş kodu eksiksiz ver. Nasıl test edeceğimi de belirt.

8. KODLARI KULLANIRKEN NELERE DİKKAT EDİLMELİ?
1. Mevcut kodun yedeğini alın.
2. Mümkünse değişiklikleri test ortamında deneyin.
3. Tüm siteyi etkileyebilecek genel CSS seçicilerinden kaçının.
4. Kaynağını bilmediğiniz JavaScript veya PHP kodlarını doğrudan çalıştırmayın.
5. Kodun masaüstü ve mobil görünümünü kontrol edin.
6. Şifre, API anahtarı ve gizli bilgileri komutlara eklemeyin.
7. Kodun doğru olduğunu varsaymayın; test edin ve hataları kontrol edin.

SONUÇ
ChatGPT, HTML ve CSS öğrenirken, yeni web bileşenleri oluştururken ve mevcut tasarımlardaki sorunları çözerken yardımcı olabilir. En iyi sonuçlar için isteğinizi açıkça tarif edin, platform bilgilerini paylaşın ve kodu küçük adımlarla test edin.

Siz ChatGPT ile hangi kodları hazırlamak istiyorsunuz?
Sorularınızı ve deneyimlerinizi konuya yazabilirsiniz. Böylece diğer üyeler de çözümlerden yararlanabilir.