HTML Etiketleri 2
Bir önceki yazımda Html’deki attribute kavramından söz etmiştim. Bu yazımda ise daha önceden bahsetmediğim bazı etiketlerden bahsediyor olacağım. Html Attribute yazımı okumak isterseniz buradan ulaşabilirsiniz.
Html’de etiketlere geçmeden önce yazılım geliştirme süreçlerinde program geliştirirken kendimize veya projede birlikte çalıştığımız takım arkadaşlarımızın anlayacağı ancak ekranda gözükmesini istemediğimiz durumlar olduğunda ne yapmamız gerektiğinden bahsetmek istiyorum. Böyle durumlarda yorum satırlarından faydalanıyoruz, html dilinde yorum satırını <!-- Bu bir yorumdur. --> bu şekilde oluşturabiliriz.
Html’de bazı etiketlerin varsayılan değerleri vardır, bunlardan biri İnline (satır içi) seviye elementler, bir diğeri ise Block(blok) seviye elementlerdir. Peki nedir bu inline ve block elementleri derseniz, inline(satır içi) yani sadece içeriği kadar satırda yer kaplar ve ondan sonraki gelen elementler de inline ise elementler yan yana gelirler, block seviye elementler ise bir satırın tamamını kapsarlar ve ondan sonra gelen block seviye elementler bir alt satırına yerleşir. Bir resimle örneklemek gerekirse;
- İnline seviye elementler
<a> <abbr> <acronym> <b> <bdo> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <var>
- Block seviye elementler
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>--<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <ul> <p> <pre> <section> <table> <tfoot> <video>
Bu noktada her bir elementi ayrı ayrı incelemek hem okuma süresini uzatacak, hem de size araştıracak bir şey kalmayacak :) Bu yüzden en sık kullanılan etiketlerden bahsederek yazımı sonlandırıyor olacağım.
Html ile geliştirme yaparken sık karşılaşacağınız etiketlerden biri olan <span> etiketinden bahsetmek istiyorum. Bir paragraf içerisinde yazının istenilen bir bölümünün davranışını kontrol etmek istersek, kısacası stil işlemi uygulamak veya ekstra özellik katmak istersek, istenilen bölümü seçmemizi sağlıyor.
<p>Derin <span style="color:blue;">mavi</span> bakışları düşünceliydi.</p>Bir yazı içerisindeki bir alan müdahale etmiş olduk. Burada yalnızca <p> etiketi olarak düşünülmemeli diğer block seviye elementler içerisinde de <span> etiketini kullanabiliriz.
Bir diğer inline element olan <button> elementi, tıklanabilir bir alan oluşturmak için kullanıyoruz. İçerisinde yazdığımız metnin uzunluğu kadar genişliğe sahip olacağını unutmamalıyız.
Genel olarak inline seviye elementlerin kullanımını ve mantığını göstermeye çalıştım, haydi gelin şimdide blok seviye elemanların davranışlarını inceleyelim.
En çok karşımıza çıkan etiket olan <div> etiketi, genel olarak bir kapsayıcı, toparlayıcı element olarak düşünülebilir. Kısacası <div> etiketinin içerisine diğer block ve inline seviye elementlerimizi yerleştirerek <div> etiketi altında daha hiyerarşik bir yapı sağlayabiliriz. Belki aklınıza şöyle bir soru gelmiş olabilir, neden bir başka block seviye element değil de <div> etiketini kapsayıcı olarak kullanıyoruz derseniz, aslında kapsayıcı element duruma göre değişmekte, yani her zaman <div> kullanmıyoruz. Örneğin bir form alanı oluşturduğunuzda <fieldset> block seviye elementinden yararlanıyor olacağız.
Html etiketleri yazımda <table> <ul> <ol> <li> gibi etiketlerden bahsetmiştim. Dilerseniz Html etiketleri yazımı okuyarak inceleyebilirsiniz. Yazıma gitmek isterseniz buradan gidebilirsiniz.
Sitemizde ki navigasyon işlemlerimizi, menülerimizi <nav> etiketi içerisinde tanımlıyoruz. Unutulmamalıdır ki Html dilinde bir etiket kesinlikle böyle kullanılır gibi bir yapı söz konusu değildir. <nav> etiketi yerine <div> etiketini de kullanabilirsiniz. Html geliştiricileri daha düzenli bir yapı için her bir elemente bir görev ataması yapmış ve bir standart geliştirmişlerdir. Bu yüzden bu standartlara uymamız bizim yararımıza olacaktır.
Genel olarak Html’deki elementleri ve yapılarını görmüş olduk. Umarım yararlı olmuştur. Bir sonraki yazımda görüşmek üzere…
