thumbnail

HTML Div ve Span Kullanımı

Öncelikle merhaba, Html derslerimiz Div ve Span kullanımı ile devam ediyor 🙂 Öncelikle div nedir? Bunu cevaplandıralım. Div, division kelimesinin kısaltmasıdır. Birbirinden bağımsız olarak çok daha görsel ve kontrol edilmesi kolay alanların oluşturulmasını sağlar. Özellikle tablolar ile yapılan tasarımların yorucu bir süreç gerektirmesi ve kontrolünün zor olması sonucu hem performans hem de zaman bakımından div’li tasarımların ön plana çıkmasını sağlamıştır. Div, block elementtir. Bu nedenle tanımlanan div içerisine genişlik verilmediği sürece tanımlanan div o satırı komple kapsayacaktır. Tanımlanacak olan diğer div ise bir alt satırda yer alacaktır.

Konuyu örneklendirmek gerekirse;



<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

</head>

<body>

&nbsp;

<div> Yazı 1 </div>

<div> Yazı 2 </div>

</body>

</html>


Tarayıcıda yorumlanmış hali aşağıdaki gibi olacaktır.

Yazı1

Yazı2


Span etiketi ise div gibi block element değildir. Bu anlamda yan yana tanımlanmış olan span etiketleri div etiketinde olduğu gibi alt alta değil, yan yana geleceklerdir. b etiketleri içerisindeki veri ne kadar yer kaplarsa span da içerisindeki veri kadar genişlik ve yükseklik kazanacaktır.



<span>HTML</span>

<span>Dersleri</span>


Çağrıldığında tarayıcıdaki çıktısı aşağıdaki gibi olacaktır.

Html Dersleri

1 Comment

Bir Cevap Yazın

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