23 Mayıs 2011 Pazartesi

Web Sayfasına Radiobutton Eklemek

İnternette gezinirken uğradığınız sitelerin kayıt formlarında sıklıkla karşılaştığınız daire şeklindeki onay kutucukları hepinizin dikkatini çekmiştir. "radiobutton" adı veriilen bu elemanlar kullanıcılara çoktan seçmeli sorular sormak için kullanılırlar. Genelde medeni durum, cinsiyet gibi tek cevap gerektiren sorular sorulurken kullanılırlar. Bu tip elemanlar site sahiplerinin ziyaretçilerle ilgili bilgi toplamalarını kolaylaştırır. Ayrıca günümüzde oldukça yaygınlaşmış olan alışveriş sitelerinde de kulanıcılar için ürün seçimi, fiyat aralığının belirlenmesi, marka seçimi gibi konularda kolaylık sağlar. Gelin şimdi bu minik elemanın nasıl kullanıldığına bir bakalım ;

Radiobuttonlar web sayfalarına < input type="radio" / > tagı ile yerleştirilir. Bu tagın genel kullanımı şu şekildedir,
Siteye kaydolmak isteyen bir ziyaretçinin cinsiyetinin sorgulanması

Lütfen cinsiyetinizi belirtiniz:
< input type="radio" name="cinsiyet" value="k" title="Birini Seçin" />Kadın < br/ >
< input type="radio" name="cinsiyet" value="e" title="Birini Seçin" />Erkek < br/ >

Bu kodlamanın sonucu şu şekilde görüntülenir,

Lütfen cinsiyetinizi belirtiniz:
Kadın
Erkek

Bu tag içindeki parametreleri de açıklayalım.

name : Radiobutonları gruplandırmak için kullanılır. Bu şekilde kullanıcının iki seçenekten yalnızca birini seçebilmesi sağlanır. İsimler farklı olursa iki seeçenek de işaretlenebilir. Bu da kullanıcı bilgilerinde karmaşaya yol açar. Bu yüzden aynı türden seçmeli sorularda radyobutonlara verilen isimler de aynı olmalıdır.

value : Radyobutondan yapılan seçimle ilgili bir değerin sunucuya aktarılması için kullanılır. Aktarılan değer sunucuda işlenir ve veri tabanına kaydedilir. Mesela bu örnekte erkek seçilirse sunucuya "e" değeri yollanmış olur.

title : Fare ile radiobutton üzerine gelindiğinde görüntülencek bilgi mesajı için kullanılır.

21 Mayıs 2011 Cumartesi

Resimlere Link Vermek

Web tasarımda görsellik herşeyden önce gelir. Görsel öğeler metinlere göre daha dikkat çekicidir ve anlaşılması kolaydır. Web sayfanızın içeriğini uygun görsellerle donatırsanız ziyaretçileriniz sayfada gezinirken zorlanmaz. Görsel öğeler sayfa kullanımını kolaylaştırır. Bu sebeple tasarımcı sayfayı hazırlarken resimlerden olabildiğince çok faydalanmalıdır. Resimlere link vermek buna örnek olarak gösterilebilir. Mesela bağlantıları;

Hotmail
Google
Yahoo
Bing
Facebook

Yapmak yerine,







Şeklinde resimlere link vererek web sayfanızı daha kullanışlı hale getirebilirsiniz. Sayfaya resim eklemek için < img/ > tagı kullanılır. Linkler < a > < /a > tagı ile verilir. Resme link vermek için < img/ > tagını < a > < /a > tagları arasına koymak gerekir. Şimdi bunun nasıl yapıldığını gösterelim;

< a href="http://www.facebook.com" target="_blank" title="Facebook" ><img src="facebook.jpeg" alt="Facebook" /> < /a >

Bu kodlamanın sonucu aşağıdaki gibidir;

Facebook


Son olarak taglar içinde gördüğünüz "src", "href", "title", "alt", ve "target" parametrelerini açıklayalım,

src : Görüntülenecek resmin konumunu belirtmek için kullanılır.

href : Bağlantı linkinin adresini yazmak için kullanılır.

target : Bağlantıya tıklandığında yeni sayfanın nasıl açılacağını belirtmek için kullanılır.Değer olarak _blank yazılırsa bağlantı, sizin sayfanız kapanmadan yeni bir sayfada açılır; _self yazılırsa sizin sayfanız kapanır ve linkin bağlanıdğı sayfa görüntülenir.

title : Linkeleri verirken kullanılır. Ziyaretçi fare ile link üzerine geldiğinde açıklayıcı mesajlar görüntülenmesini sağlar.

alt : Web sayfasına resim eklerken kullanılır. Ziyaretçinin web browser'ı (Internet Explorer, Firefox, Chrome artık her ne ise) resmi gösteremediği zaman resme alternatif bir metnin görüntülenmesini sağlar. Ayrıca buraya yazılan yazılar arama motorları tarafından indexlendiğinden "alt" parametresini kullanmanız sitenizin bulunabilirliğini arttıracaktır.

Bu şekilde resimleri düğmelere(buttonlara) çevirmiş oluyoruz...