10. Sınıf · 4. hafta
Bugün öğreneceklerimiz
HTML yapısını koruyarak okunur ve dar ekrana uyumlu bir CSS tasarımı yap.
- Seçici, özellik ve değeri ayırırım.
- Görünümü geniş ve dar pencerede kontrol ederim.
Derse hazırlık · araçlar ve ön bilgiler
Araçlar: Önceki haftanın index.html dosyası; düz metin editörü; tarayıcı.
Ön bilgi: HTML head/body ve başlık/paragraf yapısı.
Öğretmen, gerekli dosya ve uygulamaları ders başlamadan hazırlar. Anlatım, örnek inceleme, çoktan seçmeli sorular ve açıklamaları 40 dakikalık akışın içindedir. Küçük yaşlarda metinler öğretmen tarafından sesli okunur.
Önce bilgiyi oku, sonra yanındaki çoktan seçmeli soruyu çöz. Kaydırarak altı bölümde ilerle; “Kesintisiz oku” ile bütün dersi birlikte görebilirsin.
0–4. dakika · 4 dk
Konuyu tanı
Ders anlatımı
CSS kuralında seçici hedef elemanı, özellik değişecek yönü, değer yeni ayarı belirtir. h1 seçicisi ana başlık elemanlarına uygulanır.
Ayrıntısıyla öğren
CSS kuralında seçici hangi elemanlara uygulanacağını, özellik neyin değişeceğini, değer ise yeni ayarı belirtir. Örneğin h1 { color: #9f1239; } ana başlığın rengini değiştirir. Noktalı virgül bildirimleri ayırır.
4–12. dakika · 8 dk
Temel bilgiler
Ders anlatımı
color metin rengini belirleyen özelliktir. Aynı kuralda red değerdir; özellik ve değer iki nokta ile ayrılır.
Ayrıntısıyla öğren
HTML içerik yapısını korurken CSS görünümü düzenler. Metin rengi ile zemin arasında yeterli ayrım, rahat satır aralığı ve sınırlı metin genişliği okunurluğa yardımcı olur. Bilgiyi yalnızca renkle ayırmayız.
12–20. dakika · 8 dk
Yakından incele
Ders anlatımı
HTML içerik yapısını korurken CSS görünümü düzenler. Başlığın rengini değiştirmek, onun ana başlık olma görevini değiştirmez.
Ayrıntısıyla öğren
Sabit ve çok geniş bir kutu dar ekranda taşabilir. max-width ve esnek genişlik kullanıp pencereyi daraltarak kontrol ederiz. Önceki haftadaki viewport etiketi mobil görünüm için korunur. Bu ders animasyon veya karmaşık yerleşim eklemeyecek.
20–32. dakika · 12 dk
Örnek üzerinden öğren
Ders anlatımı
Okunurluk, metin ve zemin arasındaki ayrım ile rahat satır aralığından etkilenir. Bilgiyi yalnızca renkle anlatmak bazı kullanıcılar için yetersiz kalabilir.
<style>
* { box-sizing: border-box; }
body {
margin: 0;
background: #f8fafc;
color: #172033;
font-family: Arial, sans-serif;
line-height: 1.6;
}
main {
width: 100%;
max-width: 48rem;
margin: 0 auto;
padding: 1.5rem;
}
h1 { color: #9f1239; }
</style>Açık zemin, koyu metin ve bordo başlık görünür. Geniş ekranda içerik sınırlı genişlikte ortalanır; dar pencerede metin kutuya uyum sağlar.
32–37. dakika · 5 dk
Bilgini geliştir
Ders anlatımı
Çok geniş sabit kutular dar ekranda taşabilir. Esnek genişlik ve max-width, içerik alanının ekrana uygun kalmasına yardımcı olur.
37–40. dakika · 3 dk
Konuyu pekiştir
Ders anlatımı
Pencereyi daraltıp metin ve kutuları incelemek gerçek bir kontroldür. Viewport bilgisi korunur; masaüstünde düzgün görünmek mobilde de düzgün olmayı garanti etmez.
Bu dersin özeti
- CSS kuralında seçici hedef elemanı, özellik değişecek yönü, değer yeni ayarı belirtir. h1 seçicisi ana başlık elemanlarına uygulanır.
- HTML içerik yapısını korurken CSS görünümü düzenler. Başlığın rengini değiştirmek, onun ana başlık olma görevini değiştirmez.
- Çok geniş sabit kutular dar ekranda taşabilir. Esnek genişlik ve max-width, içerik alanının ekrana uygun kalmasına yardımcı olur.