HTML’de Div Kullanımı

HTML‘de Div kullanımı önemli bir yer kaplar ve yetenekli ve basit bir elementtir. Bu dersimizde Div elementinin kullanımı ve özellikleri üzerinde duracağız.

HTML öğrenmek istiyorum diyorsanız, Div‘i özellikle öğrenmelisiniz. Çünkü Div etiketi, neredeyse tüm web sitelerinin yapıtaşı durumundadır.

Div Elementi Nedir? Ne İşe Yarar?

Div etiketi küme veya bir alan oluşturur. Div etiketi <a>, <b>, <span> vb. etiketlerinden ayıran temel özellik, Div‘in bir blok element olmasıdır. HTML‘de elementler 2’ye ayrılır. Bunlar Blok Elementler ve Satır içi elementlerdir.

Satır içi elementler içine ne koyarsanız o boyuttadır ve yanyana dururlar. Blok elementleriyse kendi blokları mevcuttur. Alabilecekleri en geniş boyutu alırlar. (Eğer aksi stil dosyasında yazılmamışsa) ve Alt alta dururlar. Div’leri birer kutu gibi düşünebiliriz. Bunlar boyutlarına ve özelliklerine göre iç içe alt alta olabilir.

Şimdi bunu örnekle anlatalım;

<!DOCTYPE html>
<html>
 <head>
  <title>HTML'de Div Kullanımı</title>
 </head>
 <body>
  <div>İlk Div'imizi yaptık</div>
 </body>
</html>

Bu örneği yazıp çalıştırdığımızda sadece yazı görünecektir. Çünkü normalde div’lerin kenarları olmaz. HTML’de style=”” özelliği ile stil bilgileri girebiliriz. Şimdi örneğimizi biraz geliştirelim;

<!DOCTYPE html>
<html>
 <head>
  <title>HTML'de Div Kullanımı</title>
 </head>
 <body>
  <div style="width:150px;background-color:#ccc;">
   İlk Div'imizi yaptık
  </div>
  <div style="width:180px;background-color:#999;color:#fff;">
   Bu da ikinci Div
  </div>
 </body>
</html>

adiv-kullanımı

Stil bilgilerinin anlamları için CSS konularımıza bakmanızı öneririm ama şimdilik kısa bir açıklama yapalım;

  • width:150px ve width:180px değeri div’in genişliğini belirler.
  • Background-color: değeriyse arka alan rengini belirler.
  • color: değeriyse yazı font’unun rengini belirler.

Şimdi bunu da öğrendiğimize göre bir adım ileri gidelim.

İç içe Divler

Bu konuyu daha iyi anlamanız için div’lere farklı arkaplan renkleri vereceğim.

<!DOCTYPE html>
<html>
 <head>
  <title>HTML'de Div Kullanımı</title>
 </head>
 <body>
  <div style="width:150px;background-color:#ccc;padding:5px;">Bu dış div<div  style="width:100px;background-color:red;padding:3px;">İç içe Div</div></div>
 </body>
</html>

ic-ice-div

Bu örnekle de iç içe iki div‘i konumlandırdık. Burada farklı olarak gördüğümüz style=”” etiketindeki padding: değeridir. Padding; elementimizin içindeki içeriğin element sınırlarına olan uzaklığını ayarlar.

Yani elementin içindeki yazı köşelere sıfır olmaz. padding değerini kullanmasaydık ne olacağını görünce zaten olayı anlayacaksınız.

padding-degeri-sıfırken

Sanırım iki örneğe bakıp aradaki farkı anladık. 2. resimde padding: değerine 0 (sıfır) verdik.

Div ve buna benzer blok elementlerde CSS kullanırken class ve id’i bilmemiz gerekir. class ve id özelliği kullanımıyla da ilgili küçük bir örnek yapalım.

<!DOCTYPE html>
<html>
 <head>
  <title>HTML'de Div Kullanımı</title>
<style type="text/css"> <!--
#main {
width:250px;
height:200px;
background-color:#ccc;
padding:5px;
}
div.bolum {
width:150px;
height:100px;
background-color:red;
padding:5px;
}
--> </style>
 </head>
 <body>
  <div id="main">
Dıştaki Ana Div
<div class="bolum">
İçteki Div   <br />
ilkteknoloji.com
</div>
</div>
 </body>
</html>

ic-ice-div-002

Div konusunu genel olarak kavradığınızı düşünüyorum. Şimdi Divleri yanyana konumlandıralım.

Divleri Yanyana Sıralamak

div-bolum-id

İnternet sitelerindeki Div kullanımı yukarıdaki resimdekine benzer kullanımdadır. Buradaki id‘leri ingilizce olarak kullandım. Çünkü internet üzerinde araştırma yaptığınızda bu şekilde örneklerini çok göreceksiniz. Şimdi float:””; özelliğini ve clear:””; özelliğini öğreneceğiz.

Float ile Sağa / Sola konumlandırma

Bu konu HTML dışında CSS’in bir konusu sayılır ama Div’leri anlatırken Float’ı anlatmamak olmaz.

<!DOCTYPE html>
<html>
 <head>
  <title>HTML'de Div'i Float ile Sağa / Sola konumlandırma</title>
<style type="text/css"> <!--
#main {
width:900px;
background-color:#f4f4f4;
}
#header {width:900px;background-color:#ccc;height:100px;margin-bottom:10px;}
#post {float:left;width:495px;background-color:#ccc;height:250px;margin-bottom:10px;}
#sidebar {float:right;width:395px;background-color:#ccc;height:250px;margin-bottom:10px;}
.clear {clear:both;}
#footer {width:900px;background-color:#ccc;height:100px;margin-bottom:10px;}
--> </style>
 </head>
 <body>
  <div id="main">
<div id="header">Başlık</div>
<div id="post">Yazı Bölümü</div>
<div id="sidebar">Sağ Menü</div>
<div class="clear"></div>
<div id="footer">Sayfa Altı Bölümü</div>
</div>
 </body>
</html>

Yukarıdaki kodların nasıl bir sonuç vereceğini görmek için İlkteknoloji Kod Editör‘e buradaki kodları kopyalayabilirsiniz.

Şimdi örneğimizi biraz açıklayalım. Bir üst başlığı, bir yazı bölümü, bir sağ bölümü, bir de sayfa altı olan bir site temeli yaptık. #main id’ini divlerimizi ortalamak ve asıl genişlik değerini belirlemek için oluşturduk.Yani #main in içine koyduğumuz div’ler 900px‘lik bir alanı kaplasın diye.

Başlık bölümüne width (genişlik) değerini verdik. Arka planın gri’nin bir tonu olmasını belirledik. Height (yükseklik) değerini verdik ve margin-bottom (div altı kenarlık uzaklığı) değerini de belirledik ki div leri birbirinden ayırıp daha kolay görebilelim.

Diğer div’lerde de benzer CSS özelliklerini kullandık. Sadece #post ve #sidebar‘da float:left ve float:right değerini verdik. Bu iki değer sola konumlandır ve sağa konumlandır anlamına gelir.

class=”clear” olarak belirlediğimiz div’deki clear:both; özelliğiyse bu div’den sonra float değerini sıfırlamak için kullanılır. Eğer clear:both; kullanılmazsa bir sonraki div’de ya sağa yada sola konumlanmış olarak görünebilir. Bu yüzden konumlandırmanızın bittiği div’in hemen ardına bu şekilde bir div oluşturmanız tasarımınız için önemlidir.

Div’lerle bütün sitenin iskeletini oluştururuz. İstediğimiz div’i istediğimiz yere koyarak içini doldururuz. Div’ler hakkında daha yazılacak çok şey var ama onu CSS derslerimize bırakalım. Şimdilik Sağlıcakla Kalın.