HTML img etiketi Web sayfasında resim görüntülemek için kullanılır. HTML img etiketi yalnızca nitelikleri içeren boş bir etikettir, HTML resim öğesinde kapatma etiketleri kullanılmaz.

HTML görselinin bir örneğini görelim.

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

Çıktı:

HTML img etiketinin özellikleri

Src ve alt HTML img etiketinin önemli nitelikleridir. HTML resim etiketinin tüm özellikleri aşağıda verilmiştir.

1) kaynak

Görüntünün kaynağını veya yolunu tanımlayan gerekli bir özelliktir. Tarayıcıya, sunucudaki resmi nerede arayacağını bildirir.

numpy nokta çarpımı

Görüntünün konumu aynı dizinde veya başka bir sunucuda olabilir.

2) her şey

Alt özelliği, görüntülenemiyorsa görsel için alternatif bir metin tanımlar. Alt özelliğinin değeri görseli kelimelerle tanımlar. Alt özelliği SEO potansiyeli için iyi kabul edilir.

3) genişlik

Resmin görüntüleneceği genişliği belirtmek için kullanılan isteğe bağlı bir özelliktir. Şimdilik tavsiye edilmiyor. Genişlik niteliği yerine CSS'yi uygulamalısınız.

4) yükseklik

Görüntünün yüksekliği h3'tür. HTML height özelliği aynı zamanda iframe, image ve object öğelerini de destekler. Şimdilik tavsiye edilmiyor. Height niteliği yerine CSS'yi uygulamalısınız.

img etiketiyle yükseklik ve genişlik özelliğinin kullanımı

Web sayfanıza nasıl görsel ekleyeceğinizi öğrendiniz, şimdi eğer görselin görüntülenmesi için ihtiyacımıza göre yükseklik ve genişlik vermek istiyorsak, bunu görselin yükseklik ve genişlik özellikleriyle ayarlayabiliriz.

dolgu css

Örnek:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Çıktı:

Not: Görüntüyü her zaman yükseklik ve genişlikte eklemeye çalışın, aksi takdirde web sayfasında görüntülenirken görüntü titreyebilir.

alt özelliğinin kullanımı

Alt özelliğini şununla kullanabiliriz: etiket. Görüntünün tarayıcıda görüntülenememesi durumunda alternatif bir metin görüntüleyecektir. Alt özelliğinin örneği aşağıdadır:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Çıktı:

Başka bir dizinden/klasörden resim nasıl alınır?

Web'inize bir resim eklemek için, bu resmin HTML dosyasını koyduğunuz klasörde bulunması gerekir. Ancak bazı durumlarda görsel başka bir dizinde mevcutsa görsele şu şekilde erişebilirsiniz:

Yukarıdaki ifadede görüntüyü yerel disk E------>images klasörü------>img/html-tutorial/39/html-image-2.webp'ye koyduk.

Not: Kaynak URL'si yanlışsa veya yanlış yazılmışsa görseliniz web sayfasında görüntülenmez, bu nedenle doğru URL'yi koymaya çalışın.

Kullanmak bağlantı olarak etiketle

Ayrıca bir görseli başka bir sayfaya bağlayabiliriz veya bir görseli bağlantı olarak kullanabiliriz. Bunu yapmak için koyun içindeki etiketi etiket.

Örnek:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

Çıktı:

Destekleyen Tarayıcılar

Öğe	Krom	IE	Firefox	Opera	Safari
	Evet	Evet	Evet	Evet	Evet