Tüm HTML etiketlerinin kendi türlerine göre varsayılan bir görünümü vardır , bizler CSS kullanarak bu varsayılan görünümü değiştirebiliriz.
Bir çok HTML etiketinin varsayılan görüntüsü ya blok yani blok seviyeli etiket şeklinde ya da inline yani satır içi seviyeli etiket şeklindedir.
Bu blok ve inline elementler nelerdir bunlara bir bakalım;
Block etiketlerini genel olarak tanımlamak gerekirse, block türünde ki bir etiket her zaman yeni bir satırda başlar ve olduğu alandaki tüm genişliği alır. (sağa veya sola kadar uzanır).
Bu blok etiketlerinden en önemlisi <div> etiketleridir. Peki nedir bu <div> etiketi?
Aslında <div> etiketi HTML sayfada bölümleri temsil eder. Yani her yeni bir div, yeni bir bölüm anlamına gelir. Bölüm bölüm ayırmak istediğimizde genelde <div> etiketini kullanırız. Ancak blok seviyeli etiket ihtiyacımızı genelde bu etiketten karşılarız, şu an pek bir anlam ifade etmeyebilir çünkü kullanıldığında çıktı olarak farklı bir görünüm vermez, amaç burada zaten bir görünüm vermesi değil bu etiketi kullanarak görünümü özelleştirmektir. Bunun içinde CSS gereklidir, zaman ilerledikçe CSS ile özelleştirmeler de yapabileceksiniz.
Sonuç olarak tüm web site dizaynları <div> etiketlerinden oluşmaktadır ve <div> etiketi HTML'in yapı taşı diyebiliriz.
Örnek bir div kullanımı nasıl olur ona bakalım:
<!DOCTYPE html>
<html>
<body>
<div> Merhaba Dünya </div> Bu bir test içeriğidir...
</body>
</html>
Yukarıdaki örneği çalıştırdığınızda hiçbir görünüm değişikliği olmadığını fark edeceksiniz, ancak "Bu bir test içeriğidir..." yazısının bir satır alttan başladığını göreceksiniz.
Bu örnek blok etiketini anlamakta faydalı olmuştur diye umuyorum. Aklınıza takılan her soruları en alt kısımından Soru Sor butonuna basarak sorabilirsiniz.
HTML'deki diğer Blok Türündeki Etiketler :
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
Satır içi etiketleri genel anlamda tanımlamak gerekirse, Satır içi etiketler , yeni bir satıra geçme gereği duymaz , sadece ihtiyaç duyulduğu yere kadar genişliğe sahiptir fazlasında gözü yoktur. Hemen bir örnek verelim.
<p>Normal bir yazı sırasında <span>span içerisinde yazılan bu alan</span> diğerlerinden farklı görünmeyecek.</p>
Yukarıdaki örneği çalıştırdığınızda <span> etiketi içindeki metin olduğu gibi kalacak ve alt satıra inmeyecektir, olduğu yerde kalacaktır. <span> etiketi yerine <div> etiketini yazmış olsaydık div içindeki metin bir satır aşağı inecekti.
Hemen bir örnek yapalım ve daha iyi anlamanızı sağlayalım.
Umarım anlatabilmişimdir.
Ayrıca diğer satır içi seviyeli etiketlerin listesine aşağıdan ulaşabilirsiniz;
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label>
<map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
Sorular (0)