Bu ders notu, HTML'de resim eklemek için kullanılan <img> etiketinin temel ve ileri düzey özelliklerini, resim yollarını, boyutlandırmayı, erişilebilirliği ve yeni yükleme davranışlarını kapsamaktadır. Bu konular, "HTML resim ekleme (<img>) Test 2" testinde karşılaşabileceğiniz ana başlıkları oluşturur.
<img> Etiketi: Temel Kullanım<img> etiketi, web sayfalarına resim eklemek için kullanılır. Kendi başına kapanan (self-closing) bir etikettir, yani bir kapanış etiketine (</img>) ihtiyaç duymaz.
src (source): Eklemek istediğiniz resmin dosya yolunu (adresini) belirtir. Bu nitelik zorunludur.alt (alternative text): Resim yüklenemediğinde veya görme engelli kullanıcılar için ekran okuyucular tarafından okunacak alternatif metni belirtir. Bu nitelik erişilebilirlik için çok önemlidir ve zorunlu olmasa da mutlaka kullanılmalıdır.💡 İpucu: Her zaman alt niteliğini kullanmaya özen gösterin. Bu, web sitenizin daha geniş bir kitleye ulaşmasına yardımcı olur.
src Niteliği)src niteliği ile resminizin nerede olduğunu HTML tarayıcısına bildirirsiniz. İki ana yol türü vardır:
<img src="https://www.example.com/resimler/logo.png" alt="Şirket Logosu"><img src="resim.jpg" alt="Manzara"><img src="resimler/kedi.png" alt="Sevimli Kedi"><img src="../banner.gif" alt="Reklam Bannerı">⚠️ Dikkat: Göreceli yolları kullanırken, dosya isimlerinin ve klasör yapısının doğru olduğundan emin olun. Küçük bir yazım hatası bile resmin yüklenmemesine neden olabilir.
width ve height)Resimlerin ekranda ne kadar yer kaplayacağını width (genişlik) ve height (yükseklik) nitelikleriyle belirleyebilirsiniz. Bu değerler genellikle piksel (px) olarak verilir, ancak yüzde (%) de kullanılabilir.
width: Resmin genişliğini ayarlar. <img src="resim.jpg" alt="Manzara" width="500">height: Resmin yüksekliğini ayarlar. <img src="resim.jpg" alt="Manzara" height="300">width), diğer boyutun otomatik olarak orantılı bir şekilde ayarlanmasını sağlar. Bu, resminizin bozulmasını engeller.💡 İpucu: Resimlerinizi HTML'de boyutlandırmak yerine, CSS ile boyutlandırmak genellikle daha iyi bir uygulamadır. Ancak hızlı prototipler veya belirli durumlarda HTML nitelikleri de kullanılabilir.
alt Niteliğinin Önemialt niteliği, sadece resim yüklenmediğinde görünen bir metin olmaktan çok daha fazlasıdır. Web içeriğinin herkes için erişilebilir olmasını sağlayan kritik bir unsurdur.
alt metni aracılığıyla anlatır.alt metnini kullanır. Bu, resimlerinizin arama sonuçlarında görünmesine yardımcı olabilir.⚠️ Dikkat: alt metni, resmin içeriğini doğru ve kısa bir şekilde tanımlamalıdır. "Resim" veya "fotoğraf" gibi genel ifadelerden kaçının.
<figure> ve <figcaption>Bazen bir resmin, onunla ilgili bir başlık veya açıklama ile birlikte sunulması gerekir. <figure> ve <figcaption> etiketleri bu senaryo için tasarlanmıştır.
<figure>: Kendi başına anlam ifade eden, ana içerikten bağımsız olarak hareket ettirilebilen içerik (resim, kod bloğu, grafik vb.) için bir kapsayıcıdır.<figcaption>: Bir <figure> etiketi içinde yer alan içeriğe (genellikle resme) bir başlık veya açıklama eklemek için kullanılır.<figure>
<img src="kus.jpg" alt="Uçan bir kuşun fotoğrafı">
<figcaption>Resim 1: Gökyüzünde süzülen bir kuş.</figcaption>
</figure>💡 İpucu: Bu etiketler, web sayfanızdaki görsellerin anlamsal yapısını güçlendirir ve içeriğin daha düzenli ve anlaşılır olmasını sağlar.
loading Niteliği)loading niteliği, tarayıcının bir resmi ne zaman yüklemesi gerektiğini belirtir. Bu, sayfa performansını optimize etmek için çok faydalıdır.
eager (varsayılan): Tarayıcı, resmi hemen yüklemeye başlar. Sayfanın üst kısmında veya hemen görünür alanda olan resimler için uygundur.lazy: Tarayıcı, resmi yalnızca kullanıcının görüntü alanına (viewport) yaklaştığında yükler. Bu, özellikle uzun sayfalardaki alt kısımlarda yer alan resimler için performansı önemli ölçüde artırır.<img src="buyuk-resim.jpg" alt="Geniş manzara" loading="lazy">⚠️ Dikkat: Sayfanızın en üstünde görünen ilk resimler için loading="lazy" kullanmaktan kaçının, çünkü bu, sayfanın ilk yüklenme hızını yavaşlatabilir. Diğer tüm resimler için lazy kullanmak iyi bir uygulamadır.