İş birliği ve reklam için: info@metinpolat.net

Html İle Sayfaya Resim Ekleme
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
1 |
img { display: inline-block; } |
<img> Etiketi Kullanımı:
HTML’de etiketinin yazımı :
1 2 3 |
<body> <img src="resim.png" alt="Resim görüntülenemediğinde görüntülenecek metin"> </body> |
veya XHTML’de etiketinin sözdizimi şöyledir:
1 2 3 |
<body> <img src = "resim.png" alt="Resim görüntülenemediğinde görüntülenecek metin" /> </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