html-sayfa-duzeni


Web siteleri genellikle içeriği birden çok sütunda (bir dergi veya gazete gibi) görüntüler.

HTML5, bir web sayfasının farklı bölümlerini tanımlayan yeni semantik öğeler sunar:



HTML5 Semantik Öğeler

< header> - Bir belgenin veya bölümün üstbilgisini tanımlar

< nav> - Gezinme bağlantıları için bir kapsayıcı tanımlar

< section> - Bir belgedeki bir bölümü tanımlar

< article> - Bağımsız bir bağımsız makaleyi tanımlar

< aside> - İçeriği, içerikten ayırır (bir kenar çubuğu gibi)

< footer> - Bir belge veya bölüm için altbilgi tanımlar

< details> - Ek ayrıntıları tanımlar

< summary> - <details> öğesi için bir başlık oluşturmasını tanımlar



Çok sütunlu düzenleri oluşturmak için dört farklı yol vardır. Her bakımdan artı ve eksileri vardır:

HTML tabloları

CSS float özelliği

CSS çerçevesi

CSS flexbox



< Table> öğesi bir düzen aracı olacak şekilde tasarlanmamıştır! <Table> öğesinin amacı tablolama verilerini görüntülemektir. Yani, sayfa düzeniniz için tablolar kullanmayın! Kodunuza bir karışıklığa neden olacaklar. Ve birkaç ay sonra sitenizi yeniden tasarlamanın ne kadar zor olacağını hayal edin.



İpucu: Sayfa düzeniniz için tablolar KULLANMAYIN!



Tüm web düzenlerini CSS float mülkü kullanarak yapmak yaygın bir işlemdir. Float'un öğrenilmesi kolaydır sadece şamandıranın ve berrak özelliklerin nasıl çalıştığını hatırlamanız gerekir. Dezavantajları: Yüzen unsurlar belge akışına bağlıdır ve bu da esnekliğe zarar verebilir.



CSS Flexbox

Flexbox, CSS3'te yeni bir düzen modudur.

Flexbox kullanımı, sayfa düzeni farklı ekran boyutları ve farklı görüntüleme cihazları barındırması gerektiğinde öğelerin öngörülebilir şekilde hareket etmesini sağlar. Dezavantajları: IE10 ve daha önceki sürümlerinde çalışmaz.



Sayfa Duzeni arama motorlarında ön planda tutulur.