Meydan okuma - Başlangıç projesi
Tüm başlangıç konularını birleştiren kişisel bir ana sayfa yazarsın.
Başlangıç projesini hatırla
Bu son meydan okuma, başlangıç seviyesinin tamamını birleştirir: belge iskeleti, metin, bağlantılar, listeler, tablolar, görseller ve formlar. Amacımız, anlamsal etiketlerle sarılı, gerçek bir kişisel ana sayfa kurmak.
Önce <header>, <nav>, <main>, <footer> ile sayfanın iskeletini çıkar. Sonra main içine bölümler ekle: bir <section> kendini tanıtır, başka bir bölüm seyahat programını tablo ya da liste ile gösterir, son bölüm bir iletişim formu taşır. Bu yapı, hem düzgün hem erişilebilir bir sayfa verir.
Uygulama Kişisel ana sayfayı yaz
Aşağıdaki iskeletin body içine bir kişisel ana sayfa kur. <header> içinde bir <h1> başlık; <nav> içinde üç <a href="#..."> bağlantısı; <main> içinde en az iki <section> (biri hakkında, biri iletişim) ekle. İletişim bölümünde <form>, bir <label> + <input> ve bir <button type="submit"> bulunsun. Sayfa <footer> ile bitsin.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Kişisel Ana Sayfa</title>
</head>
<body>
<header>
<h1>Ayşe'nin Sayfası</h1>
</header>
<nav>
<a href="#about">Hakkımda</a>
<a href="#diary">Günlük</a>
<a href="#contact">İletişim</a>
</nav>
<main>
<section id="about">
<h2>Hakkımda</h2>
<p>İstanbul'da yaşayan bir gezginim.</p>
</section>
<section id="diary">
<h2>Seyahat Programı</h2>
<ul>
<li>Mayıs: Kapadokya</li>
<li>Haziran: Efes</li>
</ul>
</section>
<section id="contact">
<h2>İletişim</h2>
<form action="/mesaj" method="post">
<label for="ad">Ad</label>
<input id="ad" name="ad" type="text">
<button type="submit">Gönder</button>
</form>
</section>
</main>
<footer>
<p>© 2024 Ayşe</p>
</footer>
</body>
</html>Kendini test et
-
Kişisel ana sayfada menü bağlantıları hangi anlamsal etiketin içine konur?
- <main>
- <nav>
- <footer>
- <aside>
Cevabı göster
<nav> — Doğru. <nav> menü ve bağlantı toplu halde taşımak içindir.
-
Başlıklı görseli yaz
<figure> <img src="manzara.jpg" alt="Dağ manzarası" width="640" height="360"> <____>Günlük gezimden bir kare</figcaption> </figure>Cevabı göster
<figure> <img src="manzara.jpg" alt="Dağ manzarası" width="640" height="360"> <figcaption>Günlük gezimden bir kare</figcaption> </figure> -
Anlamsal etiketi rolüyle eşleştir
- <article>
- Bağımsız içerik
- <aside>
- Yan içerik
- <section>
- Bölüm
- <figure>
- Görsel ve başlığı
- <address>
- İletişim bilgisi