Bu yazımızda HTML öğrenirken belkide en önemli etiket olaran div etikenden bahsedeceğiz. HTML div nedir ? HTML div kullanımı gibi konulardan bahsedeceğiz. Sonrasında HTML div etiketi örneklerini göreceğiz.
HMTL Div Nedir ?
HTML’de div sayfalarda bölümler oluşturmak için kullanılır. Örneğin web sitemizde logo, menü, içerik ve footer olmak üzere 4 farklı alan olsun. Bu 4 farklı alanın herbirini div etiketleri ile yapabiliriz. Hemen görsel olarak görelim.
Yukarıdaki görselde bulunan herbir alan divler ile ayrılmıştır. Her bir div’e kendine has css özellikleri ekleyebiliriz.
HTML Div Ne İşe Yarar ?
Yukarıda da bahsettiğimiz gibi divler web sitesini bölümlere ayrımak için kullanılır. Bunun bize en büyük avantajı düzendir. Web sitelerimizi div etiketi kullanarak yazdığımızda sitelerimiz çok daha dezenli hale gelecektir. Ayrıca class ve id’ler sayesinde her div etiketine ayrı ayrı erişimimiz olacaktır. Yani her div için farklı özellikler atayabiliriz. (renk, uzunluk, genişlik vs.)
Class ve id kullanımı hakkında daha fazla bilgi almak için ‘CSS Class ve ID Kullanımı (Sınıf Seçiciler)‘ adlı yazımızı okuyabilirsiniz.
HTML Div Kullanımı
HTML div kullanımına örnek olarak yukarıdaki görseli kullanabiliriz. Hemen kodumuzu görelim.
<!DOCTYPE html>
<html>
<body>
<div class="logo">Logo Alanı</div>
<div class="menu">Menü Alanı</div>
<div class="icerik">İçerik Alanı</div>
<div class="footer">Footer Alanı</div>
</body>
</html>Bu HTML kodları ile, gerekli CSS kodları yazdıktan sonra aşağıdaki sonuca ulaşabiliriz.
Eğer CSS kod yapısı ve kullanımı hakkında eksiklikleriniz varsa ‘CSS Dersleri‘ sayfamıza göz atabilirisiniz.
HTML div etiketi dersimizin sonuna geldik. Bu yazıda HTML div nedir ? HTML div kullanımı gibi konulardan bahsettik ve bir tane HTML div örneği gördük. Umarım faydalı olmuştur. Diğer HTML derslerimizede ulaşmak isterseniz buradan tümüne ulaşabilirsiniz.