Takip Edin

HTML

HTML’de Resimler

Web Sayfalarına Resim Ekleme

Resimler, web sayfalarının dış görünümlerini daha canlı ve ilgi çekici hale getirerek geliştirirler.

HTML belgelerinde resim yüklemek için <img> etiketi kullanılır.

<img> etiketinin söz dizimi,

<img src = "...." alt = "....">

şeklindedir.

Yukarıdaki örnekte her resim, src ve alt olmak üzere iki özellik bulundurmaktadır.

src özelliği, tarayıcıya resmi nerede bulacağını bildirir. Değeri, resim dosyasının url’sidir.

alt özelliği ise eğer kullanıcı, herhangi bir sebepten ötürü resmi göremiyorsa(kullanıcının ekran okuyucu kullanması, src özelliğinde bir hata olması, yavaş bağlantı vb.) resim için alternatif bir metin sağlar. Değeri, resim için anlamlı bir alternatife sahip olmalıdır.

Bir Resmin Genişliğini ve Yüksekliğini Ayarlama

Bir resmin genişliğini ve yüksekliğini ayarlamak için width ve height özelliği kullanılır.

width ve height özellikleri, resmin genişliğini ve yüksekliğini daima pixel olarak tanımlar.

Resimlerin genişlik ve yüksekliğini belirtmede style özelliği, alternatif olarak kullanılabilir. Satır içi stil, en yüksek önceliğe sahip olduğundan dolayı stil sayfalarının resmin boyutunu kazara değiştirmesini önler.

Not : Bir resmin genişlik ve yüksekliğinin daima belirtilmesi gerekmektedir. Eğer belirtilmezse resim yüklendiğinde sayfa titreyebilir.

Resim Haritalarıyla Çalışma

Resim haritalarıyla çalışırken bir resim, içinde bulunan farklı hedeflere köprü alanları olarak etki eden belirli koordinat kümeleri ile belirtilir.

Resim haritaları ile çalışma, resme bağlantı vermekten farklı bir şekilde gerçekleşir. Resme bağlantı verildiğinde bir resim, yalnızca bir hedefe hizmet ederken resim haritaları ile çalışıldığında resmin farklı koordinatları, farklı hedeflere hizmet edebilir.

Resim Haritaları İle Çalışırken Gerekli Elemanlar

Resim haritalarıyla çalışırken gerekli olan 3 temel eleman vardır:

  1. map: Resim haritası oluşturmak için kullanılır. name özelliğini kullanarak resme bağlantı verir.
  2. image : <img> etiketini kullanarak eklenir. Diğer resimlerden tek farkı, usemap özelliğine sahip olmasıdır. usemap özelliğinin değeri, # ile başlayacak şekilde map elemanının name özelliğinin değeri ile oluşur.
  3. area : Tıklanabilir alanlar eklemek için kullanılır. Sahip olduğu shape özelliği, tıklanabilir alanların şeklinin tanımlanmasını sağlar. shape özelliği; rect, circle, poly   ve   default olmak üzere dört değere sahiptir.

Koordinatlar

Resim üzerinde tıklanabilir alanlar oluşturabilmek için koordinat tanımlaması yapmak gerekir. Koordinatlar, Paint programını kullanarak kolaylıkla bulunabilir.

rectangle shape
circle shape
polygon shape

picture Elemanı

<picture> elemanı, bir resmin farklı cihaz/ekran boyutları için alternatif versiyonlarını sunmak üzere <source> elemanları ve bir <img> elemanı içerir.

Tarayıcı, her <source> elemanı arasından en uygun eşleşmeyi seçecektir. Eğer hiçbir eşleşme bulunmazsa ya da tarayıcı, <picture> elemanını desteklemezse <img> elemanı seçilecektir. Dolayısıyla <picture> elemanının son alt öğesi olarak daima bir <img> elemanı belirtilmelidir.

Yukarıdaki örneğin nasıl çalıştığını anlamak için çıktıyı yeni bir sekmede açın (sağ üst tarafta Edit on Codepen yazısına tıklayarak) ve tarayıcı penceresini yeniden boyutlandırın.

Devamını oku

Popüler

error: Content is protected !!