HTML
Meydan okuma - Uzman projesi
Tüm uzman konularını birleştiren bir uygulama iskeleti yazarsın.
Uzman projesi: genel bakış
Bu meydan okuma tüm expert seviyesini bir araya getiren bir uzman portföy sayfası kurmanı ister. Sayfa; erişilebilir diyalog, ARIA sekmeleri, çok dilli head, güvenlik paketi ve duyarlı görselleri birleştirmeli. Belge iskeletini doğru kur: <!DOCTYPE html>, <html lang="tr" dir="ltr">, head'de charset ve viewport.
Güvenlik için CSP ve referrer metalarını ekle; çok dilli için canonical ve hreflang bağlantılarını ver. İçerikte landmark'lar (header, nav, main, footer), görsellerde <picture> ve <source> kullan. Erişilebilir diyalogu da unutma.
Uygulama Uzman portföyünün head bölümü
Uzman portföyünün head bölümünü yaz. <!DOCTYPE html> ile başla; kök etiket <html lang="tr" dir="ltr"> olsun. head içine CSP meta (http-equiv="Content-Security-Policy"), referrer meta (name="referrer") ve <link rel="canonical"> bağlantısı ekle.
Örnek çözümü göster
doctype, kök etiket, üç meta ve canonical bağlantısı.
Örnek çözüm:
<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta name="referrer" content="no-referrer">
<link rel="canonical" href="https://site.example/tr/">
<title>Uzman Portföy</title>
</head>
<body>
</body>
</html>
Uygulama Uzman portföyünün body bölümü
Uzman portföyünün body bölümünü yaz. Sırasıyla <header>, <nav> ve <main> landmark'larını içerikleriyle ekle. <main> içine bir <picture> öğesi ve içinde bir <source> etiketi koy. Son olarak aria-modal="true" içeren bir <dialog> öğesi ekle.
Örnek çözümü göster
Üç landmark, main içinde picture+source, son olarak aria-modal'lı diyalog.
Örnek çözüm:
<body>
<header>
<h1>Uzman Portföy</h1>
</header>
<nav>
<a href="/tr/">Ana sayfa</a>
</nav>
<main>
<picture>
<source srcset="cover-wide.webp" media="(min-width: 800px)">
<img src="cover-narrow.webp" alt="Portföy kapak görseli" width="800" height="600">
</picture>
<button>Ayarları aç</button>
</main>
<dialog aria-modal="true" aria-labelledby="settings-title">
<h2 id="settings-title">Ayarlar</h2>
<button>Kapat</button>
</dialog>
</body>
Kendini test et
-
Head'de zorunlu olarak hangisi bulunmalı?
- <meta name="author">
- <link rel="preconnect">
- <meta charset="utf-8">
- <meta name="theme-color">
Cevabı göster
<meta charset="utf-8"> — Doğru. charset meta karakter kodlamasını bildirir ve zorunludur.
-
Kök etiketi kur
<!DOCTYPE html>
<____>
<head>
</head>
<body>
</body>
</html>
Cevabı göster
<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
</head>
<body>
</body>
</html>
-
Landmark etiketlerini eşleştir
- header
- Sayfa başlığı bölgesi
- nav
- Gezinme bağlantıları
- main
- Ana içerik
- aside
- Yan içerik
- footer
- Dip not bilgileri
-
canonical bağlantısı ne için kullanılır?
- Yinelenen içerikte ana sürümü işaretler
- Sayfanın SSL sertifikasını bildirir
- Dış bağlantıları güvenceye alır
- Dil kodunu tanımlar
Cevabı göster
Yinelenen içerikte ana sürümü işaretler — Doğru. canonical, yinelenen sürümler arasında ana sayfayı işaretler.
-
Aşağıdakilerden hangisi doğrudur?
- CSP yalnızca HTTP başlığında verilebilir
- aria-modal="true" diyalogun modal olduğunu bildirir
- canonical yinelenen sürümleri gizler
- noopener yalnızca Chrome'da çalışır
Cevabı göster
aria-modal="true" diyalogun modal olduğunu bildirir — Doğru. aria-modal="true" modal durumu ekran okuyucuya bildirir.
Sıradaki ders: Uzman bölüm sınavı
