HTML resim ekleme (<img>) Test 1

🎓 HTML resim ekleme () Test 1 - Ders Notu

Bu ders notu, HTML'de web sayfalarınıza resim eklemek için kullanılan <img> etiketinin temel özelliklerini ve önemli niteliklerini kapsamaktadır. Resimlerin web sayfalarına doğru bir şekilde nasıl entegre edildiğini ve erişilebilirliğini nasıl sağlayacağınızı öğreneceksiniz.

📌 <img> Etiketi Nedir?

HTML'de bir web sayfasına görsel eklemek için kullanılan etikettir. Kapanış etiketi gerektirmeyen (self-closing) bir etikettir.

• Amacı: Web sayfasına görsel içerik (fotoğraf, illüstrasyon, logo vb.) eklemek.
• Tek başına kullanılır, yani <img></img> şeklinde değil, <img /> veya sadece <img> şeklinde yazılır.
• Tarayıcı, <img> etiketini gördüğünde belirtilen kaynaktan resmi yükler ve sayfada gösterir.

📌 src Niteliği (Resim Kaynağı)

Source (kaynak) kelimesinin kısaltması olan src, eklemek istediğiniz resmin dosya yolunu (adresini) belirtir. Bu, <img> etiketinin en önemli ve olmazsa olmaz niteliğidir.

• Değeri, resmin bulunduğu konumu gösteren bir URL (Uniform Resource Locator) veya dosya yoludur.
• Örnek kullanım: <img src="resimler/manzara.jpg">
• Eğer bu nitelik eksik veya hatalıysa, resim sayfada görüntülenemez.

💡 İpucu: Resminizin doğru yolda (dosya yolunda) olduğundan emin olun, aksi takdirde resim yüklenmez ve sayfanızda kırık bir resim ikonu görünür.

📌 alt Niteliği (Alternatif Metin)

Alternative text (alternatif metin) kelimesinin kısaltması olan alt, resim yüklenemediğinde veya görme engelli kullanıcılar için ekran okuyucular tarafından okunacak metni sağlar.

• Erişilebilirlik (Accessibility) için kritik öneme sahiptir. Görme engelli kullanıcılar, ekran okuyucular sayesinde resmin ne hakkında olduğunu bu metin sayesinde anlar.
• Arama motorlarının (Google, Bing vb.) resminizin içeriğini anlamasına yardımcı olur ve bu da SEO (Arama Motoru Optimizasyonu) açısından faydalıdır.
• Örnek kullanım: <img src="kedi.jpg" alt="Evde uyuyan sevimli bir tekir kedi">
• Resim yüklenemediğinde, bu metin resmin yerine görüntülenir.

⚠️ Dikkat: alt niteliğini boş bırakmak yerine, resmin içeriğini kısa, açıklayıcı ve anlamlı bir metinle doldurmaya özen gösterin. Bu, hem kullanıcı deneyimini hem de SEO'yu iyileştirir.

📌 width ve height Nitelikleri (Genişlik ve Yükseklik)

Bu nitelikler, resmin web sayfasında ne kadar yer kaplayacağını piksel cinsinden belirtmenizi sağlar.

• width: Resmin genişliğini ayarlar.
• height: Resmin yüksekliğini ayarlar.
• Değerler genellikle piksel cinsinden (örneğin "150") verilir, birim belirtmeye gerek yoktur. Tarayıcı varsayılan olarak piksel kabul eder.
• Örnek kullanım: <img src="logo.png" width="150" height="75">

💡 İpucu: Genellikle sadece width veya height niteliğinden birini kullanmak, resmin en-boy oranını (aspect ratio) koruyarak diğer boyutu otomatik olarak ayarlamasına yardımcı olur. Her ikisini de belirtmek ve bu oranları bozmak, resmin orantısız görünmesine (ezilmesine veya gerilmesine) neden olabilir.

📌 Resim Dosya Yolları (Göreceli ve Mutlak)

Resimlerinizi src niteliğinde belirtirken iki tür dosya yolu kullanabilirsiniz: göreceli ve mutlak.

• Göreceli Yol: Web sayfanızın bulunduğu HTML dosyasının konumuna göre resminizin yerini belirtir. Genellikle aynı proje klasörü içindeki resimler için kullanılır.
  • Örnek: <img src="resimler/fotograf.jpg"> (HTML dosyası ile aynı dizindeki "resimler" klasörünün içindeki "fotograf.jpg")
  • Örnek: <img src="../img/logo.png"> (HTML dosyasının bulunduğu klasörün bir üst klasöründeki "img" klasörünün içindeki "logo.png")
• Mutlak Yol: Resmin tam internet adresini (URL) belirtir. Genellikle başka bir web sitesindeki veya CDN (İçerik Dağıtım Ağı) üzerindeki resimler için kullanılır.
  • Örnek: <img src="https://www.ornek.com/gorseller/banner.jpg">

⚠️ Dikkat: Mutlak yollar kullanırken, resmin kaynağının her zaman erişilebilir olduğundan emin olun. Kaynak site kapanırsa veya resmi silerse, sizin sayfanızda da resim görünmeyecektir. Kendi sunucunuzdaki resimler için genellikle göreceli yollar tercih edilir.