Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde HTML ve CSS adlı yazımızda HTML'de CSS kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 9 – CSS linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML Bloklar konusuna gözatıp, HTML'de Blok etiketlerinin en önemlisi olan div kullanımı , web sitesi dizayn ederken en çok kullanılan yöntem olan < div >'lerin öneminden bahsedeceğiz.
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ü özelleştirebiliriz. Bir çok HTML etiketinin varsayılan görüntüsü ya blok şeklinde ya da inline şeklindedir. Bu blok ve satır içi elementler nelerdir bunlara bir bakalım;
Blok Türündeki Etiketler (Block-level Elements)
Blok etiketlerini genel tanımlamak gerekirse, blok 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. Div etiketi blok türündeki bir etikettir. Her yeni bir div , yeni bir alanı belirler. Tüm web site dizaynları ise div'lerden oluşmaktadır. Yani div'ler için HTML'in yapı taşı diyebiliriz.
Örnek bir div kullanımı nasıl olur ona bakalım ;
<!DOCTYPE html> <html> <body> <div>İlk Blok</div> <div>İkinci Blok</div> <p>DIV etiketi blok türündeki bir etikettir ve her zaman yeni satırda başlar.</p> </body> </html>
Çıktısı ;
DIV etiketi blok türündeki bir etikettir ve her zaman yeni satırda başlar.
Görüldüğü üzere , oluşturduğumuz her div kendine ait bir alan oluşturdu ve her defasında yeni bir satırda işleme başladı. Bu div'in varsayılan olarak kullanıldığı halidir. Biz bu bloklardan web sitelerimizde ki dizaynı oluşturacağız. Örnek vermek gerekirse , sitemizde ki header(üst kısım)'dan tutun , sidebar'lara kadar tüm dizayn'ı div'ler ile yapıyoruz. Bu kısımda div kullanımını gördük , ilerleyen derslerimizde divler ile nasıl bir websitesi dizaynı yapılacağından bahsedeceğiz.
HTML'deki diğer Blok Türündeki Etiketler ;
address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1,h6, header, hr, li, main,nav, noscript, ol, output, p, pre, section, table, tfoot , ul, video
Satır İçi Etiketler (Inline Elements)
Satır içi etiketleri genel bir 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. Bu yüzden satır içlerinden kullanılmasından ötürü bu ismi almıştır.
Satır içi etiketlerde ne çok < span > etiketi kullanılır. Satır içinde bir bölge oluşturmak istediğimizde < span > etiketi içerisinde içeriklerimizi yerleştirebiliriz. Örnek span kullanımına bakalım ;
<!DOCTYPE html> <html> <body> <span>Kodlama </span> <span>Vakti</span> </body> </html>
Çıktısı ;
Kodlama Vakti
Görüldüğü üzere , etiketini her ne kadar alt alta yazsam da, çıktısı yan yana oldu. Çünkü bir satır içi etiketidir ve yeni bir satıra ihtiyaç duymaz.
HTML'deki diğer Satır İçi Etiketleri ;
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i img, input, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var
Div Kullanımı
Div etiketi genellikle diğer HTML etiketleri için kapsayıcı(container) olarak kullanılır. Div etiketinin kendine özel parametreleri yoktur lakin en çok id, class ve style parametrelerini kullanır. CSS ile birlikte kullanıldığında, < div > etiketi içerik bloklarını biçimlendirmek için kullanılabilir.
Div ile bir örnek yapalım , bir < div > etiketi açıp kapatalım ve içerisini yazılarımızla dolduralım ve div etiketinin style parametresine CSS kodları ekleyip sonucu görelim ;
Örnek ;
<div style="background-color: deepskyblue; color: white; padding: 20px;"> <p>Div Örneği</p> <p>CSS ve DİV kullanarak bir blok oluşturduk.</p> </div>
Çıktısı ;
Div Örneği
CSS ve DİV kullanarak bir blok oluşturduk.
Görüldüğü üzere div etiketi , içerisinde ki p etiketini kapsamış (container) oldu. Div etiketinin style parametresine ise CSS'de öğrendiğimiz nitelikleri ekledik.
Span Kullanımı
Span etiketi , genellikle metinler için kapsayıcı (container) olarak kullanılır. Span etiketinin kendine özel parametreleri yoktur lakin en çok id, class ve style parametrelerini kullanır. CSS ile birlikte kullanıldığında, < span > etiketi metnin bölümlerini biçimlendirmek için kullanılabilir.
Span Örneği ;
<p>Bu bir <span style="color:red">SPAN</span> örneği.</p>
Çıktısı ;
Bu bir SPAN örneği!
Görüldüğü üzere , p etiketi içerisinde ki bir metnin içindeki bir bölümü span etiketi ile kapsamış (container) olduk ve span etiketinin özelliklerini o bölüme verdik (Örnek color:red ).
Tebrikler! Bu derste HTML’de Blok ve Div kullanımını, Blok-level ve inline etiket türlerini , Span etiketi kullanımını öğrendik.Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.
HTML Derslerinin onuncu kısmı olan dersimizde , HTML’de Bloklar ve Div Kullanımı konusunu öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !
Test’e katıl öğrendiklerini pekiştir !
TESTE BAŞLAMAK İÇİN TIKLAYINIZ!
Bir sonraki derse “HTML Dersleri 11 – Sınıflar (Classes)” geçmek için tıklayınız !
