Merhaba.

HTML eğitimlerimize temel etiketlerimizden olan div ve span ile devam ediyoruz.

Div etiketi sayfalarınızı bölümlere ayırmanızı sağlayan bir nevi tasarım bölümlerini oluşturmanıza yardımcı olan etikettir. Division kelimesinin kısaltmasıdır. Div etiketi style ve CSS özellikleri yardımı ile, oluşturulan alanları konumlandırmanıza yardımcı olur. Diğer etiketler gibi tek başına anlamlı bir etiket değildir, Görünür ve anlamlı hale gelmesi için mutlaka style ve CSS özellikleri ile beraber kullanılmalıdır. Div ile oluşturduğunuz alanlar ile çalışmış olduğunuz sayfayı daha efektif yönetebilirsiniz. İstediğiniz bölümlere istediğiniz alanları açıp bu alanlarda istediğiniz işlemleri yaptırabilmeniz bir sitenin görselini kuvvetlendiren önemli bir unsurdur.

İlk alanımızı yaratarak işe başlayalım.

<div class=”Header” style=”height:Apx; width:Bpx;”>Header</div>

Class diye belirttiğimiz alan ile ileride CSS sınıflarını işaret edeceğiz şu ana kadar olan derslerimizde bunları görmedik, ama yazmayı öğrenelim.

HTML de biraz bilgisi olan arkadaşların kafasını şu konu karıştırabilir. Aynı bölümlendirme olayını <table></table> etiketi ile de yapabiliyorduk. Niçin div sorusu akıllara gelebilir.

1.div ile kodlanan sayfalar çok daha hızlı yüklenir. Sayfanın hızlı yüklenmesi çok önemli bir özelliktir. Hız ile ilgili sayısal verilerden biraz bahsetmek gerekirse şunları diyebiliriz.

Google için site hızında 500 milisaniyelik (yarım saniye) yavaşlama, trafikte %20 azalmaya sebep olmuş.

Amazon için site hızında 100 milisaniyelik (saniyenin onda biri) yavaşlama, ciroda %1 azalmaya sebep olmuş.

Yahoo için site hızında 400 milisaniyelik (0.4 saniye) yavaşlama, trafikte %5-9 azalmaya sebep olmuş.

2. Daha düzenli kodlamanıza yardımcı olur bu da takım çalışmalarında büyük avantajlar sağlar. Tekrar düzenleme ve değişimlerde büyük hız kazandırır.

3. Seo açısından da büyük avantajlar sağlar. Google gibi arama motorları div kodlamalara indexleme yaparken öncelik tanır.

Div konusunda biraz daha detaylı inceleyecek olursak;

Div bir block elementtir. Yani block element olması nedeniyle kesme işlemi yapar. Yani şöyle daha anlaşılır ifade edebiliriz. h1 gibi, p gibi elementleri kullandığımızda element kendisi bir alt satıra geçme kodunu barındırır bu işlemi yapar demiştik. Aynı bu elementler gibi div elementi de aynı görevi yerine getirir.

Bir örnekle görelim. 

İki div elementini herhangi bir ayırıcı etiket kullanmadan alt alta yazdığımızda yan yana değil alt alta oluştuğunu görürüz.

Genişlik ve Yükseklik Özellikleri

Eğer bir div elementine genişlik değeri vermezseniz tarayıcınızın genişliği ne kadarsa otomatik olarak alan öyle oluşur.

Eğer height özelliğini vermez isek div içerisine yerleştirdiğimiz ya da yazdığımız yazının boyutu kadar otomatik boyutlanacaktır.

Span Etiketi

Span etiketi de alanlar oluşturmak için kullanılır. Ancak bir block element değildirler. Yani içine yazılan content kadar boyutlanır. Ayırma etiketi olmadan yazacağımız span etiketleri alt alta değil yan yana oluşacaktır.

Bir deneme yapmak ve div ile arasındaki farkı görmek için beraber kullandığımız bir örnek yapalım.

Bir sonraki dersimizde aşağıdaki sayfa yapısını oluşturacağız. Bunu divlerle oluşturmak için çalışabilirsiniz.

Bir sonraki yazımda buluşmak üzere.

Yorumlarınızı eksik etmeyiniz.

 


muratbilginer