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.

Hiç yorum yok: