HTML Div Etiketi Nedir?

HTML Div Etiketi Nedir?

HTML Div Etiketi nedir? : Div etiketi Web sitesinin ana iskeletini oluştumaya yarayan bu etiket web sayfasının şeklini ve nasıl olması gerektiğini belirleyen boyutlarını tamamen sizin ö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 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 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 etikine ID Tanımlama:

    •  

İç İç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ı sizin şablonunuzu çıkarırken sizin işinizi kolaylaştıracak ve web sitesini daha da oturaklı yapacaktır. 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 dümanları paylaşıyorum.

HTML:

CSS:

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

iç içe div kullanımı
iç içe div kullanımı

Bir sonraki div şablonları yazımızda bootstrap div şablonlarını 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.

İlk Yorumu Siz Yapın

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir