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.

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;

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...

Web Sayfasına Liste Eklemek

Web sayfamda içeriğimi başlıklar halinde görüntülemek istiyorum nasıl yapabilirim? Sitemde içindekiler bölümü oluşturmak istiyorum nasıl yaparım? HTML sayfasında listeleme nasıl yapılır? HTML bir insan olsaydı tüm bu sorulara şu cevabı verirdi:

< ol > < /ol > ve < ul > < /ul > taglarını kullan!!

Peki < ol > ve < ul > tagları ne manaya gelir? Nasıl kullanılır diye sorduğunuzu duyar gibiyim. Lafı uzatmadan açıklayayım da siz de kurtulun ben de!!

< ol > : Ordinary list "sıralı liste" demektir. Tercih ettiğiniz tipe göre liste elemanları 1,2,3 veya a,b,c veya i, ii, iii şeklinde işaretlenerek sıralanırlar.

< ul > : Unordinary list "sırasız liste" demektir. Tercih ettiğniz tipe göre liste elemanları disk, çember ya da kare şeklinde işaretlenerek sıralanırlar.

Her iki liste türünde de sılamak istediğimiz elemanları < li > < /li > taglarının arasına yazarız. Şimdi sıralı liste nasıl yapılır gösterelim:

< ol type="a" >

< li > Birinci Eleman< /li >

< li >İkinci Eleman< /li >

< li >Üçünncü Eleman< /li >

< li >Dördüncü Eleman< /li >

< /ol >

Burada type parametresine a, 1, i, I, A şeklinde değerler verilebilir. Çeşitli Durumlar için listeleme stillerini aşağıda tablo şeklinde gösterdim.

type="a" için;	type="1" için;
Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman	Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman
type="i" için;	type="I" için;
Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman	Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman

< ul > yani sırasız listenin kullanımı da diğeri gibidir burdaki tek fark type parametresine circle, disc ve square değerlerinin yazılmasıdır. Bu tagın genel yazımını ve kullanııclara sunduğu listeleme stil seçeneklerini aşağıda sıraladım:

< ul >

< li >Birinci Eleman < /li >

< li >İkinci Eleman < /li >

< li >Üçünncü Eleman < /li >

< li >Dördüncü Eleman < /li >

< /ul >

Liste elemanlarının görünümü tarayıcıdan tarayıcıya değişim gösterebilir. Ayrıca kullandığınız metin editörü de bunu etkileyebilir. Mesela ben Blogger'ın editörünü kullanıyorum ve bu editör sırasız listelerde sadece "disc" stiline izin verdiği için diğer stilleri bir resim dosyası olarak göstermek zorunda kaldım. Liste konusu sadece burda yazdıklarımla sınırlı değil. Ayrıca CSS ve javascript kullanarak liste elemanlarının görünümünü büyük ölçüde değiştirebilirsiniz. CSS ve Javascript kullanarak listelerden açılır menüler tasarlanmakta. İsteyenler internette bununla ilgili pek çok kaynak bulabilir. Yakında ben de listelerden menü yapımı ile ilgili bir yazı yazmayı planlıyorum. Şimdilik hepsi bu kadar. Hepinize kolay gelsin.

English Version

Web Sayfasına Checkbox (Onay Kutucuğu) Koymak

İnternette gezinirken, girdiğiniz web sayfalarının özellikle kullanıcı kayıt formu bölümlerinde; ilgi alanlarınız başlığı altında, ziyaretçilerin eğilimleri ile ilgili hızlı veri toplamaya yarayan onay kutucuklarına rastlamışsınızdır. Bu bölümlerde ziyaretçilere müzik, sinema, gezi, teknoloji gibi sıralı seçenekler sunulur ve ziyaretçi bu seçeneklerin başında bulunan küçük kutucuklara tik işareti koyarak onaylar. Seçilen kutucuklar sitenin sunucusuna bir takım değerler gönderirler ve bu değerler işlenerek veri tabanına kaydedilir. İşte bu bilgileri toplamakla görevli küçük form elemanına "checkbox" onay kutucuğu adı verilir. Web sayfasına checkbox eklemek için HTML sayfasına < input type="checkbox" / > tagını uygun bir yere eklemeniz yeterlidir. Bu tagın görevini yerine getirebilmesi için gerekli birtakım parametrelerin tag içine yazılması gerekir. Bu kadar açıklamadan sonra şimdi de tagımızın nasıl kullanıldığını gösterelim;

< input type="checkbox" name="box1" checked="checked" value="secim1" title="Seç Birini" /> Birinci Seçenek < br/>

< input type="checkbox" name="box2" />İkinci Seçenek < br />

< input type="checkbox" name="box3" />Üçüncü Seçenek < br />

< input type="checkbox" name="box4" /> Dördüncü Seçenek < br />

Birinci Seçenek

İkinci Seçenek

Üçüncü Seçenek

Dördüncü Seçenek


Şimdi de tag içindeki turuncu ile işaretlenmiş olan parametreleri açıklayalım;

name : Onay kutucuğunu isimlendirmek için kullanılır. Web sayfasında birden fazla konuda onay kutucukları kullanılmış olabilir. Bu durumda ziyaretçiden gelen onay verisinin ne ile ilgili olduğunun sunucudaki bilgisayara belirtilmesi ve işlemlerde olası karmaşanın önlenmesi için checkbox'un mutlaka isimlendirilmesi gerekir.

checked : Bazı durumlarda onaylanmış olması şart olan seçeneklerin otomatik olarak onaylı görünmesi için kullanılır.

value : Onay kutucuğunun işlenmek üzere sunucuya göndereceği değeri belirtir.

title : Ziyaretçi fareyi onay kutucuğunun üstüne getirdiğinde beliren bilgilendirme mesajı için kullanılır.

Web Sayfasına Yazı Alanı Eklemek

Web sitenizi ziyaret edenlerin görüş ve önerilerini yazabilecekleri yazı alanları oluşturmak için < textarea > < /texarea > tagını kullanmalısınız. bu tag kullanıldığı yerde bir yazı alanı oluşturur. Bu tagın genel kullanımı şu şekildedir;

< textarea cols="15" rows="15" style=" float: left; font-size:16px; font:'Arial Black'; background: #333; color:#09F; text-shadow: 0.1em 0.1em 0.5em #FFF" > Yazı Alanı< /textarea >

Yazı Alanı

< textarea > tagının içinde kullandığımız parametreleri açıklayalım;

cols : Yazı alanının genişliğini yani bir satırda kullanılabilecek max karakter sayısını belirlemek için kullanılır.

rows : Yazı alanının yüksekliğini (bir kerede görüntülenecek satır sayısını) belirlemek için kullanılır.

style : Pek çok HTML tagının içinde kullandığımız bu parametreyi burada yazı alanını biçimlendirmek için kullandık. Yazı alanına arkaplan rengi, yazı karakteri, harf puntosu ve yazıların altına gölge, ışıltı (text-shadow efekti internet explorer6 da görüntülenmez) gibi görsel özellikler ekledik.

Web Sayfasında "iframe" Kullanmak

< iframe > tagı web sitelerinde sayfaya dahili bir html sayfası yerleştimek için kullanılır. Bu tagı koyduğunuz yerde bir kutucuk belirir ve bu kutucuk içinde adres olarak belirttiğiniz html sayfası görüntülenir. Web sitelerinde sıklıkla görmüş olduğunuz içinde kayan yazıların olduğu (genelde "Duyurular" başlığı altında yayınlanan hareketli yazılar için kullanılır) kutular iframe ile yapılır. Bu tagın genel kullanımı şu şekildedir,

< iframe src="deneme.html" width ="400" height="550" scrolling="no" frameborder="1" name="deneme" id="deneme" > < /iframe >

Şimdi "iframe" içinde kullanılan parametreleri açıklayalım;

src : Görüntülenmek istenen html sayfasının adresini belirtmek için kullanılır. Yeri gelmişken söyleyeyim; adres kısmına ille de html sayfası koymak zorunda değilsiniz. İsterseniz bir video ya da resim dosyasının adresini de verebilirsiniz. Browser'ınız o dosyaları da görüntüleyecektir.

width : Kutucuğun genişliğini belirlemek için kullanılır.

height : Kutucuğun yüksekliğini belirlemek için kullanılır.

scrolling : Kutucuk kenarına sürükleme çubuğu eklemek için kullanılır. Scrollbar'ı göstermek için "yes" gizlemek için "no" yazılır.

frameborder : Kutucuğa kenarlık eklemek için kullanılır. "0" ve "1" değerlerini alabilir.

name : Kutucuğu isimlendirmek için kullanılır. Web sayfasına koyduğunuz bir link'in tıklandığında aynı kutucuk içinde görüntülenmesini istiyorsanız, linkin "target" parametresine "iframe" için atadığınız ismi yazın. Sayfanın kutucuk içinde açıldığını göreceksiniz.

id : Kutucuğu CSS ile biçimlendirmek için kullanılır.

Benim iframe ile ilgili bildiklerim bu kadar... Sadece html görüntülemek zorunda değilsiniz demiştim. İsterseniz video da görüntüleyebilirsiniz. İşte size bunu çok güzel bir örneği;

< iframe width="320" height="240" src="http://www.youtube.com/embed/JOddp-nlNvQ" frameborder="0" allowfullscreen > < /iframe >

Bu kodu web sayfanıza ekleyerek Thor filminin fragmanını ziyaretçilerinize izletebilirsiniz. Gördüğünüz gibi iframe son derecede kullanışlı bir tag (kod ya da etiket siz ne derseniz deyin). Bu tagı kullanarak çok güzel tasarımlar yapabilirsiniz. Ziyaretçilerinizin sitede hoşça vakit geçirmesini sağlayabilirsiniz. Hepinize kolay gelsin.  Şimdilik hoşçakalın...

HTML Kodları ile Web Sayfasına Müzik ve Video Eklemek

Binbir uğraşıyla, özene bezene bir web sayfası hazırladınız ve bu sayfada, ziyaretçiler dolaşırken bir fon müziği çalsın istiyorsunuz. İşte bu durmda HTML'nin < embed > kodu imdadınıza yetişiyor. Bu tagı kullanarak videoları sayfanızda görüntüleyebilir, mp3, waw, wma uzantılı müzik dosyalarını web sayfanıza fon müziği olarak kullanabilirsiniz. Peki ama bu tag nasıl kullanılır? Lafı fazla uzatmadan bu tagın ya da kodun nasıl kullanılacağını bir örnek üzerinde gösterelim,

< embed src="müzik dosyası.mp3" hidden="true" autostart="true" loop="true" >

Şimdi bu tagın içinde geçen parametreleri kısaca anlatalım:

src : Film ya da müzik dosyasının konumunu (adresini) belirtmek için kullanılır.

hidden : Mediaplayer eklentisinin görünürlüğünü değiştirmek için kullanılır. true yaparsanız eklenti görünmez false yaparsanız görünür.

autostart : True değerini verirseniz müzik dosyası sayfa yüklenir yüklenmez otomatik olarak çalmaya başlar.

loop : Müziğin kaç kez çalınacağını belirtmek için kullanılır. -1 ya da true değerini verirseniz sürekli çalar. false derseniz bir kez çalar ve durur.

NOT: Eğer amacınız sadece fon müziği koymak isre hidden parametresini true yaparsınız ve bu tagı olduğu gibi < head > < / head > arasına yazarsınız böylece sayfada yer işgal etmemiş olur.
Web Sayfasına Video Eklemek

< embed > tagı web sayfasına video eklemek için de kullanılabilir. Bununla ilgili örnek kodlama şu şekildedir;

< embed src="http://www.youtube.com/v/hY-vXcmpZIw?version=3&hl=en_US&rel=0" width="425" height="349" >

"width" ve "height" parametreleri videonun boyutlandırılması için kullanılır. Burada verdiğim örnek kodu Lady Gaga'nın Poker Face isimli parçasını bloğuma eklemek için kullandım. Keyfini çıkarın !!! :))

HTML Kodları ile Web Sayfasına Resim Eklemek

Web sayfanızın ziyaretçilerine güzel görünmesi ve site içeriğinin zenginleştirilmesi için, anlatılan konu ile ilgili ya da dekoratif amaçlı resimler mutlaka kullanılmaldır. Genelde web sitelerinde gif, jpeg ve png uzantılı resimler kullanılır.

Web sayfasına resim yerleştirmek için < img > tagı kullanılır. Bu tagın diğer HTML kodları gibi < img ></ img > şeklinde kapatılmasına gerek yoktur. Bu tagın genel kullanımı şöyledir:

< img src="örnekresim.jpg" >

"src" kodu sayfaya ekleyeceğimiz resim dosyasının konumunu, dosyanın nereden ekleneceğini belirtmek için kullanılır. Burada eklenmek istenen resmin konumunun doğru yazıldığından emin olunmalıdır. Aksi takdirde resim görüntülenemez. Konum olarak "src" kodunu başka bir web sayfasındaki resmi eklemek için de kullanabilirsiniz src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivNTPojmcy7JFv_jqsujs-w6BFtZUhL9L3_SWCW4gZZEGqEf_-17TPtaa4p-kuuMmboSTmKeE2SKun4wpXtrcqVo-1TsWiO-7So77B2l2id1LKhjFtYYDbRB9SQ8x3_dej27XB4mNLRKZS/s200/sistine_1600x1200.jpg" bu şeklinde host için ayırdığınız yerden de tasarruf etmiş olursunuz.

Şimdi bu tagı bir örnek üzerinde açıklayalım;

< img border="0" height="150" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNB_sc1YMWh1LVL0Z5RTq6UQGXZMEEM8UpWX1uIIW8bEQ3chmRt-ZplryNF8YAThRC18hOOnh0shdqYs32iMiOFeGbqbrRj8Ybj_r8znXzif8N6owIoPvDdgFPNNueV0RrwmZ-b_pXv6Q/s200/sistine_1280x960.jpg" alt="Sistine" title="Sistine" >

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir,




Görüldüğü gibi < img > tagının içinde "src" ile birlikte kullanılan birkaç tane parametre bulunmaktadır. Bunları da açıklayalım,

alt : Resim yerine kullanabileceğiniz alternatif metindir. Genelde resim yükelenemediği zaman ziyaretçilere bilgi vermek için kullanılır. Resme verdiğiniz özel bir isim varsa (bu sattığınız bir ürünün adı olabilir) buraya yazabilirsiniz. alt parametresi arama motorları tarafından kaydedilir. ve sitenizin erişilebilirliğini arttırır.

border : Resme eklemek istediğiniz kenarlığın kalınlığını belirtir.

width : Resmin genişliğini belirlemek için kullanılır.

height : Resmin yüksekliğini belirlemek için kullanılır.

title : Buraya yazdığınız metin ziyaretçi mouse ile resim üzerine geldiğinde görüntülenir.

Stop motion animasyon Çizgi Dışı

İnternet ortamında dolaşırken bulduğum cep telefonu kamerası ve Adobe Premiere programı kullanılarak hazırlanmış Stop Motion tarzı kısa film çalışması