HTML'de Resim Nasıl Eklenir?

Bu Makalede:Resmi Eklemekİsteğe Bağlı Düzenlemeler8 Referans

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.

Kısım 1
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ç.

Kısım 2
İ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>

İ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.

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]

Makale Bilgisi

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ı.

Kategoriler: Bilgisayar ve Elektronik Cihazlar

Diğer dillerde:

English: Insert Images with HTML, Italiano: Inserire Immagini in HTML, Español: insertar imágenes con HTML, Deutsch: Bilder mit HTML einfügen, Português: Inserir Imagens Usando HTML, Français: insérer des images dans du HTML, Русский: вставить изображение в HTML, 中文: 在HTML中插入图片, Nederlands: Een afbeelding toevoegen met HTML, Bahasa Indonesia: Memasukkan Gambar dengan HTML, ไทย: ใส่รูปด้วย HTML, العربية: إدراج الصور باستخدام لغة اتش تي ام ال, 日本語: HTMLで画像を貼り付ける, 한국어: HTML로 이미지 삽입하는 법, Tiếng Việt: Chèn ảnh bằng HTML, हिन्दी: HTML में इमेजेस शामिल करें (Insert Images with HTML)

Bu sayfaya 1.322 defa erişilmiş.
Bu makale işine yaradı mı?