HTML <img> etiketi

Tanım ve Kullanım

<img> İçerik etiketi, HTML sayfasında görsel eklemek için kullanılır.

Teknik olarak, aslında görseli web sayfasına eklemiyoruz, görseli web sayfasına bağlıyoruz.<img> İçerik etiketi, görseli referanslamak için bir konteyner oluşturur.

<img> İçerik etiketi iki zorunlu özelliğe sahiptir:

  • src - Görselin yolunu belirtin
  • alt - Görsel bir nedenle görüntülenemiyorsa, görselin alternatif metnini belirtin

Dikkat:Ayrıca, her zaman görselin genişliğini ve yüksekliğini belirtmek önemlidir. Genişlik ve yükseklik belirlenmemişse, görsel yüklenirken sayfa parlamayabilir.

İpucu:Başka bir belgeye görseli bağlamak için, sadece <img> İçerik etiketi içine gömülü: <a> İçerik etiketi (aşağıdaki örneğe bakın).

Ayrıca bkz:

HTML Eğitimi:HTML resimleri

HTML DOM Referans Kılavuzu:Image nesnesi

CSS Eğitimi:Görsel stillerini ayarlamak

Daha fazla okuma:Görseli nasıl doğru kullanacağınız

Örnek

Örnek 1

Aşağıdaki örnekte, CodeW3C.com mühendislerinin Shanghai Flower Port'ta çektiği tulip fotoğrafını sayfamıza nasıl eklediğimizi göstereceğiz:

<img src="tulip.jpg" alt="Shanghai Flower Port - Tulip" />

Kişisel olarak deneyin

Shanghai Flower Port - Tulip

Örnek 2

Görseli nasıl ekleyeceğinizin bir başka örneği:

<img src="dancer.png" alt="Dancer" width="500" height="749">

Kişisel olarak deneyin

İpucu:Daha fazla örnek, sayfa altında sağlanmaktadır.

Özellik

Özellik Değer Açıklama
alt Metin Görselin alternatif metnini belirtir.
crossorigin
  • anonymous
  • use-credentials
 İzin verilen çapraz alan erişimine sahip üçüncü taraf sitelerden gelen görsellerin ve canvas ile birlikte kullanılmasını sağlar.
height Piksel Görselin yüksekliğini belirtir.
ismap ismap Görseli sunucu tarafındaki görsel haritası olarak tanımlar.
loading
  • eager
  • lazy
 Tarayıcının hemen görseli yüklemesi mi yoksa belirli şartlar karşılanana kadar yüklemeyi ertelemesi mi gerektiğini belirtir.
longdesc URL Görselin ayrıntılı açıklamasına yönlendiren URL'yi belirtir.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Görseli alırken kullanılacak referans bilgilerini belirtir.
sizes Boyut Farklı sayfa düzenlerinin görsel boyutlarını belirtir.
src URL Görsel yolunu belirtir.
srcset URL-list Farklı durumlar için kullanılacak görsel dosya listesini belirtir.
usemap #mapname Görseli istemci端 görüntü haritası olarak tanımlayın.
width Piksel Görselin genişliğini belirtir.

Genel özellikler

<img> Etiketler ayrıca HTML'deki genel özellikler。

olay özelliklerini destekler

<img> Etiketler ayrıca HTML'deki olay özellikleri。

Daha fazla örnek

Örnek 3

Resim hizalama (CSS kullanarak):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Kişisel olarak deneyin

Örnek 4

Resme çerçeve ekleyin (CSS kullanarak):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Kişisel olarak deneyin

Örnek 5

Resme sol ve sağ boşluk ekleyin (CSS kullanarak):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Kişisel olarak deneyin

Örnek 6

Resme üst, alt ve dış boşluk ekleyin (CSS kullanarak):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Kişisel olarak deneyin

Örnek 7

Resim nasıl başka bir klasörden veya başka bir web sitesinden eklenebilir:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

Kişisel olarak deneyin

Örnek 8

Resime bağlantı nasıl eklenir:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Kişisel olarak deneyin

Örnek 9

Tıklanabilir alanlı resim haritası nasıl oluşturulur. Her alan bir bağlantıdır:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Kişisel olarak deneyin

Uzatma okuma - Resimlerin doğru kullanımı

HTML ve XHTML'nin en dikkat çekici özelliklerinden biri, belge metninde resim içermektir. Resmi hem belgenin içindeki bir nesne (dahili resim) olarak hem de bir bağlantı aracılığıyla indirilebilecek ayrı bir belge olarak hem de belgenin arka planı olarak kullanabilirsiniz.

Belge içeriğine (statik veya animasyonlu simgeler, fotoğraflar, açıklamalar, çizimler vb.) resim eklemek, belgenin daha dinamik ve dikkat çekici hale gelmesini sağlar. Ayrıca, resimler daha profesyonel ve bilgi yoğun görünür ve kolayca gezinilebilir. Ayrıca, belirli bir resmi bir bağlantıya sahip görsel yönlendirme haritası olarak kullanabilirsiniz.

Ancak, resimlerin aşırı kullanımı, belgenin parçalanmış, karışık ve okunması zor hale gelmesine neden olabilir. Kullanıcılar, sayfayı indirme ve görüntüleme sırasında çok fazla beklemek zorunda kalabilir.

Aşağıdaki makaleyi okuyun, Web üzerindeki iki ana resim formatını, GIF ve JPEG, ve resimlerin doğru kullanımını öğrenin:

Varsayılan CSS ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüleyecektir <img> Element:

img {
  display: inline-block;
}

Kişisel olarak deneyin

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek