HTML ve CSS — Çalışma Sayfası

Bu konuda öğrenecekleriniz

• 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.

Önemli noktalar

• 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.

Formüller ve kurallar

• Sütun genişliği = (toplam genişlik - (sütun sayısı - 1) x aralık) / sütun sayısı.
• 1 rem = 16 piksel varsayımıyla 1,5 rem = 24 piksel, 0,875 rem = 14 piksel olur.
• fr birimi kalan alanı sütunlar arasında orantılı paylaşır, piksel gibi sabit uzunluk vermez.
• Sayfada bir tane h1 bulunur; başlık seviyeleri atlanmadan h2, h3 diye ilerler.
• Yazdırma düzeni @page ile A4 tanımlanır, kenar boşluğu milimetreyle, ekran düzeni pikselle verilir.
• Bölünmemesi gereken blok için break-inside: avoid, sayfa sonu için break-before: page kullanılır.
• Dört kenar boşluğu 15'er milimetre ise A4 metin alanı 210 - 30 = 180 milimetre olur.
• Tekrar eden renk ve ölçü tek CSS değişkeninde tutulur; değişiklik tek yerden yapı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.
• Tablo ve görselin sayfa ortasında bölünmesine göz yummak: Bölünmüş görsel sayfa sonunda yarım kalır; break-inside: avoid ile blok bütünlüğü korunur.
• Rengi sınıfa gömmek: Ana renk yerine adıyla çağrılan sınıf kullanıldığında marka rengi değiştiğinde onlarca dosya tek tek elden geçmek zorunda kalır.

Hızlı tekrar ipuçları

• Sütun hesabında önce aralıkları topla, sonra kalanı böl; iki işi karıştıran sorularda hata çıkış noktası budur.
• Yazdırma önizlemesini sık sık aç: ekran kusursuz görünse bile kağıtta taşan tek bir tablo işi geri gönderir.
• rem ile piksel karışımını bilinçli yap: gövde ve başlıklarda rem, çerçeve ve sınır kalınlıklarında piksel kullan.
• Başlık seviyelerini yalnızca yapı için seç, boyutunu CSS ile ver; böylece hem düzen hem erişilebilirlik korunur.
• Bir renk üçten fazla yerde tekrar ediyorsa CSS değişkenine taşı; değişiklik tek satırda tamamlanır.

Kendini dene

Bu sayfayı okuduktan sonra konu anlatımını tekrar oku ve kendi cümlelerinle özetle.

Konu anlatımına dön · Hesap aç, ilerlemen kaydedilsin