HTML resim ekleme (<img>)

Örnek 02 / 04

Soru:

Sosyoloji dersi için hazırladığınız bir web sayfasında, "toplum_yapisi.png" adlı resmin yüklenemediği durumlarda, kullanıcıların ne göreceğini belirlemek istiyorsunuz. Ayrıca resmin, sayfa yüklendiğinde hemen görünmesini değil, kullanıcı sayfayı aşağı kaydırdığında yüklenmesini istiyorsunuz. Bu iki şartı sağlayan bir <img> etiketi nasıl yazılır?

Çözüm:

💡 Bu soruda, lazy loading ve alternatif metin kavramlarını birlikte kullanacağız.

➡️ Resmin yüklenememesi durumunda görünecek alternatif metni alt niteliği ile belirliyoruz: alt="Toplumsal Tabakalaşma Şeması"
➡️ Gecikmeli yüklemeyi (lazy loading) aktif etmek için loading niteliğini "lazy" olarak ayarlıyoruz: loading="lazy"
➡️ Resmin kaynağını da src niteliği ile eklemeyi unutmuyoruz.

✅ Sonuç olarak, oluşturulan HTML kodu şöyle olacaktır:
<img src="toplum_yapisi.png" alt="Toplumsal Tabakalaşma Şeması" loading="lazy">

1 2 3 4

📝 İlgili Diğer Testler

💡 Diğer Çözümlü Örnekler

Konuya Geri Dön:

📝 HTML resim ekleme (<img>)