11. SınıfBilişim Teknolojileri
HTML Yapısı — Çalışma Sayfası
Kazanımlar, önemli noktalar ve sık yapılan hatalar tek sayfada.
Bu konuda öğrenecekleriniz
- HTML5 belge iskeletini (DOCTYPE, head, body, meta) ve semantik etiketlerin işlevini açıklar.
- Form alanlarını doğrulama nitelikleriyle tasarlar ve label-alan eşleşmesini uygular.
- Başlık hiyerarşisi, klavye erişimi ve kontrast ölçütleri açısından erişilebilir belge oluşturur.
- Geçersiz işaretleme kaynaklı hataları denetim araçlarıyla tespit edip giderir.
- Karakter seti, dil ve açıklama meta bilgilerini doğru kullanarak sayfanın doğru okunmasını sağlar.
Önemli noktalar
- Semantik etiketler anlamı bildirir; div ve span yalnızca düzen içindir.
- label'ın for değeri ile alanın id değeri birebir aynı olmalıdır.
- required, type, pattern, min-max nitelikleri hatayı gönderimden önce yakalar.
- Karakter seti UTF-8, viewport bildirimi ve tek title tüm sayfalarda bulunur.
- Tarayıcı tarafı doğrulama, sunucu tarafı doğrulamanın yerine geçmez.
- Başlık seviyeleri atlanmaz; yalnız büyük yazı için CSS kullanılır.
Formüller ve kurallar
- DOCTYPE html + html lang + meta charset: geçerli belgenin zorunlu başlangıcı.
- label for değeri = input id değeri → tıklanabilir etiket ve erişilebilir alan.
- required, type='email', pattern: tarayıcı tarafı doğrulama üçlüsü.
- h1 → h2 → h3: kesintisiz başlık hiyerarşisi, sayfada tek h1.
- Semantik bölümler: header, nav, main, article, section, aside, footer.
- Erişilebilirlik kontrast eşiği (AA): normal metin için 4,5:1, büyük metin için 3:1.
- Form gönderimi: action hedefi, method ise GET veya POST seçimidir.
Sık yapılan hatalar
- Semantik etiket yerine div yığını kullanmak: Ekran okuyucu bölümleri ayırt edemez, arama motoru içerik hiyerarşisini okuyamaz.
- Label ile alanın for ve id değerlerini farklı yazmak: Alana tıklamak etikete düşmez, mobil klavye ve ekran okuyucu bozulur.
- Form verisini yalnız tarayıcıda doğrulamak: İstek konsoldan doğrudan atılabildiği için hatalı veri sunucuya ulaşır.
- Başlık seviyelerini atlayarak kullanmak: h1'den h3'e geçmek belge hiyerarşisini bozar ve ekran okuyucu gezinmesini kırar.
- Görselleri alternatif metinsiz yerleştirmek: Ekran okuyucu içeriği anlatamaz, erişilebilirlik denetimi başarısız olur.
Hızlı tekrar ipuçları
- İskeleti semantik etiketlerle kur, düzeni CSS'e bırak; HTML'i görsel kutu olarak kullanma.
- Her giriş alanını label ile eşleştir ve for-id bağını denetim eklentisiyle kontrol et.
- Sınavda önce DOCTYPE, dil ve charset bildirimini, sonra form doğrulama niteliklerini ara.
- Doğrulamayı iki katmanlı düşün: tarayıcı kullanıcıya kolaylık, sunucu gerçeği korur.
- Başlık hiyerarşisini h1'den kesintisiz tara; birden fazla h1 kullanma.
Kendini dene
Bu sayfayı okuduktan sonra konu anlatımını tekrar oku ve kendi cümlelerinle özetle.