HTML ile Web Sayfasına Resim Ekleme – Tasarım Kodlama
HTML

HTML ile Web Sayfasına Resim Ekleme

Web Sayfasına Resim Nasıl Eklenir? <img> etiketi parametreleri nelerdir? Bu parametreler ne işe yarar? Gibi soruların cevaplarını yazımızda bulabilirsiniz.

HTML sayfamıza resim  eklemek  için <img> etiketi kullanılır. Src parametresi ile resmin yolu (url’si) belirtilir. Html sayfasına aşağıdaki şekilde resim eklenir.

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 1600×1200 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 400×300 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.

 

Yorum bırak