HTML’de Block ve Inline Elemanları

Web tasarım derslerimize devam ediyoruz. Bugünkü konuyla ilgili yazımıza vakit kaybetmeden geçelim!

Her HTML öğesinin aslında ait olduğu bir içerik alanı yani blok vardır.

Öncelikle HTML’de elemanları bu bölümde ikiye ayırırız: “satır içi (inline) elemanlar” ve “blok seviyesindeki elemanlar”.

Satır içi elemanları tanıyalım:

• <span>
• <a>
• <img>

Blok seviyesindeki elemanları tanıyalım:

• <div>
• <h1>
• <p>

Span Nedir?

<span>, tıpkı <div> gibi bir içeriği gruplamak ve ona class ya da id ile özellik atayabilmek için kullandığımız bir etikettir.
<div> etiketinden tek farkı, <span> bir satır içi eleman olmasıdır. İçerisine yazılan her şey satır içi eleman olarak algılanır ve sadece içerisindeki içerik kadar yer kaplar.

Div Nedir?

<div>, tıpkı span elemanı gibi içindeki eleman ve içeriklere özellik atamak ve onları gruplamak için kullanılan bir etikettir.
Web tasarımlarda, şu anda kullandığımız sitede olduğu gibi, sayfanın bölümlerini gruplamak için div’leri sıkça kullanırız; böylece bu bölümlere CSS ile kolayca stil verebiliriz. Stil verilmeyen bir sayfa ilk iskelet hâlinde görüntülenir; bu da kullanıcılar için hiç hoş görünmez.

Şimdi bu div tam olarak neymiş ve nasıl kullanılırmış bir göz atalım.

Div etiketinde en çok kullanacağımız özellik style özelliğidir.

Div etiketinin bu kadar çok kullanılmasındaki ana sebeplerden birisi de CSS stilleri ile istenilen biçime sokulabilmesidir.

Şimdi hemen nasıl kullanıldığına dair bir örnek verelim:

<div style="height: 150px; text-align: center; background-color: lightgreen; color: #fff;">

<h1>Mersin Web Tasarım Kursu</h1>

</div>

style özelliğini ve içerisindeki kodların nasıl kullanıldığını zaten önceki derslerimizden biliyorsunuz.

Gördüğünüz gibi div alabildiği en büyük genişliği yani enini aldı.
Div kullanımında bu özellik varsayılan olarak gelir; siz özel bir CSS kodu ile bu genişliği düşürmediğiniz sürece div en büyük genişliği alır ve sağında veya solunda başka bir öğenin durmasına izin vermez.
Eğer div’in genişliğini düşürüp sağına veya soluna bir div daha, metin veya herhangi bir şey eklemek isterseniz bunu CSS kodları ile yapmak zorundasınız. Zaten ileriki derslerde bunu defalarca yapacağız, merak etmeyin.

Şimdi bahsettiğimiz div’in genişliğini nasıl düşürebiliriz ona bir göz atalım:

Tabii ki width özelliği ile.
Web tasarımlarınızda en çok kullanacağınız özelliklerin en başında geldiğini söyleyebilirim.
Örnek verelim:

<div style="height: 150px; width: 500px; text-align: center; background-color: lightgreen; color: #fff;">

<h1>Mersin Web Tasarım Kursu</h1>

</div>

Kodlarınızın arasına width özelliğini ekledikten sonra sayfanızı çalıştırırsanız div’in genişliğinin düştüğünü görebilirsiniz.
Bir de height özelliğimiz var, hemen kısaca ondan da bahsedelim:

height özelliği genellikle width ile beraber kullanılır, çünkü birbirlerini tamamlayan özelliklerdir.

Nasıl ki width özelliği div’in genişliğini belirliyorsa, height özelliği de div’in yüksekliğini belirler.
Örnek kodlarda da gördüğünüz gibi height özelliğine 150px değer vermişiz ve div 150px yüksekliğinde oldu.

Şimdi son bir örnek daha verip div etiketini bitirmek istiyorum.

<div style="border: 2px solid black; height: 150px;">
    <div style="border: 2px solid red; height: 100px;">
        Div İçerisinde Başka Bir Div
    </div>
</div>

Bu dersimizde blok ve satır içi elemanları, span ve div elemanlarını ve nasıl kullanıldıklarını, width ve height özelliklerini, div’e stil vermeyi ve div içerisinde div oluşturmayı öğrendik.
Bu konular web tasarımın yapı taşlarıdır.
Bu etiketlerin kullanımını kavradığınız zaman her şey çok kolay ve güzel gelecek.

Bir sonraki derste görüşmek üzere.