` etiketi kullanılır ve bu etikete, JavaScript ile kolayca erişebilmek için benzersiz bir `id` (örneğin `survey-container`) verilir. Bu konteynerin içine, anketin başlığı, soruların ve cevap seçeneklerinin yer alacağı başka bir `div` ve bir de 'Gönder' butonu ekleyeceğiz.
Her anket sorusu için ayrı bir `div` etiketi kullanarak soruları ve seçenekleri gruplandırmak, hem okunabilirliği artırır hem de CSS ile stil vermeyi kolaylaştırır. Cevap seçenekleri için genellikle `radio` tipinde input elemanları veya `checkbox`'lar kullanılır. Basit bir anket için `radio` butonları, kullanıcının tek bir seçenek belirlemesine olanak tanır. Her bir `input` elemanına bir `name` özelliği vermek, JavaScript'in hangi seçeneğin seçildiğini kolayca tespit etmesini sağlar. Ayrıca, her `input` ile ilişkili bir `label` etiketi kullanarak erişilebilirliği artırmak önemlidir.
```html


```
Bu yapı, anketin tüm sorularını ve ilgili etkileşim elemanlarını barındırmak için dinamik olarak güncellenecek bir temel sunar. Bu şekilde, sayfada göz yorucu kod blokları oluşturmadan, dinamik web sitesi içeriğine ulaşabiliriz.

Estetik Dokunuşlar: CSS ile Stil Verme

Bir web sayfasının sadece işlevsel olması yeterli değildir; aynı zamanda görsel olarak çekici ve kullanıcı dostu olması gerekir. CSS (Basamaklı Stil Sayfaları), HTML elemanlarına stil vermek, renkleri, boyutları, konumları ve genel düzeni kontrol etmek için kullanılır. Anketimizin de iyi görünmesi, kullanıcı deneyimi açısından kritik öneme sahiptir. Unutmayın, iyi bir kullanıcı deneyimi sadece AdSense için değil, genel web sitenizin başarısı için de anahtardır.

CSS Dosyasını Oluşturma ve Bağlama

`style.css` adında yeni bir dosya oluşturun ve `index.html` dosyanızdaki `` etiketi aracılığıyla bu dosyayı bağlayın. Bu dosya, anketimizin tüm görsel stilini içerecektir. Başlangıçta, anket konteynerine (örneğin `#survey-container` ID'sine sahip `div`'e) genel bir stil verebiliriz. Bu stil, anketin genişliğini, sayfa üzerindeki konumunu (ortalamak için `margin: auto`), bir kenarlık, arka plan rengi ve belki de hafif bir gölge gibi özellikler içerebilir.
```css
/* style.css içindeki genel anket kutusu stili */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
#survey-container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 600px;
text-align: center;
}
```

Soru ve Cevaplara Stil Verme

Her bir anket sorusunu ve cevap seçeneklerini görsel olarak ayırmak, okuyucunun anketi daha kolay anlamasını sağlar. Örneğin, soru metnini daha belirgin hale getirmek için `font-size` ve `font-weight` kullanabilirsiniz. Cevap seçenekleri için, `label` etiketlerini blok elemanlar olarak ayarlayabilir, aralarına biraz boşluk ekleyebilir ve üzerine gelindiğinde (hover) renk değiştirmesi gibi etkileşimli özellikler ekleyerek ön yüz geliştirme becerilerinizi gösterebilirsiniz.
Butonlar da ankette önemli bir görsel öğedir. 'Gönder' butonuna çekici bir arka plan rengi, yuvarlak kenarlar, yeterli dolgu (`padding`) ve fare üzerine geldiğinde belirginleşen bir efekti (`:hover`) eklemek, kullanıcının butonu fark etmesini ve tıklamasını teşvik eder. Sayfanızın farklı cihazlarda da düzgün görünmesini sağlamak için duyarlı (responsive) tasarım prensiplerini uygulamak (örneğin, `max-width` kullanmak ve `media queries` eklemek) günümüzde vazgeçilmezdir. Bu sadece kullanıcı deneyimi için değil, Google'ın mobil uyumluluk kriterleri ve dolayısıyla AdSense performansı için de kritik öneme sahiptir.
```css
/* Soru ve seçeneklere stil örnekleri */
.question-text {
font-size: 1.3em;
margin-bottom: 20px;
color: #333;
}
.options-container label {
display: block;
background-color: #e9e9e9;
padding: 12px 15px;
margin-bottom: 10px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: left;
}
.options-container label:hover {
background-color: #dcdcdc;
}
.options-container input[type="radio"] {
margin-right: 10px;
}
#submit-btn {
background-color: #007bff;
color: white;
padding: 12px 25px;
border: none;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s ease;
}
#submit-btn:hover {
background-color: #0056b3;
}
```

Ankete Hayat Verme: JavaScript Mantığı

Anketimizin yapısını HTML ile kurduk ve görünümünü CSS ile güzelleştirdik. Şimdi sıra, anketi interaktif hale getirecek ve tüm soruları yöneterek cevapları işleyecek olan JavaScript kısmında. Bu kısım, basit anket oluşturmanın kalbidir ve web sitenize gerçek anlamda dinamizm katacaktır.

JS Dosyasını Oluşturma ve Bağlama

`script.js` adında yeni bir dosya oluşturun ve `index.html` dosyanızın `` etiketinden hemen önce `` etiketi ile bağlayın. Bu konumlandırma, HTML içeriğinin önce yüklenmesini sağlayarak, JavaScript'in bu elemanlara erişmeye çalıştığında sorun yaşamasını engeller. Performans için, `