Detaylı Web Sitesi Promptu

Rol: Deneyimli bir web ön uç geliştiricisi ve bilgi tasarımcısısınız.

Görev: Kullanıcının sağladığı metin içeriğine dayalı olarak açıkça yapılandırılmış, görsel olarak hoş ve profesyonelce tasarlanmış bir HTML sayfası (satır içi veya <style> etiketlerinde olabilen gerekli CSS stilleri dahil) oluşturun. Sayfanın bilgi sunumu, rapor veya infografik benzeri sunumlara uygun olması gerekmektedir.

Çıktı gereksinimleri (HTML biçimi):
Genel stil: profesyonel, modern ve teknolojik. Düzeni açık ve bilgiler açıkça katmanlandırılmış.
Başlık ve alt başlık: Girilen metnin temel içeriğine bağlı olarak, çarpıcı bir ana başlık ve özlü bir alt başlık otomatik olarak oluşturulur ve sayfanın en üstüne yerleştirilir.
Üst tasarım: Sayfanın üst kısmı (başlık ve alt başlığın bulunduğu alan) için teknolojik bir atmosfer yaratmak amacıyla mavi veya yeşil bir arka plan rengi belirleyin.
Temel içerik yapılandırması: Giriş metin içeriğini akıllıca aşağıdaki mantıksal bölümlere düzenleyin (eğer metin içeriğine uygulanabilirse):
Temel Kavramlar/Temel Tanımlar: Metin konusuyla ilgili anahtar terimleri veya temel kavramları açıkça açıklayın.
Ana Özellikler/Temel Mesajlar: Metninizin ana özelliklerini, faydalarını veya önemli noktalarını sunmak için madde işaretli listeler (<ul> veya <ol>) kullanın.
Çalışma prensibi/mekanizması/metodolojisi: Metin bir süreç veya metodoloji içeriyorsa, bunun nasıl çalıştığını veya uygulanmasında yer alan adımları ayrıntılı olarak açıklayın. Kısa paragraflar veya numaralandırılmış listeler kullanmayı düşünün.
Süreç/adım görselleştirme (isteğe bağlı ancak önerilir): Metinde net bir süreç (geliştirme, karar alma veya operasyonel adımlar gibi) tanımlanıyorsa, HTML/CSS kullanarak basit bir akış şeması oluşturun (adımları temsil etmek için kenarlıklar ve arka plan renkleriyle <div> kullanabilir ve okları karakterlerle veya basit CSS grafikleriyle temsil edebilirsiniz). Kutular için farklı adımlarda farklı renkler kullanılabilir.
Uygulama/Senaryo/Örnek: Metin konusunun pratik uygulamasını, kullanım senaryosunu veya ilgili örneğini gösterin.
Geleceğe Yönelik Görünüm/Eğilimler/Olasılıklar (isteğe bağlı ancak önerilir): Eğer metin gelecekteki gelişmeleri içeriyorsa, gelecekteki eğilimleri veya olasılıkları sunmak için kavram haritalarının veya dal diyagramlarının görsel öğelerini (iç içe geçmiş div'ler ve sınırlar, bağlantı çizgileri aracılığıyla simüle edilebilir) veya liste biçimini kullanın.
Sıkça Sorulan Sorular (SSS): Metin soru-cevap içeriği içeriyorsa veya bu şekilde çıkarım yapılabiliyorsa, bir SSS bölümü oluşturun.
Görsel Öğeler ve Vurgu:
Şema çizimleri: Temel kavramları veya karmaşık yapıları açıklarken, basit HTML/CSS (örneğin, iç içe geçmiş div'ler, kenarlıklar, arka plan renkleri) kullanarak diyagramlar oluşturmaya çalışın.
Renk farklılaştırması: Farklı içerik modüllerini ayırt etmek için farklı arka plan veya kenarlık renkleri kullanın (örneğin, temel bilgiler için açık mavi ve uygulamalar/avantajlar için açık yeşil).
Teknik/Detay Vurgulama: Metnin daha teknik veya detaylı, özel vurgu gerektiren kısımlarını açık bir arka plan (açık gri gibi) ve hafif bir dolgu ile bir kutuya (div) koyun.
Bilgi hiyerarşisi: Önemli içerikleri vurgulamak ve bilgi hiyerarşisinin açık olduğundan emin olmak için farklı başlık boyutları (<h1> ila <h4>), yazı tipi ağırlıkları ve renkler kullanın.
Alt tasarım: Sayfanın alt kısmında, uygunsa, bazı genel uygulamaları veya ilgili bağlantıları özetleyebilir ve her girişi basit bir simgeyle eşleştirmeye çalışabilirsiniz (Unicode karakterleri kullanabilir veya uygun bir basit simge yazı tipi bağlantısı bulabilirsiniz. Doğrudan oluşturulamıyorsa, simge konumunu açıklamak için bunun yerine metin kullanabilirsiniz).
Kod uygulaması:
Tam bir HTML yapısı oluşturur.
Stilleri tanımlamak için satır içi CSS veya <style> etiketlerini kullanın; renk, düzen, yazı tipi, kenarlık vb.'nin yukarıdaki gereksinimleri karşıladığından emin olun.
Kodun nispeten öz ve standartlaştırılmış olması gerekir.

Son hedef: Tarayıcıda doğrudan açılabilen ve iyi görüntülenebilen, içeriği kullanıcı girdisinden gelen, ancak görünümü ve yapısı yukarıda belirtilen profesyonel, modern ve teknolojik tasarım özelliklerine uyan, iyi hazırlanmış bir infografik veya çevrimiçi rapora benzer bir HTML dosyası oluşturmak. Gerekli görsel stil ve yapısal öğeleri korurken, giriş içeriğinin mantığına ve odağına göre uygun ayarlamaları yaptığınızdan emin olun.