Meydan okuma - İleri seviye projesi
Tüm ileri konuları birleştiren bir dashboard sayfası yazarsın.
İleri seviye projesi meydan okuması
Bu son meydan okuma, ileri seviyenin tamamını birleştiren bir dashboard sayfası yazmanı ister: anlamsal iskelet, responsive görsel, erişilebilir video, karmaşık form ve veri tablosu.
Sayfa şu parçaları içermeli: <header>, <nav>, <main>, <aside>, <footer>; main içinde en az iki <section>; birinde <picture> ile hero, diğerinde <video> ve <track>; aside'da bir <table> (<thead>, <tbody>); main'in sonunda <form> içinde <fieldset> ve <output>. <noscript> yedeğini de unutma.
Uygulama İleri seviye dashboard sayfasını yaz
Aşağıdaki iskeletin <body>'sini doldur. <header> içinde bir <h1>; <nav> içinde üç <a href="#...">; <main> içinde iki <section> — birincide bir <picture> (en az bir <source> ve bir <img>); ikincide bir <video controls> içinde bir <source> ve bir <track kind="captions">. main'in sonuna bir <form> ekle; içinde bir <fieldset>, bir <label> + <input type="range"> ve bir <output>Bekliyor</output> olsun. <aside> içinde bir <table> (<thead>, <tbody> ve en az bir <tr>). Sayfa <footer> ve <noscript> ile bitsin.
Ö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>Panel</title>
</head>
<body>
<header>
<h1>Seyahat Paneli</h1>
</header>
<nav>
<a href="#galeri">Galeri</a>
<a href="#video">Video</a>
<a href="#kayit">Kayıt</a>
</nav>
<main>
<section id="galeri">
<h2>Galeri</h2>
<picture>
<source media="(min-width: 800px)" srcset="/gorseller/pano-genis.jpg">
<img src="/gorseller/pano-dar.jpg" alt="Panorama" width="1200" height="600" loading="lazy">
</picture>
</section>
<section id="video">
<h2>Tanıtım</h2>
<video controls poster="/medya/on-kare.jpg">
<source src="/medya/tanitim.mp4" type="video/mp4">
<track kind="captions" srclang="tr" label="Türkçe" src="/medya/altyazi-tr.vtt">
</video>
</section>
<form action="/kayit" method="post">
<fieldset>
<legend>Tercih</legend>
<label for="oncesi">Önceki</label>
<input id="oncesi" name="oncesi" type="range" min="0" max="100">
<label for="sonuc">Durum</label>
<output id="sonuc" name="sonuc">Bekliyor</output>
</fieldset>
</form>
</main>
<aside>
<h2>Geçmiş</h2>
<table>
<thead>
<tr>
<th scope="col">Tarih</th>
<th scope="col">Şehir</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mayıs</td>
<td>İstanbul</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<p>© 2026 Seyahat Paneli</p>
</footer>
<noscript>Tarayıcın JavaScript'i kapalı; bazı bölümler görünmeyebilir.</noscript>
</body>
</html>Kendini test et
-
Dashboard'da yan panele (son etkinlikler, hızlı bağlantılar) hangi anlamsal etiket uyar?
- <section>
- <aside>
- <article>
- <main>
Cevabı göster
<aside> — Doğru. <aside> ana içerikle ilgili ama yan/tamamlayıcı içerik taşır; panel buna uyar.
-
noscript yedeğini yaz
<main> <section>...</section> </main> <____>Tarayıcın JavaScript'i kapalı; bazı bölümler görünmeyebilir.</noscript>Cevabı göster
<main> <section>...</section> </main> <noscript>Tarayıcın JavaScript'i kapalı; bazı bölümler görünmeyebilir.</noscript> -
Anlamsal etiketi rolüyle eşleştir
- <main>
- Ana içerik
- <aside>
- Yan panel
- <section>
- Bölüm
- <article>
- Bağımsız kart
- <noscript>
- Betik yedeği