1. Görünümden önce yapı
Ders sonunda
- Başlık, etiket ve düğmeleri amaçlarına göre seç.
- Girdi alanını görünür etikete bağla.
Önce ziyaretçinin ihtiyacını yaz: planlayıcı ne yapar, ne girilir, sonuç nerede görünür? Başlık sayfayı adlandırır; paragraf açıklar; form alanları ve gönderme eylemini toplar. Stiller yüklenmese de bu roller önemlidir.
Görünür etiket, yer tutucu metin değildir. Etiketin for değerini alanın id değerine bağla. İpucu birimi açıklayabilir ama adın yerini tutmaz. Klavye etkinleştirmesini yeniden yazmamak için gerçek düğme kullan.
planner.html dosyasını oluştur, UTF-8 kaydet ve yerel olarak aç. Aşağıdaki parça için <!doctype html>, html lang="tr" (veya "en"), title ve main içeren belge kabuğu gerekir. Henüz hesaplama yoktur: okunabilir yapıyı davranıştan ayır.
Çözümlü örnek
Süre alanını, yazınca da birimi görünür kalacak şekilde adlandır.
- Alana benzersiz minutes kimliğini ver.
- label for içinde aynı değeri kullan. Birimi etikete ekle.
- Eylemi form içindeki bir gönderme düğmesi yap.
<form id="planner">
<label for="minutes">Minutes per session</label>
<input id="minutes" name="minutes" type="number" min="1" required>
<button type="submit">Calculate</button>
</form>Etikete tıklamak alanı odaklar. Tab ile alana ve düğmeye ulaşılır.
Kendin dene
Haftalık oturum sayısı için ikinci alan ve sonuç için boş paragraf ekle. Henüz JavaScript ekleme.
- Her alanın farklı kimliği ve eşleşen görünür etiketi var.
- Düğmeye Tab ile ulaşılır; her etiket doğru alanı odaklar.
Alıştırmanın çözümünü göster
id="sessions" ile label for="sessions" kullan. Sonuç paragrafına id="result" ve role="status" ver; sonraki sonuç güncellemeleri duyurulabilsin.
Bu hataya dikkat: Büyük ve kalın paragraf başlık gibi görünebilir ama başlık yapısını sunmaz. Önce anlamlı öğeyi seç.
Kaynaklar ve kontrol tarihi
- MDN: Structuring content with HTML
HTML yapısı, anlamı ve ön koşul bağlamı. Kontrol: .
Açıklamalar, örnekler ve kısa sınav soruları özgün KitForma içeriğidir. Bağlantılar teknik bilgileri ve müfredat uyumunu destekler.