10 Eylül 2012

Etiket: Div yapısı ve kullanımı , html div tagı ne işe yarar.


Div , Bedava-Sitem'de css dediğimiz stil koduyla çok benzerdir.
Bunun için profesyonel tasarımlar bile , Bedava-Sitem'de kullanılabilir. 
Yani , herhangi bir "profesyonel tasarım" sitesinden indirdiğiniz tasarımları "Bedava-Sitem"e uyarlayabilmeniz mümkündür. Profesyonel tasarım sitelerine örneklerimiz ; freecsstemplates.org veya  free-css.com olabilir ki ; benim önerim freecsstemplates.org'dur (;

Div nedir ?

Html’de tasarımlarımızı sağa, sola hizalamak, nesneleri ve yazıları dilediğimiz koordinatlara yerleştirmek için kullanılan ve az kod ihtiva etmesi ve Google tarafından tavsiye edilmesi ve sevilmesi nedeniyle son zamanlarda gündeme gelen bir kodlama dilidir.

Kodlarına örnek olarak neleri verebiliriz ?


 

Yukarıdaki resimde divlerin yerleşimini görüyorsunuz , ilk olarak bu yerleşimin HTML koduna bakalım. 

<div id="sayfa"> (Bu div ile sayfayı ve arka planı oluşturduk)
<div id="ustalan">(Bu div ile bannerınızı koyabileceğiniz bir alan oluşturduk)
</div>(Bu kod ile oluşturduğumuz divleri bitirdik(Kesinlikle bitirilmeli)
<div id="icerik">(Yazdıklarınız #icerik'te görünecek)</div>(Bitirdik)
<div id="anaMenu">(Menu ve linkler(Kolay erişim için)</div>(Bitirdik)
<div id="altAlan">(Copyright vs. yazarsınız)</div>(Bitirdik)

Şimdide yukarıda yazdığımız HTML kodlarının Css'deki kodlarını inceleyelim. 

#sayfa {width:768px;} */Sayfa genişliğini ayarladık*
#ustAlan{width: 750px;} */Üst alan genişliğini ayarladık*
#icerik{float: right; width: 568px;} */Float=Duracağı yer*
#anaMenu {float: left;width: 200px;} */Anamenu solda olacak*
#altAlan{width: 750px;clear: both;}

Siz bunları bir sitede denerseniz tabiki resimdeki gibi olmaz , arka planı falan ayarlanmalı (;

 Css koduna yazdığımız divleri çağırmak için ,
<div id="divadı">xXxXxXx</div> şeklinde HTML yazılan yere yazılır.
Çağıracağımız div'e göre "divadı" yazan yere divin adını yazarsınız.
"xXxXxXx" yazan yere ise div'in üstüne yazacaklarınızı aktarırsınız.
Sayfa başında anlattığım gibi çağırdığımız divi bitirmek için
</div> kodunu kullanırız.

Bir sayfada herhangi bir div'inizin gözükmemesini istiyorsanız ; 
<style>#Divadi{display:none}</style> 
Bütün sayfalarda görünmesini istemediğiniz div için ; (Tasarım ayarları'ndan boş bir yere ekleyiniz)
<style>#Divadi{display:none}</style>

Dersimizi anladığınızı umuyorum , birdahaki konuda görüşmek üzere.

Terator.TR.GG/Tamamen kendi bilgim , kendi yazım.