Hakkında ve iletişim
Hakkında sayfası ve iletişim sayfası için iskeleti kurarsın.
Hakkımızda bölümü
Hakkımızda sayfası derginin hikayesini anlatır. Ana sayfada bu bölüm bir <section> olarak yer alır; içinde <h2> başlığı ve bir <article> bulunur. Article, <h3> ve <p> ile yazılır.
İletişim bilgisini taşımak için article içine <address> eklenir. address yalnızca iletişim bilgisi taşır; bu yüzden footer'daki address'ten farklı olarak içerikte de kullanılabilir.
İletişim formu
İletişim section'ı bir <form> taşır. Form içinde her alan bir <label> ve <input> çiftinden oluşur. label for özniteliğiyle, input id özniteliğiyle eşleştirilir.
Uzun mesajlar için <textarea> kullanılır. Mesaj alanına ipucu vermek için içerik değil, placeholder özniteliği yazılır. Form, <button type="submit"> ile gönderilir.
Uygulama main'e hakkımızda ve iletişim bölümlerini ekle
main içinde var olan section'dan sonra iki yeni <section> ekle. Birincisinde <h2>Hakkımızda</h2> ve bir <article> olsun; article içinde <h3>, <p> ve <address> bulunsun. İkincisinde <h2>İletişim</h2> ve bir <form> olsun; form içinde üç alan (label for= + input id=) ve bir <textarea> (placeholder ile) ve bir submit <button> bulunsun.
Ö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">
<title>Peynir Dergisi</title>
</head>
<body>
<header>
<nav>
<a href="/">Peynir Dergisi</a>
<a href="/yazilar">Yazilar</a>
<a href="/hakkimizda">Hakkimizda</a>
<a href="/iletisim">Iletisim</a>
</nav>
</header>
<main>
<h1>Peynir Dergisi</h1>
<p>Peynir kültürüne dair yazılar, tarifler ve üretici hikayeleri.</p>
<section>
<h2>Son yazılar</h2>
<article>
<h3>Ezine peyniri</h3>
<p>Trakya'nın beyaz peynirinin üretim aşamalarını inceledik.</p>
</article>
<article>
<h3>Van otlu peyniri</h3>
<p>Doğu Anadolu'nun otlu peynirinde kullanılan bitkileri tanıdık.</p>
</article>
</section>
<section>
<h2>Hakkımızda</h2>
<article>
<h3>Hikayemiz</h3>
<p>Peynir Dergisi 2018'den beri yerel üreticilerin hikayelerini paylaşıyor.</p>
<address>
Peynir Dergisi, Beyoglu, Istanbul
</address>
</article>
</section>
<section>
<h2>İletişim</h2>
<form action="/iletisim" method="post">
<label for="ad">Adınız</label>
<input type="text" id="ad" name="ad" required>
<label for="eposta">E-posta</label>
<input type="email" id="eposta" name="eposta" required>
<label for="mesaj">Mesajınız</label>
<textarea id="mesaj" name="mesaj" placeholder="Mesajınızı buraya yazın"></textarea>
<button type="submit">Gönder</button>
</form>
</section>
</main>
<footer>
<address>
Peynir Dergisi, Beyoglu, Istanbul
</address>
<p>(c) 2026 Peynir Dergisi</p>
</footer>
</body>
</html>Kendini test et
-
İletişim formunda label ve input nasıl eşleştirilir?
- <label>Ad</label><input>
- <label name="ad">Ad</label><input name="ad">
- <label id="ad">Ad</label><input id="ad">
- <label for="ad">Ad</label><input id="ad">
Cevabı göster
<label for="ad">Ad</label><input id="ad"> — Doğru. label for ve input id aynı değeri taşır; böylece ekran okuyucu ikisini bağlar.
-
label ve input eşleştirmeyi tamamla
<label for="ad">Adiniz</label><input type="text" id="____" name="ad" required>Cevabı göster
<label for="ad">Adiniz</label><input type="text" id="ad" name="ad" required> -
Form elemanını rolüyle eşleştir
- label
- Alan adı
- input
- Tek satır veri
- textarea
- Çok satır metin
- button
- Formu gönder