Ders_20 HTML Blok ve Satıriçi Elemanlar

HTML Blok (Block) ve Satıriçi (Inline) Elemanlar

Her html elemanı, tipine bağlı olarak bir gösterilme biçimine sahiptir.

Çoğu html elemanı, varsayılan olarak block halinde ya da satıriçinde gösterilir.

Blok Halindeki HTML Elemanlar

Blok halindeki elemanlar, her zaman, yeni bir satırbaşı yaparak başlarlar ve kullanabileceği bütün satırı kaplar. Kendinden sonraki html elemanı bir alt satırdan devam eder. Yani bir blok elemanı, bu satır benim der ve o satıra başka da kimseyi kabul etmez.

<div> elemanı, blok halindeki elemanlara bir örnektir. Aşağıda bir div elemanı örneği verilmiştir:

Bir <div> elemanı, block halinde bir elemandır.

Blok halindeki html elemanları şunlardır:

• <div> elemanı: içine istediğimiz html içeriğini koyabildiğimiz bir çerçeve veya bağımsız bölge olarak düşünülebilir.
• <h1> - <h6> elemanları: çeşitli büyüklüklerdeki başlıklardır.
• <p> elemanı: paragraftır.
• <form> elemanı: bir form oluşturur.

Satıriçi HTML Elemanları

Bu elemanlar, bir satırbaşı yapmadan, konuldukarı yerde kalarak, kaplamaları gereken kadar yer kaplarlar. Kendilernden sonra gelen, html elemanları da yine aynı satırın kalan kısmında devam edebilirler. Yani bir satıriçi eleman, satırda bana bi yer açın oraya sığışayım der.

Satıriçi html elemanları şunlardır:

• <span> elemanı: satır içinde, bağımsız bir alan oluşturur. satırbaşı yapmadan devam eden bir <div> elemanı gibi düşünülebilir. 
• <a> elemanı: bir link oluşturur.
• <img> elemanı: resim dosyası gibi bir görsel oluşturur.

Aşağıda bir span elemanı verilmiştir:

Bu paragrafın,  bu kısmına bir <span> elemanı  yerleştirilmiştir. 

<div> Elemanı

<div> elemanı, blok halinde ayrı bir bölge oluşturan bir elemandır. Sayfamızda, kendine ait, kenarlıkları görünmeyen bir pencere oluşturur.

<div> elemanları, zorunlu olmasa da, daha hoş görünmeleri için, stil (style) ya da klas (class) özellikleri eklenerek süslenir, stil kazandırılır. Bu süsleme işlemi de CSS ile yapılır.

UNUTMA: Bir taga CSS eklemek istiyorsak style="özellik1:değer1; özellik2:değer2;" kalıbını kullanırız.

<div> tagının içine, CSS stilleri atandığında, div içindeki bütün html elemanları, bu stillerden etkilenir. Aşağıdaki örneğe dikkat edelim:


<div style="background-color:black; color:white; padding:20px;">

<h2>İstanbul</h2>
<p>İstanbul, Türkiye'de yer alan şehir ve ülkenin 81 ilinden biri. Ülkenin en kalabalık, ekonomik ve sosyo-kültürel açıdan en önemli şehridir. Şehir, iktisadi büyüklük açısından dünyada 34., nüfus açısından belediye sınırları göz önüne alınarak yapılan sıralamaya göre Avrupa'da birinci, dünyada ise Lagos'tan sonra altıncı sırada yer almaktadır.</p>

</div>

Yukarıdaki <div> elemanının çıktısı şöyle olacaktır:

İstanbul

İstanbul, Türkiye'de yer alan şehir ve ülkenin 81 ilinden biri. Ülkenin en kalabalık, ekonomik ve sosyo-kültürel açıdan en önemli şehridir. Şehir, iktisadi büyüklük açısından dünyada 34., nüfus açısından belediye sınırları göz önüne alınarak yapılan sıralamaya göre Avrupa'da birinci, dünyada ise Lagos'tan sonra altıncı sırada yer almaktadır.

<span> Elemanı 

<span> elemanı, genellik bir text içeren, satıriçi bir elemandır.

<span> elemanları, zorunlu olmasa da, daha hoş görünmeleri için, stil (style) ya da klas (class) özellikleri eklenerek süslenir, stil kazandırılır. Bu süsleme işlemi de CSS ile yapılır.

<span> tagının içine CSS eklenerek, barındığı metne stil verilmiş olur. Aşağıdaki örneğe dikkat edelim:

<h1>Benim<span style="color:red">Önemli</span> Başlığım</h1>

Yukarıdaki html elemanının çıktısı şöyle olacaktır:

Benim Önemli Başlığım

sonraki ders için tıklayınız