HTML ve CSS nedir?

Bu konuda neler öğreneceksin?

• Semantik HTML etiketleriyle erişilebilir bir belge iskeleti kurar.
• Başlık hiyerarşisini kurallarına uygun olarak sıralar.
• Izgara ve birim hesaplarıyla ekran düzenini piksel düzeyinde planlar.
• Yazdırma medya sorgularıyla baskıya uygun çıktı düzeni hazırlar.
• Stil dosyalarını değişkenler ve sınıflarla düzenli hâlde yönetir.

Anahtar fikirler

• Görünüşü düzeltmek için semantik etiketten vazgeçmek, erişilebilirliği ve arama görünürlüğünü kalıcı bozar.
• Piksel cinsinden sabit genişlik, küçük ekranda yatay kaydırmaya ve metnin taşmasına yol açar.
• Izgara hesabında aralıklar da toplanır; 11 aralık unutulursa sütun genişliği hep yanlış çıkar.
• Yazdırma çıktısı ekran görüntüsü değil, ayrı bir medya sorgusuyla üretilen PDF'tir.
• Sınıf adı içeriği değil rolü anlatır; renk adı verilen sınıflar tema değişikliğinde kırılır.
• Stil dosyaları tek yerde toplanmadığında aynı kural üç ayrı dosyada tekrarlanır ve uyumsuzluk doğar.

Konunun özeti

Sütun genişliği aralıklar çıkarıldıktan sonra bölünerek bulunur, rem ile piksel dönüşümleri 16 piksel üzerinden yapılır, başlıklar seviye atlamadan ilerler. Aşamalı kontrol; HTML doğrulama, ekran genişlikleri ve yazdırma önizlemesi şeklinde yürütülür.

Sık yapılan hatalar

• Izgarada aralık adedini unutmak: 12 sütunda 11 aralık vardır; 12 x 24 yerine 11 x 24 hesaplanmazsa sütun genişliği her seferinde birkaç piksel yanlış çıkar ve hizalanma kayar.
• Düzen için başlık etiketini kullanmak: Büyük yazılmış metnin etiketi h1 yapılamaz; başlık görselliği değil yapıyı belirtir, sahte başlık ekran okuyucu sırasını bozar.
• Yazdırmayı ekranı PDF'e çevirmekle çözmek: Menü, boş alanlar ve renkli zeminler kağıtta boşa harcanır; doğru yol @page tanımlı ayrı yazdırma medya sorgusudur.

İlgili konular

• Kullanıcı Deneyimi
• Tasarım Sistemi
• Duyarlı Tasarım
• Kare Animasyon
• Ara Değerleme