HTML IMG etiketi, bir web sayfasına resimlerin ve diğer statik grafik nesnelerin eklenmesini yönetir. Bu ortak etiket, ilgi çekici, resim odaklı bir web sitesi tasarlama yeteneğinize zenginlik katan birkaç zorunlu ve isteğe bağlı özelliği destekler.
Tam olarak oluşturulmuş bir HTML IMG etiketi örneği şuna benzer:
Gerekli IMG Etiketi Özellikleri
src="/path/to/image.jpg"
Bir web sayfasında görüntülenecek bir resim elde etmek için ihtiyacınız olan tek özellik, kaynak nitelik. Bu öznitelik, görüntülenecek görüntü dosyasının adını ve konumunu tanımlar.
alt="Görüntünün açıklaması"
Geçerli XHTML ve HTML4 yazmak için alt nitelik de gereklidir. Bu öznitelik, görsel olmayan tarayıcılara resmi açıklayan metin sağlamak için kullanılır. Tarayıcılar alternatif metni farklı şekillerde görüntüler. Bazıları, farenizi görüntünün üzerine getirdiğinizde açılır pencere olarak görüntüler, bazıları görüntüye sağ tıkladığınızda özelliklerde görüntüler ve bazıları ise hiç göstermez.
Kullan alternatif metin resim hakkında web sayfasının metniyle alakalı veya önemli olmayan ek ayrıntılar vermek. Ancak, ekran okuyucularda ve diğer salt metin tarayıcılarda metnin sayfadaki metnin geri kalanıyla aynı hizada okunacağını unutmayın. Karışıklığı önlemek için, yalnızca "logo" yerine "Web Tasarımı ve HTML Hakkında" yazan (örneğin) açıklayıcı alternatif metin kullanın.
alt metin ayrıca SEO (Arama Motoru Optimizasyonu) için de gereklidir. Google gibi arama motorlarının sitelerdeki içeriği keşfetmek için kullandığı botlar resimleri "göremez". güvenirler alt sayfada ne olduğunu belirlemek için metin.
İçinde HTML5, alt öznitelik her zaman gerekli değildir, çünkü bir resim yazısı daha fazla açıklama eklemek için. Bu özelliği, tam açıklama içeren bir kimliği belirtmek için de kullanabilirsiniz:
aria-describedby="Resmin açıklaması"
Alternatif metin, görüntü bir web sayfasının üst kısmındaki bir grafik veya simgeler gibi tamamen dekoratifse de gerekli değildir. Ancak emin değilseniz, her ihtimale karşı alternatif metin ekleyin.
Boyutlandırma Nitelikleri
genişlik = "500"ve.
yükseklik = "500"Tasarımınıza bağlı olarak, kullanarak. yükseklik ve. Genişlik
Genel olarak, CSS'nizde görüntü boyutunun ayarlanmasını isteyeceksiniz. Çoğu zaman bu, bir görüntünün ana kabının boyutlarının sonucu olacaktır. Bu yaklaşım, farklı ekran boyutlarına uyum sağlarken en fazla esnekliği sağlar. Ancak yine de görüntü boyutlarını HTML nitelikleri olarak belirtmek isteyebileceğiniz durumlar vardır.
Diğer Faydalı IMG Nitelikleri
title="Açıklayıcı resim adı"Nitelik, herhangi birine uygulanabilen global bir niteliktir. HTML öğesi. Ayrıca,. Başlık
Çoğu tarayıcı aşağıdakileri destekler: Başlık öznitelik, ancak bunu farklı şekillerde yapıyorlar. Bazıları metni bir açılır pencere olarak görüntülerken, diğerleri kullanıcı görüntüye sağ tıkladığında bilgi ekranlarında görüntüler. kullanabilirsiniz Başlık resim hakkında ek bilgi yazmak için öznitelik, ancak bu bilgilerin gizli olduğuna güvenmeyin veya gözle görülür. Bunu kesinlikle arama motorları için anahtar kelimeleri gizlemek için kullanmamalısınız. Bu uygulama artık çoğu arama motoru tarafından cezalandırılmaktadır.
kullanım haritası=""ve.
ismap=""Bu iki öznitelik, istemci tarafı () ve sunucu tarafı (ISMAP) belirler. görüntü haritaları
longdesc="Görüntünüzün daha ayrıntılı açıklaması". uzun uzun
Kullanımdan Kaldırılan ve Eski IMG Özellikleri
Birkaç özellik artık HTML5'te kullanılmamaktadır veya HTML4'te kullanımdan kaldırılmıştır. En iyi HTML için bu öznitelikleri kullanmak yerine başka çözümler bulmalısınız.
sınır = "3"
hizala="sola"Bu öznitelik, metnin içine bir resim yerleştirmenize ve metnin çevresinde akmasına izin verir. Bir görüntüyü sağa veya sola hizalayabilirsiniz. lehine reddedilmiştir. kayan CSS özelliği
hspcace="10"ve.
vspace = "10". hspace ve. uzay nitelikler yatay olarak boşluk ekler ( hspace) ve dikey olarak ( uzay
lowsrc="/path/to/lowres.jpg". düşüksrc özniteliği, görüntü kaynağınız çok yavaş yüklenecek kadar büyük olduğunda alternatif bir görüntü sağlar. Örneğin, web sayfanızda görüntülemek istediğiniz 500 KB'lık bir resminiz olabilir, ancak 500 KB'yi indirmesi uzun zaman alacaktır. Böylece görüntünün çok daha küçük bir kopyasını oluşturursunuz, belki siyah beyaz veya son derece optimize edilmiş olarak ve bunu. düşüksrc
düşüksrc etikete Netscape Navigator 2.0'a öznitelik eklendi. DOM seviye 1'in bir parçasıydı ancak daha sonra DOM seviye 2'den kaldırıldı. Pek çok site, tüm modern tarayıcılar tarafından desteklendiğini iddia etse de, bu özellik için tarayıcı desteği kabataslak olmuştur. Her iki spesifikasyonun da resmi bir parçası olmadığı için HTML4'te kullanımdan kaldırılmamıştır veya HTML5'te kullanılmamıştır.
Bu özelliği kullanmaktan kaçının ve bunun yerine resimlerinizi hızla yüklenecek şekilde optimize edin. Sayfa yükleme hızı, iyi bir web tasarımının kritik bir parçasıdır ve büyük resimler, sayfaları büyük ölçüde yavaşlatır. düşüksrc nitelik.