AÖF (Açıköğretim) HTML5 ve CSS Temelleri Test Çöz, PDF İndir (Cevaplı Sorular), Yeni Nesil

🚀 Teste Hazır Mısın?

Sınavlara hazırlanmak ve eksiklerini görmek için harika bir fırsat. Soruları çöz, sonucunu öğren ve PDF olarak indir!

📝 14 Soru

⏱️ Süre Yok

💡 Anında Çözüm

Sınavı Başlat

✅ AÖF Web Tasarımı ve Kodlama: HTML5 ve CSS Temelleri Testi

Web sayfalarının yapısını ve içeriğini tanımlamak için kullanılan standart işaretleme dili aşağıdakilerden hangisidir?

A) CSS
B) JavaScript
C) Python
D) HTML
E) PHP

Bir HTML belgesinin tarayıcıya HTML5 standardında olduğunu bildiren belge tipi bildirimi (DOCTYPE declaration) aşağıdakilerden hangisidir?

A)
B)
C)
D)
E)

Bir web sayfasında ana başlık (en büyük başlık) oluşturmak için kullanılan HTML etiketi aşağıdakilerden hangisidir?

C)

D)

E)

Harici bir CSS dosyasını (örneğin style.css) bir HTML belgesine bağlamak için bölümünde kullanılan etiket aşağıdakilerden hangisidir?

A)
B)
C)
D)
E)

Bir HTML öğesinin metin rengini değiştirmek için kullanılan CSS özelliği aşağıdakilerden hangisidir?

A) background-color
B) font-color
C) text-color
D) color
E) text-decoration

HTML'de bir resim eklemek için kullanılan ve kapatma etiketi gerektirmeyen (kendiliğinden kapanan) etiket aşağıdakilerden hangisidir?

A)
B)
C)
D)
E)

Bir web sayfasında gezinme menüsü (navigation menu) oluşturmak için HTML5 ile tanıtılan anlamsal (semantic) etiket aşağıdakilerden hangisidir?

A)
B)

CSS'te bir HTML öğesine özel bir kimlik (ID) atayarak stil vermek için kullanılan seçici türü ve kullanım şekli aşağıdakilerden hangisinde doğru verilmiştir?

A) . (nokta) ile sınıf seçici
B) # (diyez) ile kimlik seçici
C) * (yıldız) ile evrensel seçici
D) : (iki nokta üst üste) ile sözde sınıf
E) [] (köşeli parantez) ile öznitelik seçici

CSS Kutu Modeli (Box Model) bileşenleri sırasıyla, bir öğenin içeriğinden dışarıya doğru hangi sıralamayla yer alır?

A) İçerik, Kenar Boşluğu (Margin), Dolgu (Padding), Kenarlık (Border)
B) İçerik, Dolgu (Padding), Kenar Boşluğu (Margin), Kenarlık (Border)
C) İçerik, Dolgu (Padding), Kenarlık (Border), Kenar Boşluğu (Margin)
D) İçerik, Kenarlık (Border), Dolgu (Padding), Kenar Boşluğu (Margin)
E) Kenar Boşluğu (Margin), Kenarlık (Border), Dolgu (Padding), İçerik

10)

HTML'de

gibi etiketler varsayılan olarak hangi görüntüleme türüne (display type) sahiptir ve bu türün temel özelliği nedir?

A) inline - Diğer öğelerle aynı satırda yer alır ve genişliği içeriği kadardır.
B) inline-block - Diğer öğelerle aynı satırda yer alır ancak genişlik ve yükseklik ayarlanabilir.
C) block - Kendi başına bir satır kaplar ve varsayılan olarak tüm kullanılabilir genişliği doldurur.
D) flex - Esnek kutu düzeni oluşturur.
E) grid - Izgara tabanlı düzen oluşturur.

11)

Bir web formunda kullanıcının tek satırlık metin girişi yapmasını sağlamak için kullanılan HTML etiketi ve doğru type özniteliği aşağıdakilerden hangisidir?

</span><br><span class='secenek'><b>B)</b> <input type="number"></span><br><span class='secenek'><b>C)</b> <select></span><br><span class='secenek'><b>D)</b> <input type="text"></span><br><span class='secenek'><b>E)</b> <input type="submit"></span><br></div>
            </div>
                    <div class="print-question" style="width: 48%; margin-bottom: 100px; break-inside: avoid; page-break-inside: avoid; display: flex; gap: 10px; color: #000;">
                <strong style="font-size: 1.1rem;">12)</strong>
                <div style="flex: 1; font-size: 1rem; line-height: 1.5;"><p>Aşağıdaki CSS seçicilerden hangisi, belirtilen bir HTML öğesine uygulandığında en yüksek özgüllüğe (specificity) sahip olur ve diğer çakışan stilleri geçersiz kılma olasılığı en yüksektir?</p><span class='secenek'><b>A)</b> p { color: blue; } (Element seçici)</span><br><span class='secenek'><b>B)</b> .kutu { color: green; } (Sınıf seçici)</span><br><span class='secenek'><b>C)</b> #baslik { color: red; } (ID seçici)</span><br><span class='secenek'><b>D)</b> \div p { color: yellow; } (Torun seçici)</span><br><span class='secenek'><b>E)</b> <p style="color: purple;">Bu bir paragraftır.</p> (Satır içi stil)</span><br></div>
            </div>
                    <div class="print-question" style="width: 48%; margin-bottom: 100px; break-inside: avoid; page-break-inside: avoid; display: flex; gap: 10px; color: #000;">
                <strong style="font-size: 1.1rem;">13)</strong>
                <div style="flex: 1; font-size: 1rem; line-height: 1.5;"><p>Mobil cihazlara uyumlu web siteleri geliştirmek için kullanılan ve ekran genişliği, cihaz yönü gibi özelliklere göre farklı CSS kuralları uygulamayı sağlayan CSS3 özelliği aşağıdakilerden hangisidir?</p><span class='secenek'><b>A)</b> flexbox</span><br><span class='secenek'><b>B)</b> grid</span><br><span class='secenek'><b>C)</b> media queries</span><br><span class='secenek'><b>D)</b> float</span><br><span class='secenek'><b>E)</b> position</span><br></div>
            </div>
                    <div class="print-question" style="width: 48%; margin-bottom: 100px; break-inside: avoid; page-break-inside: avoid; display: flex; gap: 10px; color: #000;">
                <strong style="font-size: 1.1rem;">14)</strong>
                <div style="flex: 1; font-size: 1rem; line-height: 1.5;"><p>Bir HTML bağlantısına (<a> etiketi) fare ile üzerine gelindiğinde (hover) farklı bir stil uygulamak için kullanılan CSS sözde sınıfı (pseudo-class) aşağıdakilerden hangisidir?</p><span class='secenek'><b>A)</b> :active</span><br><span class='secenek'><b>B)</b> :focus</span><br><span class='secenek'><b>C)</b> :visited</span><br><span class='secenek'><b>D)</b> :link</span><br><span class='secenek'><b>E)</b> :hover</span><br></div>
            </div>
            </div>
    <div class="qr-section" style="text-align: center; margin-top: 15px; padding-top: 20px; border-top: 2px solid #000; break-inside: avoid; page-break-inside: avoid; display: flex; flex-direction: column; align-items: center; justify-content: center;">
        <img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=https%3A%2F%2Fwww.cepokul.com%2Fsinav%2Faof-web-tasarim-temelleri%2Ftestler" alt="QR Code" style="margin-bottom: 10px; width:120px; height:120px;">
        <p style="font-weight: bold; font-size: 1.1rem; margin: 0; color: #000;">Cevap Anahtarı ve Detaylı Çözümler İçin QR Kodu Okutun</p>
        <p style="margin: 5px 0 0 0; color: #555;">https://www.cepokul.com/sinav/aof-web-tasarim-temelleri/testler</p>
    </div>
</div>

<div id="smartLoadingOverlay" class="smart-loading-overlay">
    <div class="spinner-box"><div class="smart-spinner"></div></div>
    <h3 style="font-weight:800; color:#1e293b; margin-top: 20px;">İçerik Hazırlanıyor...</h3>
    <p style="color:#64748b;">Lütfen sayfayı kapatmayın, bu işlem 30-40 saniye sürebilir.</p>
</div>

async function generateContent(paketId, type) {
    document.getElementById('smartLoadingOverlay').style.display = 'flex';
    const apiUrl = 'https://www.cepokul.com/sinav/ajax-test-uret.php'; 
    try {
        const res = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ paket_id: paketId }) });
        const textRes = await res.text();
        try {
            const data = JSON.parse(textRes);
            if(data.status === 'success' || data.success) { location.reload(); } 
            else { alert("Hata: " + (data.msg || data.message || "Üretim başarısız.")); document.getElementById('smartLoadingOverlay').style.display = 'none'; }
        } catch(e) { alert("Geçersiz yanıt alındı."); document.getElementById('smartLoadingOverlay').style.display = 'none'; }
    } catch(e) { alert("Bağlantı kurulamadı."); document.getElementById('smartLoadingOverlay').style.display = 'none'; }
}
</script>

</main>
</div> 
<footer class="site-footer">
    <div class="container footer-inner">
        <p>© 2026 <span class="brand">CepOkul Sınav</span> - Tüm Hakları Saklıdır.</p>
    </div>
</footer>

</body>
</html>

✅ AÖF Web Tasarımı ve Kodlama: HTML5 ve CSS Temelleri Online Test

🚀 Teste Hazır Mısın?

✅ AÖF Web Tasarımı ve Kodlama: HTML5 ve CSS Temelleri Testi

C) D) E)

D) E)

E)

C)

D)

E)

D)

E)