0
Div Ne Anlama Gelir?

Div Ne Anlama Gelir?


Div Nedir? Div Style ve Div Kullanımı

Div, html dilinde web sayfalarını bölümlerine ayırma ve bu bölümlerin içine CSS ile stil değerleri vermemize yardımcı olan bir html etkenidir. Modern tasarımda web sayfalarının ayrılmaz etkileri arasında yer alan ve HTML5 ile de kullanımına devam edilen Div etiketi yardımıyla sayfaların tamamında değişiklik yapmak yerine sayfaları bölümlerine ayırabilir ve bu bölümlere özel stil değerleri tanımlanabilir. Böylelikle tam anlamıyla istemiş olduğumuz gibi stil ve hizalı öğelerin içerisinde bulunan HTML sayfaları oluşturabiliriz. Günümüzde Div etiketi kullanmakta olduğumuz tüm internet tarayıcıları tarafından desteklenebilmektedir.

Div Kullanımı

Div etiketini sadece kendi başına kullanmamız HTML sayfaları içerisinde bizlere pek bir avantaj sağlamaz. Örnek verecek olursak bir HTML sayfası tasarlarken sadece <div>içerik</div> gibi kullanılması modern bir sayfa meydana getirirken pek işimize yaramayacaktır. Bunun yerine Div etiketine ekleyeceğimiz diğer HTML etiketleri ile Div’i biçimlendirebilir ve tam anlamıyla istemiş olduğumuz biçimlendirmeleri yapabiliriz.

Yukarıda göstermiş olduğumuz örnekte içeriği  <div> etiketi ile birlikte ayırdık ancak Div etiketine herhangi bir CSS stil öğesi ilave ettiğimizde ve Div’e ekstra olarak HTML etiketleri ilave ettiğimiz için Div etiketi daha kullanışsız bir hale dönüşmüştür. Bunun yerine farklı bir örnek daha göstermek gerekirse; Div eklentisine fazladan bir HTML değeri daha tanımlayalım.

<div class="dis-div">
Bu herhangi bir Div etiketi

<div class="ic-div">
Bu ise Div etiketinin içinde yer alan bir Div etiketidir.

</div>
</div>

Div Style Kullanımı

Div Style meydana getirirken Div eklentisine herhangi bir stil öğesi tanımlayabildiğimiz Div biçimidir. Örnek verecek olursak bir web sayfasının içindeki içeriğin belirli bir kısmını mavi yapmak istiyoruz. Ancak bu içeriğin içinde çok sayıda farklı HTML kodları da kullanılmaktadır.bu durumda Div Style’ı kullanarak kolay bir şekilde ayırmış olduğumuz parçanın tamamına etkili olacak HTML kuralları tanımlayabiliriz;

div style="color:#0000FF">
<h3>Bunu bir başlık olarak düşünelim</h3>
<p>Bu bir paragraftır.</p>
</div>

bu sefer ise Div’e bir stil özelliği olarak renk ataması yaptık ve böylelikle Div içerisinde bulunan HTML kuralları ile beraber tümünde etkil olacak olan bir kuralın daha atamasını yapmış olduk. Div Style’ı sadece renk kodları ile değil, genel olarak diğer kurallarla da beraber kullanabiliriz.

div class nasıl çalışır ve bunun div id ile ne gibi farkları olur.

Sitenizde yer alan herhangi bir sayfanın bir bölümü için o bölüme has yazılı boyutu, en, boy, arka plan resmi, sınır çizgisi gibi yerler belirleyeceksiniz. Mesela aynı sayfanın üstü ya da altı için ayrı ayrı ayarlar düşünüyorsunuz.

İşte bu ayarların tamamı CSS Style sayfalarında genellikle çeşitli div ayarlamaları ile belirlenmektedir. Her ayar ayrı bir isimle isimlendirilmektedir. Sonrasında ise o ayarlar değil yalnızca isimleri web sayfasının HTML sayfasında çok kısa kodlar ile kullanılır. Genelde bu kodlar ise Div kodlarıdır.

div id ile div class arasında ne fark var?

Kullanımları ve etkileri tamamen aynıdır. Sadece XHTML kuralları oldukça büyük bir düzen gerektirmektedir. HTML sayfasında yer alan kodlarla hiyerarşik bir düzen olması gerekmektedir. Şekillendireceği bölgeye mahsus bir ismi olan bir Div id bir sayfa içerisinde yalnızca bir kez kullanılması gerekir. Bunun yanında bölgelerin ayrıcalığını betimlesi gerekir. Örnek verecek olursak header kısmının bütününde, esas yazı olan bölgenin bütününde, sağ ya da sol sütunların bütününde farklı isimlerle birer kez kullanılır. Ama Div class ise herhangi bir ayrıcalık gerektirmeden genel ayarlamalar için kullanılması gerekmektedir. Bu şekilde aynı isimi taşıyan Div class aynı sayfa içerisinde değişik bölümlerde çok sayıda kullanılabilir. İşte bu ikisinin arasındaki tek fark bundan ibarettir.

web sayfası biçimlendirmeleri hakkında

Farklı özellikler her bir sayfanın geneli için, bir satırı için, bir paragrafı için hatta sadece tek bir kelimesi için bile seçilebilir. İç içe olacak şekilde ayrı ayrı da yapılabilir. Bu ayar style sayfasına kaydedilir. HTML sayfasında şekillendirilmek istenen alanlar uygun görülen div kodları ile sınırlandırılır. O sınırların içerisinde kalan bölüm styale sayfasındaki ayarların gerektirmiş olduğu özelliklere sahip olmaktadır. Bu ayar çok sayıda yerde kullanılabilmektedir. XHTML bakımından kusurlu görünmemesi için aynı sayfanın farklı yerlerinde aynı ayarları birkaç bölgede kullanacaksınız ve bunu div ile değil, div class ile yapmanız gerekmektedir.

Niçin?

Nedeni div id ayarları herhangi bir isimle bir sayfa içinde yalnızca bir kez kullanılabilir. Aynı sayfa içinde div id’yi fazla kullanacaksanız eğer isimlerinin farklı olması gerekir.

Örnek verecek olursak;

Style sayfasında;

#solmenu{……bu bölgeye genişlik, renk, yazı boyutu vb ayar kodlamaları yazılmalıdır……}

HTML sayfasında;

<div id="solmenu">……burası biçimlendirme yapılacak kısımdır…</div>

Örnekte görünen “solmenu” div id’si aynı sayfa içerisinde yalnızca tek bir alan için kullanılır. Aynı sayfada yer alan başka bir biçimlendirme için bir div id oluşturmanız gerekir.

Örnek verecek olursak;

#altresim{………}

#sagmenu{………}

 

div class kodları ve ayarlamaları

  1. Style sayfasında

Div id için style sayfasında ismin hemen başına # (kare) işareti geliyordu. Div class’ta ise . (nokta) işareti kullanılmaktadır.

Örnek verecek olursak;

.menuler{……………}

b)HTML sayfalarında

Sivri parantez içerisinde class kelimesi aşağıda belirttiğimiz gibi yazılmaktadır.

Örnek verecek olursak;

<div class="menuler”>…………</div>

Eğer sizde dikkat ettiyseniz div sınırlamalarında div id’nin de, div class’ında kapanış kodu </div> olarak aynı görünmektedir.

Aynı isme sahip olan bir div class’ı aynı sayfa içerisinde istediğiniz kadar kullanabilirsiniz.

div class ve div id kodlarının birleşik kullanımı

Bu görüntüde ikisi de tek bir kod gibidir. Haliyle kapanış kodu yalnızca 1 adet </div> olmaktadır.

Örnek verecek olursak;

<div id="solmenu" class="menuler">……………</div>

Buna niçin neye gerek duyulur?
Mesela ön sütun içinde yalnızca arka plan rengi, genişlik, kenar boşlukları gibi özellikleri ayrı bir şekilde tasarlarsanız, bunu div id ile belirlemiş olursunuz. Sol menünün tamamı için bu durum geçerli olur. Yalnızca sol menüyü ilgilendirir. Olur da sol menü için farklı bir genişlik, sağ menü için farklı bir genişlik ya da farklı arka plan renkleri tasarlamak isteyebilirisiniz. Bu gibi durumlarda sağ menü için yeni bir div id oluşturmanız gerekmektedir.

Menülerde yazıları olan linkler yer alır. Bu linklerin ve yazıların yazı boyutları, renklerinin her bir menü içerisinden aynı olmasını isteyebilirsiniz. O halde “menüler” isimli bir div class eklentisine ihtiyacınız olacaktır.

Daha detaylı bir şekilde inleyecek olursak;

Şimdi bütün bunların kod yapılarını görelim

Style sayfasının içinde;

#sagmenu{…………}

Bu noktada şuna dikkat etmemiz gerekmektedir. “menüler” isimli div class ile biçimlendirme yapacağımız kısımda linkler yer alacağı için bu “menüler” ayarlamasını linklere uyumlu yapmamanız gerekmektedir. Eğer isterseniz linkler için farklı ayarlarda yapabilirsiniz. Bu şekilde yaparsanız aşağıda belirtmiş olduğumuz örneğe göre linkler ikinci satırda yer alan a’lı ayarların gerek duyduğu gibi görünecek, sıradan yazılar ise ilk satırın gerektirdiği gibi görünecektir. Yine hafızamızı tazeleyelim; Bu ikisi de aynı yerin biçimlendirilmesi için kullanılacağından HTML sayfasında aynı burada da olduğu gibi iki ayrı kod gerekmemektedir

YAZAR HAKKINDA



YORUMLAR (0)
YORUM YAP