BloklamaBloklama
Bu sayfada belli başlı bloklama elemanlarını tanıtacağım. Tüm bloklama elemanlarını bu sayfada tanıtmayı düşünmüyorum. Sadece çok kullanılanları anlatacağım. Ancak HTML'de ilerlemiş olanlar için hazırlamakta olduğum HTML Kodları'nda hem tüm kodları, hem de bu kodların tüm parametrelerini bulabileceksiniz.
Nesne Ortalama Bloğu
İlk tanıtacağım bloklama aracı <center>...</center> kodlarıdır. Bu kodlar arasına yazılan HTML nesneleri sayfanın ortasına yaslanır (merkezlenir). Özellikle sayfa tasarımında, tabloların her boyuttaki pencereye uyum sağlaması için kullanılır. Küçük bir uygulama yapalım.
Bu uygulama size tanıdık geliyor mu? Dikkat ediyorsanız, okumakta olduğunuz bu sayfa da aynı mantıktan yola çıkılarak hazırlanmıştır. Pencerenin boyutlarıyla oynayarak <center> kodunun işlevini görebilirsiniz. Unutmayın, <center> kodu ile sadece bir tabloyu değil, her türlü HTML nesnesini ortalamak mümkündür.
Sayfa İçi Bloklar
şimdi <center> kodundan daha gelişmiş bir bloklama aracını öğrenelim: <div> Bu kod ile HTML sayfalarını kısımlara ayırırız. CSS derslerinde öğreneceğimiz tarz yaratma yöntemleriyle kullanılır genelde. Şimdilik align parametresini kullanabiliriz. <div align="center">...</div> kodları, <center>...</center> kodlarının işlevini görür. span kodu da div koduyla aynı işlevi görür ama span kodunun align parametresi yoktur. Not: <span> kodunu Netscape Navigator 5 desteklemiyor.
Bu uzun uygulamada henüz öğretmediğim style="..." parametrelerini kullandım. Sizler uygulamayı incelediğiniz zaman bu parametrelerin ne işe yaradığını anlamışsınızdır. style="..." parametresiyle veya <style>...</style> kodu ile ilgili ayrıntılı bilgileri CSS derslerimizde göreceğiz. Şimdilik <div> kodu ile sayfa bölümlemesi yapmayı göstermek için kullandım; sizin için de bir ön çalışma olmuş oldu. Bu uzun uygulamayı daha da uzatmamak için <div> kodlarını birer paragrafı kapsayacak şekilde kullandım; elbette bu kodları bir sürü paragrafı kapsayacak şekilde kullanabilirsiniz. Yukarıdaki uygulamada <div> kodu yerine <p> kodunu kullanmak daha mantıklı olurdu; style="..." parametresi bu kod için de geçerlidir. Bu söylediklerim span kodu için de geçerli ama bu kodun align="..." parametresini desteklemediğini tekrar hatırlatırım. (Bu bir eksiklik değil, style="..." parametresiyle bunu kolayca aşarız. Yukarıdaki uygulamayla ilgili son birşey daha: dikkatinizi çektiyse style="text-align:justify" parametresi ile paragrafı iki yana yasladık. (Şimdilik tiyo olarak kullanın, CSS dersinde konunun tamamına hakim olacaksınız, bunları herkes göstermiyor, değerimi bilin.:))
Alıntı Bloğu
Bir başka bloklama kodu: <blockquote>...</blockquote> (alıntı bloku). Bu kod arasına yazılan yazıların solunda ve sağında bir miktar boşluk bırakır.
Sütunlandırma
Bir başka bloklama elemanı <multicol>...<multicol> kodudur. Bu kodla sütünlama yapmak mümkündür. Yapmak istediğimiz sütün sayısını cols="..." parametresiyle belirleyebiliyoruz. Ayrıca sütunlar arası mesafeyi piksel cinsinden belirleyebilmek için gutter="..." parametresini kullanırız. Tüm metnin genişliğini ayarlamak için width="..." parametresi kullanılabilir. Not: Malesef bu kod Netscape için geçerlidir, IE browserlar bu kodu desteklemez. Benim gibi IE5 kullananlar görünmez tablolar yöntemini kullanabilirler.
Başlık Oluşturma
Şimdi çok kullanılan bir başka bloklama elemanına geçelim. <h1>...</h1> kodu ile metin başlıkları oluşturabilirsiniz. <h1> (heading1) kodu en büyük boyutlu yazı ile başlık atar, <h6> ise en küçük boyutta başlık atar. Anlayacağınız üzere bu kodlar şunlardır: <h1>, <h2>,......, <h6>. CSS derslerinde bu kodların özellikleri üzerinde oynayacağız.
Bu sayfada en çok kullanılan bloklama elemanlarını tanıttım. Bloklama elemanlarından <p>, </address> gibi bazı kodları daha önceki sayfalarda görmüştük. Bir kısmını ise anlatmaya gerek görmedim; sayfayı uzatıp okuyucunun dikkatinin dağılmasını istemedim, pek kullanılmayan bu kodları referans sayfalarında inceleyebilirsiniz. Bu sayfalık bu kadar. © 2010 Bucdet, Teşekkürler Mymalatya Bugün 4 ziyaretçi (11 klik) kişi burdaydı! |
