HTML CSS Sayfa Promptu: Tek Dosyada Responsive
Landing page, portfolyo veya basit form: tek HTML dosyasında çalışan, mobil uyumlu ve erişilebilir sayfa üreten prompt.
Sen frontend geliştiricisin. Bana tek HTML dosyasında (CSS içinde) çalışan bir sayfa yaz. SAYFA TÜRÜ: [TÜR] BÖLÜMLER: [BÖLÜMLER] STİL: [STİL] RENK: [RENK] DİL: [DİL] KURALLAR - Tek dosya: HTML + <style> + gerekirse küçük <script>. Harici kütüphane, CDN, framework YOK. - Semantik etiketler kullan (header, nav, main, section, article, footer). Div yığını yazma. - Erişilebilirlik: her görselde alt, her form alanında label, odak (focus) stili görünür olsun. - Mobil öncelikli yaz; 640px ve 1024px kırılımlarında düzen bozulmasın. - Modern CSS kullan: custom properties, clamp() ile akışkan tipografi, grid/flex. - Kontrast oranı WCAG AA'yı geçsin; metin ve arka plan renklerini değişkenlerde tanımla. - Karanlık mod desteği ekle (prefers-color-scheme). ÇIKTI 1) TAM KOD (tek blok) 2) BÖLÜM HARİTASI — hangi etiket ne işe yarıyor (kısa liste) 3) DEĞİŞTİRME REHBERİ — renk, yazı tipi ve içerik nerede değiştirilir 4) KONTROL LİSTESİ — yayına almadan önce bakılacak 5 madde
02 — Değişkenler
Köşeli parantezleri doldurun
Prompt içindeki renkli alanlar sizin bilginizle değişecek yerlerdir. Hepsini doldurmak zorunda değilsiniz; boş bırakılan alanı model kendi varsayımıyla tamamlar.
[TÜR]
Sayfa türü
ör. Tek ürün tanıtım sayfası [BÖLÜMLER]
Sayfada ne olacak
ör. Hero, özellikler, fiyat, SSS, iletişim [STİL]
Görsel dil
ör. sade, bol boşluklu, minimal [RENK]
Renk paleti
ör. koyu yeşil + krem [DİL]
Sayfa dili
ör. Türkçe 03 — Kullanım
Adım adım nasıl kullanılır?
- 01
Promptu kopyalayın, bölümleri ve rengi netleştirin.
- 02
Gelen kodu `index.html` olarak kaydedip tarayıcıda açın.
- 03
Tarayıcıda F12 ile mobil görünümü kontrol edin (375px ve 768px).
- 04
Renk ve yazı tipini değişkenlerden değiştirin; kodun geri kalanına dokunmayın.
04 — Varyasyonlar
Aynı prompt, farklı sonuç
Tek bir prompt her işi çözmez. Aşağıdaki varyasyonlar aynı görevi farklı ton, uzunluk veya formatta ister — duruma göre birini seçin.
Form odaklı
Kayıt/iletişim formu.
Aynı sayfayı form odaklı yaz: ad, e-posta, mesaj alanları, doğrulama mesajları, gönderim sonrası başarı durumu. JavaScript ile basit doğrulama ekle, sunucu tarafı olmadığını yorumda belirt.
E-posta şablonu
Bülten için HTML e-posta.
Aynı tasarımı HTML e-posta şablonuna çevir: tablo tabanlı düzen, inline CSS, 600px genişlik, web font yok, koyu mod desteği yok. Outlook uyumluluğunu not et.
Erişilebilirlik denetimi
Mevcut sayfa için.
Aşağıdaki HTML'i erişilebilirlik açısından denetle: başlık hiyerarşisi, alt metinler, kontrast, odak sırası, form etiketleri. Sorunları önem sırasına göre listele ve düzeltilmiş kod parçalarını ver. [KOD]
05 — İpuçları
Sonucu bir üst seviyeye taşıyan notlar
- Tek dosya isteyin; çok dosyalı yapı ilk denemede kırılır ve hatayı bulmak zorlaşır.
- Kontrast ve odak stilini baştan isteyin; sonradan eklemek tasarımı bozar.
- Üretilen sayfayı gerçek içerikle test edin — placeholder metinle düzen her zaman iyi görünür.
06 — Sık sorulanlar
Yazılım ve Kod hakkında sık sorulanlar
Neden harici kütüphane istemiyorum?
CDN bağımlılığı sayfayı yavaşlatır ve dış servis kesintisinde bozulur. Tek dosya, özellikle hızlı yükleme gereken tanıtım sayfalarında daha güvenilirdir.
Mobil uyum gerçekten çalışıyor mu?
Kodu aldıktan sonra tarayıcıda 375px genişlikte kontrol edin. Uzun kelimeler, tablolar ve buton metinleri en sık taşan öğelerdir; gerekirse “bu bölümü mobilde alt alta al” diye tek bir düzeltme isteyin.
Üretilen kod SEO için yeterli mi?
Temel yapıyı verir: semantik etiketler, başlık hiyerarşisi, meta alanları. Ancak gerçek SEO için sayfa hızı, içerik derinliği ve iç bağlantılar gerekir; bunlar kodla değil içerikle çözülür.
Devamı
Bunlar da işinize yarar
Kod Yazma Promptu: Temiz, Test Edilebilir Fonksiyon
Belirsiz istek yerine sözleşme tanımlayan kod promptu: dil, sürüm, girdi/çıktı, hata durumları ve testler.
Orta ChatGPTClaudePython Kod Yazdırma Promptu (Çalışan ve Açıklamalı)
“Bana bir script yaz” demek eksik kod getirir. Bu prompt girdiyi, çıktıyı, hata durumunu ve testi baştan tanımlar.
Orta ChatGPTClaudeSatış Sayfası (Landing Page) Promptu: Bölüm Bölüm
Ziyaretçiyi başlıktan CTA'ya taşıyan satış sayfası metni: sorun, çözüm, kanıt, itiraz ve teklif sırasıyla.
İleri ChatGPTClaudeKod Hatası Bulma (Debug) Promptu
“Neden çalışmıyor?” sorusunu sistematik bir teşhise çeviren, hipotez kurduran ve doğrulama adımı isteyen debug promptu.
OrtaBu sayfa CopyPromt editör ekibi tarafından hazırlandı, ilk yayın 24 Ekim 2026. Promptlar modelden bağımsız çalışacak şekilde yazılır; marka adları yalnızca tanımlama amacıyla anılır.