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 VarBurada 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 VarBurada bir paragraf var ve bu kısım <span> ile şekillendirilmiş metin içermektedir. |
<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…
Hello, its pleasant article about media print, we all
understand media is a great source of facts.
Hello! Do you know if they make any plugins to help with SEO?
I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very
good success. If you know of any please share.
Kudos!
Excellent web site. Lots of helpful info here. I’m sending it to some buddies ans also sharing in delicious.
And obviously, thanks in your effort!
Everything is very open with a clear clarification of
the challenges. It was really informative.
Your website is very helpful. Many thanks for sharing!
Thank you for some other informative web site. The place
else may I get that type of info written in such a perfect approach?
I have a challenge that I’m just now working on, and
I have been at the glance out for such information.
Thanks for finally talking about > HTML Satır İçi ve
Blok Öğeleri | HTML Dersleri 8 | Lokman DOĞAN < Loved it!