IMG kodu nedir?

19.03.2025 0 görüntülenme

Günümüzde internetin görsel dünyasında kaybolmamak mümkün değil. Sosyal medyada gezinirken, haber sitelerinde dolaşırken veya online alışveriş yaparken sürekli olarak görsellerle karşılaşıyoruz. Peki, bu görsellerin internet üzerinde doğru bir şekilde görüntülenmesini sağlayan sihirli kod nedir? İşte cevabı: IMG kodu!

IMG Kodu Nedir ve Ne İşe Yarar?

IMG kodu, HTML (HyperText Markup Language) dilinde kullanılan ve web sayfalarına resim veya görsel eklemek için kullanılan bir etikettir. Bu etiket sayesinde, bir web sitesinin içeriğine görseller dahil edilebilir ve kullanıcı deneyimi zenginleştirilebilir. Basitçe söylemek gerekirse, bir web sitesinde gördüğünüz tüm resimler büyük olasılıkla IMG kodu kullanılarak eklenmiştir.

IMG kodunun temel görevi, belirtilen bir resim dosyasının web tarayıcısı tarafından görüntülenmesini sağlamaktır. Bu kod, tarayıcıya resmin nerede bulunduğunu (URL adresi) ve nasıl görüntülenmesi gerektiğini (boyut, kenarlık vb.) bildirir. Doğru kullanıldığında, web sitenizin görsel olarak çekici ve bilgilendirici olmasını sağlar.

IMG Kodunun Temel Yapısı

IMG kodunun temel yapısı oldukça basittir. En temel haliyle aşağıdaki gibi görünür:

<img src="resim_adresi.jpg" alt="Resim Açıklaması">

  • <img>: Bu etiket, resim eklemek için kullanılan temel etikettir.
  • src="resim_adresi.jpg": "src" (source - kaynak) özelliği, resmin URL adresini belirtir. Tarayıcı, bu adresteki resmi indirerek görüntüler.
  • alt="Resim Açıklaması": "alt" (alternative - alternatif) özelliği, resmin görüntülenememesi durumunda (örneğin, internet bağlantısı sorunları veya resim dosyasının silinmesi) görüntülenecek alternatif bir metin sağlar. Aynı zamanda, arama motorları için de önemlidir, çünkü resmin içeriği hakkında bilgi verir. Bu özellik, SEO açısından büyük önem taşır.

IMG Kodunda Kullanılan Diğer Özellikler

Temel yapının yanı sıra, IMG koduna farklı özellikler ekleyerek resmin görünümünü ve davranışını kontrol edebilirsiniz. İşte bazı yaygın olarak kullanılan özellikler:

  • width="genişlik" ve height="yükseklik": Bu özellikler, resmin genişliğini ve yüksekliğini piksel cinsinden belirler.
  • title="Resim Başlığı": Bu özellik, fare imleci resmin üzerine geldiğinde görüntülenecek bir başlık metni sağlar.
  • class="stil_sınıfı": Bu özellik, resme CSS (Cascading Style Sheets) ile stil vermek için bir sınıf atamanızı sağlar.

Örneğin:

<img src="manzara.jpg" alt="Güneşli bir dağ manzarası" width="500" height="300" title="Dağ Manzarası" class="resim-stil">

IMG kodu, web sitelerinin görsel olarak zenginleşmesini sağlayan temel bir HTML etiketidir. Doğru kullanıldığında, kullanıcı deneyimini artırır ve SEO performansına katkıda bulunur. Unutmayın, resimlerinize açıklayıcı "alt" metinleri eklemek hem kullanıcılar hem de arama motorları için önemlidir.