Ana Sayfa /
AÖF (Açıköğretim) /
AÖF Web Tasarımı ve Kodlama /
HTML5 ve CSS Temelleri /
Çözümlü Sorular
🎓 AÖF (Açıköğretim)
📚 AÖF Web Tasarımı ve Kodlama
💡 AÖF Web Tasarımı ve Kodlama: HTML5 ve CSS Temelleri Çözümlü Sorular
1
Çözümlü Soru
HTML5'te bir web sayfasının temel yapısını oluşturan ve sayfanın başlığını belirleyen, ayrıca görünür içeriği barındıran ana etiketleri kullanarak basit bir sayfa iskeleti nasıl oluşturulur? Sayfa başlığı "İlk Web Sayfam" ve ana başlığı "HTML5'e Hoş Geldiniz!" olsun.
Çözüm ve Açıklama
💡 HTML5'in temel iskeleti , , ve etiketlerinden oluşur.
📌 Sayfanın başlığı etiketi içine yazılır.
<br>
👉 Sayfanın görünür içeriği <body> etiketi içine yerleştirilir. Ana başlık için <h1> etiketi kullanılır.
<ul>
<li><code><!DOCTYPE html></code>: Belgenin HTML5 olduğunu tanımlar.</li>
<li><code><html lang="tr"></code>: Sayfanın kök elementi olup dilini belirtir.</li>
<li><code><head></code>: Sayfa hakkında meta bilgileri (başlık, karakter seti vb.) içerir.</li>
<li><code><title>İlk Web Sayfam</title></code>: Tarayıcı sekmesinde görünen sayfa başlığını belirler.</li>
<li><code><body></code>: Kullanıcının görebileceği tüm içeriği barındırır.</li>
<li><code><h1>HTML5'e Hoş Geldiniz!</h1></code>: Sayfanın en büyük başlığını oluşturur.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>HTML5'e Hoş Geldiniz!</h1>
</body>
</html>
</code></pre></div>
</div>
</div>
<div class="ornek-kutu" style="border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
<div style="background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 32px; height: 32px; background: var(--primary-color, #4F46E5); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem;">2</div>
<strong style="font-size: 1.15rem; color: #1e293b;">Çözümlü Soru</strong>
</div>
<span style="background: #f0fdf4; color: #0a6d4b; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; border: 1px solid #0a6d4b30;">Kolay Seviye</span>
</div>
<div class="ornek-metni" style="padding: 25px; font-size: 1.15rem; color: #334155; line-height: 1.8;">Bir web sayfasında "Merhaba Dünya!" yazısını bir paragraf olarak göstermek, ardından yeni bir satıra geçerek "Bu bir satır sonu örneğidir." ifadesini kalın ve "Önemli!" kelimesini italik olarak nasıl yazarsınız?</div>
<div style="padding: 0 25px 25px 25px;">
<button type="button" onclick="toggleCozum(this)" style="background: #f8fafc; border: 2px solid #e2e8f0; color: #475569; padding: 10px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;" onmouseover="this.style.borderColor='#cbd5e1'" onmouseout="this.style.borderColor='#e2e8f0'">
👁️ Çözümü Göster / Gizle
</button>
</div>
<div class="cozum-alani" style="display: none; padding: 25px; background: #fafafa; border-top: 1px dashed #cbd5e1; border-left: 4px solid var(--primary-color, #4F46E5);">
<strong style="color: #0f172a; display: flex; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 1.1rem;">
<i class="fa-solid fa-lightbulb text-warning"></i> Çözüm ve Açıklama
</strong>
<div class="ornek-metni" style="font-size: 1.1rem; color: #475569; line-height: 1.8;">💡 Paragraf oluşturmak için <p> etiketi kullanılır.
<br>
📌 Yeni bir satıra geçmek için <br> (break) etiketi kullanılır.
<br>
👉 Metni kalın yapmak için <strong> veya <b>, italik yapmak için <em> veya <i> etiketleri tercih edilir. <strong> ve <em> anlamsal olarak daha güçlü vurgu ifade eder.
<ul>
<li><code><p></code>: Bir metin bloğu, yani paragraf tanımlar.</li>
<li><code><br></code>: İmleci bir alt satıra indirir, kapatma etiketi gerektirmez.</li>
<li><code><strong></code>: İçindeki metni kalın yapar ve önemli olduğunu belirtir.</li>
<li><code><em></code>: İçindeki metni italik yapar ve vurgulu olduğunu belirtir.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Paragraf ve Vurgu</title>
</head>
<body>
<p>Merhaba Dünya!</p>
<br>
<p><strong>Bu bir satır sonu örneğidir.</strong> <em>Önemli!</em></p>
</body>
</html>
</code></pre></div>
</div>
</div>
<div class="banner-container"><!-- ortakgoruntulu2 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7001363072656594"
data-ad-slot="7932345070"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="ornek-kutu" style="border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
<div style="background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 32px; height: 32px; background: var(--primary-color, #4F46E5); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem;">3</div>
<strong style="font-size: 1.15rem; color: #1e293b;">Çözümlü Soru</strong>
</div>
<span style="background: #eff6ff; color: #0d3777; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; border: 1px solid #0d377730;">Orta Seviye</span>
</div>
<div class="ornek-metni" style="padding: 25px; font-size: 1.15rem; color: #334155; line-height: 1.8;">Bir web sayfasında, kullanıcılara sunulacak bir alışveriş listesini, maddelerin sıralı olmadığı (yani madde işaretli) bir liste şeklinde nasıl oluşturursunuz? Liste elemanları "Elma", "Muz" ve "Portakal" olsun.</div>
<div style="padding: 0 25px 25px 25px;">
<button type="button" onclick="toggleCozum(this)" style="background: #f8fafc; border: 2px solid #e2e8f0; color: #475569; padding: 10px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;" onmouseover="this.style.borderColor='#cbd5e1'" onmouseout="this.style.borderColor='#e2e8f0'">
👁️ Çözümü Göster / Gizle
</button>
</div>
<div class="cozum-alani" style="display: none; padding: 25px; background: #fafafa; border-top: 1px dashed #cbd5e1; border-left: 4px solid var(--primary-color, #4F46E5);">
<strong style="color: #0f172a; display: flex; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 1.1rem;">
<i class="fa-solid fa-lightbulb text-warning"></i> Çözüm ve Açıklama
</strong>
<div class="ornek-metni" style="font-size: 1.1rem; color: #475569; line-height: 1.8;">💡 Sırasız (madde işaretli) liste oluşturmak için <ul> (unordered list) etiketi kullanılır.
<br>
📌 Her bir liste elemanı <li> (list item) etiketi içine yazılır.
<br>
👉 <ul> etiketi, liste elemanlarını kapsayan ana etikettir.
<ul>
<li><code><ul></code>: Sırasız bir liste başlatır.</li>
<li><code><li></code>: Listede tek bir öğeyi temsil eder.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Alışveriş Listesi</title>
</head>
<body>
<h2>Alışveriş Listesi</h2>
<ul>
<li>Elma</li>
<li>Muz</li>
<li>Portakal</li>
</ul>
</body>
</html>
</code></pre></div>
</div>
</div>
<div class="ornek-kutu" style="border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
<div style="background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 32px; height: 32px; background: var(--primary-color, #4F46E5); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem;">4</div>
<strong style="font-size: 1.15rem; color: #1e293b;">Çözümlü Soru</strong>
</div>
<span style="background: #f0fdf4; color: #0a6d4b; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; border: 1px solid #0a6d4b30;">Kolay Seviye</span>
</div>
<div class="ornek-metni" style="padding: 25px; font-size: 1.15rem; color: #334155; line-height: 1.8;">Bir web sayfasında, kullanıcıların <b>Google</b> arama motoruna gitmesini sağlayacak bir bağlantı nasıl oluşturulur? Bağlantı metni "Google'a Git" olsun ve bağlantı yeni bir sekmede açılmalıdır.</div>
<div style="padding: 0 25px 25px 25px;">
<button type="button" onclick="toggleCozum(this)" style="background: #f8fafc; border: 2px solid #e2e8f0; color: #475569; padding: 10px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;" onmouseover="this.style.borderColor='#cbd5e1'" onmouseout="this.style.borderColor='#e2e8f0'">
👁️ Çözümü Göster / Gizle
</button>
</div>
<div class="cozum-alani" style="display: none; padding: 25px; background: #fafafa; border-top: 1px dashed #cbd5e1; border-left: 4px solid var(--primary-color, #4F46E5);">
<strong style="color: #0f172a; display: flex; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 1.1rem;">
<i class="fa-solid fa-lightbulb text-warning"></i> Çözüm ve Açıklama
</strong>
<div class="ornek-metni" style="font-size: 1.1rem; color: #475569; line-height: 1.8;">💡 Bağlantı (link) oluşturmak için <a> (anchor) etiketi kullanılır.
<br>
📌 Bağlantının hedef adresi href özniteliği ile belirtilir.
<br>
👉 Bağlantının yeni bir sekmede açılması için target="_blank" özniteliği kullanılır.
<ul>
<li><code><a></code>: Bağlantı (köprü) oluşturmak için kullanılır.</li>
<li><code>href</code>: Bağlantının gideceği URL'yi belirtir.</li>
<li><code>target="_blank"</code>: Bağlantının yeni bir tarayıcı sekmesinde/penceresinde açılmasını sağlar.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Bağlantı Örneği</title>
</head>
<body>
<p>Web'de arama yapmak için <a href="https://www.google.com" target="_blank">Google'a Git</a>.</p>
</body>
</html>
</code></pre></div>
</div>
</div>
<div class="ornek-kutu" style="border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
<div style="background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 32px; height: 32px; background: var(--primary-color, #4F46E5); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem;">5</div>
<strong style="font-size: 1.15rem; color: #1e293b;">Çözümlü Soru</strong>
</div>
<span style="background: #eff6ff; color: #0d3777; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; border: 1px solid #0d377730;">Orta Seviye</span>
</div>
<div class="ornek-metni" style="padding: 25px; font-size: 1.15rem; color: #334155; line-height: 1.8;">Bir web sayfasına, "resim.jpg" adlı bir görseli nasıl eklersiniz? Görselin yüklenmemesi durumunda alternatif olarak "Manzara Resmi" metni görünmelidir. Görselin bulunduğu dizin, HTML dosyasının bulunduğu dizinle aynıdır.</div>
<div style="padding: 0 25px 25px 25px;">
<button type="button" onclick="toggleCozum(this)" style="background: #f8fafc; border: 2px solid #e2e8f0; color: #475569; padding: 10px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;" onmouseover="this.style.borderColor='#cbd5e1'" onmouseout="this.style.borderColor='#e2e8f0'">
👁️ Çözümü Göster / Gizle
</button>
</div>
<div class="cozum-alani" style="display: none; padding: 25px; background: #fafafa; border-top: 1px dashed #cbd5e1; border-left: 4px solid var(--primary-color, #4F46E5);">
<strong style="color: #0f172a; display: flex; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 1.1rem;">
<i class="fa-solid fa-lightbulb text-warning"></i> Çözüm ve Açıklama
</strong>
<div class="ornek-metni" style="font-size: 1.1rem; color: #475569; line-height: 1.8;">💡 Görsel eklemek için <img> etiketi kullanılır.
<br>
📌 Görselin dosya yolu src (source) özniteliği ile belirtilir.
<br>
👉 Görselin yüklenememesi durumunda veya ekran okuyucular için alternatif metin alt (alternative text) özniteliği ile sağlanır.
<ul>
<li><code><img></code>: Bir görseli sayfaya ekler, kapatma etiketi gerektirmez.</li>
<li><code>src</code>: Görsel dosyasının URL'sini veya yolunu belirtir.</li>
<li><code>alt</code>: Görselin içeriğini açıklayan alternatif metni belirtir. SEO ve erişilebilirlik için önemlidir.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Görsel Ekleme</title>
</head>
<body>
<h2>Sayfamızdaki Görsel</h2>
<img src="resim.jpg" alt="Manzara Resmi">
<p>Yukarıda bir manzara resmi bulunmaktadır.</p>
</body>
</html>
</code></pre></div>
</div>
</div>
<div class="banner-container"><!-- ortakgoruntulu2 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7001363072656594"
data-ad-slot="7932345070"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="ornek-kutu" style="border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
<div style="background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 32px; height: 32px; background: var(--primary-color, #4F46E5); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem;">6</div>
<strong style="font-size: 1.15rem; color: #1e293b;">Çözümlü Soru</strong>
</div>
<span style="background: #eff6ff; color: #0d3777; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; border: 1px solid #0d377730;">Orta Seviye</span>
</div>
<div class="ornek-metni" style="padding: 25px; font-size: 1.15rem; color: #334155; line-height: 1.8;">Bir <b>HTML</b> sayfasında, dahili (internal) <b>CSS</b> kullanarak bir paragrafın (<p>) metin rengini maviye ve bir başlığın (<h1>) metin rengini kırmızıya nasıl çevirirsiniz?</div>
<div style="padding: 0 25px 25px 25px;">
<button type="button" onclick="toggleCozum(this)" style="background: #f8fafc; border: 2px solid #e2e8f0; color: #475569; padding: 10px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;" onmouseover="this.style.borderColor='#cbd5e1'" onmouseout="this.style.borderColor='#e2e8f0'">
👁️ Çözümü Göster / Gizle
</button>
</div>
<div class="cozum-alani" style="display: none; padding: 25px; background: #fafafa; border-top: 1px dashed #cbd5e1; border-left: 4px solid var(--primary-color, #4F46E5);">
<strong style="color: #0f172a; display: flex; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 1.1rem;">
<i class="fa-solid fa-lightbulb text-warning"></i> Çözüm ve Açıklama
</strong>
<div class="ornek-metni" style="font-size: 1.1rem; color: #475569; line-height: 1.8;">💡 Dahili <b>CSS</b>, <head> etiketi içinde yer alan <style> etiketi arasına yazılır.
<br>
📌 CSS kuralları, seçici (selector), özellik (property) ve değer (value) üçlüsünden oluşur. Örneğin: p { color: blue; }.
<br>
👉 color özelliği metin rengini, font-size özelliği metin boyutunu belirler.
<ul>
<li><code><style></code>: HTML belgesi içinde CSS tanımlamak için kullanılır.</li>
<li><code>p { color: blue; }</code>: Tüm p etiketlerinin metin rengini mavi yapar.</li>
<li><code>h1 { color: red; }</code>: Tüm h1 etiketlerinin metin rengini kırmızı yapar.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Dahili CSS Örneği</title>
<style>
/<b> Paragraf etiketlerinin rengini mavi yap </b>/
p {
color: blue;
font-size: 18px;
}
/<b> Başlık etiketinin rengini kırmızı yap </b>/
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>Dahili CSS ile Stil Uygulama</h1>
<p>Bu paragrafın metin rengi mavidir.</p>
<p>Diğer paragraf da aynı şekilde mavi renkte olacaktır.</p>
</body>
</html>
</code></pre></div>
</div>
</div>
<div class="ornek-kutu" style="border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
<div style="background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 32px; height: 32px; background: var(--primary-color, #4F46E5); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem;">7</div>
<strong style="font-size: 1.15rem; color: #1e293b;">Çözümlü Soru</strong>
</div>
<span style="background: #eff6ff; color: #0d3777; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; border: 1px solid #0d377730;">Orta Seviye</span>
</div>
<div class="ornek-metni" style="padding: 25px; font-size: 1.15rem; color: #334155; line-height: 1.8;">Bir web sayfasında, tüm <body> etiketinin arka plan rengini açık gri (#f0f0f0) yapmak ve metin rengini koyu gri (#333) olarak ayarlamak için harici bir <b>CSS</b> dosyası (style.css) nasıl bağlanır ve bu stil kuralları nasıl tanımlanır?</div>
<div style="padding: 0 25px 25px 25px;">
<button type="button" onclick="toggleCozum(this)" style="background: #f8fafc; border: 2px solid #e2e8f0; color: #475569; padding: 10px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;" onmouseover="this.style.borderColor='#cbd5e1'" onmouseout="this.style.borderColor='#e2e8f0'">
👁️ Çözümü Göster / Gizle
</button>
</div>
<div class="cozum-alani" style="display: none; padding: 25px; background: #fafafa; border-top: 1px dashed #cbd5e1; border-left: 4px solid var(--primary-color, #4F46E5);">
<strong style="color: #0f172a; display: flex; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 1.1rem;">
<i class="fa-solid fa-lightbulb text-warning"></i> Çözüm ve Açıklama
</strong>
<div class="ornek-metni" style="font-size: 1.1rem; color: #475569; line-height: 1.8;">💡 Harici <b>CSS</b> dosyası, <head> etiketi içine <link> etiketi ile bağlanır.
<br>
📌 rel="stylesheet" özniteliği, bağlanan dosyanın bir stil sayfası olduğunu belirtir.
<br>
👉 href özniteliği, <b>CSS</b> dosyasının yolunu belirtir.
<ul>
<li><code><link rel="stylesheet" href="style.css"></code>: style.css dosyasını HTML belgesine bağlar.</li>
<li>body { ... }: <body> etiketine stil kuralları uygular.</li>
<li>background-color: Elementin arka plan rengini belirler.</li>
<li>color: Elementin metin rengini belirler.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<br>
<b>1. HTML Dosyası (index.html):</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Harici CSS Örneği</title>
<!-- Harici CSS dosyasını bağla -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Harici CSS ile Stil Uygulama</h1>
<p>Bu sayfanın arka planı açık gri, metin rengi koyu gridir.</p>
</body>
</html>
</code></pre>
<b>2. CSS Dosyası (style.css):</b> (HTML dosyası ile aynı dizinde olmalıdır)
<pre><code>
/<b> style.css </b>/
body {
background-color: #f0f0f0; /<b> Açık gri arka plan </b>/
color: #333; /<b> Koyu gri metin rengi </b>/
font-family: Arial, sans-serif; /<b> Yazı tipi </b>/
}
</code></pre></div>
</div>
</div>
<div class="ornek-kutu" style="border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
<div style="background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 32px; height: 32px; background: var(--primary-color, #4F46E5); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem;">8</div>
<strong style="font-size: 1.15rem; color: #1e293b;">Çözümlü Soru</strong>
</div>
<span style="background: #eff6ff; color: #0d3777; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; border: 1px solid #0d377730;">Orta Seviye</span>
</div>
<div class="ornek-metni" style="padding: 25px; font-size: 1.15rem; color: #334155; line-height: 1.8;">Bir web sayfasında, belirli paragraf ve başlık elemanlarına aynı stil kurallarını uygulamak istiyorsunuz. Örneğin, "özel-metin" sınıfına sahip tüm elemanların metin rengini mora, yazı tipi boyutunu 20 piksele ayarlamak için <b>CSS</b> sınıf seçiciyi nasıl kullanırsınız?</div>
<div style="padding: 0 25px 25px 25px;">
<button type="button" onclick="toggleCozum(this)" style="background: #f8fafc; border: 2px solid #e2e8f0; color: #475569; padding: 10px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;" onmouseover="this.style.borderColor='#cbd5e1'" onmouseout="this.style.borderColor='#e2e8f0'">
👁️ Çözümü Göster / Gizle
</button>
</div>
<div class="cozum-alani" style="display: none; padding: 25px; background: #fafafa; border-top: 1px dashed #cbd5e1; border-left: 4px solid var(--primary-color, #4F46E5);">
<strong style="color: #0f172a; display: flex; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 1.1rem;">
<i class="fa-solid fa-lightbulb text-warning"></i> Çözüm ve Açıklama
</strong>
<div class="ornek-metni" style="font-size: 1.1rem; color: #475569; line-height: 1.8;">💡 <b>CSS</b> sınıf seçici, birden fazla <b>HTML</b> elemanına aynı stil kurallarını uygulamak için kullanılır.
<br>
📌 Bir <b>HTML</b> elemanına sınıf atamak için class özniteliği kullanılır.
<br>
👉 <b>CSS</b>'te sınıf seçici, nokta (.) ile başlar ve ardından sınıf adı gelir. Örneğin: .sinifadi { ... }.
<ul>
<li><code>class="özel-metin"</code>: <b>HTML</b> elemanına özel-metin sınıfını atar.</li>
<li><code>.özel-metin { ... }</code>: özel-metin sınıfına sahip tüm elemanlara stil uygular.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Sınıf Seçici Örneği</title>
<style>
/<b> özel-metin sınıfına sahip tüm elemanlara stil uygula </b>/
.özel-metin {
color: purple; /<b> Metin rengi mor </b>/
font-size: 20px; /<b> Yazı tipi boyutu 20 piksel </b>/
border: 1px solid purple; /<b> Mor kenarlık </b>/
padding: 10px; /<b> İç boşluk </b>/
margin-bottom: 10px; /<b> Alt boşluk </b>/
}
</style>
</head>
<body>
<h1 class="özel-metin">Bu Başlık Özel Bir Stil Sahibi</h1>
<p>Bu paragraf normal stilindedir.</p>
<p class="özel-metin">Bu paragraf da özel stil sınıfına sahiptir.</p>
<div class="özel-metin">Bu da özel stil sınıfına sahip bir kutu.</div>
</body>
</html>
</code></pre></div>
</div>
</div>
<div class="banner-container"><!-- ortakgoruntulu2 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7001363072656594"
data-ad-slot="7932345070"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
</div>
</main>
<aside class="sidebar-sticky">
<div class="sidebar-box">
<div style="font-size: 1.0rem; font-weight: 800; color: #771b0a; margin-bottom: 15px; margin-top:15px; text-transform: uppercase;">İçerik Menüsü</div>
<nav class="nav-list">
<a href="https://www.cepokul.com/sinav/aof-web-tasarim-temelleri/notlar" class="nav-btn">📝 Konu Özetleri</a>
<a href="https://www.cepokul.com/sinav/aof-web-tasarim-temelleri/testler" class="nav-btn">✅ Online Test Çöz</a>
<a href="https://www.cepokul.com/sinav/aof-web-tasarim-temelleri/sorular" class="nav-btn active">💡 Çözümlü Sorular</a>
<a href="https://www.cepokul.com/sinav/aof-web-tasarim-temelleri/etkinlikler" class="nav-btn">📄 PDF Etkinlikler</a>
</nav>
</div>
</aside>
</div>
<div id="print-area">
<h2 style="margin-bottom: 30px; border-bottom: 2px solid #000; padding-bottom: 10px; color: #000;">
AÖF Web Tasarımı ve Kodlama: HTML5 ve CSS Temelleri Çözümlü Sorular </h2>
<div style="margin-top:15px; width: 100%;">
<div style="margin-bottom: 25px; break-inside: avoid; page-break-inside: avoid;">
<strong style="font-size: 1.1rem; color: #000;">Soru 1:</strong><br>
<div style="font-size: 1rem; line-height: 1.5; margin-bottom: 15px; color: #000;"><b>HTML5</b>'te bir web sayfasının temel yapısını oluşturan ve sayfanın başlığını belirleyen, ayrıca görünür içeriği barındıran ana etiketleri kullanarak basit bir sayfa iskeleti nasıl oluşturulur? Sayfa başlığı "İlk Web Sayfam" ve ana başlığı "HTML5'e Hoş Geldiniz!" olsun.</div>
<div style="padding: 5px; border-left: 2px solid #4F46E5; background: #FAFAFA; color: #000;">
<strong style="color: #000;">Çözüm:</strong><br>
<div style="font-size: 1rem; line-height: 1.5;">💡 <b>HTML5</b>'in temel iskeleti <!DOCTYPE html>, <html>, <head> ve <body> etiketlerinden oluşur.
<br>
📌 Sayfanın başlığı <title> etiketi içine yazılır.
<br>
👉 Sayfanın görünür içeriği <body> etiketi içine yerleştirilir. Ana başlık için <h1> etiketi kullanılır.
<ul>
<li><code><!DOCTYPE html></code>: Belgenin HTML5 olduğunu tanımlar.</li>
<li><code><html lang="tr"></code>: Sayfanın kök elementi olup dilini belirtir.</li>
<li><code><head></code>: Sayfa hakkında meta bilgileri (başlık, karakter seti vb.) içerir.</li>
<li><code><title>İlk Web Sayfam</title></code>: Tarayıcı sekmesinde görünen sayfa başlığını belirler.</li>
<li><code><body></code>: Kullanıcının görebileceği tüm içeriği barındırır.</li>
<li><code><h1>HTML5'e Hoş Geldiniz!</h1></code>: Sayfanın en büyük başlığını oluşturur.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>HTML5'e Hoş Geldiniz!</h1>
</body>
</html>
</code></pre></div>
</div>
</div>
<div style="margin-bottom: 25px; break-inside: avoid; page-break-inside: avoid;">
<strong style="font-size: 1.1rem; color: #000;">Soru 2:</strong><br>
<div style="font-size: 1rem; line-height: 1.5; margin-bottom: 15px; color: #000;">Bir web sayfasında "Merhaba Dünya!" yazısını bir paragraf olarak göstermek, ardından yeni bir satıra geçerek "Bu bir satır sonu örneğidir." ifadesini kalın ve "Önemli!" kelimesini italik olarak nasıl yazarsınız?</div>
<div style="padding: 5px; border-left: 2px solid #4F46E5; background: #FAFAFA; color: #000;">
<strong style="color: #000;">Çözüm:</strong><br>
<div style="font-size: 1rem; line-height: 1.5;">💡 Paragraf oluşturmak için <p> etiketi kullanılır.
<br>
📌 Yeni bir satıra geçmek için <br> (break) etiketi kullanılır.
<br>
👉 Metni kalın yapmak için <strong> veya <b>, italik yapmak için <em> veya <i> etiketleri tercih edilir. <strong> ve <em> anlamsal olarak daha güçlü vurgu ifade eder.
<ul>
<li><code><p></code>: Bir metin bloğu, yani paragraf tanımlar.</li>
<li><code><br></code>: İmleci bir alt satıra indirir, kapatma etiketi gerektirmez.</li>
<li><code><strong></code>: İçindeki metni kalın yapar ve önemli olduğunu belirtir.</li>
<li><code><em></code>: İçindeki metni italik yapar ve vurgulu olduğunu belirtir.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Paragraf ve Vurgu</title>
</head>
<body>
<p>Merhaba Dünya!</p>
<br>
<p><strong>Bu bir satır sonu örneğidir.</strong> <em>Önemli!</em></p>
</body>
</html>
</code></pre></div>
</div>
</div>
<div style="margin-bottom: 25px; break-inside: avoid; page-break-inside: avoid;">
<strong style="font-size: 1.1rem; color: #000;">Soru 3:</strong><br>
<div style="font-size: 1rem; line-height: 1.5; margin-bottom: 15px; color: #000;">Bir web sayfasında, kullanıcılara sunulacak bir alışveriş listesini, maddelerin sıralı olmadığı (yani madde işaretli) bir liste şeklinde nasıl oluşturursunuz? Liste elemanları "Elma", "Muz" ve "Portakal" olsun.</div>
<div style="padding: 5px; border-left: 2px solid #4F46E5; background: #FAFAFA; color: #000;">
<strong style="color: #000;">Çözüm:</strong><br>
<div style="font-size: 1rem; line-height: 1.5;">💡 Sırasız (madde işaretli) liste oluşturmak için <ul> (unordered list) etiketi kullanılır.
<br>
📌 Her bir liste elemanı <li> (list item) etiketi içine yazılır.
<br>
👉 <ul> etiketi, liste elemanlarını kapsayan ana etikettir.
<ul>
<li><code><ul></code>: Sırasız bir liste başlatır.</li>
<li><code><li></code>: Listede tek bir öğeyi temsil eder.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Alışveriş Listesi</title>
</head>
<body>
<h2>Alışveriş Listesi</h2>
<ul>
<li>Elma</li>
<li>Muz</li>
<li>Portakal</li>
</ul>
</body>
</html>
</code></pre></div>
</div>
</div>
<div style="margin-bottom: 25px; break-inside: avoid; page-break-inside: avoid;">
<strong style="font-size: 1.1rem; color: #000;">Soru 4:</strong><br>
<div style="font-size: 1rem; line-height: 1.5; margin-bottom: 15px; color: #000;">Bir web sayfasında, kullanıcıların <b>Google</b> arama motoruna gitmesini sağlayacak bir bağlantı nasıl oluşturulur? Bağlantı metni "Google'a Git" olsun ve bağlantı yeni bir sekmede açılmalıdır.</div>
<div style="padding: 5px; border-left: 2px solid #4F46E5; background: #FAFAFA; color: #000;">
<strong style="color: #000;">Çözüm:</strong><br>
<div style="font-size: 1rem; line-height: 1.5;">💡 Bağlantı (link) oluşturmak için <a> (anchor) etiketi kullanılır.
<br>
📌 Bağlantının hedef adresi href özniteliği ile belirtilir.
<br>
👉 Bağlantının yeni bir sekmede açılması için target="_blank" özniteliği kullanılır.
<ul>
<li><code><a></code>: Bağlantı (köprü) oluşturmak için kullanılır.</li>
<li><code>href</code>: Bağlantının gideceği URL'yi belirtir.</li>
<li><code>target="_blank"</code>: Bağlantının yeni bir tarayıcı sekmesinde/penceresinde açılmasını sağlar.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Bağlantı Örneği</title>
</head>
<body>
<p>Web'de arama yapmak için <a href="https://www.google.com" target="_blank">Google'a Git</a>.</p>
</body>
</html>
</code></pre></div>
</div>
</div>
<div style="margin-bottom: 25px; break-inside: avoid; page-break-inside: avoid;">
<strong style="font-size: 1.1rem; color: #000;">Soru 5:</strong><br>
<div style="font-size: 1rem; line-height: 1.5; margin-bottom: 15px; color: #000;">Bir web sayfasına, "resim.jpg" adlı bir görseli nasıl eklersiniz? Görselin yüklenmemesi durumunda alternatif olarak "Manzara Resmi" metni görünmelidir. Görselin bulunduğu dizin, HTML dosyasının bulunduğu dizinle aynıdır.</div>
<div style="padding: 5px; border-left: 2px solid #4F46E5; background: #FAFAFA; color: #000;">
<strong style="color: #000;">Çözüm:</strong><br>
<div style="font-size: 1rem; line-height: 1.5;">💡 Görsel eklemek için <img> etiketi kullanılır.
<br>
📌 Görselin dosya yolu src (source) özniteliği ile belirtilir.
<br>
👉 Görselin yüklenememesi durumunda veya ekran okuyucular için alternatif metin alt (alternative text) özniteliği ile sağlanır.
<ul>
<li><code><img></code>: Bir görseli sayfaya ekler, kapatma etiketi gerektirmez.</li>
<li><code>src</code>: Görsel dosyasının URL'sini veya yolunu belirtir.</li>
<li><code>alt</code>: Görselin içeriğini açıklayan alternatif metni belirtir. SEO ve erişilebilirlik için önemlidir.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Görsel Ekleme</title>
</head>
<body>
<h2>Sayfamızdaki Görsel</h2>
<img src="resim.jpg" alt="Manzara Resmi">
<p>Yukarıda bir manzara resmi bulunmaktadır.</p>
</body>
</html>
</code></pre></div>
</div>
</div>
<div style="margin-bottom: 25px; break-inside: avoid; page-break-inside: avoid;">
<strong style="font-size: 1.1rem; color: #000;">Soru 6:</strong><br>
<div style="font-size: 1rem; line-height: 1.5; margin-bottom: 15px; color: #000;">Bir <b>HTML</b> sayfasında, dahili (internal) <b>CSS</b> kullanarak bir paragrafın (<p>) metin rengini maviye ve bir başlığın (<h1>) metin rengini kırmızıya nasıl çevirirsiniz?</div>
<div style="padding: 5px; border-left: 2px solid #4F46E5; background: #FAFAFA; color: #000;">
<strong style="color: #000;">Çözüm:</strong><br>
<div style="font-size: 1rem; line-height: 1.5;">💡 Dahili <b>CSS</b>, <head> etiketi içinde yer alan <style> etiketi arasına yazılır.
<br>
📌 CSS kuralları, seçici (selector), özellik (property) ve değer (value) üçlüsünden oluşur. Örneğin: p { color: blue; }.
<br>
👉 color özelliği metin rengini, font-size özelliği metin boyutunu belirler.
<ul>
<li><code><style></code>: HTML belgesi içinde CSS tanımlamak için kullanılır.</li>
<li><code>p { color: blue; }</code>: Tüm p etiketlerinin metin rengini mavi yapar.</li>
<li><code>h1 { color: red; }</code>: Tüm h1 etiketlerinin metin rengini kırmızı yapar.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Dahili CSS Örneği</title>
<style>
/<b> Paragraf etiketlerinin rengini mavi yap </b>/
p {
color: blue;
font-size: 18px;
}
/<b> Başlık etiketinin rengini kırmızı yap </b>/
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>Dahili CSS ile Stil Uygulama</h1>
<p>Bu paragrafın metin rengi mavidir.</p>
<p>Diğer paragraf da aynı şekilde mavi renkte olacaktır.</p>
</body>
</html>
</code></pre></div>
</div>
</div>
<div style="margin-bottom: 25px; break-inside: avoid; page-break-inside: avoid;">
<strong style="font-size: 1.1rem; color: #000;">Soru 7:</strong><br>
<div style="font-size: 1rem; line-height: 1.5; margin-bottom: 15px; color: #000;">Bir web sayfasında, tüm <body> etiketinin arka plan rengini açık gri (#f0f0f0) yapmak ve metin rengini koyu gri (#333) olarak ayarlamak için harici bir <b>CSS</b> dosyası (style.css) nasıl bağlanır ve bu stil kuralları nasıl tanımlanır?</div>
<div style="padding: 5px; border-left: 2px solid #4F46E5; background: #FAFAFA; color: #000;">
<strong style="color: #000;">Çözüm:</strong><br>
<div style="font-size: 1rem; line-height: 1.5;">💡 Harici <b>CSS</b> dosyası, <head> etiketi içine <link> etiketi ile bağlanır.
<br>
📌 rel="stylesheet" özniteliği, bağlanan dosyanın bir stil sayfası olduğunu belirtir.
<br>
👉 href özniteliği, <b>CSS</b> dosyasının yolunu belirtir.
<ul>
<li><code><link rel="stylesheet" href="style.css"></code>: style.css dosyasını HTML belgesine bağlar.</li>
<li>body { ... }: <body> etiketine stil kuralları uygular.</li>
<li>background-color: Elementin arka plan rengini belirler.</li>
<li>color: Elementin metin rengini belirler.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<br>
<b>1. HTML Dosyası (index.html):</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Harici CSS Örneği</title>
<!-- Harici CSS dosyasını bağla -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Harici CSS ile Stil Uygulama</h1>
<p>Bu sayfanın arka planı açık gri, metin rengi koyu gridir.</p>
</body>
</html>
</code></pre>
<b>2. CSS Dosyası (style.css):</b> (HTML dosyası ile aynı dizinde olmalıdır)
<pre><code>
/<b> style.css </b>/
body {
background-color: #f0f0f0; /<b> Açık gri arka plan </b>/
color: #333; /<b> Koyu gri metin rengi </b>/
font-family: Arial, sans-serif; /<b> Yazı tipi </b>/
}
</code></pre></div>
</div>
</div>
<div style="margin-bottom: 25px; break-inside: avoid; page-break-inside: avoid;">
<strong style="font-size: 1.1rem; color: #000;">Soru 8:</strong><br>
<div style="font-size: 1rem; line-height: 1.5; margin-bottom: 15px; color: #000;">Bir web sayfasında, belirli paragraf ve başlık elemanlarına aynı stil kurallarını uygulamak istiyorsunuz. Örneğin, "özel-metin" sınıfına sahip tüm elemanların metin rengini mora, yazı tipi boyutunu 20 piksele ayarlamak için <b>CSS</b> sınıf seçiciyi nasıl kullanırsınız?</div>
<div style="padding: 5px; border-left: 2px solid #4F46E5; background: #FAFAFA; color: #000;">
<strong style="color: #000;">Çözüm:</strong><br>
<div style="font-size: 1rem; line-height: 1.5;">💡 <b>CSS</b> sınıf seçici, birden fazla <b>HTML</b> elemanına aynı stil kurallarını uygulamak için kullanılır.
<br>
📌 Bir <b>HTML</b> elemanına sınıf atamak için class özniteliği kullanılır.
<br>
👉 <b>CSS</b>'te sınıf seçici, nokta (.) ile başlar ve ardından sınıf adı gelir. Örneğin: .sinifadi { ... }.
<ul>
<li><code>class="özel-metin"</code>: <b>HTML</b> elemanına özel-metin sınıfını atar.</li>
<li><code>.özel-metin { ... }</code>: özel-metin sınıfına sahip tüm elemanlara stil uygular.</li>
</ul>
✅ <b>Kod Çözümü:</b>
<pre><code>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Sınıf Seçici Örneği</title>
<style>
/<b> özel-metin sınıfına sahip tüm elemanlara stil uygula </b>/
.özel-metin {
color: purple; /<b> Metin rengi mor </b>/
font-size: 20px; /<b> Yazı tipi boyutu 20 piksel </b>/
border: 1px solid purple; /<b> Mor kenarlık </b>/
padding: 10px; /<b> İç boşluk </b>/
margin-bottom: 10px; /<b> Alt boşluk </b>/
}
</style>
</head>
<body>
<h1 class="özel-metin">Bu Başlık Özel Bir Stil Sahibi</h1>
<p>Bu paragraf normal stilindedir.</p>
<p class="özel-metin">Bu paragraf da özel stil sınıfına sahiptir.</p>
<div class="özel-metin">Bu da özel stil sınıfına sahip bir kutu.</div>
</body>
</html>
</code></pre></div>
</div>
</div>
</div>
<div class="qr-section" style="text-align: center; margin-top: 40px; padding-top: 20px; border-top: 2px solid #000;">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=https%3A%2F%2Fwww.cepokul.com%2Fsinav%2Faof-web-tasarim-temelleri%2Fsorular" alt="QR Code" style="margin-bottom: 10px; width:120px; height:120px; display: inline-block;">
<p style="font-weight: bold; font-size: 1.1rem; margin: 0; color: #000;">Daha Fazla Soru ve İçerik İçin QR Kodu Okutun</p>
<p style="margin: 5px 0 0 0; color: #555;">https://www.cepokul.com/sinav/aof-web-tasarim-temelleri/sorular</p>
</div>
</div>
<div id="smartLoadingOverlay" class="smart-loading-overlay" style="display:none;">
<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>
<script>
function toggleCozum(btn) {
let cozumDiv = btn.parentElement.nextElementSibling;
if (cozumDiv.style.display === "none" || cozumDiv.style.display === "") {
cozumDiv.style.display = "block";
btn.style.background = "#e2e8f0";
} else {
cozumDiv.style.display = "none";
btn.style.background = "#f8fafc";
}
}
async function generateContent(paketId, type) {
document.getElementById('smartLoadingOverlay').style.display = 'flex';
const apiUrl = 'https://www.cepokul.com/sinav/ajax-soru-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>
<script type="text/javascript">
(function(m,e,t,r,i,k,a){
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
})(window, document,'script','https://mc.yandex.ru/metrika/tag.js', 'ym');
ym(94693115, 'init', {clickmap:true, referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/94693115" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
</body>
</html>
📌 Sayfanın başlığı