Bu sınav, HTML Formları, CSS (Stil/Kutu Modeli) ve temel JavaScript/Etkileşimli Sayfa Geliştirme konularını kapsamaktadır.

---

(Sadece Klasik Sorular – Toplam Puan: 100)

I. HTML VE CSS KAVRAMLARI (4 Soru / 40 Puan)

Soru 1: Paragraf ve Metin Biçimlendirme Uygulaması (10 Puan)

Aşağıdaki cümlenin HTML etiketlerini kullanarak görüntülenmesi için gerekli HTML kodunu yazınız. (Kazanım: 3)

Görüntülenme Şekli: Önemli Not: Web sayfaları CSS ile stil alır. Bu cümlenin bir paragraf içinde yer alması gerekmektedir.

Cevap:

HTML

<p>
    <b>Önemli Not:</b> Web sayfaları <u>CSS</u> ile stil alır.
    Bu cümlenin bir <strong>paragraf</strong> içinde yer alması gerekmektedir.
</p>

(Not: <b> veya <strong>, <u> veya <em>/<i> etiketleri kullanılabilir.)

---

Soru 2: Form Elemanları Uygulaması (10 Puan)

Kullanıcıdan bir e-posta adresi girmesini isteyen ve bu alanın doldurulması zorunlu (required) olduğunu belirten bir HTML5 kodunu yazınız. (Kazanım: 7)

Cevap:

HTML

<form>
    <label for="eposta">E-posta Adresi:</label><br>
    <input type="email" id="eposta" name="eposta" required>
</form>

---

Soru 3: CSS Seçimi (Selector) (20 Puan)

CSS uygulamasında bir HTML elemanını seçmek için kullanılan iki temel seçim yöntemini (selector) açıklayınız. Her iki yöntem için de birer örnek HTML ve CSS kodu yazınız. (Kazanım: 1)

Cevap:

1. ID Seçicisi (Selector):
   • Açıklama: Sadece tek bir benzersiz HTML elemanını seçmek için kullanılır. HTML’de id="deger" şeklinde tanımlanır ve CSS’te #deger şeklinde çağrılır.
   • Örnek:HTML<h1 id="baslik"></h1> CSS#baslik { color: blue; }
2. Sınıf Seçicisi (Class Selector):
   • Açıklama: Aynı anda birden fazla elemana aynı stili uygulamak için kullanılır. HTML’de class="deger" şeklinde tanımlanır ve CSS’te .deger şeklinde çağrılır.
   • Örnek:HTML<p class="ozelMetin"></p> CSS.ozelMetin { font-weight: bold; }

---

Soru 4: Kutu Modeli (Box Model) Özellikleri (10 Puan)

CSS’te bir HTML elemanının etrafındaki alanı ve sınırlarını belirleyen Kutu Modeli (Box Model) kavramını açıklayınız. Bu modelin temel olarak kullandığı dört ana özelliğin (içten dışa doğru) adlarını yazınız. (Kazanım: 2)

Cevap:

• Tanım: HTML elemanlarının tarayıcı tarafından nasıl görüntüleneceğini tanımlayan, dört katmandan oluşan bir modeldir. Her elemanın çevresinde bir dikdörtgen kutu olduğunu varsayar.
• Dört Ana Özellik (İçten Dışa):
  1. İçerik (Content): (Metin, resim vb.)
  2. İç Boşluk (Padding): İçerik ile kenarlık (border) arasındaki boşluk.
  3. Kenarlık (Border): Elemanın sınırını belirleyen çizgi.
  4. Dış Boşluk (Margin): Kenarlık ile diğer elemanlar arasındaki boşluk.

---

II. ETKİLEŞİMLİ SAYFA GELİŞTİRME (JAVASCRIPT) (3 Soru / 60 Puan)

Soru 5: Değişken ve Veri Tipleri Uygulaması (20 Puan)

Bir web sayfasında JavaScript kullanarak, kullanıcının adını ve yaşını saklayacak iki farklı değişken tanımlayınız. Bu iki değişkene uygun veri tipini belirtiniz ve bir mesaj değişkeni oluşturarak bu iki değişkeni kullanarak birleştirme (concatenation) işlemi yapan sözde kodu (Pseudocode) yazınız. (Kazanım: 1)

Cevap:

1. Değişken Tanımlama:
   • isim = "Ali" (Veri Tipi: Karakter Dizisi / String)
   • yas = 25 (Veri Tipi: Tam Sayı / Integer veya Sayı / Number)
2. Sözde Kod:DEĞİŞKEN isim = "Ali" DEĞİŞKEN yas = 25 // Mesaj: "Kullanıcı adı Ali ve yaşı 25'tir." DEĞİŞKEN mesaj = "Kullanıcı adı " + isim + " ve yaşı " + yas + "'tir." EKRANA mesaj YAZ

---

Soru 6: Fonksiyon Uygulaması (Geri Dönüş Değeri) (20 Puan)

JavaScript’te bir Fonksiyonun tanımını yapınız. Kullanıcıdan alınan iki sayıyı toplayan ve bu toplam sonucunu geri döndüren (return) bir JavaScript fonksiyonunun sözde kodunu yazınız. (Kazanım: 1)

Cevap:

• Fonksiyon Tanımı: Belirli bir görevi yerine getirmek için bir araya getirilmiş, tekrar kullanılabilir kod bloğudur. Fonksiyonlar parametre alabilir ve bir değer döndürebilir.
• Sözde Kod:FONKSİYON Topla(sayi1, sayi2): toplam = sayi1 + sayi2 GERİ DÖNDÜR toplam // Fonksiyonu kullanma örneği: SONUC = Topla(15, 7) EKRANA "Toplam: " + SONUC YAZ

---

Soru 7: Kontrol Yapıları Uygulaması (20 Puan)

JavaScript’te bir Kontrol Yapısı olan IF-ELSE yapısının temel işlevini açıklayınız. Bir öğrencinin notu 50’den büyük veya eşitse ekrana “Başarılı”, aksi takdirde “Başarısız” yazdıran sözde kodu (Pseudocode) yazınız. (Kazanım: 1)

Cevap:

• IF-ELSE İşlevi: Program akışını, belirlenen bir mantıksal şarta göre yönlendirmek için kullanılır. Şart doğruysa (IF bloğu), yanlışsa (ELSE bloğu) çalışır.
• Sözde Kod:DEĞİŞKEN not = 45 // Örnek değer EĞER (not >= 50) İSE: EKRANA "Başarılı" YAZ DEĞİLSE (ELSE): EKRANA "Başarısız" YAZ