Meydan okuma - Orta seviye projesi
Tüm orta seviye konularını birleştiren bir dokümantasyon sitesi yazarsın.
Orta seviyeyi birleştir
Bu doküman sitesi, orta seviyenin tüm konularını birleştirir. Tam bir <!DOCTYPE html> iskeleti, anlamsal landmark'lar (<header>, <nav>, <main>, <aside>, <footer>), ileri metin etiketleri ve erişilebilir tablo içerir.
Bir atla bağlantısı (skip link) klavye kullanıcılarını ana içeriğe taşır. Form bölümünde <fieldset>, <legend>, <label for> ve doğrulama öznitelikleri bulunur.
Uygulama Doküman sitesi yaz
Tam bir doküman sitesi yaz. <!DOCTYPE html>, lang'li <html>, charset/viewport/<title> içeren <head> olsun. Gövdede bir atla bağlantısı (hedefi main'in id'si) ve <header>+<nav>, <main>, <aside>, <footer> bulunsun. <main> içinde <h2>'li bir <article> ve <pre><code> bloğu, <caption>+scope'lu <th> içeren bir <table> olsun. <aside> içinde <fieldset>+<legend>, <label for>↔id, required ve pattern içeren bir form olsun.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Klavye API dokümanları</title>
</head>
<body>
<a href="#content" class="skip-link">İçeriğe geç</a>
<header>
<h1>Klavye API dokümanları</h1>
<nav aria-label="Ana menü">
<a href="/anasayfa">Ana sayfa</a>
<a href="/yazilar">Yazılar</a>
</nav>
</header>
<main id="content">
<article>
<h2>Kurulum</h2>
<p>Aşağıdaki kodu terminalde çalıştırın:</p>
<pre><code>npm install klavye</code></pre>
</article>
<section>
<h2>Sürüm notları</h2>
<table>
<caption>Sürüm geçmişi</caption>
<thead>
<tr><th scope="col">Sürüm</th><th scope="col">Tarih</th></tr>
</thead>
<tbody>
<tr><td>1.0</td><td><time datetime="2026-01-15">15 Ocak 2026</time></td></tr>
</tbody>
</table>
</section>
<aside>
<h2>Geri bildirim</h2>
<form>
<fieldset>
<legend>İletişim</legend>
<label for="eposta">E-posta</label>
<input type="email" id="eposta" name="eposta" required>
<label for="mesaj">Mesaj</label>
<input type="text" id="mesaj" name="mesaj" required pattern="[A-Za-z0-9 ]{5,100}">
</fieldset>
</form>
</aside>
</main>
<footer>
<address>bilgi@klavye.example</address>
</footer>
</body>
</html>Kendini test et
-
Atla bağlantısının hedefi ne olmalı?
- header
- main
- footer
- aside
Cevabı göster
main — Doğru. Atla bağlantısı main kimliğine atıfta bulunur.
-
Atla bağlantısı
<a href="____" class="skip-link">İçeriğe geç</a>Cevabı göster
<a href="#content" class="skip-link">İçeriğe geç</a> -
Konu ve etiketi
- kısaltma
- abbr
- kod bloğu
- pre>code
- form grubu
- fieldset
- sütun biçimdirme
- colgroup