img etiketi
Sayfamıza resim eklemek için img etiketi kullanılır. Src parametresi ile resmin yolu (url'si) belirtilir.
Kullanımı:
<img src=”images/resim1.jpg” />
img etiketinin parametreleri:
Src: Eklenecek resmin yolunu belirtir.
Width: Eklenen resmin sayfada istenilen genişlikte gösterilmesini sağlar.
Height: Eklenen resmin sayfada istenilen yükseklikte gösterilmesini sağlar.
Uyarı: Width ve height parametreleri resmin orjinal boyutunu değiştirmez, sadece sayfada verilen boyutlarda görünmesini sağlar. Resim ziyaretçinin bilgisayarına orjinal boyutuyla indirilir. Örneğin 1600x1200 ebatlarında bir resmi sayfamıza yerleştirdik ve genişliğini width parametresi ile 400, yüksekliğini ise height parametresi ile 300 px ayarladık. Bu durumda resim sayfada 400x300 boyutlarında görünecektir. Ancak sayfa ziyaretçinin bilgisayarına yüklenirken resim orjinal haliyle yükleneceğinden sitenin trafiği gereksiz yere artmış olacaktır.
Bu nedenle sayfadaki resimleri bir resim düzenleme programı ile gerekli boyutlara getirip, ondan sonra sayfaya eklemekte fayda vardır.
Border: Resme kenarlık ekleyip kalınlığını belirlemek için kullanılır. Border=”0” olursa çerçeve çizilmez. Buradaki sayı arttıkça çerçevenin kalınlığı da artar.
Alt parametresi: Bu parametrenin en önemli faydası, arama motorlarına resmin neyle ilgili olduğu hakkında bilgi vermesidir. Bu parametreyi kullanarak resim ile ilgili açıklama ya da anahtar kelimeleri belirtebiliriz. Bu sayede örneğin google görsellerde yapılan aramalarda, resimlerimizin de de bulunması ihtimali artacaktır.
Ayrıca resim ziyaretçinin bilgisayarına herhangi bir sebepten dolayı yüklenemez ise, resmin yerinde bir açıklama yazısı görünmesini sağlar.
Align: Resmin etrafına yazı yazılacaksa, resim ve yazının birbirine göre konumları belirlenir. Örneğin align="left" yapılırsa resim solda, yazılar sağda yer alacaktır.
<img src="resimKucuk.jpg" align="left" />
html img etiketi kullanımı, web sayfasına resim ekleme koyma, img, alt, align, src, resim ekleme, html resim
KONU İLE İLGİLİ ÖRNEKLER
Örneğin kodlarını görmek ve değiştirmek için Kendin Dene butonuna tıkla.
Tablo içerisine küçük resimler yerleştirilip, büyük resimlere link verilmiş ve linklerin boş pencerede açılması sağlanmıştır.
<a href="resimBuyuk.jpg" target="_blank"> <img src="resimKucuk.jpg" align="left" /> </a>
26095 kez okundu.