HTML Div Etiketi Nedir?

HTML Div Etiketi Nedir?

HTML Div Etiketi nedir? : Div etiketi Web sitesinin ana iskeletini oluşturmaya yarayan bu etiket Web sayfasının stilini ve nasıl olması gerektiğini belirleyen boyutlarını tamamen özgürce ayarlayabildiğiniz bir Html etiketidir. Div etiketinden daha ayrıntılı bahsedecek olursak, div etiketinin yapısı dört köşesi olan ve içerisine aldığı elementlerle yüksekliği ve boyutu değişebilir. Bunun yanı sıra siz div’i oluştururken standart ölçüler tanımlayabilir veya pencere boyutuna göre genişliğinin ve uzunluğunun dinamik olmasını sağlayabilirsiniz.

Html Div etiketi genel olarak belirli bir alanı gruplamak için kullanılmaktadır. Kullanıldığı alan belirli bir düzen içinde grupladığınız için düzgün gözükmektedir.

Html Div Etiketi Nasıl Oluşturulur?

Diğer etiketlere benzerliği çok fazladır. Bu etiketler içi boş kutucuklardan tutun yatay ve dikey alanlarda oluşturabilirsiniz. Aşağıda bir Div oluşturmayı sizinle paylaşıyor olacağım;

..
 <div> ... </div>
..

Div Etiketinin oluşturulması bu kadar basittir. Sıra geldi Div etiketine Stil Bağlamaya yani Class ve Id tanımlamaya. Aşağıda her ikisi için de örnekler yapıyor ve incelemenize sunuyorum.

• Div etiketine Class Tanımlama:

  • ..
     <div class="sinif"> ... </div>
    ..

• Div etikine ID Tanımlama:

  • ..
     <div id="sabit"> ... </div>
    ..

     

İç İçe Div Kullanma

İç içe div kullanımı web tasarım yaparken işinize yarayacak ve en çok kullanacağınız şeyler arasına girecektir. Bir şablon çıkartacağınız zaman iç içe div kullanımı Web şablonunu çıkarırken sizin işinizi kolaylaştıracak ve Web sitesi daha da oturaklı yapacaktır. HMTL Div örnekleri hakkında size bir örnek yapmak istiyorum.

Örnek: En üst tarafta banner alanımız var ve bu alanı solda logo sağda banner ve bu ikisin altında menü olacak şekilde iç içe bir div ağacı çıkartalım. Aşağıda sizinle CSS ve HTML kodları paylaşıyorum.

HTML:

<div id="header">
	<div class="header logo">logo</div>
	<div class="header banner">banner</div>
	<div class="header menu">menü</div>
</div>

CSS:

<style>
	#header{
		float:left;
		width:100%;
		height:auto;
	}
	.header{
		float:left;
		height:70px;
	}
	.header.logo{
		width:30%;
		background:red;
	}
	.header.banner{
		width:70%;
		background:yellow;
	}
	.header.menu{
		width:100%;
		background:grey;
	}
</style>

Bir header uygulamasını sizlerle HTML ve CSS kodları olacak şekilde sizlerle üst tarafta paylaştım. Aşağıda Web sitesinde nasıl görüneceğini paylaşıyorum.

Bir sonraki div şablonları yazımızda bootstrap div şablonları sizinle örnekli ve resimli olarak paylaşıyor olacağım. Umarım bu yazım div etiketi hakkında kafanızda bir takım şeyler canlandırmıştır. Sorularınız ve önerileriniz için mutlaka aşağıdaki yorum kutusuna adınızı, e-postanızı ve mesajınızı yazdığınız taktirde sizlere mümkün olan en kısa sürede mantıklı bir cevapla geri dönüş yapmaya çalışacağım. Şimdiden iyi çalışmalar diliyorum.