HTML Klasörden Resim Ekleme: Kapsamlı Bir Kılavuz
Bir web sayfasına görsel öğeler eklemek, kullanıcı deneyimini iyileştirmek ve içeriğinizi daha ilgi çekici hale getirmek için hayati önem taşır. Resimler, ürünlerinizi sergilemekten karmaşık kavramları açıklamak için kullanılabilir. Bu kılavuzda, HTML kullanarak bir klasörden resimleri web sayfanıza nasıl ekleyeceğinizi adım adım anlatacağız.
Adım 1: Resim Dosyasını Hazırlayın
Eklemek istediğiniz resmin bilgisayarınızda olduğundan emin olun. Resim dosyası herhangi bir yaygın görüntü formatında olabilir, örneğin:
- JPEG (.jpg)
- PNG (.png)
- GIF (.gif)
- SVG (.svg)
Adım 2: HTML Belgenizi Oluşturun
Bir metin düzenleyici veya kod editörü kullanarak yeni bir HTML belgesi oluşturun. HTML belgesi, web sayfanızın yapı taşlarını tanımlayan bir metin dosyasıdır.
Adım 3: <img> Etiketini Kullanın
Resmi web sayfanıza eklemek için <img> etiketini kullanın. <img> etiketi, bir görüntü dosyasına bir bağlantı içerir ve tarayıcılara görüntüyü görüntülemesini söyler.
<img> etiketinin genel sözdizimi şöyledir:
html
<img src="resim_yolu" alt="resim_açıklaması">
- src: Resim dosyasının yolunu belirtir.
- alt: Resmin alternatif bir açıklamasını sağlar. Bu, resim görüntülenemiyorsa veya ekran okuyucular tarafından okunuyorsa kullanılır.
Adım 4: Resim Yolunu Belirleyin
src özniteliği, resim dosyasının web sayfanıza göre yolunu içermelidir. Yol, aşağıdaki biçimlerde olabilir:
- Mutlak Yol: Resmin tam web adresini içerir, örneğin:
html
<img src="https://www.ornek.com/resimler/resim.jpg">
- Göreceli Yol: Resmin HTML belgesine göre yolunu içerir, örneğin:
html
<img src="resimler/resim.jpg">
Adım 5: Alternatif Metin Sağlayın
alt özniteliği, resim görüntülenemiyorsa veya ekran okuyucular tarafından okunuyorsa görüntülenen alternatif bir metin sağlar. Alternatif metin, resmin içeriğini açıklamalı ve ekran okuyucuların kullanıcıya ne hakkında olduğunu söylemesine yardımcı olmalıdır.
Adım 6: HTML Belgenizi Kaydedin
HTML belgenizi kaydedin ve bir web tarayıcısında açın. Resmin web sayfanızda görüntülendiğini görmelisiniz.
Faydalı Siteler ve Dosyalar
Sonuç
HTML kullanarak bir klasörden resimleri web sayfanıza eklemek basit bir işlemdir. <img> etiketini kullanarak, resim dosyasının yolunu belirleyerek ve alternatif metin sağlayarak, kullanıcılarınız için görsel olarak çekici ve erişilebilir web sayfaları oluşturabilirsiniz.