Html Div kullanımı Nasıl Yapılır?

HTML Div kullanımı tasarımda önemli bir yer kaplar, Div elementi yetenekli, basit bir yapıdadır ve çoğu sitenin temelinde bulunur.

Anladığınız gibi bu derste HTML Div kullanımı hakkında bilgiler öğreteceğim. Div elementinin temeli ve özellikleri üzerinde duracağım.

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

HTML’i sıfırdan veya belli bir kısımdan öğrenen arkadaşlar için HTML Dersleri yazımı takip etmelerini öneriyorum.

Böylece HTML dersleri yayınlandıkça ulaşabilirler.

Div Elementi Nedir? Ne İşe Yarar?

Div etiketi küme veya bir alan oluşturur. Div etiketini <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 elementler dir.

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.

HTML Div Kullanımı Örneği

Şimdi Div’i en iyi şekilde bir örnekle anlatalı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.

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.

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

Divleri Yanyana Sıralamak

İ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.

Örnekteki Div Kullanımı nı Açıklayalım

Ş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 #mainin 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.