Html İle Sayfaya Resim Ekleme

tarafından Metin POLAT Tarihinde Kas 28, 2020 Son güncelleme Kas 29, 2020

Html İle Sayfaya Resim Ekleme

HTML: <img> etiketi

<img> etiketi, HTML belgesindeki bir görüntüyü tanımlar. Bu etikete yaygın olarak <img> öğesi de denir.

Kısacası <img> etiketi web sayfasına bir görsel eklemek için kullanılır.

Web sayfanıza bir görüntü yerleştirmek için, web dizini yapınızın içinde bir grafik dosyasına ihtiyacınız olacaktır.

Web sitenizi düzenli tutmak için tüm resimlerinizi bir klasöre yerleştirmek çok iyi bir uygulamadır.(Örneğin resimler klasörü veya img,images gibi)

Web tarayıcıları yalnızca birkaç tür grafik dosyasını görüntüleyebilir. Bunlar: PNG, JPEG ve GIF. Başka bir grafiğiniz varsa biçimlendirmek için yukarıda listelenen uyumlu biçimlerden birine dönüştürülmesi gerekecektir.

Bu etiket, web sayfanız içinde bir grafik görüntü gösterir. Resim etiketi bir bitiş etiketi gerektirmez.

Özellikler

Özellik	Değeri	Açıklama
alt	metin	Görsel için alternatif bir metin oluşturur.
crossorigin	anonymous use-credentials	Görselin başka bir web sayfasından erişim izini.
height	pixels	Görseli belirli bir yükseklik boyutuna ayarlar.
width	pixels	Görseli belirli bir genişlik boyutuna ayarlar.
ismap	ismap	Bir görüntüyü sunucu tarafında image-map (görüntü haritası) olarak belirtir.
longdesc	URL	Görselin ayrıntılı açıklamasında URL belirtir.
sizes		Farklı sayfa düzenleri için görsel boyutlarını belirtir.
src	URL	Görselin URL adresini belirtir.
srcset	URL	Farklı durumlarda kullanılacak görselin adresini belirtir.
usemap	#mapname	Görseli kullanıcı tarafında image-map (görüntü haritası) olarak belirtir.

Varsayılan Css Değerleri

img { display: inline-block; }

1	img { display: inline-block; }

<img> Etiketi Kullanımı:

HTML’de etiketinin yazımı :

<body>
<img src="resim.png" alt="Resim görüntülenemediğinde görüntülenecek metin">
</body>

<body>

</body>

veya XHTML’de etiketinin sözdizimi şöyledir:

<body>
<img src = "resim.png" alt="Resim görüntülenemediğinde görüntülenecek metin" />
</body>

<body>

</body>

Dikkat ettiyseniz eğer html’de <img> etiketi sonda kapatılmadı ama xhtml’de sonda kapattıldı.

Tarayıcı Uyumluluğu

<img> etiketi aşağıdaki tarayıcılarda temel desteğe sahiptir:

Chrome
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
Edge Mobile
Opera
Opera Mobile
Safari (WebKit)
Safari Mobile