Web Sitesi Kodlama Eğitimi – 3: Düzen ve Yerleşim (Layout)
Web tasarımında estetik tek başına yeterli değildir; öğelerin sayfadaki yerleşimi kullanıcı deneyimi (UX) için kritiktir. Bu kodlama eğitimi kapsamında, bir web sayfasındaki bileşenleri nasıl profesyonelce hizalayacağınızı ve modern yerleşim tekniklerini öğreneceksiniz.
1. CSS Kutu Modeli (Box Model)
Web dünyasında gördüğünüz her öğe aslında görünmez bir kutunun içindedir. Bu kutuyu yönetmek, sayfa düzeninin temelidir.
Content (İçerik): Yazı veya resmin bulunduğu en iç alan.
Padding (İç Boşluk): İçerik ile çerçeve arasındaki boşluk.
Border (Çerçeve): Kutunun kenarlığı.
Margin (Dış Boşluk): Kutunun diğer öğelerle arasındaki mesafe.
2. Display Özelliği: Elementlerin Davranışı
Elementlerin sayfada kapladığı alan ve yan yana gelme durumları display özelliği ile belirlenir.
Block: Tüm satırı kaplar (Örn: <div>, <h1>).
Inline: Sadece içeriği kadar yer kaplar ve yan yana dizilir (Örn: <span>).
Inline-Block: Hem yan yana dizilir hem de genişlik/yükseklik değerlerini kabul eder.
3. Modern Hizalama: Flexbox
Günümüzde bu kodlama eğitimi içeriğinin en önemli tekniklerinden biri Flexbox’tır. Artık öğeleri merkeze almak veya yan yana dizmek bir işkence değil.
display: flex; Konteynırı esnek hale getirir.
justify-content: Öğeleri yatay eksende (başta, sonda, merkezde) hizalar.
align-items: Öğeleri dikey eksende hizalar.
4. Genişlik ve Yükseklik Yönetimi
Sitenizin farklı ekranlarda bozulmaması için ölçü birimlerini doğru kullanmalısınız.
Sabit Değerler (px): Değişmeyen kesin ölçülerdir.
Esnek Değerler (% , vh, vw): Ekran boyutuna göre şekil alan ölçülerdir. SEO uyumlu ve mobil dostu bir yapı için % ve max-width kullanımı hayati önem taşır.
5. Konumlandırma (Positioning)
Bazen bir öğeyi sayfanın akışından çıkarıp özel bir yere sabitlemek gerekir.
Relative: Kendi normal konumuna göre yer değiştirir.
Absolute: En yakın üst kapsayıcıya göre konumlanır.
Fixed: Sayfa kaydırılsa bile ekranda sabit kalır (Örn: Sabit menüler).
Uzmanından İpuçları ve Sık Yapılan Hatalar
Uzman bir web geliştirici olma yolunda, tasarımın profesyonel görünmesini sağlayan en kritik unsurlardan biri boşluk yönetimidir. Yeni başlayanların en sık karşılaştığı hata, margin ve padding değerlerini birbiriyle karıştırmaktır. Bu karışıklık, sayfa öğelerinin birbirine yapışmasına veya tasarımın mobil cihazlarda tamamen bozulmasına neden olur.
Temel kuralı unutmamak gerekir: Bir kutunun dış dünyayla olan mesafesini ayarlamak için margin, kutu içeriği ile kenarlık arasındaki iç boşluğu belirlemek için ise her zaman padding tercih edilmelidir. Doğru boşluklandırma, kullanıcı deneyimini doğrudan iyileştirir ve içeriğin okunabilirliğini artırır.
Bu teknikleri içselleştirmek için teorik bilgiyi pratikle birleştirmelisiniz. Kodlama eğitimi sürecinde öğrendiğiniz Flexbox yapısını daha iyi anlamak için tarayıcıların geliştirici araçlarını (F12) aktif kullanın. Canlı denemeler yaparak değerleri değiştirmek, mizanpajın nasıl tepki verdiğini görmenizi sağlar. Hatalarınızı bu araçlarla tespit etmek, sizi çok daha hızlı bir şekilde profesyonelliğe taşıyacaktır.
Sıkça Sorulan Sorular (SSS)
Soru 1: Flexbox varken neden hala Float kullanılıyor? Cevap: Eski sitelerde yaygın olsa da modern web standartlarında Float artık yerleşim için kullanılmıyor. Flexbox ve CSS Grid çok daha güçlü çözümler sunar.
Soru 2: Sitem mobil cihazlarda neden bozuk görünüyor? Cevap: Muhtemelen öğelere sabit width: 1000px gibi değerler verdiniz. Bunun yerine max-width: 100% kullanarak içeriğin ekrana sığmasını sağlayabilirsiniz.
Soru 3: Padding ve Margin arasındaki en temel fark nedir? Cevap: Padding kutunun “içindeki” boşluktur, Margin ise kutunun “dışındaki” dünyayla olan mesafesidir.
Soru 4: En iyi kodlama eğitimi yöntemi hangisidir? Cevap: Sadece okumak yetmez. Öğrendiğiniz her yerleşim kuralını boş bir HTML sayfasında farklı renkli kutular (div) oluşturarak test etmelisiniz.
Soru 5: Hangi konumlandırma (position) türü menüler için idealdir? Cevap: Sayfa kayarken yukarıda asılı kalan bir menü istiyorsanız position: fixed; kullanmalısınız.
Bölüm Özeti ve Gelecek Ders
Bu bölümde bir web sayfasının nasıl organize edildiğini ve öğelerin nasıl hizalandığını gördük. Artık kutu modelini ve Flexbox’ın gücünü biliyorsunuz.
Eğitim 4’te bizi ne bekliyor? Sıradaki dersimizde “Responsive Tasarım ve Medya Sorguları (Media Queries)” konusuna geçeceğiz. Yazdığımız kodların sadece bilgisayarda değil, telefon ve tabletlerde de kusursuz görünmesini sağlayacağız.
Uygulama Ödevi: Bir kapsayıcı div oluşturun ve içine 3 adet küçük kutu ekleyin. Flexbox kullanarak bu 3 kutuyu sayfanın tam ortasında yan yana hizalayın!