HTML ve CSS

Konu Anlatımı

HTML ve CSS

Bir web sayfasının HTML katmanı içeriğin anlamı ve sırasını, CSS katmanı ise bu içeriğin ekranda nasıl göründüğünü belirler. 11. sınıf düzeyinde amaç tek sayfalık bir tanıtım yapmak değil; katalog, bülten ve kampanya sayfası gibi, hem ekranda okunan hem de PDF'e dökülüp basılabilen çok sayfalı dijital yayınların iskeletini doğru kurmaktır. Anlam bozukluğu CSS ile düzeltilemez; bu yüzden işe yapıdan, yani semantik etiketlerle başlanır.

1. Semantik Belge İskeleti

Semantik etiket, kutunun ne olduğunu tarayıcıya ve ekran okuyucuya söyler. header logoyu ve üst menüyü, nav gezinmeyi, main sayfanın tek ana içeriğini, article kendi başına tamamlanan bir yazıyı, section konu bölümünü, footer ise künye ve iletişim bilgisini taşır. Aynı görünüme sahip olsalar da sırf düzen için kullanılan içi boş kutular, ekran okuyucuya hiçbir bilgi vermez ve erişilebilirliği bozar.

Başlıklar bir merdiven gibi kurulur: sayfada bir tane h1 bulunur, onun alt bölümleri h2, alt bölümlerin alt bölümleri h3 ile devam eder. Bir seviye atlanmaz, aynı seviyede iki ana başlık kullanılmaz. Bu sıra hem okuma düzenini hem de arama motorunun konu bütünü kurmasını sağlar.

2. CSS ile Sayfa Düzeni: Izgara ve Birimler

Geniş ekranlarda düzen ızgara ile kurulur: grid-template-columns sütun sayısını, gap sütun aralığını verir. fr birimi kalan alanı orantılı paylaşır; piksel yerine fr kullanılınca içerik ekran küçüldüğünde kendiliğinden sıkışır. Birimlerin seçimi de bilinçlidir: şablonda sabit ölçü için piksel, yüzde ile tanımlı kenar boşluğu için yüzde, yazı ölçeği için rem kullanılır. 1 rem, tarayıcının varsayılan gövde boyutu 1 piksel kabul edilmediğinde 16 pikseldir; 1,5 remlik gövde yazısı 16 x 1,5 = 24 piksel olur.

3. Çok Sayfalı Yayın: Akış ve Yazdırma Düzeni

Ekran ile baskı aynı dili konuşmaz. Ekran piksel, dijital ve görüntü renk uzayı ister; kâğıt ise milimetre, CMYK ve taşma payı ister. Bu yüzden yazdırma için ayrı bir medya sorgusu açılır: @page içinde A4 kağıt ve kenar boşlukları tanımlanır, gereksiz menü ve görseller gizlenir, uzun görsel ve tabloların sayfa ortasında bölünmemesi için break-inside: avoid verilir. Tek sütun okuma düzeni, yazdırmada iki sütuna geçerek kağıttan tasarruf eder ve okunabilirliği artırır.

Metinde tek kalan başlık ya da bölüm sonunda yarım kalan satır da bu aşamada kontrol edilir; gerekirse paragraf aralığı ve punto değiştirilerek satır dengesi sağlanır. Sayfa sonunda tek kalan tek kelimelik satırlar, okuma ritmini bozan en küçük ama en görünür hatadır.

4. Stil Yönetimi ve Tekrar Kullanım

Renk ve ölçü gibi tekrar eden değerler CSS değişkeni olarak bir kez yazılır, kullanım yerlerinde bu değişkene başvurulur. Ana renk üç yerde değişecekse üç dosya değil, tek değişken düzenlenir. Sınıf adları içeriği değil, rolü tarif eder: bulten-baslik ya da urun-kart; renk adı taşıyan sınıflar isim değişikliğinde sistemi bozar. Stil dosyaları sayfa başına birleştirilerek gereksiz ağ istekleri azaltılır.

5. Kontrol ve Sınav Odaklı Notlar

Kontrol sırası şöyledir: önce HTML doğrulama, sonra tarayıcıda ekran genişliklerinde gözden geçirme, en son yazdırma önizlemesinde kağıt kontrolü. Sınavda bu konudan ızgara genişliği hesapları, birim dönüşümleri, başlık sırası ve yazdırma kuralları sorulur. Atölyede kontrol edilen çıktı; semantik iskelet, hesaplanmış sütun değerleri, ekran ve PDF iki ayrı önizlemedir.

Ne Öğreneceğiz

11. sınıfta semantik belge iskeleti, ızgara düzeni, çok sayfalı dijital bülten ve yazdırma stilleri ele alınır. Bu konuda ögrenme çıktıları:

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

Ön Bilgi

Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:

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

Basit Örnek ve Günlük Yaşam

Günlük yaşamda ve mesleki bağlamda bir uygulama:

Soru: 1200 piksel genişliğinde, 12 sütunlu ve sütunlar arası 24 piksel boşluk bulunan bir sayfada tek sütun kaç pikseldir?

1. Adım 1: 12 sütun arasında 11 adet aralık bulunduğu belirlenir: 11 x 24 = 264 piksel.
2. Adım 2: Aralıklar toplamı genişlikten çıkarılır: 1200 - 264 = 936 piksel.
3. Adım 3: Kalan alan 12 sütuna bölünür: 936 / 12 = 78 piksel.

Sonuç/cevap: Cevap: Tek sütun 78 piksel genişliğindedir.

Adım Adım Çözülmüş Örnek

Örnek 1: Izgara Sütun Genişliğinin Hesaplanması konusunun adımları:

1. Adım 1: 12 sütun arasında 11 adet aralık bulunduğu belirlenir: 11 x 24 = 264 piksel.
2. Adım 2: Aralıklar toplamı genişlikten çıkarılır: 1200 - 264 = 936 piksel.
3. Adım 3: Kalan alan 12 sütuna bölünür: 936 / 12 = 78 piksel.

Karşılaştırma Tablosu

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.

Özet

HTML ve CSS konusunda 11. sınıf düzeyi iş, semantik iskeleti kurup ızgara ve doğru birimlerle düzeni hesaplamak ve aynı içeriği yazdırma medya sorgusuyla kâğıda hazırlamaktır. 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.

Kendini Dene

Soru: 1000 piksel genişliğinde, 6 sütunlu ve sütunlar arası 16 piksel boşluk bulunan bir sayfa düzeni için sütun genişliğini hesaplayınız; ardından gövde metni 1,25 rem ise piksel karşılığını (16 piksel kök boyutla) bulunuz ve tekrar eden renk/ölçülerin neden tek CSS değişkeninde tutulması gerektiğini açıklayınız.

Örnek cevap: Puanlama anahtarı: Formülün doğru kurulması (genişlik - (sütun - 1) × aralık) ÷ sütun 5 puan; aralık toplamının 5 × 16 = 80 piksel olduğunun bulunması 4 puan; sütun genişliğinin (1000 - 80) ÷ 6 ≈ 153,3 piksel hesaplanması 6 puan; 1,25 × 16 = 20 piksel dönüşümünün 3 puan; tek değişkenin değişikliği tek yerden uyguladığı ve tutarlılığı koruduğu gerekçesi 2 puan. Toplam 20 puan.