Yakuza

Yakuza

WFN Üye
Konular
600
Mesajlar
600
Çözüm
0
Ticaret Puanı
0
Üyelik
25 Gün
Konum
Artvin
Web Sitesi
Var
Alanı
SEO Danışmanı
1/1
Konu sahibi
HTML sayfasına resim eklemek için <img> etiketinin src özelliğine resim dosyasının yolunu yazın. Boyut için width ve height özelliklerini kullanabilir; resmin dar ekranlara da uyum sağlamasını CSS ile ayarlayabilirsiniz.

Resmi sayfaya ekleyin​

Örneğin HTML dosyanızın adı index.html, göstermek istediğiniz dosyanın adı manzara.jpg olsun. İki dosyayı aynı klasöre koyun ve aşağıdaki örneği index.html dosyasına kaydedin:

HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Resim örneği</title>
  <style>
    .resim {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <img class="resim" src="manzara.jpg" alt="Dağ ve göl manzarası" width="800" height="600">
</body>
</html>

Dosyayı tarayıcıda açtığınızda resim görünür. Bu örnekteki src dosyanın konumunu, alt ise resim görüntülenemediğinde veya ekran okuyucu kullanıldığında sunulacak alternatif açıklamayı belirtir. Açıklamayı kendi resminizin içeriğine göre değiştirin; yalnızca süsleme amaçlı bir resim için alt="" kullanabilirsiniz.

Resim index.html ile aynı klasörde değilse yolu buna göre değiştirin. Örneğin dosya HTML dosyasının yanındaki resimler klasöründeyse src="resimler/manzara.jpg" yazın. Yolu HTML dosyasının konumuna göre verin ve dosya adıyla uzantısının doğru olduğundan emin olun.

Görünür boyutu ayarlayın​

Örnekteki width="800" ve height="600" değerleri resmin genişlik ve yüksekliğini piksel cinsinden belirtir. Bunları kendi resminizin gerçek boyutlarıyla değiştirmeniz, tarayıcının resim yüklenmeden önce uygun en-boy oranında yer ayırmasına yardımcı olur.

CSS içindeki max-width: 100%, resmin bulunduğu alanın genişliğini aşmasını önler; height: auto ise genişlik değiştiğinde oranı korur. Böylece resim, yeterli alan varsa belirtilen genişlikte, alan daha darsa orantılı biçimde daha küçük görünür.

Resmi örneğin en fazla 400 piksel genişliğinde göstermek isterseniz CSS kuralına width: 400px; ekleyin. max-width: 100%; ve height: auto; kuralları yerinde kalırsa resim dar alana sığarken oranını korur. Hem genişliği hem yüksekliği CSS ile farklı oranlarda sabitlemek ise resmi deforme edebilir.

Görünür boyutu değiştirmek dosyanın kendisini küçültmez. İndirme boyutunu azaltmak gerekiyorsa resim dosyasını ayrıca uygun boyutta hazırlayıp yeniden kaydedin ve gerekirse src yolunu güncelleyin.

Resim görünmüyorsa​

HTML dosyasını kaydedip tarayıcıdaki sayfayı yenileyin. Resim hâlâ görünmüyorsa src içindeki yolun, dosya adının ve uzantının gerçek dosyayla eşleştiğini kontrol edin; özellikle büyük ve küçük harf farklarını düzeltin. Resim alt klasördeyse klasör adını da yola ekleyin.

Resim bilgisayarınızda görünüyor ama yayımlanan sayfada görünmüyorsa resim dosyasının da sunucuda HTML yolunun işaret ettiği konuma yüklenmiş olduğunu doğrulayın. Yolu veya dosya konumunu düzelttikten sonra sayfayı yeniden yükleyerek sonucu kontrol edin.
 
Moderatör tarafında düzenlendi:

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)