<img>
Etiketi Temel Özellikler
- Etiket Yazımı ve Etiket Kullanımı :
<img> <!-- Etiket yalnızca açılmalı. -->
- Örnek :
- DOM Arayüzü :
HTMLImageElement
- Durum :
- Yaşayan Ölçün
- Öznitelikler :
- Tüm Evrensel Öznitelikler
- Açıklama :
<img>
Etiketi Kullanımı
Markanız için 300X300 alan.
<img>
etiketi resim ve fotoğraf gibi görsel ögelerin sayfada gösterilmesini sağlar.
<img>
etiketinde src
ve alt
özniteliklerinin kullanımı zorunludur.
src
: Kaynak dosyanın yolunu belirtir.
alt
: Dosya bulunamazsa, dosyanın yerine gösterilecek olan yazıyı belirtir.
alt
özniteliği kesinlikle kullanılmalı. Görselin gösteril(e)mediği durumlarda alt
gösterilecek. Sayfayı telefondaki birine düz metin okur gibi okurken orada sanki görsel yokmuş da yerine düz metin varmış gibi düşündüğünüzde ne söylemeniz uygun ise onu yazın.
title
özniteliği, fare ile görselin üzerine gidildiğinde bilgi olarak gosterilir.
<img>
etiketinde title
özniteliğinin kullanımı zorunlu olmasa da arama motorları gereksinim duyuyorlar.
<img>
etiketi <a>
etiketinin içine yerleştirilirse, görsele tıklandığında bağlantı açılır.
<img src="https://SonDevrim.com/örnek.jpg" alt="SonDevrim Logo" title="SonDevrim Logosu !">
<img>
Etiketi Tarayıcı Desteği
Tarayıcı →Öznitelik ↓ | |||||
---|---|---|---|---|---|
Temel Destek | Var | Var | Var | Var | Var |
srcset | 32.0 (32.0) [2] | 21 | 7.1 | 34.0 | Yok |
referrerpolicy | 42.0 (42.0) [3] | ? | ? | 46.0 [1] | ? |
Tarayıcı →Öznitelik ↓ | |||||
---|---|---|---|---|---|
Temel Destek | Var | Var | Var | Var | Var |
srcset | Yok | 21 | iOS 8 | ? | Yok |
referrerpolicy | 42.0 (42.0) [3] | ? | ? | 46.0 [1] | ? |
[1] : Tarayıcıdaki kullanıcı ayarlarına bağlı.
[2] : about:config
adresindeki ayara bağlı.
[3] : Bu öznitelik Firefox 42'den 44'e kadar referrer
olarak adlandırıldı ve about:config
adresindeki network.http.enablePerElementReferrer
ayarına bağlıydı. Firefox 45 ile referrerpolicy
olarak adlandırıldı.
Öznitelikler
alt
-
Görselin gösterilemediği durumlarda, onun yerine gösterilecek olan yazı.
Görsel indirilene kadar gösterilir.
Hiç kullanılmaması, etiketin, sayfanın "temel ögesi" olduğu anlamına gelir.
Değer tutmadan kullanılması,alt=""
gibi, etiketin "temel öge" olmadığı anlamına gelir ve görsel göstermeyen bazı tarayıcılarda sayfa gösterimde hesaba katılmamasına neden olabilir. crossorigin
-
Kökenler arası paylaşımı etkinleştirir.
Hatalı kullanılması ya da kullanılmaması durumunda aşağıdakiler geçerlidir:
- Boş ("") ya da yanlış (yani belirtilenlerin dışında) bir değer ile kullanılması
<img>
etiketinin CORS durumunuAnonymous
yapar. - Özniteliğin yokluğu, yani kullanılmaması,
<img>
etiketinin CORS durumunuNO CORS
yapar.
Etiketlerin CORS durumunu
Anonymous
yapmak içinanonymous
sözcüğü kullanılır!anonymous
-
İstekte bulunan etiketin modunu
cors
ve kimlik modunusame-origin
yapar.
EtiketteAnonymous
durumunu etkinleştirir. İstek, sunucuya gönderilirken kimlik değeri gönderilmez (anonymous) ve eğer sunucu kimlik değerleriyle yanıt döndürmezse, kullanım yasaklanır. use-credentials
-
İstekte bulunan etiketin modunu
cors
ve kimlik modunuinclude
yapar.
EtiketteUse Credentials
durumunu etkinleştirir. İstek, sunucuya gönderilirken kimlik değeri ile gönderilir (use-credentials) ve eğer sunucu kimlik değerleriyle yanıt döndürmezse, kullanım yasaklanır.
- Boş ("") ya da yanlış (yani belirtilenlerin dışında) bir değer ile kullanılması
height
- Görsel yüksekliğini belirtir.
ismap
- Görselin sunucu taraflı image-map olduğunu belirtir.
src
- Görselin kaynağını belirtir.
srcset
-
Yüksek çözünürlük ya da küçük ekranlar gibi farklı durumlarda görsel seti (bir ya da daha fazla görsel URL'si) kullanabilmeye yarar. Birden fazla görsel kullanılıyorsa, görsel adaylarının (yani olası durumlarda kullanılacak olan görsellerin) URL'leri arasında ayraç olarak virgül (,) ve en azından bir boşluk ( ) kullanılmalıdır.
<img src="image.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x">
srcset
desteklemeyen tarayıcılardasrc
özniteliği kullanılır.
1 CSS pikseli başına 1 aygıt pikseli düşen aygıtlarda1x
, 1 CSS pikseli başına 2 aygıt pikseli düşen aygıtlarda2x
, 1 CSS pikseli başına 3 aygıt pikseli düşen aygıtlarda3x
gösterilir. title
- Fare ile görselin üzerine gidildiği durumlarda, gösterilecek olan bilgi notu.
usemap
- Görselin istemci (tarayıcı) taraflı image-map olduğunu belirtir.
width
- Görsel genişliğini belirtir.