Zengin içerikli bir HTML sayfası yapıyorsanız muhtemelen sayfaya resim de eklemeniz gerekir. Bir web sayfasına resim eklemek için img tagı kullanılır. Resmin nasıl görüneceğini belirleyen birçok özellik resim elementinde bulurnur. Bu özelliklere farklı değerler verilerek resmin sayfada istenen görünüme kavuşması sağlanır.
img Tagının Özellikleri
src: Eklenecek resmin URL'si. Resim sitenin yüklü olduğu konumda ise sadece resmin dosya adını ve uzantısını yazmanız yeterlidir.
width: Resmin sayfada görünecek genişliği.
height: Resmin sayfada görünecek yüksekliği.
alt: Resim herhangi bir nedenle yüklenemezse resmin bulunduğu alanda bu özelliğe verilecek text mesaj görünür.
border: Sıfırdan farklı bir değer verildiğinde resmi belirtilenen kalınlıkta çerçeve içine alır.
title: Birçok HTML elementinde kullanılan bir özelliktir. Elementin (resmin) üzerine gelince çıkacak bilgilendirme mesajı bu özelliğe değer olarak verilir.
align: Bu özelliğe verilen değer ile resmin sayfadaki pozisyonu belirlenir.
onload: Resmin yüklenmesi tamamlandığında çalışacak javascript fonksiyonu bu özelliğe değer olarak verilir.
img src Özelliği
Resmin sunucuda bulunduğu yolu ya da URL'yi bu özellikle belirleriz. Resim aynı sunucuda ise src özelliğine dosyanın sunucudaki yolu yazılır. Resim farklı bir sunucuda ise resmin tam URL'si yazılır.
Aynı sunucuda bulunan resmin src kullanım örnekleri:
<img src="resim.jpg" /> <img src="img/resim.jpg" /> <img src="../img/resim.jpg" />
Farklı sunucuda bulunan resmin src örneği:
<img src="https://notpast.com/img/95q5a2g7288c.jpg" />
img width ve height Özellikleri
Resmin web sayfasında görüneceği alan bazen resim boyutları ile aynı olmayabilir. Bu gibi durumlarda resme istenen ölçüleri vermek için width ve height özellikleri kullanılır. width ve height özellikleri tanımlanmadığı zaman resim sayfada gerçek ölçüleri ile görünür. Bu ölçülerden yanlızca birine değer verildiğinde resim oranları korunarak belirlenen ölçüde görünür. Her iki özelliğede değer verildiğinde resim oranları yeni verilen ölçülerde olduğu gibi görünür. Bu kullanım resim ölçüleri ile uyumlu olmadığı zaman resimde oransal bozukluklar oluşur.
Resim width ve height özelliklerinin örnekleri:
<img src="resim.jpg" width="100" /> <img src="resim.jpg" height="100" /> <img src="resim.jpg" width="100" height="100" />
img alt Özelliği
Bu özellik sıklıkla ihmal edilir. Bunun nedeni web sayfasında görünğme etki etmemesidir. Ama sayfanın arama motorlarında indexlenmesinde önemli rol oynar. Tarayıcı resmin içeriğini göremez ancak buraya yazdığınız resim açıklamasını okuyabilir ve resimle ilişkilendirebilir. Bu sayede web sayfanız doğru ve eksiksiz şekilde indexlenebirilir. Örneğin bir araba resminin alt özelliğine arabanın markasını ve modelini yazabilirsiniz.
Resim alt özelliğine örnek:
<img src="bmw.jpg" alt="BMW X5" />
img border Özelliği
Resmi belirtilen kalınlıkta çerçeve içine alır. Daha gelişmiş CSS border özelliği bunun yerine kullanılabilir.
Resim border örneği: Resme 2 pixel kalınlıkta border verir.
<img src="resim.jpg" border="2" />
img title Özelliği
Title özelliği kullanıcıyı bilgilendirme amacı taşır. Cursor ile resmin üzerine gelince bu özelliğe verilen text mesajı görünür. Ek açıklama gerektirecek resimlerde kullanabilirsiniz. Bilgilendirme amacı taşır.
Resim title örneği:
<img src="resim.jpg" title="Samsung A3" />
img align Özelliği
Web sayfasında resmin çıkacağı pozisyonu belirlemede align özelliği kullanılır. Bu özelliğe verilebilecek değerler şunlardır: left, right. Resmin sağa veya sola yaslı çıkmasını sağlar.
Resim align örneği: Resmi sağa yaslar.
<img src="resim.jpg" align="right" />
onload Event
Bu olay resim yüklenmesi tamamlandığında çalışacak fonksiyonu belirler. Herhangi bir nedenle resim yüklenemezse ya da belirtilen adreste resim yoksa fonksiyon çalışmaz.
Resim onload örneği:
<!DOCTYPE html> <html> <body> <img src="resim.jpg" onload="resimYuklendi()" /> </body> <script> function resimYuklendi(){ alert("Resim yüklendi."); } </script> </html>
