13 Mayıs 2011 Cuma

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:

infial_html
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 !!! :))


8 Mayıs 2011 Pazar

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,


Sistine

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.