HTML Satır İçi ve Blok Öğeleri | HTML Dersleri 8

0
22
görüntülenme
HTML Öğreniyorum
HTML Öğreniyorum Görseli

HTML’de bir çok öğe satır içi öğesi yada blok öğesi olarak tanımlanır. Peki HTML satır içi ve blok öğeleri arasındaki fark nedir? Yazdığımız bir metinde bir blok öğesi kod kullanıldığında bu öğe yeni bir satırda görüntülenir. Satır içi öğeleri ise herhangi bir satır kesmesi olmadan metin içerisinde görüntülenir.

Blok Seviyesi Öğeleri

Blok elemanları yeni bir satırdan başlar demiştik. Yani HTML’de oluşturacağımız metin veya kodlarda bu blok seviyesi elemanları kullanırsak, görünümü yeni bir satırdan başlayacaktır. Bunları satır içerisinde tutmak imkansızdır. Bu elemanlara bir kaç örnek verecek olursak: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>, vb…

Satır İçi Öğeler

Satır içi elemanları ise normal olarak satırda bir atlama yapmadan aynı satır içerisinde görüntülenir. Bu öğelere örnek verecek olursak: <b>, <a>, <strong>, <img>, <input>, <em>, <span>, vb…

<div> tagı bir blok elemanıdır ve diğer HTML öğeleri kapsayıcı bir elemandır. Bu etiket CSS stilleriyle birlikte kullanılır ve içerisindeki HTML öğelerini şekillendirmek için kullanılır:

<html>
 <body>
  <h2>Burada BaşlıkVar</h2>
  <div style="background-color:green; color:white; padding:20px;">
   <p>Burada bir paragraf var</p>
   <p>Burada başka bir paragraf var</p>
  </div>
 </body>
</html>

Yukarıdaki kodların görüntüsü ise:

Burada Başlık Var

Burada bir paragraf var

Burada başka bir paragraf var

Gördüğünüz gibi yukarıda bir başlık tagı, <div> tagı kullandık ve <div> tagına CSS yani stil unsurları tanımladık (CSS derslerinden sonra daha net anlaşılacaktır.). Arkaplanı yeşil ve yazının kendisini beyaz olarak tanımladık. Ayrıca <div> ile tanımladığımız bölgenin iç kısmına doğru 20 piksellik bir boşluk bırakması için padding özniteliğini kullandık.

Benzer şekilde, <span> öğesi de bir metnin belirli bir kısmını kapsayıcı olarak kullanılabilir. Bu etikette CSS ile kullanılabilir ve içerisinde bulunan metne şekillendirme uygulayabilir:

<html>
 <body>
  <h2>Burada Başlık Var</h2>
  <p> Burada bir paragraf var ve <span style="background-color:green; color:white; padding:20px;">bu kısım <span> ile şekillendirilmiş metin</span> içermektedir.</p>
  </p>
 </body>
</html>

Bu <span> etiketinin görüntüsü ise :

Burada Başlık Var

Burada bir paragraf var ve bu kısım <span> ile şekillendirilmiş metin içermektedir.

Özet
<div> öğresi bir belgede blok öğesi bölümü tanımlar.
<span> öğresi belgede satır içi bölümlerinde bir bölgeyi tanımlar.

Bir blok elemanının içerisine satır içi kodları yazabilirsiniz. Örneğin bir <div> etiketinin içerisinde bir veya bir çok <span> tagı kullanabilirsiniz.

Fakat bir satır içi elemanının içerisinde kesinlikle bir blok elemanı bulunamaz. Yani <span> tagının içerisinde <div> tagı kullanamayız.

Bu konuda incelenebilecek bir çok HTML etiketi söz konusu. Ancak bunları kendiniz birşeyler denerken tecrübe edebilirsiniz. Bu sebeple HTML satır içi ve blok öğeleri arasındaki temel farkları, nasıl kullanıldıklarını bir kaç örnekte göstermeye çalıştım. Genel mantığı kavramak için yeterli diye düşünüyorum. Bir sonraki dersimiz HTML’de Formlar başlıklı yazımda görüşmek üzere…

CEVAP VER

Lütfen yorumunuzu yazınız
Lütfen isminizi buraya yazınız