HTML Div

HTML Div

HTML Div : Div kullanımı HTML kütüphanesinin en yaygın kullanılan ve kullanımı çok esnek olmakla beraber diğer framework‘ler yardımıyla da geliştirilebilen objedir(nesne)‘dir. Bu nesnenin kullanımı basit ve CSS ile desteklendiğinde geliştirilmeye oldukça açık bir yapıya sahiptir. Bu nesneni kullanımı çoğunlukla Web tasarım yapılırken Web sitesinin çatısını yani mimarisini oluşturmada kullanılmaktadır.

HTML div‘i bir cümleyle sizlere anlatmam gerekseydi. Şekil verilebilen sayfanın tüm noktalarında istenildiğini gibi konumlandırılan nesne olduğunu açıkça söyleyebilirim. Bu HTML Div nesnesinin .js (jquery) ve diğer 3. parti yazılımlarının kullanımına olanak verdiğini de söyleyebilirim.

Aşağıda HTML Div ile alaklı jQuery örnekler ve CSS kullanım örnekleri yapacağım.

HTML Div Nedir?

HTML Div sayfa şablonunun hazırlanmasında CSS ile değişikliklere izin verilen ve jQuery ile desteklendiğinde dinamik çözümlere olanak sağlayan yapıya sahip objedir. Bu objelerin kullanımı mobil cihazlara da uyarlanabilir. Masaüstü görünümünde genişliği 700px olan bir div’in mobilde 200px genişlik haline getirebilirsiniz.

Kullanıma göre değişiklik gösteren üzerinde yapılabilecek değişiklikleri aşağıda maddeler halinde listeliyorum,

• Genişlik ve yükseklik belirleme
• Arka plan rengi ve fotoğrafı tanımlama
• Çerçeve verilebilmesi
• Genişliği ve yüksekliği çerçevesiyle orantılı tanımlama
• Herhangi bir nesneye bağlı olmadan konumunun belirlenmesi
• jQuery ile özelliklerinin değiştirilmesi

Class ve id Arasındaki Farklar

Div konusunu öğrenen çoğu kişi class ve id arasındaki farkı net olarak çözememektedir. Bu konu hakkında sizlere mümkün olduğunda açıklama getirmek istiyorum. Her iki konuyu da kısaca açıklayacağım.

Class Örneği

Css içerisinde 1 kere tanımlanmaktadır.

.kutu{
	float:left;
	width:300px;
	height:300px;
	background:#333;
}

Class, CSS içinde .(nokta ile tanımlanır). HTML içinde 1’den fazla kere aynı sayfa içinde kullanılabilir.

<div class="kutu">kutu 1</div>
<div class="kutu">kutu 2</div>
<div class="kutu">kutu 3</div>

CSS ID Örneği

ID Css içersinde tanımlandıktandan sonra aynı HTML sayfa içersinde sadece 1 kere kullanılabilir 1 kereden fazla kullanımda örneğin 2. kullanımda Sss özellikleri 2.de aktif olmayacaktır.

#kutu1{
	float:left;
	width:300px;
	height:300px;
	background:#ccc;
}
#kutu2{
	float:left;
	width:300px;
	height:300px;
	background:#ccc;
}

id, CSS içinde #(kare ile tanımlanır).

<div id="kutu1">kutu 1</div>
<div id="kutu2">kutu 1</div>

HTML Div Örnekleri

HTML Div örneği için bir sayfa yapısı yani mimarisi kurmak istiyorum. Bunu mimariyi daha sonra lazım olan her hangi bir yerde kullanabilir veya ders notlarınıza ekleyebilirsiniz. Örneği yapmadan önce Web sitesi mimarisi hakkında sizlere bir kaç bilgi sunmak istiyorum. Web tasarım içinde olmazsa olmaz evrensel kurallar bulunmaktadır. Aşağıda bunları sizlere listeler halinde belirtiyorum.

• Header Bölümü (Menü, logo ve Slider)
• Body Bölümü (İçeriklerin görüntülendiği alan)
• Footer Bölümü (Web sitesinin en alt bölümü)

Bu 3 kalıp dışında yaptığınız değişikler pek önemli değildir ancak evrensel bir Web tasarım yapmaya kararlıysanız bu üç değişmezi bir arada tutmalısınız. Aşağıda bununla alakalı basit bir örnek yapıyor olacağım.

CSS Kodu:

<style>
	.ortalama{
		margin:0 auto;
		display:table;
		width:900px;
	}
	#header{
		height:250px;
		background:#ccc;
	}
	#bodyContent{
		min-height:550px;
		background:#ccc;
	}
	#footer{
		height:150px;
		background:#ccc;
	}
</style>

Açıklama: .ortala adında bir class oluşturup tüm Div’ler de aynısını kullanacağım böylelikle aynı tanımları tekrar yazmak zorunda kalmayacağım ve bu özelliğe ihtiyaç duyduğumda tekrardan bu özelliği defalarca kullanabileceğim. 3 temel sabit #header, #bodyContent ve #footer da oluşturulup tanımlamaları yapıldı.

HTML Kodu:

<div id="header" class="ortalama">
	#header
</div>
<div id="bodyContent" class="ortalama">
	#bodyContent
</div>
<div id="footer" class="ortalama">
	#footer
</div>

Açıklama: HTML Divlerin bu şekilde kullanılması aşağıdaki şablonu vermektedir.