HTML'de Resim Nasıl Eklenir?

Web sitene veya sosyal ağ profiline resim eklemek, sayfana çeki düzen vermek için harika bir yoldur. HTML’de resim eklemek için kullanılan kod oldukça basittir ve HTML öğrenmeye yeni başlayanların aldığı ilk derslerden birisidir.

Makalenin 1.Kısmı: Resmi Eklemek

  1. 1
    Resmini yükle. Resim barındırmak için Picasa Web Albums, Flickr veya Photobucket gibi birçok hizmet vardır. Bu hizmetlerin şartlarını dikkatlice oku. Bazı hizmetler resminin kalitesini düşürebilir veya resmin çok fazla kişi tarafından görüntülendiyse resmini silebilir (çünkü bu, barındırma hizmetinin bant genişliğini kullanır).
    • Bazı blog barındırma hizmetleri, blog yönetici araçlarını kullanarak resim yüklemene izin verir.
    • Ücretli bir web barındırma hizmetin varsa, resmini FTP servisini kullanarak kendi sitene yükle. “Resimler” adında bir klasör oluşturmak, dosyalarını düzenli tutmanı sağlar.[1]
    • Eğer başka bir sitede bulunan bir resmi kullanmak istersen, resmin sahibinden izin iste. Eğer izin verirse resmi indir ve bir resim barındırma sitesine yükle.
  2. 2
    HTML dosyanı aç. Resminin görüntülenmesini istediğin web sayfası için HTML dokümanını aç.
    • Eğer bir foruma resim eklemek istiyorsan, direkt olarak gönderinin içerisine yazabilirsin. Birçok forum, HTML yerine özel bir sistem kullanır. Eğer bu işe yaramazsa diğer forum üyelerinden yardım iste.
  3. 3
    img etiketiyle başla. HTML dosyasında resim eklemek istediğin yeri bul. Buraya <img> yaz. Bu boş bir etikettir; yani kapanış etiketi yoktur ve bağımsızdır. Resmini görüntülemek için ihtiyacın olan her şey, bu iki açılı parantezin içine yazılır.
    • <img>
  4. 4
    Resminin URL’sini bul. Resminin barındırıldığı web sayfasını aç. Resme sağ tıkla (Mac’te kontrol tuşuna basılı tutarak tıkla) ve “Resim Konumunu Kopyala”yı seç. Bunun dışında, “Resmi Görüntüle”ye tıklayarak resmi ayrı bir sayfada görüntüleyebilir ve sonrasında adres çubuğundaki URL’yi kopyalayabilirsin.
    • Eğer resmi kendi web sitendeki bir resimler klasörüne yüklediysen, buraya /images/dosyaadı yazarak bağlan. Bu işe yaramazsa resimler klasörü muhtemelen başka bir klasörün içindedir. Klasörü ana klasöre taşı.
  5. 5
    URL’yi src özelliğine yerleştir. Muhtemelen bildiğin gibi, HTML özellikleri, etiketi düzenleyebilmeleri için etiketin içine yerleştirilir. src özelliği, “kaynak” sözcüğünün İngilizce kısaltmasıdır ve tarayıcıya resmi nerede bulacağını söyler. src=” ” yaz ve resmin URL’sini tırnak işaretlerinin arasına yapıştır. Örneğin:
    • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
  6. 6
    Bir “alt” özelliği ekle. Teknik olarak, HTML sayfan resmi görüntülemek için her şeye sahip; ama alt özelliğini de eklemek en iyisidir. Bu, tarayıcıya resmin yüklenmesi başarısız olduğunda hangi yazıyı göstereceğini söyler. Daha da önemlisi bu, arama motorlarına resminin ne hakkında olduğunu anlamasında yardımcı olur ve ekran okuyucuların da, görme engelli ziyaretçiler için resmi tanımlamasını sağlar.[2] Tırnak işaretleri arasındaki yazıyı değiştirerek bu örneği uygula:
    • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="köpeğim mandalina yiyor">
    • Eğer resim sayfa içeriği için önemli değilse, alt özelliğini yazısız olarak ekle (alt="").[3]
  7. 7
    Yaptığın değişiklikleri kaydet. HTML dosyasını web sitene kaydet. Düzenlediğin sayfayı aç veya zaten açıksa sayfayı yenile. Resmini artık görüyor olmalısın. Eğer resmin boyutu hatalıysa veya başka bir sebepten ötürü resminden memnun kalmadıysan, bir sonraki bölüme geç.
    Reklam

Makalenin 2.Kısmı: İsteğe Bağlı Düzenlemeler

  1. 1
    Resmin boyutunu değiştir. En iyi sonuçları alabilmek için, resmi ücretsiz bir düzenleme yazılımı ile yeniden boyutlandır, daha sonra da resmin yeni versiyonunu yükle. HTML kullanarak genişlik ve yükseklik ayarı yapmak, tarayıcıya resmi küçültmesini veya büyütmesini söyler ki bu; tarayıcılar arasında tutarsız olabilir ve nadiren de görüntüleme hatalarına neden olabilir.[4] Hızlı ve işe yarar bir ayarlama istiyorsan, bu formatı kullan:
    • <img src="http://example.com/example.png" alt="bunu görüntüle" width=200 height=200> (Piksel sayıları veya daha mobil dostu olacak şekilde HTML5’teki “CSS pikselleri”.)[5][6]
    • veya <img src="http://example.com/example.png" width=100% height=10%> (Web sayfası ölçülerinin yüzdesi veya resmi içeren HTML öğesinin yüzdesi.)
    • Eğer tek bir özellik girersen (genişlik veya yükseklik), tarayıcı genişlik-yükseklik oranını korur.
  2. 2
    Bir ipucu ekle. title özelliği, resim hakkında fazladan yorum veya bilgi eklemek için kullanılabilir. Örneğin burada sanatçıyı belirtebilirsin. Çoğu zaman bu yazı, ziyaretçi fare imlecini resmin üzerine getirdiğinde görünür.
    • <img src="http://example.com/example.png" title="Fotoğraf: J. Godfrey">
  3. 3
    Resmi bağlantıya dönüştür. Aynı zamanda bir bağlantı olan bir resim oluşturmak için, resmin etiketini <a></a> köprü etiketinin içine yerleştir. Örneğin:
    • <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
    Reklam

İpuçları

  • Resmin bir kopyasını, ne olur ne olmaz diye bilgisayarında tut.
  • GIF resimleri logolar veya karikatürler için iyi bir seçenek olurken; JPEG resimleri ise fotoğraflar gibi karmaşık görüntüler için idealdir.
  • URL’de resmin dosya formatının yer aldığından emin ol (.jpg, .gif, etc).
  • Çoğu durumda, .gif, .jpeg, .jpg, or .png gibi dosya formatlarını kullanmayı tercih edeceksin.[7] Diğer formatlar tüm tarayıcılarda doğru bir şekilde görüntülenmeyebilir.
Reklam

Uyarılar

  • Başka bir kişinin web sitesinin URL’sini ekleyerek “hotlink” yapma. Bu, o kişinin sitesinin bant genişliğini, siteye herhangi bir ziyaretçi çekmeden tüketecektir. Yanlış bir davranış olmasının yanı sıra, bu şekilde eklenmiş bir resim bağlantı yapılan site kapandığında görüntülenemeyecektir. Eğer web sunucusu ne yaptığını görürse, senin sitende görünen resmi bile değiştirebilir.[8]
Reklam

Bununla İlgili wikiHow'lar

Bu wikiHow makalesi hakkında

wikiHow bir “wiki”dir. Bu, makalelerimizin çoğunun birden fazla yazar tarafından ortaklaşa yazıldığı anlamına gelir. Bu makaleyi oluşturmak için, zaman içinde makaleyi düzenlemek ve iyileştirmek üzere bazıları isimsiz, 36 kişi çalıştı.

Bu makale işine yaradı mı?

Evet
Hayır
Reklam